Flutter Weather App Tutorial | OpenWeather API Weather App Flutter | Tutorial For Beginners

in today's video I'm going to be showing you how you can create the stunning weather app within flutter our app will have the ability for us to pass at a location and then for that location our app is going to display us a bunch of information this includes the time at which the weather data was collected the temperature at the location a description of the weather as well as an image of that description and we'll also be able to show some additional metadata information for the weather such as the maximum temperature the minimum temperature the relative humidity at that place as well as the wind speed so with this said let's get into the video as as a side note I just want to mention that links to all of the resources as well as a link to download the source code will be available in the video's description so if you're interested you can take a look at that so let's get started to get started just create an empty flutter project and then create a stateful widget class which is going to be responsible for managing all of the UI elements as well as the logic for our weather app screen and once you're at that point then you and I are going to be at the same starting position from here the first thing that we're going to be doing is heading on over to pub. Dev and actually installing the dependencies that we require so we're going to be using the weather plugin which is a package that uses the open Weather API to get the current weather status as well as weather forecasts for whatever location that we pass to it so you're going to come to pups. come to the dependency section and then under copertino icons I'm going to add weather and then after that for formatting the daytime objects into appropriate strings we're going to be using the Intel package which will allow us to have this functionality within our application once this is done you can do command save and let flutter pubget do its magic and in the meantime you can head on over to open Weather map.org you can register for the site or if you already have an account login then you can come to the API key section and generate a new API key here keep in mind that once you've generated the API key it might take between 1 to 2 hours for that API key to become functional so once it becomes functional then you are going to be able to proceed with this tutorial but once the API key is created all you have to do is copy the that API key and then after this you can come back to your flutter code base in your flutter code base what you can do is go to the lip folder and create a new file here which I'm going to do cons. Dart and then within this file is where we're going to be defining our open Weather API key so I'm going to type in open Weather uncore API uncore key and then I'm going to be setting this equal to a string which is going to be my API key and do command save once this isn't done we can come back to our homepage and then we can focus on our build function which for now is returning a scaffold since our FL PBG has now finished working I'm going to give a quick test run to my application to make sure that is working and run it on my simulator and once it's running on the device I'll resume the video Welcome Back everybody so now that our application is running the first thing that I'm going to be doing is coming to my homepage State and here I'm going to create a variable which I'm going to call final weather Factory which we're going to be importing from the weather package and I'm going to call thisor WF and I'm going to set this to an instance of weather Factory and then we have to pass it our API key which will be our open Weather API key so we need the weather Factory en able to actually get access to the weather for a specific location then I'm going to create a variable of type weather which is going to be optional and I'm going to call this uncore weather and this is basically going to be a variable that is going to store information for the weather that we get from the open Weather API key for a specific location once this is done I'm going to create the init State function for my homepage State class and within this is where after my super classes in instate function has been called I'm going to be saying that WF Dot and then I'm going to say current weather by city name and then you can pass any City here what I'm going to be doing is passing in Philadelphia and then after this what you're going to do is chain a then Clause because it Returns the future so once this function call completes then I am going to be getting the weather which I'm going to say is going to be W and then within this function is where I'm going to do that I'm going to call set State and I'm going to set our weather to be equal to W like so so as soon as our application loads we send a request using our weather Factory to the open Weather API key to get the weather for Philadelphia and then we store this information within our weather variable so now that we have access to this information I'm going to come to my build function and within my build function for the scaffold I'm going to be saying that I'm going to define the body attribute for this which I'm going to say is going to be a call to a function which is going to be called once this is done I'm going to come down I'm going to say that I'm going to return a vidget with this function it's going to be called build UI and then within this function is where we're going to be determining what UI are going to be returning so in the case that the weather is null it's going to be very simple what I'm going to be doing is that I'm going to be returning a center widget and the center widget is going to be a child which is going to be a circular progress indicator so in the case that our weather is empty then we're going to be showing a circular progress indicator and if this is not the case then I'm going to return a sized box and then this size box is going to have a width and a height which I'm going to paste in and then after this it's going to have a child which is going to be a column like so and this column is going to have an LT children's list for now once this is done I'm going to do command save and you're going to see that for now since our weather is empty we're seeing a circular progress indicator but if I reload my application it's going to call in it State and then we're not seeing the loading indicator any more so once this is done the next thing that I'm going to do is that for my column I'm going to be defining some properties and they are going to be the main axis size the main axis alignment and the cross AIS alignment and then after this is done what I'm going to be now doing is that I am going to be coming to the children's list for my column and the first thing that we're going to be adding is a location header which is basically going to be a text which is going to say for what location are we displaying our feather so then I'm going to come down and I'm going to create a function which will return a widget this is going to be called location header and it's going to return a widget so what are we going to be returning for our location widget well it's going to be very simple what we'll do is that we'll return a text widget and for this text widget what we'll do is that we'll access the weather object and we're going to from there access conditionally the area name if we don't have the area name then it's going to be an empty string like so and do command save and now we're seeing Philadelphia and then to style this appropriately I'm going to set the style property for this text to be the following so once this is done the next thing that I'm going to be doing is that I'm going to be adding a sized box after my location header to add some distance between the next child within this list and then after that the next thing that we're going to be adding is going to be the date time information so I'm going to create a function which will be called datetime info and then after this I will come down I'm going to have a function which will return a vidget it's going to be called date time info and then with within this function is where we're going to be creating our actual vidget structure I'm going to firstly access the datetime object from the weather object so I'm going to say that the actual collection time equals to now and then I'm going to say underscore weather. data like so so what we're basically doing is that we're accessing the actual date time object for the weather observation and once this is done the next thing that I'll do is that I'll return a column this column is going to have a children's list and this children's list is going to be empty the first thing that I'm going to be doing to this children's list is adding a text widget and this text widget is going to be responsible for showing the actual time at which the feather observation was collected so to do this I'll instantiate a date format object like so and this needs to be imported from the Intel package so let's do that then I'm going to pass it a string which is going to define the structure in which our date time object should be pared and then displayed on screen so in this case I want to show the R followed by a colon then I want to show the actual minutes and then after that I want to show AM or PM so this is how you do it and then after this I'm going to do format and I'm going to pass it the actual date time object like so so once this is done you can see that now we are seeing the actual time being displayed then what I'll do is that I'm going to basically Define The Styling for this so I'm going to set the style attribute for this to be the following once this is done I'm going to add a size box to add some distance between the next element in our list and then after this I'm going to be adding a row element this row is going to have a children's list and we'll Define that children's list in a bit but the first thing that I'm going to be doing is defining the main axis alignment the main axis size and the cross AIS alignment as follows then the children here is going to be the same text widget that we have defined here using our date format so so I'll copy and paste it in but this time what I'm going to be doing is that instead of showing the actual time what I want to show is the actual day so for that what we do is we put in four time four e and do command save and now it's showing us the actual day at which this weather observation was collected then after this I'm going to update the styling property for this to the following and do command save so now we're seeing that it's 7:30 p.m. and it's Monday when the weather observation data was collected and finally what I'll do is that I am going to be copying this text I'm going to be pasting it again and this time what I'm going to be doing is that I'm going to create a string and in this string I'm going to add a space or two spaces then I'm going to say that I'm going to interpolate the date format object within the string and the date format object is going to be responsible for showing the date following that the month and then following that the year like so and then similar to before I'm going to say that now I'm going to call for format and then I'm going to pass it now like so and then after this I'll do command save and as you can see now it's showing us 303 2023 which is the date at which this observation was collected then I'll update the style property for this to command save and there we go that's working as intended so now that we're showing the actual time at which our weather data was collected we can move on to the next step which is to actually show the icon of the actual weather description so to do that what I'll do is that I'll come back to my children list for the actual main column within my application within RP UI function I'm going to be adding a sized box after this and then after that I'm going to be calling a function which is going to be called weather icon and as the name suggests it's going to be responsible for rendering the weather icon so I'm going to come down to the bottom of my class I'm going to create a new function which will return a with it it's going to be called the weather icon and then this function will be responsible for rendering the weather icon so what I'm going to do within this function is that I'm going to be returning a column first so let's do that then for this column it's going to have a children's list and we'll come back to the children in just a bit then I'm going to define the main axis size the main axis alignment and the cross AIS alignment for this column and then after this we are going to be defining the first child for this column which is going to be a container this container is going to have a decoration property which is going to be of type box decoration then for this it's going to have an image which is going to be of type decoration image and then this decoration image is going to have the network image as its property and then here I'm going to say that we're going to pass a URL to our Network image so what is the URL going to be well it's going to be the following we're going to have the specific URL firstly which is openweathermap.org image/ wn/ and then we're basically going to be adding the actual icon for which we want to display on screen so that is going to be interpolated into the string so I'm going to access the weather object that we have and then from there I'm going to say that we're going to access the weather icon and then once we have the weather icon after this I'm going to add add 4X to actually specify the size for the PNG that I want to get and then finally after that I'm going to do PNG and do command save once this is done you're going to notice that the image is not shown and the reason for that is because we haven't defined a specific size for our container so for this container I'm now going to define a specific height and with this done you can see that now we're seeing the actual icon for our weather once this is done the last thing that I'm going to be doing is actually adding a text after our container which is going to be responsible for displaying the actual description for our weather so I'm going to do weather then from here weather description and if we don't have it then it's just going to be empty and then following that I will do command save and and now you can see that it's saying missed as the weather description then I'll actually Define The Styling for this text by just copying and pasting it in since it's very simple and there we go so once this is done the next thing that I want to do is that I want to have a function which is responsible for basically displaying the temperature at our current location so for that we'll do the same thing I'll come back to my build UI function and then after my weather icon I'm going to be adding a sized box with a specific height and then after that I'm going to be calling a function which will be responsible for displaying the current temperature then similar to this I will come to the bottom of my actual class and here I'm going to be creating a function which will return a viget it's going to be called current temp and that's pretty much it that this function is going to be responsible for basically rendering a text widget and this text widget will be responsible for showcasing the actual temperature at the location so for this again I will Define a string the string is going to have a value interpolated in it which is going to be weather dot temperature and then dot Celsius since I want to show the actual temperature in celsius like so and if I do command save and actually show you guys the temperature you're seeing that the temperature is being showed um up to a lot of decimal points so to limit this what I'll do is that I'll chain a call to this call two string as fixed and here I'm going to say zero like so and then I'm going to add a optional sign here as well and do command save so now it's only going to show us the actual temperature at the location as a whole number and then after this what I'll do is that I'm going to add the degree side space c and new command save and there we go we're seeing 14° C being displayed then just to update the styling for this I'll Define The Styling for this text and there you go now it's showing us that at Philadelphia right now it's 14° C so finally now we're going to be creating the section which display place the extra information for the weather at our specific location so for that it's going to be pretty similar as well firstly what we'll do is that we'll come back to our column and after the current temp I'm going to be adding a size box and then after that size box I'm going to have a call to a function called extra info then I will come back to the bottom of my class here I will create a function which will return a vidget called extra info like so then what I'm going to be doing within this function is firstly determining the information that we're going to be showing so we're basically going to have a container which is going to have some styling applied to it and then within this container we're going to have a column and then a row within it and then another row within it and it'll become actually much clearer as I start creating it so first things first let's create the container and actually add some styling to it so I'm going to say that we're going to be returning a container this container is going to have a height and a width so let's add those like so and then once I've defined the height and the width I'm going to define the decoration property for this which is going to be box decoration then I'm going to say that the color here is going to be colors. d purple accent and then after this I'm going to be defining the Border radius for this and I'm going to say that the Border radius is going to be border radius do circular and then I'm going to give it a radius of 20 like so once this is done we can move on to the next step which is to add some padding to our actual container so I'm going to add that after the decoration property and then finally we can actually talk about the actual children that are going to reside within this container so the child for this container is going to be a column so let's quickly Define that then the column is going to have a children's list which for now is going to be empty then we're going to define the main axis and the cross axis alignment for our column so for this column the main axis alignment is spaced evenly and then the cross axis alignment is Center and then the children for this is going to be actually a row and then this row is going to have a children's property as well for my row I'm going to define the main axis size the main axis alignment and the cross axis alignment like so so it's main axis size Max cross axis alignment Center and Main axis alignment space evenly and then the children here is going to be a text widget and the text is basically going to be the maximum weather so I'm going to say the maximum temperature is going to be Max colon then a space and then I'm going to interpolate underscore weather and then dot I'm going to say temp Max Dot Celsius and then I'm going to say dot two string as fixed zero and then after this what I'm going to be doing is that I'm going to add a degree sign and then space Celsius and do command save and now you can see that it's showing us the max temperature is going to be 15° Centigrade then I'm going to be copying The Styling for this and pasting it in to the text so that we change the color of the text to be white and the phone size to be 50 then what I'll do is that I'll copy this text and I'm going to paste it in again and this time I'm going to say what the minimum temperature is going to be weather do temp Min like so and now the minimum temperature is being shown as 11° Centigrade once this is done what I'll do is that I'll copy this row so the whole row and I'm going to add the row again below it like so so our column let me just show you is going to have one row which contains our maximum temperature and minimum temperature and then another row which basically showcases some other information regarding the actual wind speed so for this what I'll do is that here for the text I'm going to say what the wind speed is and then I'm going to say that the wind speed is going to be weather and then dot windspeed like so and do command save and then after this I'm going to say that the wind speed here is going to be actually in me/ second and then finally we are going to be showing the humidity so for humidity I'll say humidity is weather Dot and then I'll remove this and I'll going to say humidity humidity like so two string as fixed and then humidity is in percentage like so and do command safe and now we're seeing that the humidity is 90% the wind is almost still so 0 m/ second the maximum temperature at this location is going to be 15° Centigrade the minimum is going to be 11° centigrade and that's pretty much it so with this our application is now complete the last thing that I'm going to be showing you guys that you can easily go and change the actual City for which you're pulling the weather information for and it's going to update it here so let's use London instead of Philadelphia let's do command save let's restart our application and we're going to be seeing now that at London it's showing us that it's overcast clouds wind is at 2 me m per second humidity 83 and maximum temperature 16° Centigrade minimum is 11 and the icon is is updating and then I can change this to something else as well let's just say that I am going to be changing this to now Madrid and do command save and if I reload my application then you're going to be seeing that at Madrid it's saying it's 15° centigrade and that's pretty much it for today's tutorial if you enjoy the tutorial then please don't forget to leave a like on my video as well as subscribe to my channel so that you get notified every time I release a new video if you have any question comments or concerns then please don't forget to leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 15,764

Keywords: flutter tutorial, flutter weather app, flutter tutorial for beginners, flutter weather api, flutter weather app api, openweathermap api tutorial, flutter weather app tutorial, flutter weather app with source code, weather app flutter, weather app flutter using api, weather app flutter openweather, openweather flutter, flutter weather app ui, flutter app weather, free weather api, mobile app development, flutter ui, creating weather app in flutter, create weather app flutter

Id: 6wTl0yqgBzU

Length: 20min 54sec (1254 seconds)

Published: Sat Nov 04 2023