Flutter Tutorial for Beginners #33 -Ternary Operators

rather than gang so far we show of the time and the place on this home screen now it would be nice if we could show maybe a background image either night or day depending on what time of day it is now to do that I'm gonna have to show you how to use a ternary operator I mean this is not the only way to do it but I thought this would be a good opportunity to use a ternary operator in dart so what I'm gonna do is go to the world time class over here and I'm gonna create first of all an extra property and this will be a boolean so bool and then we'll call this is day time like that so this is basically gonna be either true or false if it's true then it is going to be daytime if it's false then it's gonna be nighttime so true or false if daytime or not okay so then we'll use that to find out whether we should show either the night image or the day image and maybe even have a background color so it shows at the top as well and we'll see all that in a second so first of all we need to set this to either true or false so we need to evaluate a condition and then if that condition is true then we'll set it to true if that condition is false then we'll set it to false now to do this we can use what's known as eternal operator and a ternary operator is pretty much the same in most programming languages it goes something like this we have a value which is going to be is daytime so we're saying okay well we're going to set this value right here and that is going to be equal to some kind of condition and that condition is going to evaluate to either true or false and then we have a question mark after that and then we have the value we want to return and assign to this variable if this condition evaluates to true and what we'll do is say okay well if that's the case datum is going to be true and then we do a colon and if this evaluates to false we pass back some kind of value that we want to apply to this variable if this is false and in this case it's going to be false as well now these don't have to be billions right here this could be a string and this could be a string doesn't really matter just so happens that we're storing a boolean inside this variable now we need some kind of condition to evaluate what we want to find out is for example is the time now so this date time that we have because we've not converted it into a string yet this date time that we currently have is that say between the hours of 6:00 in the morning and 8:00 at night so if that was the case then it would be daytime so what we could say is now dots hour and that gets us the hour and that can be anything from 0 to 23 so is that greater than 6 so greater than 6 a.m. and so we're evaluating two conditions at once here they both have to be true for this to pass now dots hour is less than 20 which is 8 o'clock so if the hour is greater than 6 and the hour is less than 20 that means that the time right now is between 6 a.m. and 8 p.m. so that in my eyes would equate to being daytime so if this is true if the hour is somewhere between there then is daytime is going to be assigned at this value of true it is data if it's not it means that it's either before 6 a.m. or after 8 p.m. and in that case it means that it's nighttime so therefore we're going to return false because this will be false now and then false will be applied to this variable ok I hope that makes sense so now what I'd like to do is actually pass this value into the home page because we need to use it right here because currently we won't get it because we're not passing it to this page from the loading widget we only pass these things at the minute so let's now pass that forth property and that is called is daytime and we set it equal to instance that is daytime okay so now we're passing that through let's save this and let's go to the home and let's just try this because we're printing the data let's see if we get that through so I'm going to run this go to hot restart like so we should see the loading screen momentarily and then we see at the time and now we can see is daytime is true so now we have this variable true inside this widget we can use that to decide whether to show and now image or daytime image now you can find those images that we're going to use on my github repo for this tutorial series just make sure you're on the lesson 33 branch then go into the assets folder and you're gonna see day and night so you can download those right here okay so they look something like this they're quite huge not sure why I made these so big to be honest but you can downsize them if you haven't what you probably should do but anyway I've already downloaded these images right here and they're inside this world time folder so what I'm gonna do is just grab both of those the night and the day and I'm gonna move them over into this thing this project over here so let's now create an images folder inside world time so go to new and then go to directory and we'll call this assets and then inside there we want to put these two things so press ok and now we should see those okay night and day are in there so now we have those inside assets we need to tell our flutter app where to find those so we need to open up the pub spec file to do that let's scroll down to where we're using the assets right here so uncomment that and zoom this assets word back one space then we just need to specify the images or rather the assets folder and because we're going to be using multiple images directly inside this folder I don't need to specify every individual file I can just use that and then we can use any file directly inside that folder so let's save this and head back over to home click get dependencies as well and now we can start to use these images so what we need to do now is perform some kind of check to see lock is from the data that we get here is it daytime or is it nighttime so again I'm going to use another billion to decide what the background image is going to be so under here I'm going to do a little comment to say set background and then I'm going to create a new string and we'll call that BG image and set it equal to data that we receive through this thing right here and then we want inside that the ease dates is daytime property so that is going to be a billion at a truffles so we're going to evaluate that inside a ternary operator so question mark then if it's true we return one value which is going to be day dot PNG because if this is true it means it's daytime therefore inside this variable we're gonna store this value dot PNG which is what this is called dmg then colon and if it's false we're going to give the value night PNG to this variable instead so now dependent on this thing right here if this is true or false what either going to get day or night PNG stored inside this variable so now we can use this to output an image and down here somewhere so this is actually going to be a background image and it's an output this we're going to use a combination of a container and a decoration image inside a box decoration now we've not seen this before and a box decoration which it gives us a way to apply some kind of background image to fit the screen so let me show you how we do this it's going to surround everything inside this padding so I'm going to go to this padding and then say wrap with new widget and first of all it's going to be a container it must be in a container first of all now inside this container we're going to have a decoration property and this decoration property it will be a box decoration now if you do get confused with this you can't just check out the docks because it shows you what all of these widgets are for I mean I don't have enough time in this video series to go through every single widget and every single property and explain every little bit but you can read more about them on the documentation it is really well documented and shows all the different properties that can be applied to every single widget but this box decoration widget right here can go inside a container and then we can use an image property inside down now we're not just going to use an asset image directly here what we're going to do is use what's known as a decoration image and this is basically going to allow us to apply a background image to the whole thing around here so this widget is going to taking two properties it's an image first of all which this time is going to be an asset image and inside there we need to pass through the path to the image we want to use so I'll say assets and we'll hard-code this for now I'll just say night PNG and then below that we want to say fit and then this is going to be box fit dot cover so what that means is that it's going to cover the entire screen that's what this fits property determines how it should fit inside the container and this cover means it's going to cover the entire container all over the screen so it should be the full background image so I'm going to save this right now and see if this works and we can see now that we get this background image okay so that's pretty cool and what I'd like to do now is instead of hard-coding in fact let's see the day one first of all so today and save that and now we see this image as well okay so they look okay but what I would like to do is instead of hard-coding these output whatever value is inside BG image because that's going to be either day or night dot PNG so let's do this I'm going to say dollar and then BG image like so now if I save it because it's 3:05 p.m. and we said that if it's between 6 a.m. and 8 p.m. then it should be day this is obviously true and therefore we're getting de PNG back and that's what we're outputting right here so that's why we see the day image but if we were to just tweak this and say for example ok well if this is after 15 which is 3 p.m. then it's night save this now we should see the night image over here now but I do have to do a hot restart because we're changing the data so I'll do that and now we see a night image obviously it makes no sense to be 3pf so let's change this back to 8 which is 20 and then hot restart again and that is I think gonna look a lot better ok so we get the daytime image now so one more thing or rather two more things I want to do you see at this top strip over here this is still great and I'd like it to be a blue now I'd like it to be a light blue color if it's daytime and I'd like it to be a dark blue color if it's nighttime and the reason we get this by the way is just because this image is not covering under this a very top strip if we apply a background color to this scaffold it will be visible under this strip so what I'm going to do is do another ternary operator now to find out what background color we could use now the type of this data is going to be a color so we'll say color and we've seen this before when we've used a color down here in the widget tree so it's going to be a background color and we'll say that is going to be equal to data and we still want to evaluate the same variable is daytime and then if that is true then we want it to be a light blue so let's return colors and then dots blue and we'll just leave it as the default blue which is this kind of bright blue right there and then if it's nighttime we'll return instead colors and it will be this time indigo and strength 700 to darken it a little bit so this indigo color it's like a dark blue if you like and that's going to match up with the night image this blue is going to match up with this image so let's apply this background color to the scaffold will say background color and that is going to be colors or rather not colors we just want to use this variable right here so let's pass that in and save it and now we should see that blue color right here if it was night so let's change this again to 15 so 3 o'clock and then run this again we should see the darker color which we do and that goes with this image a bit more okay one more thing I want to do and that is change the colors of all these things over here because at the minute they don't stand out very well against this background first of all let me change this back to 20 and save it then hard or rather hot restart and then let's go back to our home page and this time what we're going to do is come down to first of all the icon over here so we can call it the icon so that looks like a light gray or something like that so let's cut that and go down to the next line and paste it in and the second property inside this icon is going to be the color property and that is going to be colors doc gray and then a light gray so just strength 300 save that and we should see a light icon cool now for the text we need to cut this as well inside the text widget go down and let's now below that add on a color property as well and that will be colors gray and again this will be 300 like so okay my mistake we can't add a color property directly onto the text school by Hera so I'm going to cut that and do a style property first of all and this will be a text style and inside this textile is then when we can add a color so if I save this now should be working fine cool so now we just need to color these two things so let's scroll down and this time we're going to color these white not gray so they stand out a bit more so first of all this one let's say color is going to be colors dots white and if we can spell it and then the same for down here color is going to be colors dots white awesome save that and that is looking a lot better so now everything is looking pretty good the next logical step is to create the location screen which is this thing right here so that we can choose different locations and when we choose one of them eventually we're going to show that location on the home screen so we're going to update this right here so we're going to start to flush out the template of this screen in the next video

Channel: The Net Ninja

Views: 75,179

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter for beginners, tutorial, dart, dart tutorial, dart and flutter, dart flutter, dart tutorial for beginners, flutter vs react native

Id: NDulhXVcLuI

Length: 14min 53sec (893 seconds)

Published: Tue Sep 24 2019