Flutter Essentials - Learn to make apps for Android, iOS, Windows, Mac, Linux (Full Course)

hey what's up guys welcome to my flutter essential course and in this particular course we are gonna talk about the essential parts of flutter when you are starting your journey with flutter so if you're learning flutter so this is the first course which I would recommend you to take because there will be all the essential things which you need when you deal with flutter especially if you are someone who has never worked with flutter yet so this is definitely good to go course for you and as you know that the all the courses which are available on empty barrel school they are very short and concise courses which means you will get the value out of it without wasting your time so that's the idea so let's before we start the flutter development then first of all we need to install flutter so we will go to this flutter dot dev website as you can see flutter dot tail and once you go there so this will be something like this you will click on the get started button which is on the right top so I'll click here and as soon as I click here you will see these kind of options like Windows Mac OS or Linux you can select any of them or depending on what operating system you are using so I am using Mac OS then I can just go here and I can install the flutter version and guys one more thing is that right now what you will find here is this stable version which is one point twelve point thirteen hotfix seven so this is something which you can use although I am on the developer Channel so there are developed channels master channel and beta channel stable channel so there are a lot of channels so every channel has a purpose like master channel is the latest one where you can also see a lot of bugs because it's the latest one then comes the develop arm channel which is for developers and it has slightly less bug then on the master Channel then comes beta which is again better version and then stable which is supposed to be bug free so this is the and here you will follow this guide I am NOT gonna show you how to install everything from scratch because that will be a lot of time but you are open to comment if you see any end of issues and will definitely fix it out and then for Windows also you need to make sure that everything is like how it has been explained here you can download either the zip or you can maybe use git to clone this particular repository and one problem which happens with Windows user a lot is that they forget to apply this environment variable and then they see that their flutter command is not working so please make sure that you follow the guide entirely and then you can do something like you can go to your terminal and you can try to run flutter command and you will see these options if you are not seeing them that means the flutter is not working properly so once you install it whether you are using Windows Mac OS who bun to Linux or whatever you can definitely go ahead and then you can go to your console and then what you have to write is rather than just flutter if you aren't sure that you have installed flutter properly then you can run flutter doctor so what flutter doctor will do for you so flutter doctor is basically kind of a doctor which which you normally understand right so it will see all the things like everything is proper or not and what you are missing or what you are not missing so as you can see my Android tool Chen is ready Xcode is ready Chrome Android studio I have two versions so that's why to Emerald Studios IntelliJ IDEA vs code and I have some connected devices as well and you can see I am one channel dev with version one point fifteen point two but because I am doing lot of experiments as well so that's why I am using this channel you can use it but then there can be some bugs so I suggest you to be unstable only and guys one more thing is that if you want to develop for Android I would recommend you to download Android studio as well so that it will come with all the necessary things so that there should be some the Android SDK manager there should be the emulator and all that stuff so they don't feel that kind of problem when you are dealing with Android app development and if you want to develop for iOS then you need a Mac OS and then you also need Xcode for that so that is something which is important and for me I'm using vs code but then also if you are gonna use vs core then also I just say that install Android studio because there is no harm installing that because sometimes it can be useful so we will definitely talk about that in future as well so now I am done with this part in vs code if you are using vs code if you are not using vs code then also I will suggest you to use via score so that you can get a better maybe build time results and also better development experience so once you are on vs code you have to go to extensions and you have to write flutter extension and you have to install flutter extension from here and then you can also install the dart extension either of them will work but it doesn't matter if you install both of them then if you want snippets then this rash lambda are snippets which you can definitely use and this can be pretty handy although you don't necessarily need it and there are some couple of other extensions like prettier and get lens all those things which you can use definitely you can check my vs code video which I'll show you which will be there in the notes and definitely you can see what extension you can use there now coming to the vs cool we will press command shift P and if you are on some other platform let's say windows then you can replace commands with control so control shift P and first of all I am gonna change the toggle mode and then I'm gonna write flutter new project as you can see we have a new project here and we can click here and then we have to give the project name okay so I'm gonna give it awesome underscore app okay and I'm gonna click enter I have to select my folder and then this will create my project okay so it will take some time to create the project for me and as you can see by default what we will get our US language is swift and Android languages Android X so I gotta lean so and it is supporting Android X so that's that's what we get and then we are also gonna see how this structure is working what what it all means and I'm gonna just run this quickly so that you can see what's actually happening with this default application which you get and in the meantime what I'm gonna do I'm gonna I'm gonna show you something so I'm gonna show you this by the time it's running so as you can see I am on my iPad and this is how the structure looks like right as you can see here and I'm gonna just explain what this means so the first two is that dot dot tool and dot idea you can ignore these tools and I'm just gonna point them out with black these we don't need actually or we can just ignore it then there is this Android folder which contains all the Android code which native Android developers usually write and if you are like somehow related to Android app development if you know anything about that then you can definitely check it out then there is iOS folder which contains all is related stuff and iOS developers can understand that properly and then there's Lib folder where we are gonna write all the dart code and then there is Mac OS for desktop support which we are gonna not use and then there is test which is for testing which we will definitely use in one of our courses and then there is web which contains index.html and all that stuff which we again gonna see and then what we are going to do we are going to go back here with this one second guys so we can see this is what we get one two three four five six seven eight this is the counter application which we get by default and then guys one thing also I would like you to install is kit so if we go to google and we will write kit then the first link which you will get you have to download this so this is a version control system which will help you in keeping your code up to date as well as you can check what you have done in history you can create multiple branches or all that stuff and as I told you this is just not about flutter there are many other things which we will learn during this particular course or in other courses as well so these are the things which are actually very useful for developers when doing real world development so definitely I would suggest to do download this and then we will set up get in next video as well and then we will see this home page properly in the next video so guys this is what we have got this is the counter application which we have got so now again talking about these folders let me just show you what we are getting here so Android as I told you there will be all the Android related code which you might be familiar or not and similarly for iOS and then in the lip we will keep all our dart files so basically this is where we are gonna work then Mac OS is again the same thing like iOS and the test which will have all the testing files and for web as you can see there is index dot HTML and all those files and another important file for us is pub spec dot e ml where we will keep all the dependencies so whatever third-party library or plugin we want to use we are going to use it here ok now moving ahead this is something which we have and now what I'm gonna do I'm gonna open my terminal by pressing command J so I am gonna just say toggle screencast mode and then if you will press command J or you can press ctrl J in Windows and for specifically terminal you can press control and tilt so that it will open the terminal and here you can write gate and in it so basically the purpose of this is creating a local git repository which will track all of your changes so as you will see here this is my version control symbol if I will click here then you can see these are all the changes which are needed to be committed so I will commit these changes by writing here a message initial commit which means I am saving it technically to my local repository and then I can push it to my online repository if I want so this is something which is very important because maybe if you want to go back and see what you have done or maybe you want to keep track of your code then this is actually very important now as you can see we are here on the master branch I'm going to change the branch and I'm gonna name it dev hashtags - one which is chapter one this will help us in keeping the track of all the chapters which we are gonna cover and in each chapter there will be some specific or detail like there will be for one chapter for networking one chapter for sheer preferences and one for layout design and all that stuff okay now concentrating on this particular part as you can see we have this default application which is not very friendly at least to understand what actually is happening so I'm gonna delete all this code and what I'm gonna do I'm gonna write void main which you might be familiar with already right so wide main is from where everything starts is like similar to what you might have done in your any other object-oriented programming language and we can see we got some error then there is this one method here in floater which we call run app it acts accepts and particular application so if you see here it takes a widget so be a writer it cannot understand it so basically it takes three kinds of application which you can give let's say first one will be widgets app second can be um you can say material app okay so we can say material app and third can be Cooper to you app okay so the difference between them is I'm gonna just show you so if what I do I can import from here widgets dot dot so this will give us widgets app so I can also show you so this run app if you will see here that it takes an app which is again a widget so everything in flutter is a widget and end of widget is a component and for example this is the phone you can see everything here like this Sunday Feb 9 is also a widget these buttons is or also the widget especially this google search bar is a kind of a widget and these all icons in a row is of widget itself so everything is a widget flutter so if we go back to our application here we can write widgets app so widgets app will work the only problem with widgets app is that it's a little bit low level which means that it will not provide you in build design support by itself for that you can use something like a material package so we can use material flutter slash material dot dot and rather than this visits app we can use material app ok and let's say if you are fan of human interface design which is in iOS or Mac OS so what we can do we can also import this is Cupertino dot dot and rather than material app we can write Q Patino app q Pertino app and this is something which you might have seen in whatsapp that it's Android application is little difficult or different than its iris application which I don't know if you have seen it but yes that's that's what people do sometimes as a brand then they show different kind of UI depending on the operating system so that's also you can do but for the simplicity and for a universal design we are gonna use material dot dot at least for now and then in future we will also discuss the Q part you know design so I'm gonna use your material app and then I'm gonna use something like you can say here we have few properties like home so I'm gonna give it a home widget which is let's say a container itself so a container with a color so color so what is what this material is giving is giving us is like there's a lot of widget which it gives and then it gives us a colors library which we can use to import any of this color here so I can say like let's say I want to use a purple color so I can just search here and a lot of colors so I can right purple purple so as you can see now nothing is reflected here because we have two buttons here which are very important one is this the flash button which is hot reload and then this green button which is hot restart so whenever you do some changes in material app and if that is a part of run app then you have to do a hot restart and then we can see the changes that everything is purple not right and then what I'm gonna do here I'm gonna give it a child as well so child let's say and the child can be a text widget okay so a text and then I can show some say something like hi flutter and you will see here that there should be some flutter but it is it's like somewhere invisible or we are not able to see it anywhere and that's the problem with this so we need to say what color it is and we need to specify it more so right now it will it will not reflect because we haven't done hot restart as well so that also we need to do so once I will do hot restart then you will see high flutter on the screen the problem is that it is not looking very great and you might have heard me saying that material package if we will use then it will give us better design but it's not looking good so what we can do we can create a new widget from here which is a stateless widget so if you will write STL then it will give you a shortcut to write this visit let's say homepage okay and we are gonna copy this container code from here and we will paste it here and everywhere you need to see that it will either extend stateless widget or stateful widget I show you the difference what is the difference between them then it will also override a build method so this extends means that it is inherited something so it's like parent and child relationship so you are as a child must have inherited few things from your parents so that is like this home page is also inheriting this build method from its parent and then some other things as well and overriding it means that whatever they have provided you will overwrite it with your own like they have given you of all it is some kind of you know think that every parent will give their child a wallet and then they can override it that what they want to enter in that wallet or what they want to keep in that wallet so that's up to you so this is the same thing we have done now rather than this container we will call it home page and once we do that and though as you can see now if I do a hot restart everything will be remaining the same but this time if I will change it to high flutter to high flutter app then you will see we can see the changes quickly as soon as I press command S or I as soon as I press this hot reload so once you are out of this run app method then hot reload will start working so that's also what you can do and now it's again still not looking so convincing so we are gonna use another widget which we can call ski fold so scaphoid is basically kind of a structure which has some basic widgets like an app bar so app bar if you will over here then it will show you that it takes a preferred size widget which can be a bar itself so a bar widget we can use then it has many properties as you can see and we are going to use title property and as you can see on the right hand side our app is looking much better now and then we can say text and here I can say let's say awesome app and as you can see this is looking much much better now I want to change its color from blue to something like a purple so inside this material app we will come back and here there is something called theme and which takes a theme data so I'm gonna select it and I'm gonna say that I want that theme data and inside that there is many properties like brightness font family canvas color accent color card color and lot more things I'm going to use primary swatch which is a collection of colors which we can use so let's say if I say colors dot red if I give red color then it will take some combination of colors depending on red and it will give it to entire application so I'm gonna say here purple which means it will give purple to all my colors like purple as a primary color and other colors which is which suits best with purple and now I'm gonna do hot restart because I am doing changes inside the run app method so you need to do hot restart and now you can see we got purple which is looking much better and now in the body part of it we can use the same container which we were using earlier soap container and in the child we can say text and inside the text we can say hi flutter so as soon as I will say it you can see hi flutter here and this is looking great right so in the next video we will talk about more widgets and what are the differences between them how to use these widgets and where to use which widget so see hey guys so now we are gonna see other things as well like we have seen how to create our application what is what are like themes which are available or colors which are available as well as we saw is K fold and this stateless widget so stateless widget is something which is not supposed to change which means whatever you are seeing on screen let's say you are seeing this high floater so this is always going to be high float or it's not going to change which means it's stateless so any widget there is many components which you will see in particular series and every kind of component is of widget as I already told you now before proceeding guys we are gonna commit this changes that our chapter 1 is completed you can write something like this and then I'm gonna press this right key done key to commit this and then I'm gonna go here and I'm gonna create a new branch which I'm gonna say dev hashtag CH 2 which means chapter 2 so these these are some chapters which just for tracking so you can definitely visit this github repository and then you can see the branches to understand it once you are watching this course on my school so this is what you have to do now guys we will explore more widgets and now on the most powerful widget which we are going to explore is container itself so container is kind of you can say a box so if you are familiar with HTML then it's something which is very similar to div so this is what we have here in caress container so inside this body part you can see this container right so now we are gonna play with it and we will let's see what we can do with this so I'm gonna just remove this child as of now and then um we are gonna give some color to this container so let's give it a color let's say red so color start red and as you can see this time it is taking the entire screen and that's not something which I want I want a box here okay a small box so what I can do I can give a width to it let's say 100 pixels so it's a density pixel which is DP and similarly we will give it a height of 100 and then you can see we have a box here right and the red color box now we wanted to be in the center so we can use another widget here which we can just so you will come to this container and you will press command dot or control dot or you can also press this bulb here which you will see in vs code and if you are using Android studio then you can press alt enter so if I'll click here then there are many options like rap with widget rap with center rap with column so either you can use rap with widget and then you can write Center or you can directly wrap it with Center and now if I'll save it then you can see in the center of this screen this is the box and similarly it has many other features which we get from container so now I'm gonna also write the child again and this time I'm gonna say I am a box so now you can see we have I am a box now it is like very much touching the corner of the container so I don't want that for that I have some other properties of containers which has this padding so padding means that it will cue it will compress that widget and it will provide some space so there is there are two properties one is margin and one is padding margin means just left and right or top or bottom adjustment what padding means is compressing them so you'll see the difference itself so if you will use padding then it will work in this case for I am a box or text and if you'll use March and then it won't work so for padding if you see what it takes it takes our edge inserts geometry so I'm gonna use a constant as in sets and then it has many properties or many methods I should say so these are the methods like all to give that padding to entire corners let's say left right top bottom from every year and only which means that for specific let's say just for left symmetric which means horizontal or vertical and era TRB which means left top right bottom so anything you can decide so I'm gonna select all and I'm gonna give a padding of 8 and now you will see that I am a box got some padding right and if if I would have used margin here then you might have seen no difference and that's because margin is just for adjustment between those components so that's the difference so padding we are gonna use now there are other properties as you can see your alignment okay so alignment means where you want to place this child okay where you want to align it so we can use something called alignment dot let's say we want to show it in the center then you will see I am a box in the center and let's say if you want to see it in the bottom right then you can just say bottom right and you will see it here in the bottom right so this is the purpose of alignment there are a lot of enums which you can use bottom right bottom left top left top right so let's say top left so you see it in the top left so these are the things which you can do then is you might be wondering what is this child so every container or everything has either one child or many children so basically if you say that is one component so let's say row okay so row is basically there will be so if you are making a row there will be one element or more than one so in that case there will always be children let's say list view row column and like these kind of visits where it is container sized box or so small small components which can have only one side so then you will use child so I'm going to explain it more in the future as well so don't worry if you don't understand something and then the most important property of contain which is gonna be very useful for you is one is constraints which which is kind of not very useful until unless you go into deep like UI designs otherwise the most important which I'm going to talk about his decoration by which you can do a lot of things with this container you can provide gradients you can give shapes you can give images whatever you want to do so this decoration takes a box decoration so box decoration I'm gonna say and now you can see it has many properties like image color and gradient and all that stuff now there is some error and the error is saying that something related to color and the problem is guys so one you once you want to decorate something which means you have already given it color okay and this box decoration also have a color property as you can see so these will clash so either you can give a color here or you can use a box decoration so because we are using box decoration so I'm gonna remove this color from here and the error will be gone but we are losing our color so we will come here inside this box decoration we will data will give the color and now the error is also gone and we also caught our color back now if we have a lot of other things like we can give a border radius we can give a shape so for shape it takes a box shape so we can say box shape dot circle or rectangle so we can select circle and you see we will see this kind of circle and it is going beyond here like the circle and the text is text is not exactly inside the circle so container has some clip behavior as well so how you want to clip it so you can say clip hard-edged non anti-alias so make sure you are using anti-alias so that you will not see that part of like now you can see the text is not here outside this particular container so that's what you can do there is more options like none which means you will see the text and then there is anti ellyas with same layer which is kind of expensive so I will say again not to use it and then there is hard edge so just ignore them you can just use any alias in most of the cases to get your shapes properly so I'm gonna just remove it right now and rather than this shape dot circle we want to give some rounded corners right so it's it's like there is no corner this is this hard edge corner so rounded corner we can use border radius and we can say border radius dot border radius dot circular and let's give a radius of 10 from all the sides and now you can see we have our border radius and this is looking much better right and then guys um we can also give shadow to this so for that you can see we have like you can give border as well you can give box shadows so for box shadow it takes an array so we can say box shadow and then we can say color so I want to use gray color and then we can give a blur radius let's say 5 so now you will see something like a shadow here as you can see there is slight shadow if I increase the blur radius to 10 then you will see uhm better version of it of this shadow now similarly as I told you you can apply gradients so ok or if I go to this pillow border radius then there is something called gradient there can be many kind of gradient like linear gradient radial gradient sweep gradient so I'm gonna use linear gradient because that's what we are gonna use most of the time it asks for colors or begin or stops point so I'm gonna give it some colors so first color let's say we will give it something like a pink and oh it's looking so bad because at least we need two colors and second colors I'm gonna give it something like a yellow maybe let's try this and now and you can see this is how a gradient will look like right and just looking so good right and now guys I'm going to plain let's do one thing let's put this text in the center so we will use this alignment to Center it and it's looking much better and now we will move to this text so this text is again a very important widget because everywhere you are gonna use text so you should know all its properties so it has many properties like you can align the text you can give how many lines this text can take what is soft wrap what what you want to do for overflow cases but most important is this style which we are going to use it takes a Texas style so everything is here inside this text I like font size font family and the font weight so I'm gonna give it a font size of 20 let's say and as soon as I will give it 20 you can see it goes like this I want to Center them still so there is a text property which is text aligned I'm gonna use them and I can say text align dot Center and you will see the box I am a box is now in center now if you want you can also change the color of the text so let's say I'm gonna say color star to white so I can give it white and then you can see this is the white color now I want to make it bold so I can say font weight dot bold and use commas to just move it to the next line so that looks good now it is boiled as well so yeah these are some of the most common kind of you know you can use letters Heights and you know decoration also like you want to have underline in this particular text word spacing so lot of other stuff but these are some common ones which I just showed you and in the next video I'm going to talk about most important to widgets like these and let's see in the next hey guys so we have seen container which is kind of a very useful widget or text as well now moving ahead let's talk about some more widgets and we will see what else can be very useful for us and what else we should definitely consider using so what I'm gonna do I'm gonna first of all remove these bulky container like this decoration I don't want right now so I'm will remove it even I will remove the child as well so let's remove all of this so that it can be very simple and then we will give it back the color and so we can say color start red and it looks good now I'm also gonna remove this Center from this so remove this widget or if you want you can just place it like this so it's totally your call so let's place it as of now we will then remove it there is this container but let's say I want three containers in a row so how I will place this I so as you can see the center can have only one child so how I will have three child so basically for that we can use something called a of a row or a column so because we want to place it horizontally so we will use a row here and as you can see it takes children rather than a child because it can have one or maybe more than one elements or maybe zero it's totally your calls so first we will have this container which I just copied and paste it and by default it came to this you know left hand side and then I will have second container which will come to right of it and then I will have third container which will go again on the other side and then I'm gonna just change the color of second to yellow and too green to differentiate between them so that you can understand row properly and it looks like a traffic light but yeah it's looking very ugly although so that is what we have got now now what if you want it to be placed in the center right solo has a property a very good property which we can say main axis alignment four row so if it is a row the main axis would be the horizontal axis as you can see this cursor is dragging in the horizontal so this is its main axis and then the cross axis will be the vertical axis okay so this vertical axis is cross axis for row and main axis is this horizontal axis but for column the main axis is the vertical axis and the cross axis the horizontal axis so that is the difference so now I'm gonna say like say that main axis alignment dot Center to Center these elements and it looks good now you can tell me that I just want red on the left-hand side to the corner and right hand side I want the green one so you can just replace Center with space between and you will see the difference that this is on the left hand side this is on the right hand side and now you might say that okay it is touching the corner I just don't want to touch the corner a little bit of space from here so in that case you can use something called space around which will give a little space from here but then you will see that this space is not evenly mapped with this space right in that case you can use something called space evenly which will distribute them with like equal spaces as you can see this is space and this space is kind of same right so these are the things which you can do with this and then if you want there is start and so if you want to push it into the end so this is also you can do so now I'm gonna go with space evenly which looks good to me and because we have used this Center on in the top of this particular widget tree so which means that's why it is in center if I will remove this from here it will go on the top so as we can see here because this is the area which it is taking right so this will only take this space which it needs and then there is another property which is cross X this alignment like on the cross axis as I told you this will be the vertical axis for Rho so you can say cross axis alignment dot Center then it will take it to the center but because this is just a container so what I'll do I'd also wrap this row with another widget which is a container widget and this time I will give it a color okay so this container has a color let's say and I'm gonna say it color start peel just for the sake of giving it a color and you can see the container is taking teal color and that size of it is very much limited to these boxes okay so that's why the center of cross axis alignment is depending on this container if I let's say if I give it a height let's say 500 then you will see now the container is like 500 height but this cross axis alignment dot Center is working which means if these boxes are in the center right if I change this this time from center to let's say start then it will go on the top again and if I will say and then it will come on the last portion of it right and similarly we can do changes with the main axis alignment that's what we do right so these are the things again guys very important and then we will go back to Center let's say and now what I want to do I want to stretch them so if I say stretch then it will take the entire column right so this is what you can do now let's go back to Center and now replace this row with column and you will see the same things but the difference is that now it's a column so main axis alignment is actually the vertical alignment and cross axis alignment is actually the this horizontal alignment so now because we are giving height to 500 it took the and tire height but actually it does not care about the width so height is 500 but width is not 500 because it's a column okay so there is also one property that main exercise what you want the main exercise to be so either it can be minimum or maximum so but this maximum again depends on the parent that what parent provides to the maximum size so as we know the container is not providing any maximum size we can definitely have constraints there but right now it's actually minimum so now rather than height if let's say I say width then you will see that it takes entire width entire height and width 500 width or whatever width you wanna say let's say 300 then you will see it takes 300 and main exercise is spaced evenly which means the vertical alignment is spaced evenly if I will change it to space between then you will see it will go to the corner of vertical alignment and then cross axis alignment it is actually now row or you can say horizontally whatever you can see now if I will say stretch then it will stretch horizontally and that's the difference between rows and columns so these are very powerful and very important widgets which you are going to use everywhere so please keep in mind that this is something which we are going to use a lot in the next video we'll talk about drawer and floating action buttons and all that stuff so we have actually covered a lot so far and if you will see now we have now this joint container with so many you know components inside it like so many containers and this is looking very ugly to be honest so I'm just gonna give it again row and then I'm gonna give it a height which can be again hundred and we don't actually care a lot about it and so that's why we are gonna finish this chapter with these columns and rows so I'm gonna go here and I can say chapter two completed and now we will start chapter 3 where we will talk about drawer and how to create beautiful designs so I'm gonna come here and I'm gonna create a new branch I'm gonna call it Deb hashtag ch3 and this is our chapter number three now on guys I'm actually going to remove this child from here because it's actually looking very bad and I'm happy with this thing with hundred and let's wrap it in the center now let's talk about how we can have a drawer here okay and also a floating action button so first of all let's cover the floating action button because that is very easy to do in flutter so here after body because I told you that escape fold provides you an entire structure it has which has a lot of components and that's what we are gonna see so we have seen app bar we have seen body and if you'll see there are lot more widgets so we are going to use floating action button and it takes a visit so what widget would be best for it that will be again a floating action button itself so floating action button as you can see now we have a floating action button here okay and it came within a named animation which looks good now every button in float or needs to be implemented its own pressed which means that if that's a button definitely you are gonna press on it if you are not gonna press on it then it should not be a button right so by default it is null but we can do like it's it takes a void function so we can have two braces like this with the brackets as well so which means it's an empty implementation we will do something in future okay and then it takes a child so first side you can say I'm gonna give it an icon so icon is again a widget and similarly to colors we have icons library from which we can pick any material design icon let's say I'm gonna use edit and you can see this has taken the color to white itself I haven't specified but flauta understands the size and color as well so most of the widgets understand what kind of child they want and what should be the size and color of it so this is the floating action button now again there are other properties like how much elevation you want to give what should be the background color what should be the shape hero tag and if you want this you know button to be a little smaller than you can say min equal to true and then it will be smaller but usually it's a normal so we will remove this property and all we can do it let me get false autofocus horror color so these are the few things which maybe you will use with flutter for web but right now we don't need it so I'm gonna remove it then also guys there is one more property for floating action button which is its location and there's one animator as well but that's we are not gonna use right now but floating button location we can use floating button location dot what location you want to use if you want to attach it with center with a bottom bar or something it will come here and it will be attached but if you want to make it little flow tables so it will not attached to any bottom bar and it will float it will have some margin and then similarly you can do it for let's say if you want on the top so it will say start top it will go on the top and similarly you can maybe end out and float so it will go again the same place so for the simplicity and for the betterment of design I'm gonna remove it again this was just to explain you now we are gonna quickly make a drawer and how difficult it can be so with the body there is another property which we can say listen trawl and it takes a widget which is again a very interesting widget and the name is draw so yeah that's that's only what you have to do now we have a drawer and if we click on it we see this white screen which is I don't know what kind of screen it is it's it's it's it's having nothing ok now we are gonna make a very good drawer so inside this drawer you will see what properties it takes so it has elevation semantic label child so we are gonna use this child and guys um as you will see that with every widget you will see this property which is this key property so you can specify keys to every widget it's totally your choice and there can be many kinds of keys let's say local key unique key object key the purpose of keys is that it helps the framework mom in understanding that what widgets are needs to be again repainted or redrawn so it helps that if you don't provide a key then framework itself provides a key to these widgets and it helps it in actually redrawing everything so right now we are not gonna discuss it but in future we will definitely focus on keys and how to use them in some other course so because it's just essential so you probably don't need it right now so in drawer there is something called child and here we are going to use a list view and in the future videos we will talk about list view dot builder which is kind of a recycler view you can say we will also recycle the elements but right now we just want to use a list view and inside the list view we again have a children because as you as I told you that list view column rules must have children's so now in this list view the first thing which I want is some kind of a draw a header so draw header is definitely a widget hill it takes a child and in the child I can say text hi I am a drawer and yes we got the wrong guys it's looking good not the best but yes it's looking fine and okay that's that's what we have right we can also give it some kind of decoration so I'm gonna use a box decoration and then I can give it a color so let's say I'm gonna give it same color let's say purple and guys it's looking good but you know there is this problem that the upper part of it is having this gray background because the list view by default gives some padding so we want to remove that padding so we will use this padding and we will say cause agent sets dot all and we will give the padding to zero and now you will see this is looking much better right so now we have the drawer ready now we want some items so hey here after drawer because it's it takes children so we can have other elements our other visits so another very useful widget with list view is list tile so we are gonna use list style so list style gives us lot of things like it gives a leading property where we can have something on the left hand side of this particular portion so we can use something let's say an icon and icons dot person then you will see we have icon on the left hand side is looking very good now there is one more property called title we can give it a title so let's say text and I'll give it my name let's say Pawan Kumar and now we have a title as well and we can have a subtitle as well guys so for subtitle we can say let's say developer and yes we have a subtitle but then we have a trailing icon as well or trailing widget as well and everything takes a wizard so it's not like you have to give it an icon you can give anything here or text or whatever but I am gonna give it an icon and this time I'm gonna give it let's say edit icon so an edit icon is added here and this is looking very good I'm gonna just copy it I'm gonna paste it so another here and this time I will replace it with email and I'm gonna say Pawan Kumar um I will say email and I can say / one or maybe MTAC viral antedate gmail.com so these are the things which you can do and this time now our dry draw looks good but is slightly one improvement we can do this drawer header is not looking so good and if you have seen Gmail the draw looked good with the picture as well and lot of other details so we can definitely do that here as well so what I'm gonna do I'm gonna remove this floor header there is something called user account drawer header which we are gonna use and it is basically for applications like Gmail where you can say account name account email so for account name you can say it takes a visit so we can give it a widget let's say text and I can again say Pawan Kumar and you will see Pawan Kumar is coming we haven't specified the location but it knows where it should show it and then for the count email again text and I'm gonna just say M Tech where L at the read gmail.com it looks good right really good now I also want to add a picture so I can have this current account picture which looks good and the current Upshaw account picture takes a widget so I can use guys something like so first of all I'll go to Google I'll go to unsplash.com from here I can get some free images so I'm gonna say a guy or guy let's say any random guy we can take and we can take his picture so let's copy the let's open this image in a new tab and copy the address and guys this time I'm gonna use something called an image widget and dot then there is more methods to it like asset if you are using an image from your folder or application inside your app our file if you want to use your phone and you want to access a file the network if you want to download it from some network from a URL and memory if you want to take it from the memory so we want to use it from network so we will use network and I will paste the URL here and you will see we have this image here right this is looking good but it would look much better if we will use it in a circular component right or widget so I'm gonna just remove this and I'm gonna use a circle avatar okay and actually circle avatar has a child where I can actually use the same image but circle avatar if we will provide even the child then also it will not give a circular image why because circle of TOD does not work like that but definitely it has something to offer and that something is I'm just gonna show you so we got the circle there is one more property which is background image there is radius foreground color and all that but we want to use this background image which which takes an image provider so like we we saw the image widget which has methods like asset network similarly we have image providers let's say asset image okay and network image so these are the image providers which we can use and here now if I will paste this URL then you will see a circular image here and this is looking much better alright so now we have a full-fledged or drawer which looks kind of really good and especially we can add more things like on details pressed other account picture and even if you want to tap on this list of tiles then there is an on tap property which you can definitely use and once you click here you can perform some operations so that's also you can use so if you click here you can see we got some ripple effect but with email because we haven't implemented on tap that we don't get any effect so yeah this this is the floating action button and drawer in the next video we will talk about more images like how we can access images from our application we will also talk about text fields and other things in the next hey guys so we have implemented the troll which is looking very nice and also we have the floating action button but this homescreen this body part is looking very very bad and then we want to you know try to add something else here and let's see what we can do with this part also we are gonna cover the stateful widget which we haven't covered yet so what I'm gonna do I'm gonna go back to this particular screen I'm gonna search coding and I'm gonna like have any image from here or there and I'm gonna just paste it here so you can download any image and you can paste it so I have already one image so in this particular root directory I'm going to create a new folder as you can see in this test is basically giving me some error that there is no my app so I'm gonna replace it with home page so that it just not give me any kind of error and I want to import this so I can just say command dot again it's it's not going to take it because there is something wrong with this okay so we just remove that problem and now now we want to create a new folder for images so I'm gonna say a new folder and I'm going to name it assets so assets so you can see this is my new folder assets it is blank now I am going to this pops back dot y ml but before that let's add some image here so what I'm gonna do I'm gonna take one image I'm gonna drop it here so this is BG dot jpg this is one image and now we have to tell our application that there are images in one folder so now we will go to our pop SPECT or tml and here you will see we have all the dependencies like you Pertino icons some dev dependencies saying that uses materialize or design which is true and here we have some commented which is assets we are gonna just uncomment it and for assets it is using images folder but you can use any name but I am using assets so I'm gonna say assets and then slash and I'm gonna remove everything which means that every image inside the asset folder we want to use that so we have just one image but this slash means all the images or all the assets inside your assets folder so that's being done now coming back to main dot dot what I'm gonna do I am just going to remove this Center and container and if you want you can just keep that Center just remove the container and we are going to talk about another widget which is a card widget which we will see a lot so I can use a card widget so the purpose of card visit is having a card right which can have elevation and all that and right now you can see that there is no card which is visible and also I want to change the background color of this escape fold so escape word has a property called background color and let's give it a crash color gray of 200 so you can also specify the number here to give a slightly you know different variant of that color and now we have this card and now card also have elevation shape clip behavior and all that property I'm gonna use child and guys I'm gonna use a column here why because you know in column I can have many elements vertically aligned so it takes a children so first element I want is image dot asset this time I'm not going to face the image from network but from asset which means from my folders and I just pasted one image here and the name of this image is in first of all it is inside assets so assets slash and now we have to give the image name which is BG dot jpg and now this is the image which we can see okay and similarly if let's say you want to specify if this image how it fits what is the width and height you can definitely do that let's say if width is hundred so you can see the width is there but it's looking very ugly that's the different thing and if you want to give some height let's say 100 then also you can see we have this width and height now there is one more property fit and you can give box fit so whether it is contained cover so if I say contain then you will see there's no such difference right now but you'll see some differences in different aspect ratios but if I say fill then you will see it will fill it it will basically stretch it so there will be no gaps and covers contain or cover looks almost the same in this particular image only it's not the same although so cover is like it will cover it but it will not stretch it right so that's that's a good thing so cover is mostly the best option or maybe content fit width then it will fit the width and if well say fit hide then it will fit the height and yeah that's those are the things which you can do so right now I'm just gonna remove all of them and it it looks like this very nice okay and this is the image which we have now and one thing is that I still can see the card but it's not looking that great if you see we have a card here which is taking the entire screen okay so what I'm gonna do on this card I'm gonna wrap it with padding I'm gonna give some padding let's see 16 so that at least we can see the card and now we can see the card it's looking good and then I'm going to talk about another widget which is a sized box widget so size box widget is what guys it can use to have a box a particular box with some size okay and if you don't want to have anything then you can also use it for spacing padding also can be used but padding looks a little bit uglier because it you need to rap with it but sighs box is very clean and here you can just say height let's say 20 pixels so it will give a height after image and then we can have a text let's see text and I can say change my name here so very simple example change my name and we are gonna change this name okay so that's I change my name we can give some styling here let's say textile we can give a font size let's say our 25 something like that it looks good let's give it a font weight as bold okay this is looking good now guys there is one more thing which we can we are going to use and that is a text field so text field is an edit text where we can press a break where we can enter some text so text field is here I'm gonna use that and text will also have many properties like controller which can be used to control this text field then where there is style again textile and all that things which we have already seen then the keyboard type like what kind of keyboard you want you want text email or number keyboard so all of those things you can specify then auto correct auto focus on tap on some meter cursor color so lot of properties we are going to use decoration but this time it is not taking input decoration but it is or sorry it's not taking box decoration but it is taking input decoration so we are going to use input decoration and inside the input decoration there is boarder and all that stuff you can specify but first I want to specify hint text now this is not taking a text widget but it is just taking a string so I can say enter some text okay and it's looking good right it's looking really nice and I want to give it a material design feel so I'm gonna say something like what else I'm gonna give it a label as well so label text we can say name so now if you will click here you can see this is looking good right and guys one one more thing we can do here is so we can do some padding as well right so with this text and we want some distance between them as well so we will use size box to give some more distance and then we will give the padding as well so we can have some padding like eight and maybe 16 in fact it will look much better yes it looks much better and now if I click here you can see some overflow pixel issues which means if my keyboard is coming up this text here it can not move upwards which means if it was scrollable then it could move upward and as you can see our floating action button is also moving upward so that could be better but before that we can also give one more design to it so there is a border property as well so for border we can give it outline border outline input border which will make it look much more better yeah it's looking much better but we want to get rid of this particular you know problem which is this overflow so we can go to this column or we can in fact go to this entire card and we can wrap it with another widget which is single child scroll view which means it's a scroll view which can be scrollable and it can have just one single child and now we are having this scroll view if I click here then it just goes on the up side right and it is crawling but it's not giving that error anymore and our card size is also now making more sense so yeah single child scroll view for scrolling and now what I want whatever data I write here okay if I press this button this button this edit button let me just change it the icon to let's say something like sand and if I just click here then this change my name text should change okay so basically right now if you will see my home page then it's a stateless widget right so stateless widget as I told you is not supposed to change in it's an entire lifetime so we need to first of all convert it to a stateful widget so basically we want to change this change my name depending on this text field now this text field is itself or stateful widget why because every time you write something here things change right so whenever there is some change then you need to make sure that that's a stateful digit so if you will go inside text field if you'll press command click or f12 then you will see that text field widget is extending a stateful widget so that is the thing so now how we can convert this home page to a stateless widget we can click on this bulb here and it will say convert class to a mixin or converted straight full widget I'm gonna click here and it will convert it so now we will have two classes basically one is homepage which extends stateful widget and then another is homepage state which extends state and we will work with this state state is like what is the like current situation of this particular page so like if you are a human if you are a person what can be your state whether you are sitting where you are walking whether you are doing something that is your state so everything on the UI is a state so now um what I'm gonna do guys I am going to have first of all my text so my text by default um it's name is change my name let's say and I'm going to replace this change my name with this my text so my text and now you can see it has this capital letters so that means this change my name is walking now I want to need a controller for this text field so I can say a text editing controller name controller let's say if I use this underscore which means it's a private field so name controller and equal to new text editing controller so as you know in dot - you don't have to right this new keyword so if I am writing this then also it means the same thing if I remove it then also it means the same thing and now I can use this name controller with this text field so there is some controller and I can say name controller okay and now what I want guys is that actually we can go here to this floating action button and on the press of it what we can do we can change my text which is the text to change my name equal to and we can give it the text of the controller or the text field so name controller dot text so if I now write something here let's say that my name is Pawan so now if I press this button then it should reflect but it does not reflect it right but if I do a hot reload then you will see that Pawan is of like reflected why this happened because whenever there will be some change let's say now if I replace it with something else let's say I place it with Rohit so now even if I will press this button then nothing will actually happen so why does that is not working because in flat or every time you do a state change every time you want to change your UI then you have to call a method called set state and if I do that then you will see Rohit here now if I change this text to something like this random and if I press this button now then you will see it will directly reflected so this is how you deal with text field this is how you make a card this is how you make a stateful widget and that's how it works and now this is stateful widget or this state has many other methods which you can override like in its state if you want to initialize something before creating this widget which means when this screen is creating before that this method will be called similarly once you destroy this screen you can call this disposed method so basically there is dispose then there is did change dependency a lot of other methods which we will definitely talk about in future but this is about it and now this is how our chapter 3 is also completed and we will move to chapter 4 in the next video so so guys so far we have done everything on a single file which is again a very big problem with flutter if you will try to do everything in a single file then after some time it will be very difficult to read so in this video we are gonna see how we can organize this code so that it looks better and it gives a better feel right so what we are gonna do first of all I am going to create a new chapter so I'll click here I'll create a new branch I will call it dev hashtag chapter 4 and inside this chapter first of all we will do the refactoring so guys first of all I don't want this drawer to be here so this drawer is actually can have a separate file where we can write this drawer so I will go here inside this Lib folder and I will create a new file I will call it drawer drawer dot tart and inside this file I am going to import the same you know material dot dot package and now I will copy this code from drawer and try to paste it there so this is the core I will just copy it from here or cut it from here and I will try to paste it here but it will not work because you know this file cannot understand from where it is starting from where it should end so rather than just pasting we will create a new stateless widget because we our drawer is not changing right now or we are not doing any runtime change so that's why this can be a stateless widget so I can say stateless widget and I'm going to name it my drawer let's say so my drawer is here now rather this container we will return this entire drawer we will remove this coma from the end and now it is good to go now rather then we'll go back to main door dot and rather than specifying the entire drawer here I can say my drawer and now I have to do one more thing I have to just import it so it's already imported here as you can see on the top and now if I just press command s to save it you will see everything is working right so everything is smooth so similarly what we will do we will also remove this card so what I'm gonna do guys this card I'm going to select this card so this card I have selected till this braces so fall for this bracket I will use this and then I will press on this ball button and there is a something called extract method and extract widget so I can extract this widget and once I extract it it will ask me to give it a name so that you know you can create a new widget by itself so we can say something like on name card okay so name card widget so we gave this name if you will see name card widget and if I press ENTER here so you will see it will be replaced by name card widget and now we have a class with name card widget which extend a stateful widget and it takes all the properties in the constructor like my text my controller name controller and everything here now we can also make a separate file of this so we can say name called widget dot dot and here in this file we can copy and paste that code so first of all I will import material dot dot and then from the main method I am going to cut this put clasp whole class and I'll paste it here inside this and this is looking good and now I'm going to just import it so I will press command dot or I enter in Android studio or control dot in vs code for Windows and command S and now you can see everything is still the same everything is working there is no error or bug and now it's looking much cleaner just 61 lines of but guess we can do one more thing we can remove this entire homepage from here we can create a separate pages folder so inside Lib we will create one more folder this time pages and here we will create a new file we will call it home underscore page dot dot and here also you know we will import material dot dot and then we can cut this particular code from here and we can paste it here okay and this time we will import the drawer we will import the name card widget and then the drawer and we should be good to go and here in the main dot dot I will import this home page and yes and we will remove these two unused imports so as soon as I do that I need to do a hot restart and everything will start working yes everything is same and in fact if you don't want to do this hot restart again and again then you can also remove this material app from here so we can remove it and we can say something like here stateless widget and we can say my app and we can just remove this material app from here and we can say something like this and we can here now in the run app we can just say my app and that's it that's the only thing we have to do and now everything looks the same but the good thing is like you know everything is looking like this is just having 99 s of code or 20 lines of code then the home page is also just 40 lines of code drawer is also 30 lines of code and name card widget is also 4050 lines of course so this way it will be much more organized and this test widget test is also giving us some issue so now I am gonna just remove home page and I'll now say again my app and it will fix that issue as well so I didn't just gonna remove it and yes we are good to go guys so this is something which is very important organizing your code and in the next video we are gonna see how we can do networking in flutter and how we can add our dependency our first dependency in the puffs back dot e ml so keep hey guys so we have done so many things so far and I'm really glad that you could make it so far so we have seen lot of things like how to use draw how to actually use stateful widgets how to change the name using this text field and now we are gonna do some real world things like you know we have done all everything so far which is offline now we want to go to the online mode as well and by online I mean that how we will communicate with maybe you can say with the sower or maybe with the backend and then we are also as I told you if we you remember that in the pub spec dot y ml we add dependencies or which means that some libraries may be packages plugins are to talk to native code as well and to talk to maybe your back-end so that's what we are gonna do in this particular video and guys once our thing again which is very important is that make sure that you also check the notes during this course because there might be few important things or few things which you definitely want to take a look so now let me just explain you once that what we are actually gonna do so if you are not familiar with this then I'm just gonna explain you that what I am talking about actually so if I do that yeah so if you can see my iPad here then I'm gonna just explain you this so basically but what I mean here is that let's say this is what we have this screen okay and this is our computer okay so this is my computer and let's say this is my computer and we call it a client okay so when we are talking about the client which means our computer which is somewhere here or let's say in India okay and it wants to make a request so it's a kind of a request and it makes it to a server okay so somewhere on the cloud and this cloud does not mean it's up in the air this is me this just means that this is another computer which is somewhere else in the world maybe maybe in Asia maybe in u.s. anywhere it can be and now this is making a request and it wants something from it so what it will send is a request and what this server will send to this client will be a response ok so this is the important part now because this is this is kind of a communication which is happening and they have to follow some protocols now if you will just think that if you are driving or if you are going from one place to another then you have to follow some protocols you have to follow some rules right so similarly they have some protocols which they have to follow and that's what we called HTTP which means hypertext Transfer Protocol and using this protocol only they can communicate so this is what we are going to use and then the way they communicate can be in different forms one of the forms which is very popular the how the transfer message is what we called JSON which means JavaScript object notation and if you want me to explain it more then you can just call it like it's it's kind of this you can say key values payer where there will be a key let's say name name is a key and then it will have some value which is let's say PI 1 is a value of this name so this is how the actually communicates so this this is something which we need to understand and now we will actually proceed further and now I'll go to pub spec dot e ml and I'll add one dependency and that dependency would be I will go to my website or or the Chrome browser and I'll write pub dot tab and here I can search for HTTP as you can see this is the first package or you can say library which we will get HTTP and this is the version I will see how we can install that so this is how we can install that so we I just we are just going to copy it and then we will paste it inside the pulse backdoor tml below this line which is Cupid you know icons and then you will press command S or you you can just write flutter packages get and you should get exit code zero which means everything worked pretty well and I am also mask enable the screen cast modes so that you can see my shortcuts so yeah this is looking good now and now if I go back to home page I am using this you know name card widget and I really don't need it anymore so I'm gonna remove this so as well as I'm gonna remove this single child scroll view as well because I don't need any of them so let's remove this child and now we will see nothing on the screen technically so I am also gonna run this application so that we can check and guess one more thing is they are like when you are adding any package or plugin so once you are adding a plugin which means it has some code written in Kotlin or maybe an objective-c or Swift then you have to restart your app I mean restart from the scratch which means you have to stop it if it's running already and then you need to start it so that your application can understand about those plugins or otherwise it will give you some platform exception but in case of packages like HTTP or any other package which is totally written in dart then you don't have to restart your application from scratch you can just do a hot restart so that will also work now as you can see we have nothing here but now we are gonna use that HTTP package to fetch some data ok so what I'm gonna do um this we don't need anymore so I can just comment it as of now and Here I am gonna say that I am going to hit a URL okay from where we will get the data so URL is kind of an address which is similar to your home address right so every website or every webpage has an address so here if you'll see we have this dummy address which is Jason placeholder dot TP koat.com slash photos so we are gonna use this address and we are gonna paste here so so you can see this HTTP which is s is for security you can say which means it has SSL certificate and this is HTTP which is hypertext Transfer Protocol which which is the rules which it needs to follow now I'm also gonna explain you something about a synchronous programming very soon just an idea about it so this is what we have done right and then we will be waiting for some response or maybe I should say some data okay and then here in init state I can say let's say fetch data okay so this is the matter method which we are going to call now fetch data is not defined as of now and I guess one more thing is that you can see that I see these kind of errors right in on right next to this particular line and what if you want to see it then you can go to these problems and here you will see the same problem but why I am seeing it here this red one is because of an extension which is which is a error lens so if you want you install it and you can definitely watch my vs code tutorial on YouTube so that you can get the idea and now um we have to define this fetch data method so I am gonna say fetch data here and now um there are two kinds of you know communication or operations which can be done and that's what I'll explain you next so if we are talking about that so let me just tell you so let's say there are two kinds of operation one is a synchronous so we can say a sync and second one is sync so which means synchronous so let's say guys uh once you go to app is I store ok so you go to a piece I store so you ask for a piece alright so when you ask for a pizza it's not like so there is a guy this guy a he will take your order ok so you will go to him he will take your order he will write it somewhere and then your pizza will be like it's preparing right and by that time your Pisa is preparing this guy a goes to some other person some random person here he will take his order as well and then his pizza will be preparing and then he will take some others order and then his pizza will be preparing and as soon as your pizza will be prepared he will deliver that pizza to you right and then again the same process we follow this is called a synchronous programming but in case of synchronous it's more like that it's it's like you are here at a ticket counter okay and there are many people in the line a B C D or maybe you are at an ATM so you will see that once a we'll be done with the process then only we can go so which means he will give him money he will ask for ticket he will give him ticket back and then only a will go okay and then it will be done for B and then it will be done for C so this is called synchronous programming okay and when we are dealing with applications like these so we want to have experience like a synchronous programming where user does not want to wait so maybe he can do something else while that thing is happening so that's why we are gonna use our sync here and I'm gonna make a separate course for this so you don't have worry about that that if you don't understand few parts of it and now what I'm gonna do I'm going to import so we can remove this name card widget and I'm going to import here the HTTP package which we just use and we can import it as HTTP so now we can use this HTTP keyword to you know call all of its method so as you can see unused import we haven't used it but here in fetch data we are going to use it so HTTP dot get so this is there are various kind of requests which we can make like get post put and delayed so those are some of the requests or get means to get something and post means to actually create something there so it needs an URL so we already have a URL so we are giving that URL now we want it to be a synchronous so we need to call it a wait here which means wait for it until it gives you some data right and we will store it to a response which is where arm where is a keyword which we can use to store a variable and now once we receive that response we can print it using rest dot body ok so this is what we are going to do and now just - see this debug console I'm gonna do a hot restart and we got some error that named controller is not defined and something like that okay so I am gonna just uncomment this particular line here and we are going back here just clean it out and do a hot restart so you will see that this URL will definitely give us some data so this is the data as you can see this is the rate of each week god ok and as you can see this is again in the JSON form which I just described you in the beginning with the diagram that this is how we will treat this data ok so now once we got Jason we need to parse it as well okay so for parsing JSON parsing we will use something called another library which we which we call dart underscore convert so what it will give you is it will give you a method called JSON decode so now we have this data and we can use this data with this you know JSON decode and for decoding JSON it will give us the map map means it will have a key and value so we need to give it our source okay so by default the data which we are getting so you must have seen this data this is actually a string we need to convert it to a JSON object so that's why I'm we are using JSON decode and we will pass it the re s dot body so we we will get this data here and now we can also in the center here we can also check if this data is not equal to null so we can check if the data is not equal to null then show a container so this question mark is means conditional operator we are applying here and then this colon and otherwise if if it is null then in the center what you can do just show a circular progress indicator so which means this which you will see so this is not showing this circular progress indicator which means our data is known as of no okay but as you can see we are already receiving some data and let's try to print that data as well so print data and what I'm gonna do I'm gonna do a hot restart again because every time you are doing something in the energy State you need to hot restart okay so I am going it and I'm going to do a hot restart so that it can print the data and yeah it's printing the data guys and this time you can see this is not a string this is this time it's an object but the problem is that even if it is printing the data our data is still null that's why it is showing this circular progress indicator this is happening because our UI does not know that we got the data somehow we have to tell it that yes we got the data now you need to refresh your or yourself so as I told you in previous video whenever you get this data you have to when you whenever you want to change the UI you have to call set state okay and as soon as I will do it you will see the the circle is not appearing anymore and now we have got some data that means this blank container if I give it a color then you will see that we actually got the data so let's say we say color dot blue so you will just see this blue screen right so this is fine but this is now how we want the data we want the data to be inside the ListView so we will use list view dot builder okay and this way what we can do we can specify an item builder so what item build up means is that how your items will look in the ListView and then also we are going to give it an item count okay that total how many items will be there so we can just say data dot length which means this will be our item count whatever length of data we are getting and the for item builder it gives us two things one is the context which is actually I'll make a separate content on this context as well but just for understanding you can say you will see this context with every kind of widget inside this build method as you can see we are getting this context so context is basically something which have the location of your widget okay so it's kind of like every widget has some location in the widget tree so this context is basically aligned to that so basically what happens is that there is three trees which you are working on one is your widget tree then second is elementary and third is the render tree so this elementary is associated with this context and you don't have to go in detail just make sure right now that you understand that this contact is kind of a location of that widget in the widget tree and then it also gives you index that what is the index of you know your particular item and if you know that you know in programming that everything starts from zero so this index is also starts from zero okay and here we can just say return a list tile okay the same thing which we used in drawer and so while this tile because it has already some inbuilt properties like leading so for leading we can use something and we have titles so let's try to use something like title and we can use data and then we can pass the index that for which index we want the data and then we have to specify a key so here you will see that we have multiple keys like album ID ID title URL and thumbnail URL so I'm going to use this title so I can say title and now you will see this is not a sub type or subtype of widget because it's it's it's a string okay but title takes a widget so we will just copy it and we will remove this and we will use text here and then we will paste it and now if you will see then we have all that it'll say okay and we have the list view and this list view dot builder is kind of a recycler view in Android so which means it do the caching as well it do the recycling as well so it actually carries all the elements which is visible on the screen if it is not visible then it does not care about that okay this is what we have done right now similarly we will have the subtitle as well and this time we will use something called string interpolation which starts with dollar and we can actually use this curly braces to give variable to it let's say data and then index and this time we can just access the ID so now we have the ID and you can see seven eight nine ten you can see four five six seven and now why I use it use this interesting interpolation so that I can write something like ID colon space and now every element have this ID six seven eight nine ten and all and the last thing is that we want in the leading to use an image so we we will be fetching image from the network so we can use image dot network and for this we can again use data index and this time if you see we have something called a URL and Thummim le world so I'm gonna use URL so you are L and now you will see we should see the images yes we can see that and this is looking pretty nice right so this is what we can do and this is what we are fetching from the internet so you don't have to worry anymore than how to parse JSON how to fetch data using these things and this is how we will end this chapter four so chapter four is completed and in the next video we will move to chapter five and we will talk about some interesting stuff like how to make login page how to do navigations and all hey wassup guys and we have done a lot of things in the last video we actually saw how to use this package called HTTP to make Network calls we also face some data from you can say a dummy server and then we also saw that how we can use ListView builder to perform some operations also I forgot to tell you one thing in the last video which is that you can also use grid view to represent this although the information like this this this is a very long information so grid view will not make much sense but let me just tell you it's very easy to convert it to a grid view so we could just replace this ListView with grid view and then we could use it with grid view dot builder but then we need to add one more extra parameter which is grid delegate so grid delegate takes a sliver grid delicate sliver itself a very big topic which we will cover later and but what it takes is sliver clear delegate with fixed cross access count which means how many items you want to show in one row so cross X is count let's say 2 so 2 items will be shown as you can say this is now a grid view and if you want to change it to 3 you can change it and then there will be 3 items although it looks pretty bad because of that text we are using so we are going to switch back to list view this is just for understanding purposes and yeah that's that's what we did now um I'm just gonna go back and I'm going to start a new chapter so I'll create a new branch I will call it there has text chapter 5 and in this chapter guys what we are going to cover is that how to design a login page as well as how we'll do the navigation so for navigation we have just one pages of no home page so we need to design a new page quickly so here in the pages section I will click a new file I am calling it login underscore page dot start quickly we are here and we are going to import material dot dot and at the same time this is going to be stateless widget as of now so I can call it maybe let's a login page so by default you can start with stateless widget and then when you see that you need some kind of state change then you can directly convert it to a stateful widget that's how I will suggest you to proceed and then we can use a scaffold and this because we cannot see any changes here because we are using home page so we can go to over main dot dot here rather than this home page we can make it a login page and then we need to import this login page so that we can see the changes so now we are on the login page we can also remove this debug banner if you want so for that we can just write here debug show check mode banner and we can make it false so you will see that banner is gone and it's not there anymore now we will go back to our login page this is the scaffold here we will again use app bar so a bar budget and then title and in the text part we can just tell it let's say a login page ok and this is this is fine this is what we have been seeing ok and in the body what I'm gonna use I am again going to use a single child scroll view why because I want the scrolling to happen if it's a small screen and then I'm going to take a column and inside the column I am going to take some children like you know how we could have something like a username or maybe a password so those are the things which we can have but case I have already told you about text field what if I told you this time like something new so this time I'm gonna tell you that we can also use something called a form so form is another widget which can helpful in collecting like a dataset ok so let's say if you have username password or maybe you have a registration page and you want to collect all the data and you want to validate that you want to save that so you can use form in that case so let me just tell you how you can use a form so for that we will convert it to a stateless to stateful widget what's the purpose so that we can actually generate a form key and even if you don't want to use it then also we can right now proceed but in future if you want to change show something on your screen the login page then definitely you need it so right now let's let's have a form key so we can say a form key so basically this is a global key okay and this global key actually takes a form State so form State and this is our form key and inside this column we are going to have all the elements so I can wrap it with a form so form form is here now if you if you see if I haven't told you already then every widget takes up key as I told you so key is basically it represent what widget is like I mean this is a rigid but how you will identify which widget is this so you can give it a key let's say PK 1 it can be a local key object key unique key whatever you want to give it so that framework identifies that which frame which particular widget to rebuild and when ok so we will give it a form key which we have already created and using this form key we can save this form we can validate this a lot of things we can do and now this time rather than text field if you want to apply the form mechanism then you have to use text form field it's kind of same but it has some more properties like you will see it has unsaved which is important and valid data which is again important so these are like it does not have unchanged property or it has actually it has on changes so it's it is having everything which text field have but it has some extra fields as well so yeah there are lot of things which maybe you can explore but right now we cannot so text one field is there now we can have different you know controllers like be all earlier hat so you can say maybe user name controller so you can use them if you want and if you want to skip them then also that is fine as of now it is not actually very much needed but then it's good to have them and similarly we can have password controller and this will be again texted in controller and as you know we are using dart too so we can skip this new keyword so that's why I'm not using this new cube or otherwise it is the same thing and here in this text one field for the controller part I'm going to use username controller and guys this time I'm going to show you the user name is actually having let's say an email ID so we can have a keyboard type and text input type dot email address which means the keyboard which it will open if you'll click here then it will be of type of email as you can see at the rate symbol here so this is what it will do okay so that's this advantage and then we can have the decoration as well and I can call it input decoration and here for the hint text I will say inter email okay enter email and then for label text I can say maybe username just for the idea and similarly I am going to copy and paste this another time and this time I am going to call it password controller so password controller and enter password password and then label text could be password and this is looking good but if you will enter some password first of all it should not be of type email address so I can just say text so now if you will click here then you will see there is no add the rate symbol anymore so that's a good thing and also we don't want to show the password by default so we can up secure this text to true and then you will see we will have only this dot dot dot okay and every time you will do a hot hot reload then you will see you will lose every character here okay so if I do hot reload evil see that we lost actually the data in the password so for that we need to actually convert it to a stateful widget so that we don't lose it if you will now if you write something here if i do a control hot reload then you will see nothing is lost okay so this is again important thing that's why it I told you and now it is actually very much stick to this corners so what I'm gonna do I'm gonna give some padding to this column so let's give it a padding of 16 so that it does not look that bad it's looking fine now and one more thing we can do guys is we can actually make it in the center that's all so we'll be fine and then we can wrap it with a card as well so that it takes the only space which is needed so now we have a card we have text form field and we can also have a button so there can be many kind of button like a flat button raised but an outline button so there are lot of buttons even raw material buttons in the material design guidelines so we are going to use a raised button which has some kind of elevation so again I told you in the beginning as well that every button has a property called on pressed so what will happen when you will press on it right so this is looking cool and guys we need to give it a child so let's say text and we can call it sign-in okay we can also give some color to this particular button so there is a property called color we can call it let's say color start yellow maybe if it looks fine maybe orange orange will look much better so orange and for text color either you can go with black or maybe you can also say text color as white if that looks good to you so sign-in is also there we want to give some space as well between them so let's give our space with sized box so size box height and then maybe 10 let's see if that looks good even we can give 20 to be honest because Oh have a lot of space in this screen and then here as well and this is looking good guys but still it it is not in the center because our main axis alignment should be in the center and it's it's not in the center because we are using single child scroll views so that's why it's not in the center if I will remove this then it will already go to the center and if you'll see that so here it is right so we are going to use single child scroll view anyway and what I'm gonna show you the another thing is that we can also wrap this entire stuff so I am going to copy this single child scroll view and I want a background image okay so in the background I want an image the same image which we used for that purpose we can use a stack so stack means means that this is a widget where there will be items placed one on the top of another okay so here also it takes a children and the first element which we can use his image dot asset and we can say SH /bg dot jpg this is the same thing which we have already used right and now this is the image but we want it fullscreen so Steph has a property called fit and this time it does not take a box fit but it takes stack fit so we can say expand so it will expand and then we can call here the fit as box with dot cover so that it can cover the entire section right but this is looking good but at the same time you will see that this is actually so if what I can do if I just copy paste all the code again so it looks but you know the background is very visible so it does not look that good right so what we can do to avoid that so for that if we I go back to this image then there is another property called color okay so I can use color I can use colors dot black and then with opacity so I can give it a opposite E of 0.7 and it is actually like the image is kind of gone so to actually make it just dark and we can use something called a blend mode so color blend mode is there and we can say blend mode dot darken so now you will see a darken version of it and it looks pretty fine to be honest it's not looking that bad at all and then we can just wrap this single child scroll view with another padding so that okay this card is looking better now and if you want you can now this push this to Center and this will be going to the centers and this Center now we can remove and yeah so this is everything which you can do right and now what we can do when we press on this sign-in button we can go to actually the home page so for that how to do the routing thing we can use a class called navigator okay so here in the on fresh I can say navigator now navigator has many methods like pop pop means going back push means actually pushing on to something on the stack so if you want to understand with our diagram so how we will do that let's let's just see how it works so let's say if you have certain CDs so this is let's say this is actually not looking like a CD this is a very bad CD and I'm just gonna remove it so let's say we have a CD like this and on the top office there is another CD and then there is another CD so push means adding one on the top pop means actually removing from the top okay and then pop means removing another one and then pop means removing another one and push means adding another one on the top okay so this is what actually stack do okay so this is what we are going to do so we are going to push which means we want to go to the next screen so push means going to next screen pop means going back and it takes about so we can use a material page route okay and this material page route takes a builder builder means it takes a context and then what visit you want to build so we want to actually go to this homepage visit so homepage we can just say and then we need to import this homepage because it does not understand what is homepage so we can import library homepage dot dot so pages slash homepage dot dot so here we are we can remove this main dot dot and now if I will click on this sign-in button then it will take us to the home page home page right but if I will press this back button now then we can go back to our home page which we won't be needed maybe in future because once we are like crossing this login page then we don't want to come back and ten let someone press the logout button right so that's fine now what I'm gonna do I'm gonna show you the use of the form okay so how we could use the form so we could use our form key which we created so form key and we could use the current state from that so current state is what is the state of the form I mean what data you have entered what is its state and then we could say save very date and everything okay so we could say validate it could believe it validate all the fields for us and we could say save let's say we could say validate what would with what would happen if we will call it like validate so it will go to this text form field and it will check what's happening on the validate so we haven't implemented it so nothing will work so we can just say validator and we can do some operations here okay and it will check that similarly it will go to the second form field and it can check the validator here as well and by comparing all of them then it will see if everything is true or not then only it will give us so validate if you see it gives us a boolean which means everything was true or not if not then do something if yes then do something else so it's again something which you can right now skip so this is how you will understand that push means going back to going to homepage and let's say in the homepage let's say we are here and though in the action bar which is AB bar we can have some actions as well and this time I'm gonna talk about a new widget which is icon button so in the icon button I could say I have an icon so I can use icons library so I can start let's say logout which means exit to app something like this and then F because it's a button so it is also needed to have an on pressed button okay and this time I could say something like navigator dot pop so that it can go back to that screen so if I press here now it will take me back to the login page and in fact we can again make it more easy like this is looking a like kind of lot of work so what we can do in the login page we can give it a static Const string a route name okay so basically we can name this particular route so we can say let's say slash login so this is our route similarly we can give it to home page but right now we don't need it so in the main dot dot for home we have already specified login page right and then we can have another property which we call the routes and it takes a map so basically we have to say what is the route name and where it will go so we can use login page dot route name and where it goes we can use context to define that it goes to login page okay similarly we can have the same thing for home page ok so I'm going to just copy this thing from here and I am going to paste it to this particular home page as well and we can call it slash home ok and in the main dot dot we can just copy this and I am doing it with control D by the way so home page and we can say home page and now guys going to login page we actually so basically if you want to transfer some data from here to this page then in the constructor of home page you can pass some data right but let's say if you don't want to pass a data and if you want to have some simple way to run it some some clean way to write it then we can use something called a navigator dot push named which means we can pass the name of that particular route and we can say home page dot route name okay and now this will perform the same thing this is much cleaner and now if I click here then also it will go to this particular page now if I will just you know remove this application from this stack and then I try to go back then also it will take me to the login screen also it is right now it will not work because we are using virtual machine so it it does not understand what was there in the last time but if I do a hot restart or maybe file try to restart this application it will actually start from the login page which we don't want and in the next video we will see that how actually we can logged in the user and whenever he will actually run this application so if I run this application right now so it will launch the login screen but once the user is logged in we don't want to actually take him back to the login screen so that's why we are going to use something called shared preferences in the next video and by the time I'm just gonna show you once if I will run this application again then you are going to see a login screen ok and not the home screen so every time it will take you to the login screen which we don't want ok so that's this you might have seen in most of the applications so as you can say we are back to the login page and the next video we will definitely check it how we hey guys so uh we have seen a lot of things again and this time we have seen this login page where we have this form where we have username and password and then there's a button which is a race button and when we click on it it goes to the next screen what our application does not know how to actually store this state which is like you know a persistent state and we can use something like shared preference to store this persistent state in keys and values and this thing will be a synchronous as well so we actually don't know how to use it yet right so for that what we are going to use we are going to go to pub dot dev and here I can write you know shared preferences and we feel click here then this this is the shared preferences package and this is now on it's not just a packet it's actually a plugin so which means there is some code which is written in for Android it is written maybe it is written in Cortland for IIST maybe it is written in objective-c or Swift similarly on Android it can it might be written in Java as well and for web it might be having something else let's say JavaScript and some other things so it uses local storage there so yeah this is actually something which we are going to use and for that we have to go to this installing section and then we can add this dependency and guess this is probably the last course of this particular series and pardon me this is probably the last video of this series and they can be more videos I don't in the future for sure and the best part is that we will be updating this course regularly so shared preferences zero point five point six plus one I guess let me just see that yeah zero point five point six plus one exit code zero which means it is successful and as I told you whenever you will add a plug-in then you have to actually restart your application otherwise you will get an expansion exception like you know platform exception that this is some plug-in missing exception and something like that so now we are running this application again we are having two pages one is the login page another one is the home page and we have added shared preferences now inside the Lib we can have something like a new folder and we can call it utils and inside this utils we can have a new file called constant constant dot dot okay and by the time it is running we can have a class here we can called it constants and if it can constants okay this is looking good now inside this class we can have a static reference to our shared preference so shared preference and preference so prefs we can just call it perhaps so that we don't want to like you know this is kind of a singleton so if it's a singleton that it we don't want to create a new instance of it so that's why it's singleton so we can just store a static reference to this and now I will go to my main dot dot and this time what I am gonna do here here because we want to store it or the shared reference and we need to use the await keyword so I'm going to first of all make it a future and then I'm going to add a a synchronous like this particular keyword here and then we have to do something like you know widget binding so there is something called widget flutter binding so it has a method which we have to call ensure initialize that means make sure that everything is initialized and then we can use our constants dot so we need to import it as well dot prefs and we can use now await keyword and we can use shared preferences dot get instance so by this we will get the instance of the shared preference whatever instance it is having because it's it's always going to have single instance and that's why it's a single class if you'll go here you will see that this is actually a singleton class right so um this makes sense to me now what I'm gonna do I'm going to come back here and when I'm doing the login page I am going to use before actually doing the navigation I am going to use this constant okay dot let me just import it dot prefs dot set and we have set string set in set bull so for this simple data types you can use shared preferences so for set Bowl we will use and the key I am gonna say is logged in okay and the value I'm gonna say is true that which which means is that logged in is not true so what we can do now if I do if I go to sign-in and if I click here what nothing is working that's that's weird let's just see why it's not working oh we got an error that this constant dot prefs it does not understand that so which means we have to restart our application because we did some changes in the main dot dot and now if I click on the sign-in button then you see I came to this homepage right but if I do a hot restart again then it will take me back to the login page which write which I don't want because I just saved this particular property that if it is logged in which means true then actually I don't want to come back to home screen how we can do that so in the main dot dot you can see in the home part we are using login page right so what we will do here we will say just use my gone start perhaps and get me the boolean which is which is what is the key logged in okay and if it is true by default it will be false but if it is true then take me to home page okay but if it is false then take me to login page okay so this is after or this if we say this then now you can see we are back to ah this homepage and now even if I do a hot restart then also it will be always having me on the home page but if I press the back button this time then it will just you know remove this app from this stack and that's that's what I always wanted but there's one more thing we can do guys in the login page we can actually replace this okay so rather than push named we can actually replace it so that every time when we so we could say something like push replacement named which means it will be removed from the stack this login page so that there is no chance of coming back to this screen and now we have to actually run it again because and this time when we will run it so because our logged in is true so it should take us to the home page rather than login page right so let's see how that goes and I hope and I just don't hope I am sure that it will work like what we want so one more thing is guys that you can use string integer boolean most of the time and then also you can use a list as well but you have to then use something like JSON in code to like convert it to a string and then maybe you can save it and this is for small small variables and as you can see we are now on the home page rather than login page and now what you will see that how we can now go back to home page because you just told us that it is not true how to make it false right so in the home page when the person is actually you know this time this navigator dot pop will not work so when the person let's say is trying to log out so we could say constants dot prefs dot set bool and this time in the key part again I'm gonna say the same key logged in and this time the value I'm gonna give is false so make it false okay and then if now you'll press on it because it's it's having this navigator dot pop let me just open the debug console as well if I click here then you will see it will pop this home screen so now we have no screen so that's what we don't want so now we will do a hot restart and this time we will go to login page and now you will fill some data here whatever you want to fill there's no validation as of now and that's not this in the scope of this particular course so now if I press sign in this is fine but now this is actually we are using push replacement so if now you will press back button then it will not take you back to the login screen but if you might have missed this you know push replacement thing then it will take you back to the home screen in iOS there is no back button button and right there is definitely is so we need to be very careful and rather this rather than this navigator dot pop we can again use navigator dot push replacement named okay so that and I'm going to show you if I go to let's say if I just go to using this push named I go to this login page let's say login page dot route name then if I will just you know try to press this login button then it will take us to this login page but if I will press back here then you can see we are back to this home page so that's what we don't want so that's why I told you to use here push replacement named okay and there is a whole course which is coming for this routing thing there will be lot of things which you will be learning so now if I press here then you can see we came back to login page but now if I will press this back button then you know we go we went to some other application because it's it's just a debug application so that's what you can do guys and now this is how we will end over this particular course and for the time being and maybe there will be in future there can be more videos added to it so if you are watching it after some time let's say if there are more videos next to it and it's so great thing and now we are actually completing Chapter five at least for this particular course and also let me know in the comments that what you feel about this course what should be improved so there will be the good part is that if you have paid for this course there will be a lot of improvements happening all around during this course or even in the next courses and I hope that you enjoyed this particular series and course where you learned the essential things which you definitely need to learn about fluid or and then now you can move ahead you can make your applications and then you can also take real-world course where we will make a real-world application using flutter you can take flutter with firebase course which should be up very soon so yeah thank you so much guys for joining and as you know there is this source code you can access this is already in the notes you can check it out and I hope that there are so many apps which you can build using these practices which I have told you there are many things which can be improved it's not like these things cannot be improved but yeah you will learn it by the time so thanks guys for watching and see in the neck welcome back guys and I hope that you have already finished your flutter essential course but because you are a part of my choir school so there are some extra classes and in this classes we are going to cover a few more awesome stuff about flutter which in case if you want you can skip but if you if you'll use them then it will make you more productive as a flora developer so that's why I thought about covering them and in these few videos we will see these awesome things so in the first video we are going to talk about something called a future builder and how it can help us so now what I'm gonna do as you can see I have changed my branch to Deb hashtag extra class so this is the branch which we will use for extra classes and before proceeding I'm going to have a minor change here so in the Lib folder or I am going to create another folder first of all that will be widgets and then I'm going to move this drawer to this widgets and then this name card widget as well and now our home page is going to be angry because the import does not work anymore and I am also going to just import a new relative path you can see and also guys there are nodes with every lecture or with every video when you will just slide it down so please make sure that you are also at least watching those nodes because it can have some extra information which will definitely help you in your flutter journey so yeah just to make sure because you have already finished if you haven't seen those nodes then definitely you are missing something so now when we are talking about this home page let's create another page here and we are going to name it let's say home page with future builder so FB dot dot okay and I'm going to just paste my home page exactly like that here as well and just going to name it to something else so I'm going to press f2 and home page FB which means future builder and home FB let's say and now in the main dot dot I'm just going to change it from home page to home page FB so this is just for reference what and how it will look when in case of future build up and one more thing which you might have noticed is that I am using this time the iOS simulator just to make sure that everything works on iOS as well and now we are here in the home page with FB and as you can see we are using a stateful widget we have this method here fetch data which is a an asynchronous method and which means it returns a future okay although we are not returning it anything here but if we will write something like this then also it means the same thing and if you remember in the main dot dot we actually added this future keyword because we have to use this a synchronous keyword and why because we were awaiting for our shared preference to get the instance so that's what what we are doing here and now talking about future builder is guys when you are dealing with this future or when you are interacting with this future then future builder is going to give you some snapshots and based on your snapshot you can build the UI or the UI will rebuild itself based on those snapshots and then what will happen we don't have to use this set state manually we don't even have to init our state like we can totally make it a stateless widget in that case so let me just show you how that will work so what I'm going to do here this body part I am actually going to remove entirely and rather than anything else I am going to use something called a future builder and now this future builder actually takes few parameters let's say future so future means you have to say what will be the future so future is our this fetch data because it is returning a future so I can simply say here fetch data ok and this is my future and also guys um we can see here that it takes a builder as well so builder is supposed to give us the context as well as the snapshot and then it will be also a sync snapshot as you can see here if you will see builder here then you will see a sync snapshot which we are gonna get with this and then we have to and there is one more thing which is initial data if you have some initial data you can provide it otherwise you can just leave it like this and now snapshot has many things like if we want to explore it then we will say snapshot has it has this property called has data whether it has data or not then data what is the data and has error whether it has error or not then connection state that what is the status of your connection and if it has any error or required data so these are some properties so I am going to have here a switch case where I am going to check the connection States okay so switch case so switch and what we are going to like check here which will be snapshot dot connection state ok and for every connection state we are going to have some wizard drawing ok so first case will be if the connection state is a nun which means nothing is happening technically so we will return a Center a child and we will say in the text nothing is fetched nothing is fast or you can say fetch something ok because it's actually doing nothing so fetch something so this is kind of an instruction which we are giving and let's say if the case is not this but the case is connection state dot active so if it is active then we will do nothing and we will wait for another connection state and that connection state can be waiting so if it is waiting guys so what we can do we can just copy this particular piece of code and we can just return rather than text we can return circular progress indicator which we actually returned earlier as well so that's what we are going to do and then there can be one more connection state dot let's say done so if everything is done then what we are going to say is let's say if snapshot dot has error if it has error then we can just copy this particular text and can say that some error occurred so all the cases can be covered here with this future builder and if there are no errors here then we can return our list view dot builder so we can go to home page we can copy our list view dot builder and let's try to put it here and yes it looks good to go and this is showing that it is a dead code why okay so we have to apply this okay one second guys so we have to apply this outside of this has error block okay so now if you will see on the screen here then maybe if I do a hot restart okay so now it's not not working as of now as you can see that even if we restarted the application nothing worked because we don't have to actually use this set state here rather we need to return the data which we are getting so returned data so that we can return the future so this data is actually giving us a map values so we can also say map here it's optional if you will avoid it it will give some dynamic value and or yes so it's giving some dynamic value if I say nothing here which means some dynamic value which is actually this data will you then you can see we got the same result right and if I do a hot restart now you will see that it will show some indicator and then this right and let's say if you want to see some exception if you is let's say by default or by mistake you actually got some wrong URL then you will see that it will show you let me just do a hot restart so that this UI can be reflected and you can see we got some error occurred because this is a wrong URL and we cannot get some data and let's say if how you will see that if connection state is none is actually you can make this future as null and then there will be no connection state so we should see something like fetch something so in that case we can change the icon here okay to refresh and when we are pressing this button then we can actually enable a flag by which you can do a set state and it can fetch some data here okay so we will basically replace this null with the flash data and then we will get some data so this is how future builder works I hope that you caught the idea that how it works and it can be very useful right because you don't have to like you can check things like this you don't have to apply so many files you don't have to check whether this is something where if you are if your URL is correct or not and guys now because there is no need of using this stateful widget because we are not doing set state anywhere so what you can do you can totally remove everything like we can remove this we can you know remove this and we can in fact remove this variable data from here and we can just say we're data and we can also move this URL to here and we can make it final as well we can make it final earlier as well and now guys what I'm going to do I am going to make it a stateless widget and you can just see why stateless widget because it's not like a stateful widget will harm you or something but that is totally fine if so there can be lesser lines of code so that's the only difference and now this is a stateless widget guys and now it's Inc data at length okay so one more thing which we had to make right was we miss something that this data is not this data which we are returning from here so we have to replace it with snapshot dot data okay because that is the data actually we were also doing the Unity State so that way that's why it was working otherwise it cannot work now and now we are all done and now you will see that we got the data everything is fine now let's do a hot restart again and this is a stateless widget now and now we are even performing more things like you know we are showing this some error occurred and showing this Phet something then also if you see the lines of code then it's just 74 and in this case it was 79 but it was not doing that much task right so that is the difference and this is how future builder can help you and it makes code looks much more cleaner and yeah it can be really helpful so I hope you enjoyed this and in the next particular lecture we will talk about stream builder so just keep watching hey guys I hope that you are enjoying the extra classes and we just finished future builder and I hope that you enjoyed that part of the video because that can be really helpful and when you will make some real-world applications okay now coming to the next thing is a stream builder so before that let me just commit this and we can say future builder completed and also guys check out the nodes as well so now what we are going to do let's so create one more page here and this time we can say home page with SB which means stream builder dot dot and what I'm gonna do I'm going to just copy this entire thing from here to this particular place and this time I'm just going to rename it from FB to SB okay which means stream builder and yes that's this that's most of it and now what I'm gonna do guys rather than this future builder so I'll go to main dot dot first and I am going to say this time home page SB okay and rather than this okay a future builder I am going to call it a stream builder and what will be the difference so everything remains the same but the only thing is that it takes a stream okay no future so now can I provide fetch data here you might be wondering if yes then why and why stream builder so yes we can not provide this data so fetch data the purpose of fetch data was to return a future and for that we had future builder but let's say if you're using firebase or maybe your back-end is returning stream so what is a strange stream is kind of you can say a flow of data let's say there's a pipe and inside that pipe you know you are inserting some kind of data so that's what you can call a stream and that's that's what you can call a stream builder and let me just demonstrate that to you so you might be wondering what is the stream so basically what is the stream is stream is actually let's say if you have a pipe here okay and this pipe is where you can actually insert some data so it's a flow of data so let's say first it will insert one here then there will be another flow when it will insert two here then another insertion three four five so basically it's what we called sinking in stream so which means inputting some data so there is a flow of data so it's it's not like at one time there is no like it in future there is all the data coming at one time but in stream the rate occurs so that's that's why it's called a stream so this is basically called sinking and when we will output this data then we will call it streaming so yes that's that's what stringbuilder is all about and now we don't have anything like a stream here so let's make a stream so let's say we can say stream and it can in return may be a list of integer okay and get stream we can call it and okay what may be like what we want to return here that's the question now so we can return something like let's say a data and we can use something like let's say we copy this particular thing from here and we have this method here from I tribal and use assert some elements okay so we can have some elements let's say we can say list end I am gonna just copy it from here and thought generate and I can give some length let's say 20 and for every index I can say some item okay one second guys so I can say item item and then the index so maybe something like this yes and then why it's showing me error okay so basically we need integers so why am you even using it's in here so let's call it string and here also let's call it string string so now we will return this data here so return data and now rather than returning this or using this fetch data I will say fetch what was that cat stream okay so cat and stream and that's the only thing which you have to do so string is not a subtype of type int of index that's what it is saying to us and it does not have these properties so guys I'm going to remove these things first and rather than in title I am just going to say whatever here if the index just show me that and you can see we have item 0 to 19 which means 20 items and that's how streamed builder kind of works ok if you will provide the null here then also it will say the same thing as you can see fetch something and get stream if you will do a hot restart then it will show you and because our data is already with us all the time so that's why it could not show you this circular progress indicator so this is how you will deal with the streams and some in the real world course I'll show you how to actually are even in the firebase we will show you that how you can use the streams of it stream builders and firebase so I hope you enjoyed this video and I am going to just complete this thing as stream builder completed so I hope you got the idea guys so it's it's a normal flow of data which you will see with the streams and yeah that's it so I hope you enjoyed this video and [Music]

Channel: freeCodeCamp.org

Views: 87,439

Keywords: flutter, app development, tutorial, course

Id: P2IGQT3BZQo

Length: 154min 18sec (9258 seconds)

Published: Tue Jun 16 2020