🌤📱 Minimal Weather App • Flutter Tutorial

yo what up welcome back to another quick flutter tutorial in this one I'm going to show you how we can code up this nice Sleek minimal weather app by reading some API data now just to have a clear picture of what we're about to do I drop a nice little diagram for us so let's start off with our phone now the first thing is we need to get the location of this device and then we're going to give that information to a Weather Service class which we'll create and this class will handle most of our operations so once we get the devices location we're going to give that city name to the API which is this open Weather map.org website and then that will return us the weather for that City and just before we give that to our phone directly we're going to go through a weather model just so that we can get the relevant information from the weather so I want to know the temperature and the conditions of the weather and so we'll give that information to our app and on a high level this is what we're about to do go to this website openweathermap.org and we're going to get our API key from here so all you need to do is just to sign in using your email and you'll be assigned a free API key so we're going to need this key later on now I've opened up a brand new flutter project and the first thing we'll do is to open up the terminal and let's add in some packages that we'll need so the first one is the HTTP package then we need flutter Pub add geolocator and also Geo coding and finally let's add in the Lotty package as well so this one's going to be for some nice animations so what we just did if you didn't know is if you go to your from scratch so I'm going to have my material app and for the home let's go to our weather page which we haven't created so I'm just going to create this in a new folder called Pages just to keep our code nice and clean and then let's come back to our main do dot just to import this and sweet what you should have is just a blank scaffold so this is where we'll begin now the very first thing is to create a weather model so if we just create a quick class here if we think about any particular weather let's say we want three things I want to know the city name I want to know the temperature and also maybe the main condition like if it's cloudy or sunny or whatever so we're going to require this when we create a weather and then we need a quick method here just to deal with the Json file so when we get our data from our API at open weather we're going to use this to sort of decode the information for the city name in the field of the Json is going to be name and then the temperature we want to convert this one to a double and also the main condition is going to be in the weather field and then main so this is our basic weather model one last thing we want to do is to create a weather service so this one will help us fetch the data so starting with the base URL so this one just make sure to copy exactly what I have it's just the open weather map website pretty much and then we need to have our API key and then let's create a future method here called get weather and let's accept a parameter called city names now this is where our HTTP package comes into play at the top just import it as HTTP and then now we can access the URLs from the web so for this one I'm just going to copy this in so make sure to copy exactly how I have it and basically what it is is we're just go to the base URL which is the open Weather website and then we're going to go to the specific City with our API key so then we can just check this response and so if we have a response then we can go to our weather and then decode that information and otherwise we have some error cool now we just need one more method here which is another future for getting the current city so I want the app to automatically know where the device is so to do this we have to ask for permission from the user let's check the permission and also if it's denied let's ask for permission and then so once we got the permission from the user let's fetch the current location and then we're going to convert the location into a city name okay sweet so let's say the position so we can use this to get our current position let's say the desired accuracy is high and then we have to do a little bit of plac Mark work and give it our positions latitude and longitude cool now the information I really want is just the city's name so you can say the locality cool now I just want to return the city but if it's null which is what the question mark question mark means if it's null just return a blank string okay so we have these two methods that we can now come to our weather page and let's display in our UI now so the first thing is we need our API key and let's just have a quick method to fetch the weather and then maybe later we'll do the weather animations too let's create our Weather Service and in this parameter this is where you have to give your specific AP I key the one that's free on open weather so I'll put that one in for my one a bit later on and then let's create a weather object here and let's just have a quick method here to fetch the weather again the first thing I need to do is just to get the current city and then we'll get the weather for this city so for the city name if we go to our Weather Service we can access our get current city method and then let's try to get the weather for that City and if that's all good then let's set the state and let's just update our weather object and also if we have any errors let's just print it to the console cool so at the top we need to give our API key let's just make sure not to forget that so I'm going to paste my one in that we got from the start of the video and let's just have an initial state so when this app starts up let's fetch the weather cool now let's display this using our UI so I'm going to use a big column and I just want to display the city name and then the temperature for now so if we go to our weather object let's just display the city name and if it's null then let's just say like loading CD and for the temperature this should be a double like a decimal number so I'm just going to round it to the nearest integer and I'm just going to add this little degree celsius sign cool so you can see it's there in the corner I'm going to actually Center this column and also the alignment I'm going to Center as well sweet so you can see right now it's just loading and there's no temperature and this is because we have to do a little bit of extra work for the permission so for the Android if you go to the app Source main you can go to the the Android manifest and then at the top here we just want to paste this bit of code to these two lines just to get the permission so make sure to copy what I did and that's for Android for iOS go to Runner and go to this info. pist and at the top here we also want to just add in this NS location when in use usage description so you just need to add that little thing in cool so I'm just going to save everything and just to just for good luck I'm just going to kill that app and restart it and you can see there's our app asking us for permission to get our location sweet so just test this on your device it should get your exact location and it's showing the temperature cool now just to make this a little bit more fun and aesthetic I'm going to add in a animation so if you go to L files you can get some nice easy animations here so I'm just going to search for weather and looks like this guy has some cool weather animations that are pretty simple so let's say say we want the top four like the sunny a rainy a Cloudy and a thunder one so you can have more if you want but I'll just show you how to do it with a few of these ones so if you click on any of them that you want you can click download and get that Json file and so here I've got my project and then also the animation I just downloaded I'm just going to rename this to make it more easier to remember so I downloaded the cloud animation and let's create a new folder here called assets and just drag drag all of your animations in here so go to the L website and download whichever ones you want I'm going to bring in the four that I said I'm going to use so the cloud rain sunny and the Thunder and so in the actual project and just drag the folder in sweet and then if we come back to our code we have to tell it that we're going to bring in some assets so go to your pope. yaml again and we're going to scroll down to the assets and just uncom this and specify where you placed it so we placed it in the assets folder sick now if we come back to our column in the middle let's just put in the animation so if you start typing L you can import it and specify where we placed our asset so let's say assets cloud. Json and you can see there's the animation we got the sunny Thunder and the rain awesome now the animation are coming up fine what we want is we want the animations to match the weather right so you can actually also get the condition the weather condition if I say main condition here you can see right now it's clouds all right so depending on this main condition let's display the appropriate animation so let's come to the top and fill out this one last method called get weather animation and we're just going to accept a main condition as a parameter if the main condition is null let's just return the Sonny animation as a default and so we're going to use a switch statement to deal with the different cases okay and so if we look at the main condition and we just reduce it down or to lowercase so I looked at the main conditions that you can have from our open Weather API and these are the possible ones we can get so we can get clouds Mist smoke Haze dust fog so so for those ones I'm just going to Simply return clouds for rain drizzle and you also get shower rain I'm just going to return the rainy one if we have thunderstorm then we have our the Thunder animation and then lastly if it's clear then just return the sunny one and by default we'll return Sunny so I'm going to use just the four animations but if you want you can go back and try to find animations for all of the different conditions but I think the four that we have can represent most of these also now if we come back to our UI where we give the animation instead of specifying just a specific animation let's now get weather animation and we can give it the main condition that we have So currently we can see it's clouds so hopefully if I save this we get the Cloudy animation sweet and that's it that's the basic functionality on how to get the API data and create a very simple weather app so now you can just decorate this up to your liking I hope you learned something if you have any questions just comment below and I'll try to help you out thanks for watching and I'll catch you guys in the next [Music] one

Channel: Mitch Koko

Views: 83,183

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication, firebase

Id: yLtpMqvMgdY

Length: 13min 22sec (802 seconds)

Published: Mon Oct 16 2023