Build a Wallpaper App with Flutter | Flutter Tutorial For Beginners

my name is Elsa and in this video I'll teach you how to create this beautiful wallpaper app with flutter in step by step even if you are a big nap so before getting started first let me demonstrate what the app is how it works and what are the different functionalities of it so if we look at over here first thing first it's obviously because it is made with clutter it will be available for both Android iOS as well as for web as well so I have already published it at wall table half-dog Bev dot app the link will be in the description so you can get go ahead and check it out it's also a PWA which means it's a progressive weather so if you will open that on a browser it will show your option to add it off or as a pump in home stream and you will be able to access it through there as well so yeah now let's go and see how it works natively then we will see how it works don't either so if we look at the native apps of Android and iOS this is how it works so we have a home screen and in the home screen we have these categories sections so as for the images I am using excellence API but they don't have any particular categories assigned to them they just have two different API is you can call the first one is for search and the second one is to get the branding images now if we talk about how I have added these categories I simply am searching for street art wildlife nature city and motivation and things of that nature but basically we have some categories option if I click on any of those for example if I click on nature it will note all the different nature images okay and these are pretty beautiful and now what we can do now let's say I like these images and I personally like let's say you know this one this looks good beautiful now if I click on the image this screen will be open and in this theme we are able to see how the image will be looking on our phone so basically what it is doing its taking all these space that available in the screen and it gives us these two options so the first option says set wallpaper and there is a small written text that stays image will be saved in Gap so this image will be saved in the gallery and that user will be able to set that as a wall so let's see how it works so if I click on set wallpaper first it will save that image in the memory and then it will close this so now if I lose this amount and go back to the photos you can see we have this image and it is saved at 2:18 and I'm not sure if is able to see the time but yeah so that's the exit time so now let's try out for another one for example I like this about this image as well so I'll open the app and open the image and click on set wallpaper now similar thing will happen it will save that image to a gallery and once it is done it will cause a damage so we have this image as well good now let's try this out for search so if I search something for example I like coding so I'm gonna just search for coding and I'm gonna search it some wallpapers regarding or related to this one so let's see if that loads up this may be taking a little bit more time than required but yeah so this is how it looks these are different images which is available if we search related to coding now let's see if I like this one or maybe this one and I can just say set wallpaper an image will be saved in the cavity so if I click on that they may just saved and if I go back you can see we have that which works perfectly fine if so let's give it a try for Android version so since we are already know how it the search and these things working just just a let's test is it the save option is working for Android or not so let's say I like any image for example I like listen and I just click on it I know I said set well different and as mentioned image will be saved with the gallery now if I will go back to the gallery option or basically any files and then I'll go in the Android SDK people have this wallpaper folder created and inside that folder we will have over image as you can see it is saved just right now the time is mentioned 2:20 p.m. okay works perfectly fine so as you can see all the apps for Android and I are working now let's see how the web version is so as for the web I tried but there is not a best option available yet for downloading of images of that and I'll let you post it about it to another app which we will build or to LinkedIn or something so if but for now how it is working is you can see it says image will open a new tab to download now if I click on this it will be it will open the image and any new tab now if you are accessing this on phone then you can tap or long tap on this and it will show your download option for computer you can just right click and to save as it's working perfectly fine and mobile so as I said before go ahead and visit wallpaper app dot web dot app and test it yourself so now I believe the demonstration is done so let's go ahead and build this thing so first thing first I will create a new project and you can do that directly through your IDE but what I'll recommend is go ahead and create the project through terminal if possible because you will be able to create those there folders and all especially if you are using Android studio it's not likely creating that so I'll just go to my main prime which is CD I'll stay desktop and inside that I have a folder which is named greater project cells if further projects and then a hit handle once I'm inside of that project I can say flutter create and then I can name the project so I'm for a safe wall paper hub now I'll just hit enter and it will load for me so now the till the project is being created let me show you how the API is going to look and what exactly which API we I use it so this is the API it is called pixels so you just have to visit pixels you could just Google this and open up the first link that's this is the image so you can see that these are the same images which we were loading on our app and if you search for these different queries which we have it will show the same so now let's type pixels API and this will open up this lip sync so click on this and this is how you see so there is a big brands like canva wordpress.com SurveyMonkey and all these uses this website so now you can click on request X's and it may show my API key but anyways let's just give it a second make sure you're logged in or sign in you know sign up by signing up and once that is done you just have to click on request X's ok so now this is my API key I request not to use this because this is not the best option right you should just go ahead and create your own ok because it's limited and if you all will use it it's not going to work anyways so do not abuse as they say anyway now this is how the FK is going to work we have this URL and we also have to pass this header file of authorization now if you're not aware of how the API thinks works as I mentioned even if you are big nerd I'll make sure that you learn this so first as our project is already built so let me open up my project so I'll just say open I'll visit up my folder so I'll say a few little projects and over there as I have named this wallpaper app so yeah this one I'm going to open this up and this is a fresh project creator ok so this is how the API things go so we have a URL okay this is the URL we also have an authorization header that's what it is for right so how exactly are these things going to works so not to make things very complicated for you I'll show each and everything but let's first start by using api's now just to make sure he'll happens not getting too much with these like No well it's able to manage all these it's not the best option to just have everything open at first so I'm just going to Foursquare this it's not quitting and yeah so now the app is done and let me minimize this one and I can close this app as well so let's work on iPhone it looks beautiful right so yeah this is the app and we just first increase the font size okay excuse me I hope everything is visible perfectly fine so let me get rid of that and then I'm going to get rid of this bottom section is done and once that all is done I am going to go inside and remove this test we are not going to create any test for this do let me know if you're interested in learning that and all that so this one you know so if you go inside the lip fold if this is ever mean inside the lib folder I am going to create a new package that's called an android studio if you are in feature studio code you can call it a folder I'm going to give it my I give it a name of views so in that we are going to have multiple views the first one is going to be dart and that's way to be at home so home dot dot then we are going to create another dart file which is going to be you know this category section so I'm going to call it category sorry category your time okay when that is created the next thing is search dot R so search so these are the different screens which we require now okay now what we have to do we have to get rid of this video we will give this as a credit demo the wall paper and I'm going to make my primary color as color start right okay so once that is done we need to call our main screen from this home so I will go ahead and this is my main home so I will first import material over there and once that is done I'm going to say state full and in that I will say home ok just make it a little bit clearer so inside the home what do we want we want a scaffold and you're going to have this AB bar we have the search we have this little branding a let's just skip this for this one then we have these categories and then we have these wallpapers okay so let's work on this so first thing I'll create a scalpel now if you're not aware why we use a scaffold scaffold is basically used to get all these different items including the a bar body floating action button bottom bar and bottom sheet and different a lot of material stuff which comes like already done for you kind of it so now let's move on and create a bar so I'm going to say a bar and yeah we can directly use the apparent that caused a big reason why we have several okay so now we have a scaffold we are using an app bar now what we can do we can provide the title to it now for clearing the title what I have is if you can see we are using this not just on this is thing but on search and others means as well so what I am going to do I am going to create a new package or folder I'm going to name this widget and inside that I'm going to create a dart file which is going to be visual now this dart file is going to be pretty simple it's going to be I'm just going to import material and then I'm going to have a widget which is for brand name since all of these are different APIs this one be it of category be it of Omega by a name decoding widget but basically in this one we have the branding same but we have some some have a back button some don't so that's how the things are different way so I'm just going to create the pending and we can just use this widget so this widget is this brand name is a vision and it's going to return a row but if you don't know what a row is used to arrange different widget horizontally so as we can see these are basically two text arranged horizontally we can use a rich text as then but for now just to make things very simple for you to understand we are going to use a row so I can say text and inside text I can give it wall paper and then I can give another text and inside that I can see how yeah okay so we have a brand name now so let's go ahead and give it so media bar we have title property in the inside of title I can see a brand name and you can see we can directly import this okay so enough of this now let's open this app in this one but we also want to make sure we are able to see so what we are going to do I am going to take a new screenshot so that we are able to work with that and also at the same time I'm going to update my home I go inside the home and adding that over here okay so it is done now let me open up my screen short which I have and open the app so this is what we I want to create and now let's see where our be so make this okay so this is what we want to make and now let me run the app again it's the file Grandia who's going to take some time so in the meanwhile what we are going to do we have a home we are are using the brand name so we let's also provide some styling to the brand name so as you can see the above the wallpaper is text doesn't have a lot of graph style to it there is only one thing which I am going to do which is going to be color and the colors is going to be black I think I have used 87 but if it doesn't look good enough we can easily change that it's not a big deal I am going to copy this property and then I'm going to go and use blue pillar for this one okay looks good now I can go back and as I can see usually all the app bar have a elevation which we don't want so I'm also going together get rid off by using elevation property and providing that zero point zero okay Amanda that is done we have a wider bar so this is how it should look like also later on I'll also show at the end how we can add custom font because this is a custom font included this is not normal for time so that's the thing now I think the app bar is pretty close to them so I will move on to the body and inside the body I am going to use a container first inside that container I am going to use it a condom why am i using column we use column when we want to arrange different widget vertically so inside the column as I can see first and foremost I have to create this search bar and this search bar is looking very complex it's just basically a row with two different widget the first one is a text field experience some text input from the user so that is what it is we can get some text input and this is an icon and inside in this I can I have also implemented a gesture detector which means when the user clicks on this we can perform certain action for in this case which is to navigate to the next screen of these search okay so let's build this so I'm going to go ahead in this column and I'm going to create that row so I'm going to say row and inside that row I'm going to call ship ok so inside children I want the property of text feet so I'm going to say text field and in text field I am going to also provide some very important thing which is the intertext so right now as when I captured these teen short I have already typed coding but before that if you are able to see there was search a written right so we want a hint text how we provide a hint to text or text field is by using a decoration property then I can say input decoration inside of the input decoration I can use the text and inside muta text I can provide such it's better to have it lower keys okay now if I'll see in this you can see we got rid of that and also it is showing an error so what this is basically happening is it is saying the input ticket detector so this is an input detector okay whenever you have this which is typically created by a text wheel as it can understand this is text created by a text tool so it doesn't cannot have an unbound weight we haven't provided up it to property to this and that also inside a row so it is becoming a little bit complex and hard to understand for the compiler how to arrange it in the view that's why it just takes it out and he doesn't show it either so we will fix that don't worry but as we know we have to have an icon so just after this text field we need to have an icon so for that using an I can we say I can and inside of that I can say icons dot search so by this we can use the predefined or please save however you want to call it material items still it's going to show the same error it's not going to this make this visible so what we are going to do we are going to wrap our text field with a widget which is called expanded what does expanded States so expand is says that it's expanded right so expanded means like it's going to take as much as much space as it can so now if I will save this okay do we have any error here yeah we don't have to use a semicolon sorry for that let me save that and now as you can see the no errors and it's perfectly visible but that looks really ugly we won't let something like this right so how he can do that before that looming let me fix the this one first which is the app bar so in the ampere as we can see we want this to be in the center but it is empty right we didn't get that how can we fix that so you just have to go inside this widget which we created which is branding and inside the row we have the property which is called main axis alignment what is it so well basically the main axis alignment for a row is horizontal okay this horizontal and in the main axis alignment we want this to be Center we want this in the main axis alignment to be in the center so we will say main axis alignment Center and if I will say that it's gonna fix that also it is showing the error that this is the non constant identifier it should be a lower cam focus if you're using Android studio just right click and go to refractor and then rename and if you're using BS code it will show a renamed symbol option so you just have to click on it and it will work the same so now I can just say brand name just renaming it and I can click on pin factor okay so that is done now let's move on and make our search bar a little bit more beautiful so how we can do that first foremost I am going to wrap my row with a container why did I do that well very simply as I can see over here I do not want my search to be start from the start but rather I wanted to have some kind of margin at both these sites okay wait a second what is margin well as for the decent condition you can understand we have asked to be a little bit far from other people and that's exactly what I mean by margin or what margin is margin basically mentions a particular amount of width you can call at which the widget should be from the others so if I want to provide at a margin we can use container and container have both the properties of padding and margin as well so what is the difference between padding and margin padding is something which is inside so in within there will be some space taken from left and right and if you want that space taken by outside because if the it will be in from inside this will be stretched this color which is visible it should be stretched at this place but we don't want these face they can inside but we want that from the outside I hope that's key around so now that's why we are using margin and I am going to say Ejim sets dot symmetric and horizontally we want to be around 24 so if I will see this now you can see it's in the center and you know it have some margin from here but at the same time if I have used padding it would work the same because we are inside container and that's how it works but this is let me show you the difference so if we use colors and just for the demonstration I am going to use a blue form so you can see this is what is the padding and this is what is a margin I hope that clears a lot of things for you okay now that's clearance card but what we actually want is we want this to be like this you know like this grayish color we can the first thing is how can we have this color like is there any color code already in this so the answer is no I actually used a custom color code for this so let me get the color for for just a second where is the color code where are you okay so as for the hint a text I use search to wallpaper so let me make that same and also where are okay so this is the color let me copy the color code only and I will show you the rest okay so I only applied it the text don't worry I didn't there is something which you don't understand okay so now as you can see we did we don't only want to provide the color but also we want to provide these edges to be circular not just a you know been sharp edges we don't want that so how we can do that so I'm going to go ahead and provide it a property called in declaration and that of like a box decoration inside the box decoration we have both the property of color so I'm going to provide a color now we have a color code but I don't understand like we usually go for colors like this thing like this but how can we use the custom color code okay now it's showing air for this in room yeah we have to directly provide that anyways so what I mean is basically to provide it color code how we do that is by using this so this is actually the hex code of that this grayish color and 0xff is used in front of it this is actually defining the opacity but you don't have to understand a lot about it you just understand it when a whenever you want to use a custom color you just use 0xff in front of it and the color poor after that I hope that makes some things clearer for you of course like it's not going to be very visible because it's kind of a filler of how the greyish color of our background is for now so let's update that so I'm going to go inside my scalpel and use a property which is called background color and inside that I'm going to say colors dot white okay so now if I will save this you can see we have it updated and we have a little bit of visible now how it should work the second step we also want a little bit of padding from the inside right we want this search not to be just at the corner but a little bit spaced out as we can see over here we have some space over here right so not just margin we are also going to use padding as well so let me just paste it same and same and I'm gonna just change margin to padding now if I will save this it's too much for me we've made we don't want that much I maybe but let's let's first provide it the circular edges and then we will see how it the things are okay so moving ahead we want to have some circular edges so as we have used decoration box we can use border radius property and inside quad reduce I can say border radius start circular and in that we can just provide system a circle okay now if I will see that it looks not too much so let's just increase it because you want a lot of circular this is a big simple circular edge not like that okay not looks perfectly fine but since that is this you know this bottom line I don't like this how can we get rid of this so to get it out that line you just have to go inside your text feel inside the input decoration there is a poor property called border border so you have to say input border dot none and that will fix it for you okay no it looks beautiful good and we can type out things here so I can stay the same okay we are at a good place what do you want next let's just skip this for now you have worn my brand grinding on your app so now let me you just do one thing okay just after this container a little bit of space as to that we can see what's happening in stuff we want this categories list right and it will be a horizontal list view of categories available so how we can create that so go inside the project folder and inside the label create a new folder which is going to be called data now this is just used to save a local database kind of how I'll show you how I am doing that I'll create a data door dart file and also these lists particular collections category sorry are having two values the first is the string or basically the name of the category and the image URL so let's create a model for that so I'm going to go ahead and create a new folder call it a model and inside the model I'm going to have a new dart file which will be called categories model and then I'm going to go ahead and create a class and I can say categories model inside that I am going to okay for class we don't have to use argument things so yeah now inside that as I mentioned we are going to have a category is it going to spinning I'm not sure but anyways let's move on categories okay it was easy anyways categories name and I can say category this is go ahead and give it a very easy name of image URL okay so we have categories name and we have mh1 let's save that okay now let's move ahead and go into the data so I am going to actually do I am going to create a function which is going to return a list of categories model which will be imported in this home and then in this home we can create a list view with that data maybe things are not very clear but I'll clarify it for you nobody so just go ahead in the data without art and create a list inside that list we are going to provide it the model which is this one category model so I'm going to say category and then we are going to say get categories okay so the function is created successfully I mean that excise is ready but you don't want that back let me import this okay if it's not importing we need to make sure that we are using the same name okay that that was categories so now we have categories model okay so how function is this function is going to work as it mentions me I have to return a list of categories model so let's create a list which will be of category model and let's call this categories for now this this list is very new fresh this has nothing data so let's create a category model category model is equals to new category model okay so what I did I basically created a list of category models now to save data in a list of categories model I created a model so what I am going to do a now is I am going to provide the value to this categories model and then I'm going to save that a category model to the list then I'm going to make it new again and then I am going to save new data of another category and then save that to the rest so let me show you how about what I am going to do just for that time Zeke let me just copy P is this you okay so as you can see we have successfully have like copy pasted this now what you want to do is we basically want to make sure first and that this name is similar to this yeah so what is happening is is basically we are assigning we are using these getter and setter methods of that so basically for any model you just have to say talk and the all these different variables which we have inside of that like category name eventually will be available and you can provide value to them and if you want to get the value this is going to return the value as well which we will see in the hope how we are getting or getting the data through the model and showing that and in this case let me minimize this right so of course we have named this differently we have it as a categories thing so let me update that to this category name so that all these will be available as well okay guys now you can see that we have this categories model and what we are doing we are basically assigning this URL to the image URL we are assigning this category name to the category name in the model and then we are adding that model to the list of category model then we are creating the category model new which basically what it does it clear out all the different values which is stored in that now we have changed the name of this one so I'm going to just save the place control R and I'm gonna go ahead copy this and use it and replace all okay so now it's fine we are and once we have added enough of how much the categories we won't we are going to return the list of category model okay I think this is very clear very simple to understand normal way too much stuff and now if you have any doubts feel free to comment them down below I will be more than happy to help you okay so now let's move on and create a little bit of a size box so that we can provide a little high so I'm going to call it something like 16 and then I'm going to create this so for creating any list the first thing which should be sure to is create the district ID what is the list ID well actually list I'll is something which is already there and leave flatter but what we want to create is a a list item that's what you should call it and that is going to be a widget and for our requirement we are going to use a stateless widget because we don't have anything which you want to update after we fix the data what do I mean once I have fed that it is a street art and I have fetched this image I don't want to update it later on right that's why I am going to use a state less widget if I want to do something after that I won't work it that the data later on the action of user or something like that then I will have used a state favor job so let's go ahead and say state less less widget okay what am i doing let me just name this category category ties okay sorry for that this is the name of your vegetable overcomplicate things of it so now we have a container inside the container we will use a stack why am I using stack stack is basically used if you want to have one digit above the other so in this visit you can see we have an image above the image we have a container with a black shape and above that we have this text and that is straight out so now let's go ahead and provide that so first we will use a container inside that container I am going to use a child and that is going to be image dot Network this is going to be a network image you don't want to hard-code this because this is different for each and every tile so we want to get the data for every different list item so I'm going to say string and that's going to be an image URL and that image URL will be accessed from here from this place so now we said image dot network and then image one and this is going to fetch that image URL for us just to make sure you guys are clear about what we have been depending let me just show it here so if I will see that okay so we don't have any data from now so that means just to reroute this okay still we will have no data so let me just don't show it now so yeah so let's move on and they create another container and that container is going to be having a child of fixed and inside the text I'm going to say no no hard-coding let's get that from here as well some innocent I do and inside I can just pass that idea okay makes sense insert clear but okay you have said that these are but with where are these coming from so as this is saying that it is as marked as in mutable instances field R and final so we have to make sure it is fine so I'll say final and once they are fine we have to provide them then you they have not been initialized right so how we can provide the value we are going to provide them value through the constructor so this door title and this dot image URL so let me see that so we have the final string image URL we have the title we have categories title we have created the constructor so what we can do now is we can call this constructor provide them value of image URL in title and as I have used these curly braces I will be able to provide image URL first or after it doesn't matter it will not be that I have to provide the title first and they will be now named parameter which means I will first name what am i providing and then I will provide the value to know more I will be doing that so don't worry just give me two to five minutes now our first image container is prepared now let's move on to the next one we also have the title as well guys now of course these are not hardly structured right now we have to make it sure that it looks like this but let's move on and this is what I usually do why we just first try to fetch the data and make sure that it's visible and I am able to get it and it's visible and the list is visible then only I just work on the customization part it's just on your preference but that is what I will recommend okay so let's move on to our home door tart and inside this home door tart stateless stateful wizard I created this init state this init state will be called when the application starts okay so what do I want well basically what I'm thinking is I just want that data to be fetched the data which we have saved in this data file which is dated or tart I want to fetch all of the all these list of these values of the name and image URL and then just show that in the ListView so for that let me just we copy this list list of category model well I can write that down as well but you know this copying will be time anyways so we have this list of categories model and it had it is the variable name is given to be categories now what I want I will be saying all these categories or categories so what this function is doing this function is calling that this one this function and this this function when the compiler goes it is going line by line line by line line by line what it understand that is creating a list and inside of that list it's saving this category models right and at the end it's just returning the categories list so that's what going to happen that it is returning the categories list which is going to getting saved in this category list which we have inside home dot dot and this is happening when the init state which means when the app opens we are directly fetching the data from the data dot dot file okay I think that is clear enough so let's move on to the list and to create a horizontal list view we use list view dot builder then we will provide the item home so the two very important property for this is item count and item build up so item count is going to be get it from the data dot file so we will say categories dot left so it will get the length of the categories which we fetched from the data are five inside this item builder we will remove the null and use the circular brackets and inside of that we will provide the counter context and then we will get the index X okay once that is done then we are you going to use these curly braces and then we can provide a return value which return is going to be simply the widget which we want to be visible for the each item of this ListView so I am going to copy this category tile and paste it here now one thing which is very important for our category tile is if we call this and we are trying to show this but we are not passing the values because right now you can see I can say semicolon there is no error for now as understanded by the compiler but we know that if we are not providing any value to the image URL end-title then it will be none provided to this image dot network as well s this text which is going to show an error and it's not the applied process so whenever you are using some kind of these tiles and you are using them make sure to use a required property which actually make sure is to obeying you about this for now I will not provide the values it is showing me this yellow kind of brightness by which if I hover over it it shows that the parameter title is required so I have to provide it so that is similar thing which will be done for image URL s then so now if I will go over it it since the prime car and the parameter image URL is required and the parameter title is different because both of these are required so what I mentioned literally and before was that I use these curly braces for name parameters so let me show you what I was meaning that I can say first what I am providing so I am providing title then these columns and then what I can say I can provide the value well that is going to be getting by this model trial stick categories categories dot we want to have get a particular index of it so I'll say index and then I say to all what do I want I won't be category name so that's how we want we go inside the list and inside the list we define what particular item be born so as this item builder works it starts from 0 and go till the item count and in the meanwhile it creates the list then I'm going to provide the image URL which is going to be categories which is a list and index which is going to provide it as a model and from that model we want the image to our image so now if I will save this it is going to show us an error its course because we haven't specified or we are not able to fetch this data since the init function has not been called because for the init function to be called this is me should be opened up for the first time not kind of POD beast on okay one thing which you can notice that our search bar has been vanished for some reason let's find out what so whenever you are using a ListView make sure you're not using it inside a column directly and if you are this is what going to happen so how can we fix that so you just have to go inside this ListView and provide a property which is called shrink wrap and provide that to be true and if you see this now you can see we have this vertically oh my god now this is not exactly what we want right we want these to be pretty small like this and we want this takes to be the center we will fix that but let's first fix that that this should be horizontal so what we will say hey list you you our default be setter to be exist vertical but we would only want that we want this to be arranged in a horizontal manner so how I can do that I can say scroll Direction inside scroll direction I can say X is dot horizontal and now if I will save this it will be vanished again let me tell you why so whenever use and you are using a list view and providing it as pole direction of horizontal make sure to wrap it inside a container and provide it a height so for this one I'm just going to provide it something like 80 maybe okay so now as you can see it's visible perfectly fine we have the images we have the text as well okay so one thing more which I would like to do with list view is provided some padding we want a little bit padding from here and at the last as well okay so how we can do that we are going to say padding we are going to say as in sets not symmetric and they are going to say a horizontal 24 so now if you'll see we have this padding from this thing and we have this padding from this side okay that's it for the list view now we want to update these styles these seems to be a little bit small so I'm just going ahead and I don't want containment for the image since I'm going to wrap this image in another budget who provided these border ladies so how we can provide that we have to wrap our image widget but in what is it for you clip are correct and inside of that we have a property called border radius so I'm going to use border radius inside border radius I can provide that to be let's go for something big maybe around 16 I think it seems to be fine I think that's what we are using but these size is not what we want right we want this size a little bit smaller maybe so I'm going to say high 50 and let's save it to be hundred I think that's the exact values which I have used okay fine but one thing that you can notice that the width of this seems to be a little bit smaller but this seems to be a little bit larger but how can that be possible when we are providing both of them the same width well in short what actually is happening is this is bit due to its dimension initially as default the image dot network doesn't try to stretch that image but you want this for this one right so we are we going to use the property which is fit inside that we can save box fit dot cover which is not going to it kind of like a stretch but basically show it inside and try to take as much the space possible and show how much possible as you can see now it's taking the whole space one thing which I'm not very good I'm going to provide this aid so yeah not it looks fine you know it looks something like this okay what is the next step so the next step what I want to do it now is I want to provide some kind of you know space between this widget and the widget and as we are clear about margin and padding what do you think would be the answer let me give you two seconds to think about it will should be used padding should we use margin you speak it loud so that you can understand okay so we will be using Martin why I have already explained that if they're not clear do let me know I will try to explain it much better but symmetric we are going to say horizontal and we are going to use that to be around it I feel it would be fine so now I can save this okay it is pretty thick so a little bit smaller me okay so this is actually from both side we don't want that we are going to just use only and from the right a okay so once we have done that now what the next step is going to be to fix this our next in the center so how we can do that we are going to go inside this container and inside this container we are going to use an alignment property if I say environment sorry I like mint dot Center and if I will see that it comes out to be here are you may be thinking now why is it thinking that this is the center it doesn't make sense well we are not clear about what what is the height and weight but just to show what it is and if I don't see in this you can see this is the height and width of this container so that's why for it this is the center you don't want that right so we are going to provide it height in width so now it will be similar to how it is just a second now it will be similar to how it is for the back one so now we can get rid of the color and now it is visible how it is there very structured but we do want some color we want to provide it some kind of shade so I'm going to say color and then we are going to say black 87 it's too much so did I use I think I use 26 for that but sight looks good we want to update our text with providing it some styling styling the main styling which we want is the color of it we want the color to be white to make sure that it still stands out from the background and I'm gonna give it quite your white and I'm gonna give it some font weight so that there is seems to be a little bit weight and it's much more easily visible to the user okay looks good we have nature as for the phone we also can provide some point sighs what about 16 I think 16 is good enough we make and yeah that's not very big thing difference but we have it done okay so next up we want these but before reloading these wallpapers we need to fetch that data from the API so let's go on and get the our API so this is the API now not a lot of we're about a period since this is an API which requires an authorization of this API key I'm going to open something which mean terrify you which may make you feel oh my god I'm not able to I'm not going to be able to understand this but bear with me I'll make sure that he who do understand so this is called postman and here you can get a visual representation or basically you can see how or what we are getting this Jason right this season we can see what we are getting but we are fetching through this you are so you can just copy this URL go over here and paste this URL when you will do it we'll mentally get the keys from this and it as it can see as you can see this is query per page and page so what page is basically how many wallpapers we want where he is what we are searching for so let me change that to coding coding okay so now it's updated but to use this API we need to provide the authorization which I have already done I have provided the authorization and this is my API key then I can click make sure this is get because it will be initially be post but this is a get request how do I know that well they says that this is a gift they mentioned it somewhere I'm not sure how where I see that okay so overall yeah they get get thing work so just you select that to be get and this so just to tell you how what this postman is you can download this for free it's free of course nothing there but you don't have to because I am just using this to demonstrate and explain you how what we are getting and how the things are going to work okay so this is what we have so this is what we get when I send a request through this URL with my API key so you can see I searched for coding and I wanted 15 M it is for that so for page is 50 and I searched for coding so as you can see these are the images which we get so first thing which you should understand this is JSON format inside this we have two things we have a map or a list of map okay so I think the list is very clear placed is basically a collection of an item of one kind and up like that and if we talk about what is a map map is a key value pairs and map is a collection of key value pairs now if you talk about that you can see this this is a king and this is the value Rover provided to it now if over the Jason which we get it starts with this curly braces then it means that we are getting a map back but if it starts with this square bracket which means we are getting a list of map back this is important when we are fetching the data so make sure you are clear about this okay so this is the map and inside the map we are getting these keys and their values but we are not very excited about this we don't want this fan is because the we are the one who provided that page to be one per page to be 15 and so on so what do we want well actually what we want is we want these values and especially we want these values of code rate because we are making a wallpaper app for our phone and we want some portrait images so we want this URL over here so let's see how we can get to it so to get to it this is a key and it has a value but let's see what the value is so value starts with this square brackets which means it is a what is it it is a list of map okay so inside this list of map we have one last item and in this is a list item of map so it starts with this curly braces which means it is a map and inside that map we have key value pairs so this is the key this is the value this is the key this is the value so these are very important if you want you can use them but for my app this which I have created wallpaper huh I only used this one this URL which is the most important thing so we have to go inside this map and we have to get the value of this one and especially this portrait okay so this is what it is we have a map and we simply have to get these values now how to get them is what we are going to see so first what you have to do first thing first go ahead and inside the data create a string so let me make sure it's visible perfectly for you I am going to create a string call it my API it's not recommended to create in it over here you should just go ahead and create it somewhere else but you know and make sure to add it inside they get ignored okay so we have that string added to over data now we can get that so now to get the data and we're just going to go ahead and create a function for you and that function will be called then our app starts whenever we are starting the app I will fetch the trending so as you can see from the API that we have multiple things available we can either search for photos by providing it a query which is the URL which we were testing right now before but it's for restarting I am getting this curated photos right these creation of photos is something which they have on their website itself so if you go on pixels calm you can see these are the exact images which we are facing fetching so this one this one this one this one this one and all like right these are the images which we were fetching okay so we will initially call this URL to get the curated photos because we don't know what kind of a screen user have so we are going to show the most popular images and then when the user clicks on any of the collection we are going to show the images according to the collection and if he searches something we are going to show accordingly okay so let's go ahead and move on and create a function for that so I'm going to call that function get trending wall papers and then I'm going to create the curly braces inside that I am going to create a variable which is going to be the response okay okay sister what is this response so basically response is what we are getting from the API call so I'm calling this API with my authorization header of authorization key which is what we provide and it is providing merely this JSON format data so this is a whole response so now I can say response is equals to now to perform this post request get requests we use a package which is called HTTP so you just have to go to form dot dev and over here you should just go ahead and search for HTTP and just search for it click on HTTP and then go ahead and do the installing copy the dependency go to your project click on pop spread not Hamill paste that it over here click on packages you get if you're using visual studio code you have to do the same go to pub spec dot Hamel you can just kind or save this when you come to the first secure ml and added this and it will load on the packages for you okay once that is done it will show this that the process has been finished either the exit code so now what we can do we can use that HTTP to use that we have to first import it so I'm going to the same for HTTP and this one package is TPP slash HTTP dart as H GDP okay now what I can do I can say HTTP dot what kind of code query is this this is a get request so I'm going to say dot you get and then I'm going to provide the URL so what is the URL let's go ahead and copy the URL so I'm going to go to the documentation and as I mentioned we are going to get the curated photos first not these search photos so we are going to copy this URL of curated photos okay so as they mentioned we add at least one photo for our to our curated list and so on like that so I am just going to make it a string and that then ended okay now one thing is very important so there are different times of API is guys in some video directly provide the API key in the URL itself in some you are providing these authorization headers so in this one we have to provide the header to get something because if I go ahead in this one just for the demonstration don't do it don't get like worried well what is this hour I know it seems really too much so yeah if I get rid of this which is how it is right now so right now what I am doing and just providing the URL and I'm doing saying to HTTP dot get requests for this URL so what is going to happen so if I will send this this is what I'm going to get authorization field missing right so we have to provide the authorization for this if you have seen my recipe app which I have built with API of atom L in that one I actually use the API key inside of their URLs we don't have to provide any headers but for this one we have so how to provide headers you just have to go ahead and say comma and there is a property in the named parameter which is headed inside that we are going to provide this curly braces and in that we can provide that authorization and then we can say API key which is the key which we saved to our data dot dot file okay that will be automatically imported it's if it's not used can click on this go ahead there will be like you know bulb I can we'll just import that for you okay once that is done then you have it already closed so let me just close that okay yeah so now we have this response now just for you if you want I can show you what this response is so let me say brain and inside that print I'll say response dot body not to stay okay so now the first thing which is very important is as you can understand this is going to take some time it's not going to be something which we are getting the data from our database or from our data or art file which is kind of directing sale we are actually making an request online and according to or depending on the users internet connection it's can it can take a lot of time so that's why it is saying that response dot body the data or this this body which we are getting is going to take some time to fetch right so as it says let me just go over over it it says that body isn't defined the type of future response it's a future and we are directly calling it it's not going to work like that so what we can do we can actually create for this so how that works so this is asynchronous programming and now it is called but basically what you have to say you have to use this evade function it's not a function I think but basically when you provide this before this it's going to wait until this is completed once this is completed then only it's going to move on to the next step and that's exactly how it works and to use a weight we are going to use this async 208 function I hope that's clear okay so now we can actually show this okay so it's not going to show anything over here so you don't have to see here you have to see over here okay so let me run the app and ok so right now it is showing an error because this STP TB thing is imported and we haven't kind of you know restart at the app so first thing first before that let me call this when our app starts as well so that the function gets called because if you're not calling the function then whatever we are doing inside of it is never going to be called so let me just go ahead and see the error so it says could not resolve HTTP in packets there so it's not able to resolve this so to do so I'm just going to relaunch the app again and now it should ok so let's give it some seconds to get done but basically what we are looking that exact thing which we were seeing over here so that mean get the value back send this is what should be visible over there so now you can see we have the same data we have page be a per page one per page 15 yeah okay so I believe that's perfectly visible so we can see they're getting the same data and it ends with this one which means we have a lot of lot more data to show so you can see we are getting that exactly Jason part over here but you may be thinking okay so that is fine but we don't want that here but we want to show that here right so let's work on that that how we can show that over here so to show that data over here we have to save that first so let's let's do that whole step how it's all going to work so first as I explained before it is a map right and what is the map map is type of key value pairs so we firstly have to provide whenever key we are defining a map we have to provide the data type of the key and over here in this one we can see the value changes for example some values are of string types which means these double quoted these are strings but some are values of integer or you can call it double right they are basically integers so there are of different types in that case what we can use we can use a data type which is called dynamic and then I this is a map now let me give this map a name and that is going to be Jason data okay so how we can get that so we have this body available but we want to decode this body right it's kind of you know like solving secret code kind but basically we will be providing this body to a function which is called Jason Jason decode and it will do it for us actually right so we can just say Jason the code and we can provide that response third party so I don't want this to be visible or printed now so I am just going to in that and then this is done okay so now what this JSON decode function is going to do it's going to yeah get adjacent from this respondent star body okay so let's move on and see what's next so inside of this de JSON data what I can see I want to go and get the value of this key which is photos now photos is directly understand this very importantly for to is directly a key of this map because as I explained before this is a map which we are getting right because it starts with these curly braces so I can directly go inside the Jason and call the key and get the value of it is it clear because if I want the value of let's say ID it's not directly available over here so if I go ahead and say over here let's say it's a send JSON data and in this and data I say let's say ID I will not be able to get it why because it's not available directly here right it sits inside of this photos function or not photos key and this is the value right for those values value so what we can do we can first go inside the photos because it is directly available inside this map as a key so that we can get it its value now inside that what we can do we can save dot for each so we'd wait a second why we are using for each and what is for each so for each before each is basically kind of a loop function which is we want to do something again and again until some certain condition so that is what a loop is loop is something we are performing a kind of task again anarchy again until a certain condition is fulfilled and if we talk about for each let me explain what we want to achieve first and then I'll explain why we are using for each so as I mentioned before if we have this square brackets it shows that this is a list of map nota now so if it is a list of map in that case we want to go inside that list and fetch the first list item then fetch the second list item then such the third list item until we get the data so I hope you understand we are getting the data but we will be fetching the data again and again until the data has been first got it so it's a loop thing which we are going to do so for that we are going to use a for each loop and inside the for each loop if I use this we are going to get a element return and this element is going to be nothing but the value so what is repeated what is this element this element is going to be the item of it so this one up until this part okay so this is first item of the photos and this is what we are going to get as an editor okay so let's move move on and see how we can use this so inside this element what we are going to do first let me show this element by printing this so I am going to save print and then I'm going to say element okay now I can run this and show you as I mentioned before it's not going to be visible on the screen it's just something which you for a task which we are performing to see how things are working on the back end so initially what will happen our function of in it will be called whenever app starts and then it's going to call this get trending wallpapers inside the get trending multiples it's going to make a get request to this API with our API key of authorization has a header then we are going to convert that jason the code or basically the data which we get through JSON decode and inside the photos key we are going to get its Eliam all the different elements and we are going to go through each and every one of them one by one and going to print them so let's see is it working or not so as you can see we are able to get the ID of three seven five seven one four seven then we were able to get four zero six so these are basically all the different list items or basically you can say the photos value or this is basically a list ID so we are able to get the list items of this which is basically a map I hope everything is making sense till now if you have any doubts till now just come don't worry don't hesitate just comment down below I will try to answer them as fast as possible okay so once that is done what we have to do next is let me just comment this and now when we have the element what we want we want the Olympic form this element we want some certain things okay so we don't want this height we don't want this width we are not using that we are not using ID we are not using the photograph for which you should have it was not I was not just able to add it to the UI that's why but basically you let me close that don't say okay so basically what we want is I want this photograph for name I'll just get it if we can somehow use it in our UI we are not using buttons just getting it so that if you want you can show that data then we will be fetching the photographer URL we will be getting the photograph for ID and then we will be getting this source and inside the source we will be getting that we will be getting this whole grid and this is the exact URL which I am loading over here seems a little bit complicated is it yeah don't worry he will make it so just go inside the project and we will create a model of the things which we want so I'll create a dart file which is going to be a model and this is going to be a model of let's call it wall paper model so I am going to create a class and that's going to be called wall paper models and inside of that as I mentioned before I am going to have some different properties so let me place this here what we are getting okay so as you can see we will we are getting this photograph at which we want so I am going to copy that please that here just to mention the source code will be available on the github it has already been posted so just go down in the link in the description to the github and check the source code out if you feel anything you missed or something of that nature okay moving on we want the photograph we want the photograph or URL so I'm going to say string photograph reopened and then I'm going to say string we have photographic ID sorry okay once we have all these different values we also want this SRC and inside this SRC we want all of these but what you like what I am first thing I should be clicking on this but yeah so first thing which you can understand that this is this source which is a key don't have a value of a certain data type it's not a string it's not a kind of like integer or something it is actually a map and the source have a map in itself so we have to create another model for that so we will go ahead and create a model which is class and that is going to be SRC body and inside that we are going to have certain values so I will be fetching our position so I want string or H and then I want to string small I want to string portrayed first of all you don't have to make sure every name is right over here we have to enough the next function which you will be creating and I'll tell you but right now you don't have to I'm just making sure so that it it becomes a little bit easier next up when we are creating a function ok so we have this original we have small we have portrayed ok so now what we can do we can say we have an SRC model and that is SRC this one so I think now it's clear why I created this model because the data type of this one of this key the sorry the value of this key have a data type of these are actually this is a mistake which we were doing we have provided this string so let me make it integer so the value of this key have a data type of integer so we will say integer and then give them a name of that similarly over here the value have the value have a data type of string so we interesting but for SMC because it was a map so we created a model for that with all these different key and values and we wanted portrait and portrait is a key and the value of it as a string so he says string portrait I hope things are clear now we are going to go ahead and create constructor for both of these so over here come and you see you it's called with the model same name as we have provided here and we will create them a named parameter how we clear name parameter by using these curly braces inside these circular bases so you can say this dot SRC they start this dot photograph or URL and then we this start program ID this is dot photograph okay now it is become a little bit not easy to get rid of okay so this is what we have we have a constructor for this now let us create a constructor for SRC Model S and so I am going to say a salsa model and inside that I am going to make it a name parameter so this is going to be this dot portrait and then they start Ori original and then they start small okay now the first thing which comes to the mind is okay subscribe we are getting this but we want to get a particular URL right maybe particular URL of the portrait or basically this URL right the value of the portrait so how exactly that thing is going to work so the reason why I have created this model is basically what I'm going to do from this Jason I am going to fetch the value of these individuals and then by using I'm going to set those value to these models by using the setter methods of dart and then I'm going to get these values in the my home dot dot by using getter methods that doesn't make sense don't worry I will try to make it sense they make sense fine so to do so what we do we create a method which is called Factory so what it does before that let me come over here and show you what the problem we are facing and then I will show you the solution so now in this one as you can see we printed the element and this is what we are getting but we don't want this we want the individual value of this right so what we have done in our data file similar thing will be done over here that's why I'm mentioning that in data file what we did we use this setter methods that we said the model dot this and we provided the value right and then in our home door dart we use that same thing categories index and dot this but this time we are not providing the value we are actually getting the value because this is called getters and setters in this one we are getting the value so it is called getter method and in that data file we are get setting them so it is called setter got a code that is here now how we are going to do that now so we have this okay so we want the individual value so how we can do get them similarly we did for jason data how we get this photo we get by calling the key and getting the value of it so you can say JSON data so we don't want JSON data what we want we want something similar like a list so I am going to say list of this wallpaper model and I'm going to call it all papers okay so we have to read with the list of wallpaper models so now what we can do we can do something similar we have done for our categories that we will be able to call it something like this so over here like categories we can save all Pitons just wanna show you its wallpapers start we can say we can provide it and text so let's say except this is the index then I can say dot then I can get all these different values now inside these SRC option I can say I start single dot I can support rate so by this line I will be able to get the portrait so this is the Gator but before that we want to set that right so I was just showing that so I can tell you why I use this or created this list in the first place so now we have this list now you see this how we saved that in data well in data what we did we created a list and after creating the list we created a model write the model which were saving then we provided the value to the model and then when we added that model to the list same thing will be done away so we will create a model so what is the model model is model paper model wall paper model is equals to new wallpaper model just to define and defining of it inside the wall paper model I want to get the value of Jason data of which one so we basically warned the value of just a second varices oh we want the wall represent that's available inside the photos as a list so we are directly getting this right if I where directly inside of it but the problem which we are having is this element is in itself the value right we have to just get this particular key and provide that data to individual values of the model so we cannot do it directly by this place like we if we cannot do something like you know I can say something like ID because that ID is actually a integer value but what we want is a wallpaper body so we cannot do it directly that like this so what we do is we go inside that model which we created before and we are going to create a method which is called factory method and bear with me may seems like alien to you for the first time but it's easy inside this factory method what we are going to do is we are going to save wallpaper wall paper model dot drawn map and this dot from map is going to accept Jason so I am going to same map and as be dead dead before the value he will be a type of string and the value will be of dynamic while dynamic again well we haven't easy we have strange you know we want them all so that's why then I can say Jason data data then I can create ease and now from this function what I want to return is so the whole purpose of this function is it's going to accept this Jason which we have this element is a Jason went as I have printed this elia element you can see it is a Jason we are getting so the whole purpose of this function is to get the Jason and return a wall paper model make sense I hope so okay now inside of that what I want I am going to call these parameters so I'm going to say X RC and then I'm going to say J sin theta okay and now I can see Jason data SRC so I believe you are getting this you know we cannot directly provide ID or something to wallpaper model but we can do that individually by the constructor of it I would like to give you two some seconds to think about if you have any doubt plate just think about it if you have doubt comment them below we all are here do we help each other so I just want you to make sure this is clear to you because a BIA thing is very important whenever you are creating any kind of apps so yeah okay so now let's continue so once we have that what we are going to do we are going to provide that JSON data and then we are going to provide that C okay let's count it continue we have photo graph are you are and I am going to say JSON data and inside that JSON data and I am going to provide that so what is the photographic URL key so this is the key so okay now last time I was mentioning that you don't have to have this this photograph or URL and this one is same but you have to have this JSON data photograph where you are insane okay so that is what we mean because this is how we are getting that the value of that key you know we are saying that in Jason we want this value okay okay so what do you want next is we want a photograph or ID so you can say Jason data and we can provide the photograph variety then what you want then we have a photographic so I can say photograph adjacent data and then I can provide photo pho pho 3000 make sense also okay so now this is done we will be doing something similar or same for the frac model so we will say factory now why am I doing this again well what I am doing I am providing SRC as a JSON data but we want to you know kind of decode that data from that data we want to like provide this portrait URL to for you want to provide this small URL to small that's why so inside this Factory I am going to save factory and as RC model because right now this is the exact same problem happening this SRC is actually a model of these different string but we are providing it as JSON data so it is going to give us us an error it's not going to function how we expect so we have to create something similar like wallpaper model from map we are going to create SRC model dot from in that we are going to say map and then we are going to say string data type of T and dynamic that it are the data type of value and then JSON data and then we are going to return SR so model so rather than just giving it a sand data over here I'm going to say SRC model dot from map and then I am going to provide JSON data with the value of SRC now only it will be going to go fine now inside of that we are going to use our name to construct a parameter constructor and I'm going to say portrait and that portrait is going to be Jason data Jason data and yeah the same so I'm going to say portrayed and then I'm going to say original Jason date and then we are going to stay original then we have small small data okay so as you can see we have directly created this factory method who or what it is doing it is basically accepting adjacent and converting that to SRC model and that is what it is returning we are saving that in our factory method of wall table model why we created that in the first place because when we were getting the data we are actually getting the element which is a map but we don't want a map we want a model list to get a model list as we have done in the data or third file we firstly create a model and see the value to the model and then we saved that model to our list right I'm feeling a little bit faster me there is option in YouTube to slow it down okay anyways now what we can do we can call that method which we created it is wallpapered model dot from map and we can provide the JSON data so inside this JSON data I am going to call that what is it called just to say okay we don't want the JSON data because we are it's already a JSON data and we are inside of it so we can say element because we are going for each end like that so now this is going to work for us here we are going to get the model and now what I'm going to do I am going to save all papers dot add wallpaper model okay so now this is working going to work exactly how we want as I as we can expect as a programmer we cannot say hundred percent done but it is okay one thing more which is important as we discussed before that it is going to take some time so while we are doing this initially this wallpapers will be null I did the data inside that will be none so if we will try to load images through it it will show an error simply right so it's fine before some time we will fix that but the problem which is actually is even when we will get this data there will be no update in the screen hit the data will be there but the image will not be able to fetched because we have to update update the screen with a newly new updated data so how we do that we use set state for that visit set states once all this function is paying Paul we are able to get all the data we are going to call this function with a set state what it does it basically recreates the whole screen with the newly updated it makes sense okay now let's move on and see if it is working so to see it in action let me just create a tile for it you know as we did for different of for our categories we are going to create a tile for this and that time is going to be very simple but the main thing is going to be how it is introduced because it will be a grid view not a ListView okay so let me just create a different widget for it because you can understand we will be using the same grid view inside our categories inside of a search so I am going to go inside the widget and going to create it over here so now this widget is going to be called let's let's just called it wall becomes a list and to accept the argument arguments we will figure that out when we are building right now let's provide nothing over there and what is the port it is going to return going to return a container which have a child as a grade view dot okay so the first thing first to show any data in ever greater view we need it a very simple to understand hey so what that data exactly is it is a list of wallpapers so I am going to copy that and provide it for so this is basically representing let me import this this is basically representing that you have to provide wallpapers as an argument and we also will be requiring to use context so I am going to get that as well so I'm going to say context so now we will be asked to provide on both these parameters and to make them named parameter I am going to use this curly braces let me end this container with a semicolon and then what I'm going to do I let's work on the grid view so inside the grid view the first thing is cross X is count what does it mean then cross X is found means cross excels so the cross axis is vertical is Mountain because it will be a vertical great view that is the default grid view which we are using so when tickle is that it's called excess of it and within the cross access count it basically means how many items you want so I'm going to say to be two because we want to images to be visible okay makes sense right next what we want we have to provide the child aspect ratio now this is very important because if you just try an expected show if I make that to be one it will be a square image with this height and width equal but because we want this to be something like a vertical image will be using 0.6 if you want that to be something like a horizontal image then you can use it as a 1.6 I always highly recommend to play with these numbers as much as you will play as much as you will do different things you will learn more okay okay so now let's move on there is a next property which we will look at we will be providing that is going to be padding so for the padding which we are going to provide it's going to be pretty simple not very much because the main padding will be provided to this container is going to be edged instance not symmetric and that's going to be our horizontal padding of around 16 okay so we don't maybe need to provide a padding here if we feel we will directly provide that to the container now we need a mean acts as a spacer so you can see there is a this is the main axis so this space between this one and this one this one right you can see my mouse library so this space is a main axis spacing and this space will be cross X is the spacing which is this one and this one so meaning we are going to keep them same six point zero cross X is a spacing 6.0 okay what what next well now is the time for the children's without children's ListView static right so let's go ahead and create chickens for that so if I direct use this this is basically saying that it isn't list goodbye I know it is a dist well we are using this these are square brackets these represent list and office data type of widget we don't want that we are not going to hard-code this widget so what are we doing we are using our list of all different strands when you say one difference and I'm going to say dot nap well what does this lab does let's see if it can say it it says okay so I have to explain so what map is basically doing it's similar to like a for each loop you can understand it's going to return as a value but over here it's a like that you know it's like for each you can understand right and then we don't want because this is going to return some data but we want that to be in a list so I'm going to say two lists so we have to do that okay once that is done we want to use this data which we are getting and create list item from it so I'm going to say return and the list item is going to be a grid tile inside that return I am going to have a child and that child is going to be a container inside that container we are going to use image dot network and inside that England network image we are going to provide an image URL so how we are going to get the image URL so let me first name this as a wall paper so that you can understand what it is now in this wallpaper I can provide this is actually a model right a particular index model so first we'll be there as this is 0 this is 1 this is 2 this is 3 so that is we are already getting the exact model so I can say just dot and I can use the getter method so I can say SRC and dot for three so that is working fine now what do we want so we have provided container this but we have to say child first so that was the error let's fix that and provide a semicolon here okay so we are providing that over here so okay so let me also give this link now if I copy this go over here and just below this container I'll call this provide it whatever it needs it needs wallpaper so I'll save all papers and it needs context I am going to stay context and I'm also going to provide a little bit of a sized box over here just to keep a little bit distance from the category section and now if I will all reload this app because why am i why am i hot reloading because this data will be fast when the app once the app starts because in the unit state we are calling this get training wallpapers oh my god everything is going don't worry okay so in the particular space as we were facing the problem with the ListView that we are having a ListView or grid view or any kind of scrollable widget inside of a scrollable widget which is kind of column or row then our compiler get confuse what to do and then it just throws out everything we don't want that so what can we do we can just go inside this and using shrink wrap property to true still we are having an error and that is not very clear coming actually okay so we have to fix that as well oh my God look at that guys you have successfully successfully flashed the image and showing them what next well one thing which I notice is then I provided that shade to that category you know when it loaded there was no water radius to that right so we just have to copy that pod radius oops copy that and use a decoration why because we are using a bob storm squad radius and we can provide that inside the box decoration now this is the error which I want you to see so if I will save this you will see this to be an error so why what it basically means is whenever you are using a box decoration make sure you are not using further outside of it make sure you're using it inside of it if I see that knots fine okay so that we are also facing this error of bottom over code five something something pixels that basically means is we have shrink over grid view right to be like a fixed size it not kind of very scalable thing what is happening so all the data of it is going below this screen it doesn't have enough space to show that to mean that most of scrollable and so that every data can be installed we are going to fetch or basically wrap our mean continua of the body with single child is called and if I will say that you can see it it's working perfectly for okay so the score is not very it's very sticky you can call like it's not it's not doing to her so for that you can use a physics which is cramping clamp clamp things for all physics what it does what is well you don't have to learn it it's basically just use this till now I haven't use another physics book that's that this that just works for me okay so you can see it's working perfectly fine but I can notice that there is a lot of space over here I don't think I have to find that okay let's see he did so once IV containers and provided a color and let's see for how much these space color it are this container is taking okay okay so this is the problem because of the dimension of the portrait it's not able to take this you know vertical space of this this is left so what can we do to make sure these images are taking the cooler space oh right it as we did in the category section we are going to do something very similar we are going to use the fit property and we are going to say box right not cover so now I can say save and you can see it's taking the whole space which is beautiful isn't it okay we also want to provide that pod radius to this one so I'm just going to go ahead and I think the space provided between them is enough so I'm just going to put it of that and inside our wall people this time going to do what I'm going to provide them that water it so I'm just going to click on network and wrap it with a widget which is called clip art direct and save that reload that okay it's not going to see how we are not providing a pod radius sometimes I really get too much so I'll say pod radius not circular and provide that to be around eight and if I save that you can see we have some good pod videos I think it's more than that so let's try something like and I think that's exactly what we have over here it looks beautiful we are getting everything now let's move on and work on the searcher scheme and this category section okay oh my god why is okay cars is loaded so let's go ahead and stick it back so I will close everything other than home and inside this search I can we have I'm going to wrap it with a pen dinner and provide that some panel actually mark who I going to provides a lot of padding it is fine just going to wrap it with a widget of gesturedetector and what is just a detector gesture detector is basically used to check if the user is clicking safe user clicks on this I can do something by using a contact property actually for this I am going to use Inc event so you may ask okay subscribe what is different difference between them so basically interval is also going to give us the same property of on tap as well but on interval really there is a kind of visual representation so if you click on this I don't know why it's not but there is a little bit and anyway so there that is a difference like if you want to make it make it visible like there is a splash site when you click on a raised button that's what kind of properties in Quail provides but gesture detector is pretty standard or static it's not going to have any visual representation it's just going to perform the action you are going to give away okay so now in the on tap what do I want I want to send the user to navigate a dot potion it's going to take the context and then we are going to use a material thing which is route you say that I'm going to say filter and inside the filter and it's a context and that I'm going to stay what search okay we don't even have that so let's go to the search start at 5 and we are going to import material and then we are going to say Street full widget search okay why did you use the state a state full widget well I use the stateful widget because I know in this one also I am going to use that init function to get the data make sense hope it does I'll say search search okay I just need to search yeah okay so also what I want I want to pass the variable or basically the query so for example if I type over here so Scott is awesome sorry I tell you something you're like coding so if I click on this I want to go to that search screen but as at the same time I want to have this court a coding written over there as well right so I'm going to send that through this arguments so what kind of argument stateless which it can accept we can create a constructor for that so I am going to say string and before that I'm going to make sure it's a final string and that is going to be a search query okay so yeah it should be initialized so to initialize that we are you going to use the constructor and I am using the name constructor especially again what is named constructor go ahead and if you type it to search query now you can get the search query okay so what is the search query well we haven't have are getting any value from text field for now so to get that we have multiple ways we can use unchanged which work as much as there for example if I am typing for example I am writing coding so when I write C then I write o it will be updated one one one by but we don't want that much because it's not something which we are doing there is another option which is text editing controller I can say search controller fulfil new text editing controller so what text editing controller does is basically you can provide that to the text where is my text mean this is the feed I can say controller and I can provide this controller and now inside the search query I can provide the search controller dot text make sense okay now to structure that I am just going to structure the data by using options command L it's similar to Windows something buttons near to this okay what next well we have over touring now so if I will see this and type overhead coding I am G and click on this we re directly to this blank black screen what is this so well this is a container and we don't want that we want ask Apple okay Oh since when order to white this is the step for now is that so now we will be requiring the same map bar in this one so how was that looking at the end so to get that let me just show you so this is what we have so that means taking us can you start yeah this is a very happy we want this so focus on star I think the happens with and this search bar is very soon ready just in pocket instead yes exactly that's what we are going to do we are going to go ahead and copy over Empire okay that's that's good sense that what what what why is it shiny ribbon we have to import that okay then it's important okay now what start now we want the search bar okay so how can you do that then we have to firstly provide the body provide the body inside the body we have a container okay if we have a container and even have a child okay and then I have a child and then we will use quantum evaluate a second while you're using polymer game well we are using program because we want to arrange the widget won't be curly if we have this search bar which is a row then we have this you know these are all peoples but wall difference and this search bar arranged vertically so we want a corner so inside that column we want where are you search so this is the search so I'm going to actually I can just put this on the widget as well because we are using multiple times but for now let's just keep track so we are going to control create the text editing controller for this one as well so if some user wants to do searching from this is in itself he can okay okay so now we have that and now in the click we do not want to send him to the same screen again rather what we will do we will remove this navigator dot push fully and we will create a function actually now here's the great thing about creating that API function we can just copy this whole function just just literally go ahead and copy that rename that to be get search wallpaper s VAR CH and in this one we have to pass the query as well which what what what again since the evening query pass you don't remember well last time when I show this this time we know that it is accepting some query right so if I copy this URL and provide that one over here we have to provide it some 2000 cases that I got ok so now we have to say strings and then we can say query and here I can say that to be taller sign and then query ok ok now we need a HTTP it over here as well so I'm going to go ahead and copy that we need to import the API key so I'm going to import that we need to chase and decode I am going to import import and darken the world we need the ball table model so I am going to import wallpaper model this is a model class which we created and this is a list which he wants I'm going to go ahead and copy that list yeah you may be thinking we since we have not written a lot of code here we are just copy pasting and that's exactly the point we should write as this is possible now one error problem which we will face in this one but I think neither of the things are done ok so as I was saying that in this search screen we don't want the user to be clicking on this and opening this screen again what we want is rather we will be getting that query whatever you have through the search controller dot text and we will be passing that to this function of get search wallpaper so first thing before that function you want to call this get search whatever initially when the app starts itself so app for I mean the screen opened for the first time I'm going to say so we want to get this string right which we are getting from the home so how we can access the one string over here to here because if you write search directly it isn't so show the option of search query so here is how we do it we type fetch it dot search query ok yeah so now we are passing that search body in the get cells wallpaper function it's going to get the response from there of a particular query which we have which we have submitted over here and save that to our list of wallpaper models and that will be passed on to the list so now we can even go ahead and copy that Leslie this one copy that and just we start over here and I think I have written enough board I should just go ahead and save this so let me restart the app all over again and now if I type over here coding and search you can see we are air over here but it's not visible over here right so we should provide that so the search is working guys that's good but he won't the that takes to be visible over here as well and we want a little bit of spacing right so I'm just going to go ahead and copy that size box and provided that little bit spacing required and because we are facing this bottom over tor we are going to wrap our main container inside a single style scroll view and because we want the text over here so to provide an initial text to our text field what we do we go inside the unit state and over here we can say text sorry search controller dot text is it close to veg 8.65 okay I can save this and now if I type over here I have I was not able to think of something else it's not working okay so we haven't done that part so I'm going to take it search wallpapers and we are going to pass these search controller dot text and then I'm going to save that and if I search that well it should work out of the box let me see what we should have well we have written that so is it updated anything that X should be updated let me rewrote it again and let's restart it now if I pass coding here so the coding is visible over here as well but if I remove that and I type something like nerve it's not working right so we have this and inside the search controller we have this cat of wallpaper function and we want to set that but it's not working perfectly fine so what can be the problem we are providing the kawaii okay so we have to pass in the query and we are providing that to be a search or text I think which is not updated according to this which should be but we'll get back to this let's let's first set these things up because the category section is going to be really quick thing but one thing let me just quickly do is this is like kind of over at this side wait we want this to be in the center but it is this side so let me show you that rich text again so I think that is something which you will learn a lot about so just search rich text plotter if you don't know about it already open up the first link copy this one this is how I do it but yeah so now what we can do we can update that brand name thing you can put the project and go to the visit and rather than using this row you can just get rid of that rule and use this so what is rich text you can basically provide different kind of stylings in the simple single text so I can provide this one paper and we don't have a context specifically so I am going to say takes this time and something simple as font size to be 16 this this is going to be the default Texas time frame now I can save or whatever out over here and now I can provide this color separate you see font actually colored colors well this dot and I can get rid of this phone wait I don't want that and I can get rid of this squad now if I'll save that oh my god this text is lost so we want to provide this text little bit of styling as then so I'm going to copy this and paste this cut this is this make this flag and get rid of this text and if I see that it's visible but it's not exactly what we want it we want something better than this so we are going to say font weight or weight dart 500 yeah it looks good but could be good so if I go back you can see everything is updated okay now you can see we we don't have to use that potion go anything now I want to click on any of these categories and it should work like how it we want like basically opening similar screen but we don't need the search bar so I'm going to say import material and I'm going to say state full category and as I mentioned before categories is not something kind of a different API which Texas provide we are directly going to use the same function which we use in the search ball tipper but with a query which we are getting from thee this means see what is happening the first thing which we need is the HTTP I am going to copy that and we need to say Peggy I am going to import that we need JSON decode so I am going to import a dart convert and wallpaper model and work with the model okay we need this quality person so I'm going to go into search I'm going to copy both of them or maybe one it's fine because we don't have a text period do you need that okay then inside this in its state we want to call this function which is get search wallpaper with a query and that query will be get get it through this one so I'm going to say final string category name which is simply a query against Wright category and this dot category name and inside that what we can do within copy now what we have probably okay just show me that I right there now I can as we have done that we can say visit dot gotta clean it you know it will be getting that so inside this we don't want to show a container you want to show us cap old inches so minute difference this will perfectly we are going to use the same app ax which we used in this search screen we are going to say half are popular they're going to have this all same so I'm going to just copy it and remove water is not required so case that in the this one we need to import the brand name imported articles perfectly we don't need this row so I'm going to get rid of that and finish that let's now just restart this news special again so now what we want we want to open this category screen when we click on this category so we are going to go inside our category tiles and then we wrap with the widget which is going to be a gesture detector and in that we are going to have a non tab functionality and on that we are going to use navigator dot push and then it's going to be material aged route and side we are going to provide builder which is going to be context and then where we want to go so we want to go to this category screen we have named it category take three this one yeah so inside that we are going to say category name what is the name of the category where we are going to just to get this title and or to lowercase if you want it's not mass typing there where anything should be good enough but yeah that's what I want if I save this now or restart and if I click on this this is the category screen what does it close that okay it was it is loading so you can see we are learning all these so category section is working fine as well and the search is working a bike with the wildlife beautiful beautiful beautiful oh my god we forget one thing we want to show that image okay it's that is something which we have to implement so then I will click on this image I want to show that in another scheme so that view is going to be called something like image view in that I'm going to say in both material and that is going to be state let's what should we make we can make that a state full widget and that will be an image view and inside that container what I'm going to do I am going to create a scalpel one thing is very important is if you will see the app this one if I click on the image this is a hero animation of him what is happening that whenever click on the image it opens up like it is so that is the hero animation how we do that we simply wrap our container where do we have that where do we have that this one inside a widget which is called 0.00 and we provide the tag to it that that can be anything I am just going to provide the image once you are in and when we click on that hero image and I'm going to have on the gesture detector on that runs in the same gesture detector and I'm going to provide on tap in the on tap I'm going to say what should I say well in the on tap I am going to say go to navigator dot push and material age out the side times we have Ritter then we provide context and then we are going to just send them to imagery which is this one okay so what do you want inside image we will want to show that image inside image view yeah that that that makes it how we want to show that is basically it's going to be a whole container and actually is going to be stag if you can see if I click on the image it's a full image and then it has some thing above above it so I'm going to use a stack for that I'm going to say children first thing first I'm going to use an image not Network and we need to get that URL so how can we get that through here I can say final string image URL and I can say image view this dot image URL and yeah you use that we can just say we checked dot image URL and it should work fine so another problem will be there but you know because which we I have already showed you so I don't think I have think I need to show those risks we just can directly use the fit property over here why because it will do no we want to make sure it takes the whole space and we can do one more thing which is we can provide it a height of it okay so we are going to provide the height and width to it so I'm just going to wrap it inside a container and we are going to say the height so what the what is going to be the height height you want the height of the dispelling so how we get that we get the height of the display by using media query dot off context not sign is not height and how we can get the width we use weight by using media query dot of context dot size dot and we can save that down so we want this very beautiful looking button it's basically a container I'll show you how we can use that so this is the container we have now go to stack this image so this this is going to create an image and it's that image is going to cover the whole screen now what we want you want to have these two buttons above it so these two buttons are arranged vertically so we are going to use a column for this inside that column B simply have one container and then we have a text then we can say child inside the texts must to provide it some values over the same cancer it's going to have some styling which is basically the text color at least on ballistic color whether it's not white oops first off quite good okay now inside this container I have this gradient thing right going on but before that I also have a column inside that which is basically because there is an easement of vertical arrangement of to visit right so that's fine so we have the first visit as a text and that visit is set for paper and then we have next we have image will be saved in gallery okay now what we are going to do next well we have this set wallpaper we need to provide a decoration to use that gradient things I'm going to say box decoration and inside the box decoration I am going to go ahead and say gradient linear gradient and we use the colors I'm going to use them from this so where is the image view we are using colors this one okay so these are the colors which okay we have to first three colors and then you are going to provide it a list and this is what it is now let me just close this guys and they show what we have this one so okay one thing more we have provided the hero in this one but we haven't provided that hero over here so we have to provide the hero over here so I will wrap this budget with the hero sorry hero and inside of that hero I need to provide that tag and that is going to be I am G word so Bridget dot int as when I expect this should work let's see let's see what happens the key thing is not working why is that well I have to wait oh my god oh how was Miami like I have to read the mirror to this category Santa's going to get rid of that they move this widget we have on so this which we don't want so let me just get it I provided this laughter all these guys sorry for this we actually want to go inside the widget great tile HP in the container here oh like this on tap property we have so I'm going to wrap my hero with widget which is going to be a gesture detector should be doctor inside that on the on tap we are going to send the user to the image view inside image view let's make this a required parameter so that it shows that parameter image URL is a wife so I can say image 1 and that would be mature I know we have that as a wallpaper but dot star Z dot portrait and if I see this now which shows that tag is not equal to none okay so that that should not be null so let me update that I am going to say tag and that is going to be same so I am going to say save okay it's it it's working perfectly fine but this is being like our let me go to this this container is like at the top we don't want that so first thing first I'm going to provide the same width and height to this container and then I'm going to say alignment what does alignment mean Salima basically helps us to align the child of the container so the child which is a column we want to align this at the bottom center so I'm going to say bottom syndrome if I will see that you can see it to be in the bottom bottom center again you are at the top row [Music] actually the reason for that is it is all aligned but this column is taking the whole space you know the vertical space so we have to align the children of the column as well so the main axis alignment is this and in the mean X is alignment of column you know this is vertical you want to align the elements in center not in the center I actually in the ends I'm going to say that I'm going to save that and now you can see it's over here we want to have some space from bottom as well so below this I am going to stay size box hide around 50 things should go fine and you as you can see it's working perfectly fine we want to provide some border as then think we want border radius we want border so the first thing is border let's provide support I'm gonna say border and they're going to say color and that okay we have to support it all and then we can provide color so what is this this is basically to provide a border line kind of so we can say color start white we are using a 70 shape it's just kind of yeah so you can see this is now it is and actually it agrees this to white 60 just to make sure it's not highlighted enough then I'm going to go it a bit or one I don't want this to be main point of vision kind of that you know everyone so we can say border regions and we want this what am i doing then radius circular around 30 that's what we provided to our search all right makes sense but we need some pairing so I said pairing okay for this what I'm thinking is let's do one thing that we provided updates which is going to be media query it out of context so basically dot sign start with / - it's basically the width of the container half of the width of the container again that makes sense I think so now you can say style text style after this text is too big I don't want that to make that like that and I think the padding is required as well so I'm going to say padding edges it's the odd symmetric I'm against a horizontal around eight okay and I can provide some vertical padding as well which is going to be our agent okay I think I can make some changes like this okay yeah then we also want to give it some color which is going to be color colors or white this should be more highlighted than the border course on this model is that to something a little bit lesser than that I'm gonna go for 54 and above that zero and say that same same styling will be provided to our set wallpaper but of course the text size would be around 16 something so I'm going to save that now you can see that set wallpaper is there we want a little bit of space between these four key so I'm going to provide that that's too much we don't need 50 is missing so I'm just going to make that something like 60 and if I will see that you can see we have a space and we have this beautiful bottom of it one thing which is also important is we this quiet was not working fine for some of the images which have a white background so I also provided a black color to it like basically a container and stacked it with a container which have a black color to it so what I did was is this I said a stack and I'll try to stack I said children I pasted this as obvious but also I created a different container which is going to be a container which is going to have a seem great that as this one and also I fix to be height so I can say hi to be around 1550 is but I'm going right yeah 15 so I'm going to provide the same height to this and I can see color and there is a special color for the changes it's not too flat it's not too wide this one with opacity let me just use the collective so zero XS FF is easy because guy using the color hat code and that's 100% opacity but this is the color code of that so I can use this with opacity 0.8 with opacity okay now if I will save this you can see so lame now what we want then we click on this set wallpaper this is cream should be true okay so once we have provided this what we want next is when we will click on this button this image should be closed so how we can do that we can basically surround our stack with a widget which is called an gesture detector and that is going to detect any kind of counter functionality for us and we can call a function of warning so to close the screen you can simply call navigator dot pause and it's going to close the screen for us so if I will say this function if you click on this it's going to close now now very importantly you are going to require to use something so that we can save this image of the Kami how we can do that we are going to use a plugin which is called this image gallery saber this is a plugin which we will be using as I mentioned the source code link is below so we can just go ahead and copy that from there we are going to use M H gallery and let me import all these different which we would be requiring where let's just not add this but we need random we need do we need the per mention handler as well and I'm also going to use this cache that networking match and I think that's fine now just click on packages Tata gate these are different things that you will be using since the video is already quite long so I will not be using the web launch it's not very complicated means it's a simple thing but we have to try it on time thank you so much sir okay so I have a updated that all now what you want you want to save this right so for saving that we just close this Lib folder and inside the home itself or let's key the function hearing so let me make it very simple for you guys because the in that function there is not much to learn if you go inside the home it's a function created for you right so I have already created a whole function for that this is a save and this is for asking permission it start simple whenever you want to save an image just copy this function and paste it anywhere it's going to work for you very easily you may need you obviously need this import Kathy saver package and import this deal as well list and import this are not HTML I owe this permission handler is that and this is basically going to help us to type data and basically this all will help us to you know save the image to the gambling now for the image path we actually are going to have a string you can define it here if you want you can to find it directly over there but the thing is we need to provide that a value right so that's why we included that random string I don't know where I'm providing that value but yeah you don't have to it's it's it's going to be provided over here so I have that to be an error it says it's a final and should be provided just give me a second why am i saying it's a funding stream well I'm I need to use this variable path not the image path suppose that and Pinkston okay so yeah this is basically the UI limits you have to pass rate so it's going to be image u I don't think so just provide that and you need to do now just all this a function from the Navigator top pop so I'm going to actually just call this function and I'm going to I'm going to call this navigator dot pop after that so once that all is done okay I am actually already doing that in the save function so now it will work perfectly fine for Android for now but it will not work for perfectly for the iOS so for iOS there is a little bit important condition to do and that is to add just two three lines of code to your iOS folder and then runner and then info dot P misty inside that we have interesting let me show you image gallery stable go to power up dot dev search for image gallery saver open the first link and this is what you have to add in the ims NS photo library add uses description so you have to go to the runner folder what is this not this one you have to go to your iOS then rather then input or finished inside that just up to the string any one string it doesn't matter which is string creator key it's like an HTML engine like a stable we have these so inside the key page to this photo users description and this is the description so then you can provide a string which is going to be strained and that is going to be we must will save image gallery okay then I'm going to close this and we have it done okay so make sure to make sure it's working for it works perfectly fine I'm going to close all the app and I'm going to rewrite this so let's wait for it for a second and if we see what's left for now we have worked on almost everything and if this function works we will be mostly our beer will be completely with the app so yeah let's let's wait for a second or two one make sure it's working fine so in the run we have launching main door dart on iphone 11pro you okay so as it is finally open now if we click on any of the image you can see we it's a hero animation which is happening so if I click on this set wallpaper it says lots are lost connection to the device so what are we missing we are on this and let's see we are may have made any mistake in this we have the system we have must put save and we have this key we have this key we have string we are also using that permission Handler okay so inside the termination handler what we have to do platform okay platform dot is we only have to do this if it's an Android if it is not we don't have to wait for asked permission let's read on the app again this permission handle is going to take care of that okay so it is successfully launched now if I click on the dimension click on set wallpaper okay it asks for the permission that this particular app would like to add to your photos and then this is the description which we provided must to save image to gallery it will click on OK and that image should be added to the gallery now let's have a look it's the last image so yeah it's working perfectly fine on the iOS and let's see sweetheart we are able to get the categories if we click on wildlife we are able to get these as well and if I click on any of these you can see we are getting this option okay one thing which we missed was this in black color don't have that border-radius so let let's fix that quick so to fix that we basically have to copy the border radius of this one go inside this and we will say decoration then box decoration now since I mentioned before we are not allowed to use color outside if we are using a box decoration so we will do that same and if I will say that you can see that it's gone also one thing which I want would like to have is basically when I click on the cancel this the screen should close so I will wrap it in a widget it is going to be a gesture detector and I'm going to have a non tab which is going to stay navigator dot pop and that's all so if I will save that now and click on cancel it's going to close this if I open this cancel open this cancer okay so it's working perfectly fine guys I hope you learned a lot in this especially the API stuff because some people like it really terrified with a dance I was also initially so I hope I was able to clear that for you you will you also learn about saving images to the database and if the if your project is successfully completed make sure to comment your github link I'll be more than happy to check them out and yeah thanks for watching till the end I'll see you in the next one make sure to subscribe if you like the content of which I'm voting over here and also let me know your suggestion any feedback if you have in the comments if you liked the video make sure to hit that like button you know and make sure to hit that notification bellow so if you are don't want to miss any other upcoming content so yeah I will see you in the next one

Channel: Sanskar Tiwari

Views: 56,075

Keywords: Flutter Wallpaper App Tutorial, Build a Flutter Wallpaper App, flutter wallpaper app tutorial, flutter wallpaper, flutter wallpaper app source code, flutter wallpaper app, build a wallpaper app with flutter, wallpaper app kaise banaye, wallpaper app source code android studio, google flutter for beginners, flutter full app tutorial, flutter tutorial 2020, flutter ui tutorial, flutter ui design tutorial, flutter projects for beginners, flutter app development for beginners

Id: EKdAU3l_0gA

Length: 138min 4sec (8284 seconds)

Published: Wed Apr 08 2020