Weather App • FLUTTER - BLOC & API Tutorial for Beginners 🔥

all right guys welcome back for this new video where we are coding our weather app using flutter block and the weather API so before we start I would like you to subscribe to this channel if you like the content I'm putting out drop a like down below and tell me in the comments the next build that you want me to focus on either more block detailed more flutter UI detail or anything else please really it means a lot to me if you would be able to just subscribe it's free and it really boosts me up so what do we want to do today so you have on the screen kind of the UI that we want to go for for this weather app so very simple very straightforward you have the localization at the top left corner a little good morning as well as a text an icon that will like show what type of weather is currently at your localization so we want to get the localization of your phone uh then you have some sort of label for what type of weather is the date and the time as well as under that some little information about the sunrise the sunset the max temperature and the minimum temperature so to do that we want to use block to organize kind of everything and as I told you the weather API so let me just show you what we're working with and side note I only coded the UI like this I didn't went through the entire process of coding the app before recording this video so I have my coffee on the left and I'm going to be coding along with you guys and I have no worries that we'll be able to pull this off uh I don't know how long it's going to take but I think around one hour should be a right a right timing so Buck it up and take out your vs code and and let's get after it so first let me show you uh the packages that we'll be using perhaps I'm missing some uh it's first first hand what will for sure need perhaps we'll need to come back to this later so the geolocator package that's a package that going to be able for us to get the localization of your phone pretty straightforward I'll show you how it works really simple then you have the weather package which is a very cool package because we could use the HTTP package to make API calls and perhaps I'll do another build video where we are using this and I show you how you could do API requests without having a package in pub.dev because unfortunately you don't have a package for each API that you want to use in the entire web but for the weather API we have one so let's use it so this weather package and as you can see if we go a little bit down we'll go through that but you'll need an API key and I'll show you how to do that it's completely free so don't worry and I want to focus on if you scroll down a little bit on the example of output that you might get that you will get we will get after a getting a call for a weather so you have a place name so it's exactly what we want the date good the weather so the type of weather if it's cloudy if it's clear and some sort of sub weather detail the temperature as well as the mean temperature and the max temperature okay and what the temperature feels like as well in Celsius the sunrise time and the sunset time and you have as well a weather condition code and this is going to be very useful for us in order to display the right icon right here so let me just jump into the weather API website so you just need to navigate to openweathermap.org API and if you read the first two lines you'd see that you can just sign up there and create an API key for free you'll have some limited access to the API but that's more than enough for what we need to do today so I am invite you to go ahead and do just that I've already have mine set up but you should go ahead and create an account there and get your API key we'll need it later in the in the code but I want to focus your attention here on the documentation of the API I was talking to you about weather codes right remember in the response that we're getting from this API we have a weather condition code and if we go to the to this page on the open Weather map.com you have those code right here see you have an ID and for thunderstorm it's between 200 and 232 it's going to be some sort of thunderstorm and then you have description of it but we don't really care about that if you want to build a more detailed app you could definitely deal with all of those different codes but for us it's very cool because then we we will be able to say like if the code is between 200 and 232 display the thunderstorm icon if the code is between 300 and 321 well it's drizzle so let's display a light rainy icon same for the rain same for the snow so you have some stuff here for the atmosphere but perhaps you know we just have one icon for dealing with all of that let's make it simple and and same for all of those weather types so yeah so we'll come back to that don't worry but just so you have it in the back of your head this is how we're gonna deal with changing the icon depending on the weather tab so then another package will need it's this package well it's very useful for us in order to uh date format the the date time that we'll get from the weather API so I don't want to display those kind of sunrises time or sunset time I want to display something that is a little bit more user friendly as you can see on the design I just want the time because we know the day and as well here for the date I want to display something a little special so that the package that we are going to use so the initial package and then of course flutter block and a quotable that goes to pair you know those packages we've already dealt with them in the in the channel so yeah so now let's go ahead and jump onto the code I guess so I have my vs code running right here as well as my iOS simulator on the left side sorry took a little sip of coffee I told you wearing this together this morning so first of all I think we want to start by importing all the package that we want to use so as I told you we want the geological geolocator package so I'm gonna go ahead and copy that one and under dependencies at the geolocator I'm as well gonna add the weather and for those packages we'll need to do some some like initialization per se in order for them to work uh with our emulator and with your phone in general I'm just copying all the packages I've went through and just pasted them so I'm just gonna save the file it's gonna run a flutter pop get but if I want to be able to use the geolocator package I have some more initialization to do if I navigate to the geolocator package you see here if you scroll a bit down you have some some different type of um of of stuff that you need to add to different files in order for it to work so I'm just going to copy that and I'm going I'm doing it for iOS perhaps if you're doing it on Android you just open the Android folder and it's really straightforward you just follow that and that will be done for you and you will be able to use it so I'm on iOS so I'm going to navigate to the iOS folder Runner and info dot please and here it doesn't really matter where I want to put it but I'm going to put it here at the end sorry so it's just pasting what they gave me in order for us to access the localization of the phone so I'm gonna rebuild the app but actually I'm gonna close the app and rerun it because um it's uh sometimes when you have so deep changes inside your app and like asking for permission of the localization for instance is a big one you need to rebuild it in order for it to work so don't break your head trying to understand why it's giving you some exception and stuff like this sometimes just terminate your app and just rebuild it and you might be just fine so that's it for uh for the um for the setup I guess uh let's go ahead but we can add more but that's okay we don't need more uh we'll see later on if it's uh if it's working but uh perhaps we'll need to come back to that but for now I think we're pretty good so we have here our main dot Dart file and you know how much I love app structure and for this particular build I'm not gonna go on to a so crazy app structure I'm Gonna Keep it really simple and I'm I'm planning actually to make an entire video perhaps a theory on how you should structure your app in order for it to be as clear and as clean code as possible so tell me in the comments if it's something that you'd like to see so under the leap folder I'm just going to create a new folder I'm gonna call that screens and I'm going to create a new file I'm going to call it home screen dot Dart okay and this is gonna be uh for now stateless widget home screen and we want to return just for now a scaffold okay and inside our main dot I'm going to save it inside our main.dart file here in our material app under the home parameter instead of having the scaffold I want to return the home screen okay I'm Gonna Save that perfect I want as well in the material app access the parameter debug show checked mode banner and set it to false and this is going to make this disappear right there okay so under our home screen so you understand a little bit how this is gonna work I'm gonna build the entire UI okay so I'm gonna build all the different screens we have only one screen but I'm going to build basically this screen right here okay and we are going to have another folder that's gonna call data okay data for making the call to the API and we are going to have another folder that's going to be the block folder in order to deal with that so let's create those folders so under the lib here I want to create a new folder I'm going to call it data and under data I'm going to create a new file data Dot Dart and perhaps I'm going to call it my data.tart because I don't want to have any conflict with some packages okay we'll deal with this file later on and I want to create under the leap folder a new block so remember I'm right clicking and accessing the block new block right here it's because I have the block extension okay so if you navigate to extension here you search for block and you will find this extension you need to install this extension and it really it's going to really like save you a lot of time so I invite you to do just that because here I right click block new block and I'm going to call it uh weather block save that and it's creating a block folder and under that I have my weather block block weather block event and weather block State okay so perhaps we want to start with the block I know you want to see some changes in the UI but it will come and I have the UI already like coded because I knew what I wanted to do so perhaps we can maybe make a little bit more of this home screen at first so let's go ahead and say that the background color of our home screen is gonna be black so we have exactly that then we want an up bar okay we're gonna take this app bar and we're gonna say that the background color is going to be transparent okay bear with me here it's very interesting because you see the only goal and the only reason I'm adding an up bar right here is to access the system overlay style because you see we've lost our um like stages bar at the top of our phone we didn't lost it it's just that it's black if I put it for instance not transparent but white you see it's black all the letters are black and we want them to be white because we have a black background so how you do that you just access the system overlay style and here you want to say system UI overlay style right there okay it's gonna import flutter services and here you want to stay stay uh say that the status bar brightness is going to be equal to brightness the dark okay and you can make that a constant if you do that see now it's white so that's perfect and you can make it actually Dynamic okay later on if you want it to be like responding on event like either your phone is in dark mode or in light mode you can make it responsive but for now we're just going to keep it like this and we want to say as well as a scaffold parameter that our body is extend behind the uh have bar okay so just set that parameter to True right so now we have our body parameter so our body parameter remember I've went through the scaffold widget in our widget of the D series so the body is just going to cover the entire screen so what I want to do is First add some padding to our screen okay so that's going to come very handy because we don't want it to be so close to everything and what type of padding that I want I'm just going to take what I've created already and it's going to be this padding okay edging set from a left top right bottom that's what it means okay and on the left I want 40 on the top I'm accessing this cat toolbar height it's a constant provided by flutter very cool and 40 on the right and 20 at the bottom okay so now it's just for now it's really straightforward I want them to access the child parameter of our padding and this is going to be a sized box okay so the height of our size box is going to be mediaquery dot off context dot size dot height that's pretty straightforward I want our body to be the entire height of our screen okay next I want to access the child parameter and this is where it's gonna get a little bit tricky if you're not used to like playing around with different kind of like UI elements because here if I bring this preview right here you see that I want to have this like orange kind of of of of effect in the background and then this purple kind of effect under it okay so we are going to create just that and that makes it for very beautiful apps okay so here I want to Stack widget because stuff are going to be stacked on top of each other and a stack widget as a children parameter and here I want to say that I'm going to have a container but first I want to align this container and Alignment here you can make it so you can access the alignment Dot and say where you want your container to be aligned you have some like pre-defined stuff but here I want to be specific okay so I'm going to use not alignment geometry but alignment directional okay and here for this one I'm gonna just say 0 and 3 sorry and minus 0.3 and you'll see why in just in just a moment and then I'm accessing the child parameter and doing our container itself so our container here is going to have a height of 300 and a width of 300 as well and then I want to access the decoration parameter which is a box decoration okay and here I want to say that the shape of our container is going to be a circle and that the color of our container is going to be colors dot Deep Purple and if I save that you see that we have a container right here that's kind of kind of doing what we want we have a deep purple and it's aligned on the right parameter you see because this is the um start and this is the Y okay so it's exactly it's exactly what we are expecting right here and if you look at the design it's clearly blurry so you want it to be blurry as well and you want it to be the same as well on the other side so the blur thing we're gonna deal with in just a second but I'm not gonna retype everything but you've seen the you've seen the the logic and that next I want to have this um uh container basically the same one but if I save it it's just gonna be mirrored on the other side so that's pretty much it and then lastly I want to have another container okay and this container is going to be up under that and it's gonna be at the very top right here so you see that that's pretty much the layout that we are going for right here but if we let it like this well we're gonna have a pretty boring and and not very beautiful app I give it that to you but then you want to access the backdrop filter sorry good back drop filter widget and this is where it gets interesting look at this you can add filters to your app and this this comes very handy if you want for instance to have well the blur effect that we're gonna that we're gonna um that we're gonna do so you want to access the image filter dot blur and here you can say Sigma X and for instance I'm gonna say 100 and sigma y I'm gonna say 100 as well okay and if I save that nothing's happening well wait for it then you want to access the child parameter of the spectrum filter do a container in this container is going to have a decoration which is a box decoration and a color colors dot transparent and if I save that magic we have our backdrop filter and it's exactly the shades that we want for our app and like if you ask me I think it looks pretty cool like you can have some huge and amazing effects using only this kind of stuff and I think it's it's it's really nice to to have that as a as a tool in your two in your toolbox to build really beautiful apps and because on top of that you know you can make some like um freezed glass effect container that looks super cool on apps uh and yeah I mean that's really the starting point so perhaps we want to now after our backdrop filter um uh well let's create the entire UI and then we'll fit the UI with a block Builder that's really much more like what we want to do later on so let's do the entire UI so now we have a size box we're gonna say that the width of our sex box is equal to the width of our screen by accessing the media query and saying that the height is equal to the height of our screen as well okay so that's done and then you want to add the colon to our size box Colin that has a children parameter and uh the children parameters are gonna be well remember we have our uh first the localization of of your um of your phone so that's what we want to do right here example of us right here my city in France um we want to access the cross parameter of our uh column right here to say that the cross parameter is equal to start so we have that aligned on the left uh then we can add some sized box to to it under that so everything is a bit space as we want and we continue by well having the good morning under that which is a text widget as well okay so save that and we have our good morning right here good then we want our if you look at the design our image right here okay so before we actually can access our image we need to create a new folder and we're going to call it assets okay and under this folder we're gonna have all of our images okay so let me just grab the images that I have I'm going to copy them and I'm going to paste them all right here and see that's the thunderstorm that's the light brain the heavy rain snow that's probably some sort of Blizzard or something Sun some clouds Cloud winds Sun night Max temperature and mean temperature so we have all of these different assets right here but for you to be able to use those assets you actually need to modify your perspected ammo file so under this use material design you can add assets and under that just give it the pass of where your assets are and for me they are under assets save this file and that's gonna be pretty much it for us so uh he doesn't know assets assets yeah no that's good don't forget the space otherwise he's not going to be happy so let's close this perspect that yaml find now and see if we can have access to our image so for our image I'm not gonna lie it's gonna be very simple image assets and this is not happy because I've made that constant so let me just change that image.asset and just this accessing our asset you see pretty cool we have if we say the second one the third one see we can just Loop through all of our different icons super nicely so that's pretty cool then under that we want the temperature current temperature so same text widget I'm not coding them with you guys because it's pretty boring you know how to code the text widget but you have them right here if you want to keep the same UI kind of stuff if you want to change it you can change it it's uh it's really just because it works for me that's it so under this um this temperature we want the actual type of weather that we have so thunderstorm and remember all of those fields they're going to be actually dynamic because we are going to access our weather API so now there are coded but later on in the video you'll see them they're gonna they're gonna be like dynamic then I want to add the date so under this I want to add the little size box and as well the dates of today as well as the time um and the size box under that as well to separate a bit and here it's where it gets a bit tricky because if we look at our UI we have this little part right here so let's build just that so what we want we have a row I'm gonna build this one with you because it's uh it's a bit like row and and columns into each other but that's fine so here we want a main axisalignments.space between okay and that's pretty cool because you can make expanded and all this kind of stuff but if you use space between that's going to save you a lot of time so children for the row obviously and I want to access my image that is my Sunset and my son sorry and before before the image I said sorry I want to do another row and with other children and put my image asset right here if I save that you see I have my little sun right there then I'm gonna add the size box under that okay I mean on the right of it because it's a row okay and then I'm gonna add the column and this column is basically going to be our Sunrise text as well as the actual time of the sunrise so let me just paste that right here okay so we have a column if I save it see with children parameter that says sunrise for a text a little divider size box and the text itself for the time of the sunrise okay and that's pretty that that's all there is to it like you can now just take your entire row right here and like just basically paste it under that if you save it it's exactly what you want right here so you don't want to access the 11th but you want to access the 12th because it's the moon so that's that here instead of Sunrise you want sunset and the time is going to be dynamic so you don't really care but like to make it consistent let's just do that and just like that you have a very beautiful uh thing right here so now under that if we look at our UI we want a little divider and well that's good that we're on flutter because there is just exactly a widget that does just that so uh perhaps I think it's under that I've wrapped our divider it's not under that okay sorry my bad perhaps here exactly so under our big row right here we have our divider that takes a color parameter if you want to otherwise it doesn't take it but if you want you can make it gray white red whatever and I've wrapped it and inside the pad a padding widget to add some uh vertical padding so it's going to be five of padding on the top and five of padding at the bottom and in the same logic like really it's going to be the same logic as we exactly did right here okay we are creating our second field so I'm not going to go ahead and recode it entirely with you I'm just going to take it and paste it and show it to you so under that oh I just paste that and see what we have so same logic a big row okay so that's going to cover our entire row right here under this row I want two rows okay this row right here and this row right here and inside so that's what we have a big row okay then our first row right here with the image and then a column that takes our Max temperature with the temperature itself under it and the same exactly right here with our image first inside our second row and another column with the mean temperature and the minimum temperature uh inside it and that's pretty much it for the UI so now we have our UI created okay so our home screen is done that's what it's going to look like and you might say well okay that's it uh see you see you guys in the next video don't forget to subscribe that was a very nice one but let's push it a little bit and try to actually make Dynamic so let's try to make it with like good data instead of only dummy data as like we we have our coded right here so inside our block and I've created a folder that's called Data but remember I'm coding it with you so I didn't plan everything I'm only plan the UI and now I'm cutting it with you I'm saying to myself it's a very very straightforward um call to the API and um and we are going to do it all on the Block um right here because I think it's really just more convenient but let's create the block so let's first focus on the event sorry took a little sip of coffee so remember how we create an event so it's going to be a class that we are going to call fetch weather yeah sounds about right and it's going to extend weather block event okay do we want any class parameter for this no we don't so we can just save that and that's all there is to it for the event class next we want to create the state so you see right here and all of those stuff they're already populated because I have the block extension right so I really recommend if you are going to use blog which I recommend to download the block extension so all of those stuff are created for you and here I've created three other classes I'm gonna delete Sorry I'm gonna delete those initials because we already have it up and I'm gonna create weather block loading as a statement it's it's state class because they extend weather block State whether loading weather failure and weather success and here we want something inside our weather block success class we're going to make it final okay and it's gonna be weather and here you see how to import the weather package that we've talked about okay so yeah I want to do that I don't have to create these classes because we are actually using this awesome package that's uh the weather package but maybe in another video you tell me yeah but I will create another cool app where we actually create the class and uh and and do all the cool stuff with it and do the the API calls with the HTTP package or the do package perhaps that that could be something cool and while I'm talking to you I'm just creating the the state uh the weather blocks is that success State class that's pretty hard to say but that's all there is to it a weather parameter uh Constructor and just adding uh our weather to the props um to the props together and this is very useful because this state this weather block success state is going to be the one that we're gonna feed to our home screen and in order for our home screen to well display the right information we want to have a weather parameter okay so that's exactly what we are doing right here so now let's focus on the weather block blog perhaps my names are a bit uh too much I could have just called it weather and that could have been just perfect but here I want to not say that but I want to call the event that's called Fetch weather and I want to wrap everything inside the dry catch if there is something that is not right I wanna say weather block failure otherwise I want to say when we start that it's not the failure but that's loading and if everything goes right I want to say not loading this time but success and see here we have kind of a little error yeah because like our weather block success takes a weather parameter and we didn't feed him so yeah of course he's not going to be happy about it but now let's just try to fit the uh the block with uh with the right um with the right data so now using the weather block we want to say whether okay I'm gonna just call that WF is equal to weather Factory and that takes your API key as well as a language okay so perhaps we want to say that the language is going to be English all right but this is exactly where you're gonna put your API key so I will put my API key as well but put your private one and try to keep it to yourself so before we use the geolocator um package perhaps we can try to call it right now so here let me just say API key okay so we want to say now that our weather weather is going to be equal to a weight so if we say a weight we want to make our own function asynchronous is equal to WF Dot and see those are methods that you can have with the package so current weather by city name current weather by location and five-day forecast by city name and five-day forecast by location I didn't include the forecast perhaps if you are allowed to request it I'll make a second part video where we do another screen with the forecast but note that with your API key your um like let's say free API key you won't be able to set to call current weather and five-day forecast in the same time but that's okay because if you call five day forecast it gives you actually today as well and every three hours so that's all right and perhaps we want to say first weather City by location okay so here see it takes a Latitude parameter and a longitude parameter okay so it's exactly where we want to actually like get the latitude and the longitude of the phone right and so how do you do that so let's go on to up our geolocator package okay so here we want to actually see how it works so uh we want to say uh that we want to have the get current position that's that's the one that we want okay so let's try to take that but I don't think we're gonna be able to use it as is I think we're gonna need to request permission okay so uh uh yeah so let's just try that but I think we're gonna have to come back to it for the permissions so perhaps here under that before we do that let's try to call geolocator and get current position and uh it's giving us a position as a future so perhaps we want to get this position okay like this and perhaps then we can say position Dot latitude and position Dot it okay and perhaps give the weather to our weather block success so okay I have my doubts that this is gonna this is gonna work um I'm not sure if it's gonna work as is perhaps it will I hope it will but if it doesn't that's no problem uh we'll definitely come back to it later so I'm going to modify my API key with my real API key and then we're gonna well just feed the UI with what we want I'll be right back all right so as you can see right here under data my data.dart I've created a string API key and I'm hiding it a little bit but you see you paste your API key right here and then onto the weather block I can just call my API key like this you can actually make it so it's really hidden by using like environment type of architecture we can go through it in another video if you want but now that this weather block is done let's move that out of the way let's try to fit our UI so here on our main.dart file home screen we're going to wrap that with a block provider yes and this block provider is going to be weather block block well that was a dumb name from my side I'm sorry and we're gonna need to import as well flutter block and we're gonna say that this is a weather block parameter and this is because it's constant right here that he's not happy with me and on to our weather block right there I want to add fetch weather event okay so now if you rebuild that I don't know what's going to happen uh perhaps I need to see okay nothing happens good good so far so here on our homescreen.dart we want to have our entire I'm scrolling up scrolling up scrolling up yep site box so it's started here where we have our entire um our entire UI perhaps onto our weather block here yes I can know if that works if I print weather uh why isn't it working weather block at fetch weather fetch weather it's here fetch weather uh I'll be I'll be right back all right guys I figured it out look on the left it's working now I'm gonna show you what I did because we were actually record like only doing that right here and it was not displaying the this pop-up to our um to our client and because you need it actually to be on a higher level okay so right here sorry I'm gonna rebuild the app the app okay so I have right here I'm gonna I'm gonna close the app for now and come back to it later Okay so we have actually here inside our material app wrap or we only had a block Builder like this okay I've wrapped our entire I've wrapped our entire block Builder with the future Builder okay future Builder and the future Builder works like this you take you give him a future and you give him a builder that takes the context as well as a snapshot and here I say if the snapshot has data I want to return the home screen okay if not I want to return a scaffold with a circular progress indicator okay well that's working perfect and what's this actually determine position function well if you navigate to the geolocator they gave it to you this function so you just take it it's right here and it's exactly what I've done but you take it and I and I've done I've pasted it just under that all of this and it's actually returning the current position right there okay so that's pretty much it now that we have this okay we want to actually say to our fetch weather event so weather block event that here we're taking a position as a parameter position let's make it final so it's happy and say constant fetch weather this dot position I hope it's clear what I've done it's just like where you need to request the permission to get the localization of the user higher up in the food chain not inside the block learn something right here um yeah fetch weather we're adding the position and if you navigate to your main.dart here you see you have a little error that's fair because we added the parameter and we need to pass in and now it's going to be snap Dot data as position that's what that's what it gives us right get current position it gave us it gives us a position right here so that's cool and because we say if snap has data we're pretty much safe on that point so if we save that now we need to say in our weather weather block event now weather block block right here see we're just requesting it right here you get current position but we want to get rid of that so let's get rid of that and here inside our get so current weather by location we want to say not just position but event that position and event the position that longitude and if I rebuild everything perhaps we should be able to actually see some changes so now let's go on to the home screen and wrap our entire size box with our block Builder okay wrap the entire thing with a block builder of weather block block yeah I know it's not the best name ever let me just do some cleaning I really need to reinstall vs code because I really destroyed it uh but yeah that's it so I've wrapped our entire size box with this block Builder okay and I'm gonna take the size box don't worry if you're if your vs code is not as destroyed as mine you don't have to do all of this and I'm Gonna Save that okay so perhaps I will use the debug console uh right here see how cool is this we have right here exactly what we want place name examples it's my location so that's fair the date it's today the type of weather cloudy today it is I can tell you that it is the temperature the minimum temperature the max temperature sunrise sunset the wind well you can add more stuff if you want but here we have as well our weather condition code okay so that's pretty cool I'm very happy about this you should be very happy and proud of yourself so before we go more in detail with that I just want to make sure that you understood what happened so let's navigate back to the main.dart file and here what we had was just material app home and we had our block Builder we only had that okay without this parameter to our fetch weather okay we actually need to request the location of the user before going inside our blog okay so I'm because getting the location of the user is a future thing it's asynchronous I'm wrapping a block Builder with the future Builder Okay this future builder takes a future parameter which is basically a future okay and uh here we're fitting him with our determined position function that is under that that is given by the geolocator package it's really just only that okay you can just take it read it and paste it and here inside our Builder that takes a context and an asynchronous snapshot okay of typed position I say if our snapshot has data meaning if the request of getting the location of the user is done we have an answer we can go through our blog provider and asking the fetch weather event okay fitting in with the position of the user which is accessible inside the snapshot that we have dot data and returning the home screen if not it's meaning if we don't have an answer yet or the location we want to display a scaffold with a center circular progress indicator and I've pasted this determine position method just under this okay that's pretty much it that's all there is to it no other stuff okay I hope I was clear tell me in the comments if I was cleared I hope I was so here instead of accessing examples I want to say dynamically state yeah before I do that here under our blog Builder if state is um weather block success up I want to do that so our size box go on to here okay else else return container you can make it you can make it a bit more specific but for now we don't need to be more specific about it so let me just indent that and then we'll go through the code okay so now if weatherblock is Success remember if it's weather blocks success we have access inside our state to our weather and let's try to find area name perhaps it's called area name yeah maybe and it's not constant okay save that okay good example pretty cool so let's make that a constant good morning gonna stay good morning uh this for uh the image right here we're gonna do last because it's a bit tricky we're gonna do a little I'm not sure how I'm Gonna Wanna Do It uh but I'm sure as hell I want to do something a little interesting because remember we'll go through it after it okay we're gonna throw it after so here I want to say uh that uh it's not 21 degrees I don't know how how cold it is but let's let's see weather dot uh perhaps temperature temperature okay it's not happy because it's a constant if I save that it's 20.0 Celsius yeah it's a string temperature perhaps I can get Celsius okay wow that's a lot of zeros it's very precise uh I want to round that up it's a double can I round it that'll be nice to be able to round it if I'm if I'm honest yeah I was not far off with the 21 degrees I must say very proud of myself okay and discovering it as long as we go on so I'm just going with the flow here is not going to be thunderstorm if I open my debit console I can see actually uh so here we want to see clouds right something like this yeah so it's it's would be inside the weather parameter perhaps where are we right here so state the weather dot weather description weather icon weather main weather main perhaps weather Main string why is it not happy constant value yeah of course okay Cloud perfect that's exactly what we want can I say to uppercase I can say to upgrades wow good okay constant I'm not talking much I'm just going through it and you can go through it with me uh we're just filling the UI with the right data so here a little different right we have a date okay but it's the date of today of right now okay so we don't have to access the state parameter perhaps we could okay let's access this one we can access the date time that now it would be the same to be fair but to do that I'm going to keep this um this little uh string Under it but I want to access date format okay and you see here it's from the initial package that we've imported okay so you have some different like already made up kind of uh of of stuff from the date format package but from the initial packet sorry but I want to uh to do my own stuff I'm going to just import the date format okay and I'm gonna say so format and the date so then the date itself is going to be state.weather.date I imagine yeah something like this what is it a date time yeah okay so here here and here okay so what type of format do we want for it so we want so the day let's see that's a bit tricky because if you say the day like this yeah okay so the day uh okay we want Friday the 16th let me check the documentation on how to write this all right got it figured out so to access the the day with full letters it's 4E to access the day itself to little uh case sensitive d then we do a DOT and we add the method add GM so that's gonna actually do 9 40 am and then dot format and we add the the date of the weather that's pretty much it for that just let you take a quick look at this okay uh then for the sunrise so we don't want to move the icon they're gonna stay the same Sunrise we perhaps want to say uh that yeah we want to access this so on the same date format so we want to say the same the same type of stuff so perhaps we can reuse that right here uh um but because it's constant is going to scream okay okay good stream um so here we don't want to have all of this we want to say perhaps Sunrise yeah Sunrise Dot uh hour okay Sunrise it's a date time isn't it it's a date time perfect so Sunrise uh and can we just say that yes we can perfect so that's what we're gonna do at GM the method that we've used right here we just want to use the same right there uh we won't don't want to move sunset sunset we just want to move that but instead of Sunrise we want Sunset okay it's constant so it's not happy let's move that away okay save that 7 41 pm tonight right fair enough okay so that's done uh then the temperature okay so let's do the temperature scrolling down scrolling down okay here 12 degrees celsius if we access the state that weather that temperature temperature max okay it's a double I guess okay so remove the constant it's good to use constant and it's really more efficient in your app but sometimes you need to move them because this is not constant okay so temperature max that's Celsius and it's going to be the same thing we want to say around yeah something like this and to string perhaps okay so up up let me see what we've got from that 21 we want 21 degrees Celsius so we are gonna actually wrap all that inside a string remove the two string and here we're gonna do our little degree celsius ourselves okay 21 degrees Celsius do you want a little space perhaps a little space okay so that's for the max temperature let's just copy that and do the same for our mean temperature right here but instead of constant is really killing me I am sorry for the constant but instead of temperature max I guess temperature mean 18 degrees okay and just like that I think we're pretty much done except for the icon so if I reload everything yep that's working very nicely so okay let's go up now let's go up up and to our here our image asset okay so remember if I open if I pop a terminal here we have a weather condition code okay and if we go to the um up to the weather API remember what I've told you we have different codes for different types of weather okay so if it's 200 I wanna I wanna print specific type of um of Icon if it's between 300 and 321 I want to display another one okay and same for the rain for the snow for the Mist for the clear clouds okay so one two three four five six seven types okay Okay so here image assets so perhaps we can do here uh we can we can make a big statement like if statement that goes on and on and on and on I'd like more to make kind of a switch statement perhaps um yeah perhaps we can create a function that will take the code and return an image asset depending on that code and we can make a big switch statement right there I think that would be the more readable for you guys uh let's try to perhaps create here let's not make that stateless but let's make it stateful and here let's create a method that will return a widget and let's say get weather icon and that's gonna take an INT I guess a code okay and here we're gonna do a big switch statement switch statement on the code value so if the value so that's the thing if the value so we can do different things right here we can say if the value is between 200 and 232 we return the thunderstorm or we can say if the weather code start with the two right we can divide everything by 100 and just round that up because it's never exceeding 50 is it it is okay so that's not a viable option okay I'm gonna just reflect two minutes on what to do and I'll be back all right so yeah so that seems to be the the best option we're just going to go through them okay so if the code is like Superior at 200 and under 300 we are on the thunderstorm okay so thunderstorm is the first one here okay so it's gonna be up one and we're just gonna repeat the process for everything I'm not I'm gonna cut to it so you don't have to sit through it and I'm just going to walk you when it's done all right guys that's it I'm done with the switch statement so so you don't have to go through and see through it I'm just going to explain what I did so if the code is Superior at 200 or equal to 100 and inferior at 300 we want to return the first assets so the thunderstorm asset because it's the code that corresponds to thunderstorm if it's between 300 and 400 we want to return the light rain icon between 5 and 600 we want to return the real rain ALK icon between 6 and 700 we want to return the snow icon between 700 and 800 we want to return the uh like fuzz Cloud Mist icon if it's 800 strictly we want to return the sunny icon and if it's Superior strictly to 800 and inferior or equal to 804 we want to return this cloudy uh icon and you can see right here it's working because today it's 20 degrees where I am it's cloudy and I have the right icon displayed right there so yeah and what I've done then it's inside the code okay instead of having our image.asset I just have our get weather icon that returns your widget so we can just put that in and I've pasted it to State the weather the weather condition code right there and I can just delete that right now and we should be good to go so yeah that's it I'm Gonna Save that up and uh and yeah we can call it to build so yeah I'm pretty happy for for all the stuff that we've managed to deal with today I'll put the code on GitHub if you want guys nice and yeah I'm very open to any feedbacks that you might have and you request that you want me uh to uh to build and don't forget to subscribe again really really helped me out and uh well until the next one uh bye guys thanks for watching

Channel: Romain Girou

Views: 44,092

Keywords:

Id: MMq4wkeHkPc

Length: 61min 59sec (3719 seconds)

Published: Wed Sep 20 2023