Master Flutter Application Development for absolute beginners

1. Course Introduction: If you are new to application development and looking for a job to earn a decent amount of money, then you won't regret taking this course. As everyone knows that Florida is it trending technology and has changed the way we build applications. It is a cross-platform tool for building apps for Android iOS web deck stop with just one codebase. In this course, we will learn everything from scratch. It is for absolute beginners. We will understand about widgets, how to manage state navigation concepts, handle user inputs, integrating rest API. All these concepts are enough to give you confidence as a developer. So did you bled for your dream job? So without wasting any more than lens gets started. 2. Creating a new Project and understanding file structure: Now the time has come that we create our very first Florida project. Now to make sure flutter is being installed properly, we can just use a command like flutter version. First open your command prompt and then just select this command and press Enter. If you can't see any version, then you have installed it correctly. And if there is any newer versions as well, then also you can see like a new version of Florida is available. But right now we will be working with Flutter 2.2 if needed later on and ambiguous, we will upgraded but not know. Crf data is properly installed in your system. Now to create the Florida Project direct to my kids are two ways. First is using Android Studio. If you use Android Studio lot, then you can just go and append Android Studio and installed that required extensions far flutter, because there will be one extension tool in Android Studio as well. You simply have to download or install the Data Tools. But I don't prefer enriched study because first of all, it's very, it's, it uses a lot of your PCD sources. It makes it slower, I guess because I am a mode of a VS Code user or texturally die I prefer us code. So that's wave. We will be using VS code. Make sure you install it in your system. It's very easy. You can just go got it down. Now to create effort a project first, go to the folder where you want your first project. Then just append a common prompt there and simply write, Flutter, create. This is the code. Or you can say, wait to create a new project. And after the create, whatever name you give will be a project name that is your app name. You can say obviously you can change it later on. It's not an issue. We will just simply a flutter tutorial. Tutorial, okay, click Enter. So it will just download and create your flared up project. If you are seeing all done, That's it. You have done it correctly. In, Inside Definitely project. You might see a lot of files which we will discuss now only. But before that, we just append yard VS code, go to file and just append. And here you simply have to append your project like this. So you see folders and files that were present. You have successfully use VS Code. Now. Now what we will do, we will see more about these two folder structure. There are different folders. That is Android, iOS live, test of spec dot YAML than web, lord of thing folders and files. We just have to remember that the android folder is where Android deleted files are stored. We don't change it a lot. We will just use it for some things like what will be the icon of your application, Android device, what will be the name of the application? Are very few things specific to Android are plugins, but not the whole course. Same with the iOS folded iOS folder is have all the files which will be used to build an iOS application. But we will just do that changes, small, small changes which had acquired node, not dark color code. Now that this leaf fall, that is the main thing, this is the folder which we will use it again and again. This is where we will be working on most of the time. By default, it contains Main.jack. This is the entry point of the photo application, as I told we have already seen in that data section. And that main dot, dot or the main function, is the entry point. If you go and click on them. This main function here, save. And definitely there will be other quotes as well. And you might get overwhelmed at present. So don't look at those code. Just remember this main function. After that. There is test, test this where you put the unit testing code for the application. When you are ready, when your application is ready for production, you have to test it a lot of time. Testing is a whole different topic which we won't be covering because before going to test, you must have a very clean structured flutter application. And then next and very important file is Pub spec dot YAML file. This file defines the version and build number of your app. If you see, we will just see this version and this will be used when you are publishing your application to any place, torr or iOS Store. First uses is this, and then this dependencies. And you might be asking what are dependencies? We will see and understand it in the next video as well. Because dependencies means your application will definitely depend on third-party software or library or plugins. This is also very important. It should have a separate video to discuss. But just remember, I have skipped other folders and files because most of the time we don't really need to touch them. We only have to work on leap, Pub spec dot YAML and little bit on within the Android and iOS folder. So now you have your flutter application up. It's time to run it in a device. For device just append Android Studio because you should have an emulator. If you don't have the emulator, you can use your physical Android device as well. You just have to make sure you have debugging mode on in your Android device settings. Here. Yes, click on, configure it. Here, I have a device. You can also create your virtual device as well. It's very easy, but I have this big cell three APH would be 8. I will just run it. It may take a little bit time. See, your emulator is here, it say Android device. Now simply what you have to do it is being your VS code go to main dot dot. And in their run, just click on Start Debugging. And now you have to wait a while, because for the very first time, it will take some time, but you can stay. It's launching our main that dot on that emulate that the debug mode. So this is good. This is working. I just want to say that flooded is a very awesome tool. It's like it's very easy to understand and easy to work in. Also, you have understood the basic concepts in any programming language are the same as in the dark language. Just remember, when you are using Android Studio, your system might be laggy. Are, it may hang because its uses in your RAM. So you might not use or do any other thing while you are working on an Android emulator because it itself is making your system worked very hard. And you don't want to crash because you're updating system could not handle it. Yeah. It's showing build outputs flutter, APK, app debug dot APK. So I hope you know that that APKs extension often Android device application. Now, okay. See, you will have this screen widths like flutter demo homepage. And in their middle ear will be, you have pushed the button this many times and a button is here. If I click on it, see 1, 2, 3, 4, 5, it's increasing. So finally we have our flutter application running in our emulator. In the next video, we will be talking more about the concepts such as widgets and other thing. For now. I hope you have enjoyed. 3. What are Widgets: Today we will talk about widgets. When we are working in flirted. You will encounter this word a lot of time because I've written within effort application is a budget. From a simple text, two buttons to screen layouts. I will just set you an example. If you are coming on, if you have any experience from in web development, then you will understand that there's navbar, text field, div, tables in Bootstrap or in HTML. In flutter. All those thing which other UI elements are called widgets. That's it. So it's not a very difficult concept. I'm not saying that widgets are, unless on leader you're writing, but for the basic understanding, you have to remember that if you see anything in that screen, it will be a widget. That's it. Now, every widget will have properties, or you can say arguments which we have to pass. So if you remember the named arguments concept from the earlier dark program, doubt tutorials, we have already done. The same way. I would've. Widget is also a function you can save because in the back of the flutter core code, it's mentioned like named argument. I will just give you an example. Here. Definitely this code you shouldn't touch. You will just see what I'm talking about. This center is a widget. So it's property is accepting is 11. Property is called child. Just imagine. Yeah, I'm just, I'm just writing it here. We have a function call center. And here it might be accepting something as named argument. Suppose string name. Here, it's same thing is there, but it's rigid property called child. That is why we are calling this centered widget re-index child property. We are sending again a different widget, this column. In the upcoming videos, we will deep dive into all the budget steady center column texts, whatever they are, widgets we will understand each and everything. But right now I just want to give a basic overview. At least you should know what is the meaning of the word widget. Now you can radiate, hear that, and that property will most of the time accepted widget as its value, as I told you, as I have shown you that in that child property, It's accepting a column which is again Abhijit. And the last thing is every widget start with its name followed by parenthesis. So again, I will racket and suppose this is one rigid text then parenthesis. And within itself, you have other properties. Suppose child like this and this, again excepted, value it, but in a text, it's not child, I guess it's different, but I'm just giving you a basic example. Now. See this image. This is a way, this is an application built using flutter. So here, if you can see this button of Verde, are this image or this arrow, all this, our budgets. This text is again a widget. This nav bar is again averaging. An example. It's a very basic food delivery application, but it's looking so good because it's built with Flutter. So this categories are also a widget called row because it's from left to right, horizontal. Then inside this circular thing or whatever, or the search icon is also a widget. Same it is this example. This search bar is again a widget. This navigation button is again a widget. This image is again a widget. What the widget there is the image. That's it. You will see it in the later video. I just want to show you that whatever you are seeing right now in the screen, all of them are different, different widgets. That's it. We don't I if if you are overwhelmed, then also it's okay because it's fine. You haven't done our work, done anything like this, but it's very simple. Okay, till now, this is enough with that topic of widgets. Thank you. 4. Working with Assets & Pubspec file: In today's session, we will be covering a very basic topic of assets. So you might be asking what are assets? Just imagine you have an application, and definitely in that application, you will have some images, some different different images. You are a company's logo, are some different font files, are some animations, whatever you see, you have some different files for your application. At that time. You have to make sure you have done. You have told that for your flutter project that these are the assets I want to be included in my application. That's it. So far that what you have to do is go to your filter project folder. You will see different folders here. You just have to create a new folder of assets. Or what do you mean you want to give? I usually give IT assets because it's convenient for me. Then within the assets, what assets you want if you have just if you want, you can also just drop all your files here, the electorally. But I prefer it. Again, creating a folder of images are if you want. Sorry. If you want. If you want, you can have different folders as well, such as funds are whatever. So in this way you have your older folder structure properly. Now in the images, just go and copy any image you want and just simply paste it. I have this if we wanted to see the image. Now, what you have to do is you have your folder here properly. But now it's time. We implement our we tell our Florida Project, This is the Assets folder. For that. You have to go to that KML file. Now, just remember this Pub spec dot YAML file is very sensitive, fine, because if you have an extra tab or extra space or whatever, your whole application will crash. So just remember and be very careful. Don't touch anything. Just remember here. Yet you can see these assets thing which is in the comment. So simply go to a and before a and just stack back spacing two times. That's it. And again here, backspace two times. Not more than that, because if you are seeing a knee, remember to undo and try again. Now these assets these assets code is only did there to mentioned that folder names. Here. I will just write it from the start. It's like assets and then images, and then leg, That's it. That simply means this assets folder. Within that folder, there is an images folder just uploaded. I will stop my Florida debug session. Since you have done a changes coach hinges. And simply, if you want to include fonts here, this is the font thing where you just have to undo uncomment it and mentioned your font file location. Right now we are not dealing with fonts because it's not the most important thing in your application for the beginners. Now more about this Pub spec file. Just remember, first important thing is this version. And right now we won't use it. You will only use it when you are publishing your application to any Android or App Store, Apple App Store. Second is these dependencies folder. Now you might be asking me, what is this dependency? If you have any external package, our plugin to implement in year flood application, we use this dependencies thing. And when I'm telling you external package, for that, you have a website called pub deaf. You can just see is a package manager for Flutter application. Here you will get a lot of packages and everything. See parser part, Google sign-in number picker and I attend. So this will help you build the application very fast, and definitely you have to use it. So I will just go and search. Suppose HTTP. Then you have this STDP library. Just simply go. And their dependencies, you just have to copy it like this and paste it below, like this and save. But right now we're not doing it because this depends. Then subunit we use at present, at least want to show you what is this assets and Pub spec dot YAML file. And what are external dependencies which you will be using extensively later on when we are building a intermediate data application. I hope you have understood the concepts. Thank you. 5. Text & Scaffold Widget: So now it's time in this session, we will go directly into the concept of flutters. That is, we have to have our hands dirty by writing code ourself. Bring out your VS code and just simply go to Main.jack. Now, what you have to do is you have to simply go and remove all that code except the main function. Just like this, we just remove all the code. And in the main.js file, which is the entry point, you have to simply write my app, material app and then title my first app. And then home. That's it. So we have imported the material package at the very top because we will be using them Material Design rich, developed by Google, Android's material design. For iOS, you have a, you can also use Cupertino package, but it only works on Mac system. Are you will say you will need a iOS device to make it look good. But most of the time you will be using the Material Design and just use a few iOS. Buttons are elements as well if you want in the future. And also you can see we are implementing Material Design debts. Why we are using metadata app here. And material app is a virgin. As I said, it is the name and then parentheses, which accepts two properties. That is fastest title and second is whole. Title is the name of your application which is shown in that text, but it is venue. Go out of your application on when your application is in the background. But and this home is the main layout which will be visible to the user. So KV have our first Flutter application. You have understood till now, that is the main function is the entry point. After that, you might be asking me, what is that run-up ran app? Is that the fault? What you will say it it is the default view of flutter of running our application. So you just have to remember it because it's predefined. Predefined, we cannot do or we cannot change it. But we can know more about widgets, which is the core concept. So first of all, we will be talking about that text widget. In any application. Definitely, you have to put out something for the user to read. I that it's his or her username or what are any simple basic data. For that also, you have to first know what widget to use in order to print on the screen. Earlier we used to just write print in that dark code. Because at that time we were just printing in that debug console, which was nothing. It was just further that developers convenience. But now we will be writing something which will be shown to the user that is an application. So text is that widget as toluene name and then parentheses. And in this, It's except first thing as a string, which is a positional argument. You have to remember that dark concepts by heart to make sure you don't get confused. Ask what is this, why this parameter is sent like this and not as a named argument? I will get back to the name argument as well. But now you'd simply just have to save, then bring up your emulator and run your application. And also you can see that testfile is hers because we have removed the courts. You will, if you want, you can just remove this rigid test. For now. Because we don't need it. Now again, just run your application. You, again, you have to, It may take a while. In the last session also, we have understood how to import assets. That's why we have to be had can sell that debugging session that time. If we do any core changes in the app, we must stop debugging and then restart it so that that knows what changes its print done. I just want you guys to get familiars. Get used to this widget concept of writing that is firstname, then parenthesis, then inside the parentheses I, then it will be a name parameter like this title or name on a national parameter like this text field. Again, it will take a little bit while you have to wait. It's taking a bit longer. It's at least our debug APKs being built. It's a very time-consuming process. But for any good thing to happen, we have to wait. Just ignore what they were displayed in the debug console. We don't have to worry about that. But see, now output will be here. And we have a very ugly-looking first Predator application. But just see we have successfully outputted texts on the app screen. So that means if you, if you have published this application please toward all the users will, whenever the append, append this application, they will see this text of my first Flutter application. Now, you might be thinking, this is looking very ugly. That text is stick to the top and that these white to make it beautiful, we will be using our next region. That is scaffold widget. So what is a scaffold? To change the color of the whole application or use AB bar buttons are anything like navigate, bottom sheet or anything. We use this scaffold widget. It gives a good look to your application. It has all the necessary elements. Now, we will just go to our code. Simply inside the home, you will remove and write scaffold. This is also a widget which will accept and not to know what properties is accepts. You can just control and space and see here it first prop my lab. These are all the properties that it accepts. First you will, you can choose APA. This part, again, except an app widget. The side that Bart widget. Again, click type Control plus space. Here will be lot of properties that one we needed by two. Then this title will accept the text, fluttered rocks. And now you restart. 21 can just Control S. And now see that change. See, it's looking very beautiful than before. Just because we have used a scaffold widget. That here, whatever you are seeing that is this AB bar or this white thing is inside because of this cap for widget. Now this white portion is the body where you will output whatever thing you want to show to the user in the scaffold first properties. Then you will just go after this comma control and space and right body. In the body you will have another text which will let us clear application. And again Control S. So you might be thinking nothing is being shown. And that reason is because that color of that text and the color tab Background is two. Now to change the background color, I would just go to scaffold every light. Background color. You don't have to understand what I'm doing right now. Background, I suppose. See if I restarted the application. It's showing my first layer deposition because it was void color. In the upcoming videos, we will understand how to change colors like this. I did it now just to show you the output of the body. So this red thing is stub body of your application. You just have to remember till here that APA and body are the property of scaffold widget. Apa has title as its property, which accepts text widget far now, because title entitle, you can have any widget which we will discuss one by one. If we want to see another property of AB bar, you can just go below title and right, center tighten. And then true. This is a property which itself says it will center that title. This app bar title. We'll go to the center of your application. So I hope you have enjoyed learning because you are capable of building a basic lettered application. At least you have something on the screen right now, which is very cool. In the next video, we will learn more about adult widgets because as I said again and again, flutter is all about budgets. Thank you. 6. Center & Floating Action Button: So we will continue exploring other budgets. As flint didn't know if you have a very basic looking application, it doesn't applications just a UA with some text in it. The next widget, which we will be talking about is the center visit is a very simple and does what its name says. It centers down any rigid. So if we want to center the text in the body, then we can wrap that text inside a center visit. So you can see this, my flat replication is in the very top left side. If you want it to the center of the body, that the center of the screen. We just have to wrap it. And what do you, what do you mean by rapt? If you go, you can just simply see this material thing inside, then it's scaffold. This app part is wrap under scaffold. This text is wrapped inside AB bar. Now, if I want to use it, text center budget, you can just go. One step of doing is just copy or cut the care. Then chai center rigid. This is rigid. Then we go inside, we have a child property, and we just simply twisted. So this is wrapped by another widget which is centered. And as checkout our app. See, we have that text within the center of the screen. Just remember, I told you this was a first way and the second was, I will just undo it. Second way is just simply Cu, click on this bulb. Think so fixes. And here you can make a widget and just simply a center. This is also another way to do the same thing. Because when we have a bigger application, it's impossible that we just cut and paste all the time because there are a lot of commas, they are not a brackets involved in our application. Now. So remember, we cannot just directly print string inside this centered, like I will just cut it and see you can just directly write string here like this. No, you have to use child property inside that child. You have, and you have to use another widget, which is it text widget. Right now we are using, but since child is a data type of widget, you can see here, if I hover over it, that means it will accept any region. The law we haven't learned about other widgets. That's why I'm just using the basic text widget. So I hope you have understood the center widget. It's a very basic widget. Now, the next widget we will be talking about is floating action button. So I'm just assuming you already know WhatsApp application. In your WhatsApp application, in the bottom right side, you will see an icon on our button. That is the floating action button. So we can implement the floating action button by the property, by the same name that is floating action button to scaffold visit. What I mean by that. You have your scaffold. We did here. First property, we just gave it a background color as we have to make it red. Second property was AB bar. Third property was body. Now we have this comma in. If I go and control a C, there are so many other properties is exempt. But we will be using the floating action button. So that floating action button accepts the widget name. Floating action button. Like this. You can see it now has floating action button. And it has to support this, which is mandatory. First this child, and the second is on pressed. So child, we will just have a simple text ad. I will restart our save our application so that the changes will be shown in the UI. In the right-hand side here, you can see this Add button. So this is a floating action button. Right now, when we click on it, it does not think if you want to see, you can just go on, on pressed and just write, print, hello and save it. Now if I go and click right, if I go and click on our Add button. In the debug, you can see there is this hello print out, printing out. But the main thing is you have to understand that this is the way of writing code of a flutter application. Gear properties, there are widgets within widgets. Again, data properties. That property will again except some widget. And then this uncompressed is again the property of floating action button. You have to remember where it starts, where it ends, which property is which rigid. And if you're still getting countries, I would just like to say she tell you that assumed this is a function. We're calling a function of floating action button and then sending two arguments name that humans. That's the first one except save widget. And the second accepts a function. That's again for every rigid daft first letter is always capitalized. You can see this f, this t, its center, the scaffold S. So every widget has capital letter phosphorus, and every property is accepting another widget as its value. So this is a property child, it accepts text and all that properties have a stats with this small letters a, B, a, a bar, a floating action button. This one f, which is the property, this f is small letter. And in most of the widget that child property will become. And here you can see child, this is also child. So the child property will be common. Many of double digits. If you are still getting confused, I will just ask you to pause for some time and just try to do it on your own and do some mistakes so that you will understand it properly. But I hope this video has cleared and given you the information of two or more widgets. First one is the center visit, and second one is the floating action button, which we will discuss more stuff in the upcoming videos. 7. Changing Color and Styling: Hey, welcome back. In this session we will be learning how to change color and give styling to our elements. Now to change color of any elements such as the AB bar v have certain properties. Such as in an app bar there is a property called background-color. Now usually friendly, we're dealing with other properties. We had the value of string or integer, or a widget. But now, another case is little different. The value of a color is retained by using the keyboard. Let us dot and followed by the name of the color. Now let's do it practically. We will now change the color of our app bar, will go and now see other properties here. And one of them is background-color is just straight colors, dark, amber. It's one of the colors. Now, check our application. This blue, does it changes? Yes, It changed. Now it's in yellow color. Yellowish color. You can separate but it's a different shade, definitely. So I hope you have understood that giving careless is very easy. These colors dot and if that widget has a property that is here, its background color, in other limits, there may be different. Now to change the color of the floating action button, again, we have to go and check if there is any property. Now here you can see there is a property called background color, and we will just write colors. Dot earlier. That color was blue. I will just make it green. Let's see. Does it work? I hope, yes. Yes, it has changed. So obviously when you are building a real-world application, you will have different color combinations for your app. So it's necessary to understand that, which color to use and how to implement the color code. Now the next thing, what we have, what we will doing is how to style that text element. So do change the color, our gifts, styling to a text. We have to give a property of style to the text widget. So now again, you can just read there is a property called style. Let's go to the text element. This first one is a positional argument that is at 0. Next one, let's see here. Yeah, a style text-align text direction. I will be using style property. Now, as I mentioned, a text we also accept different arguments. But this remember the first property is positional vector v mentioned the actual text. And other properties are nim arguments, such as one of them is tight. Now style property will accept another widget as its value, which is the style text tail widget. So here we just have to write text style. And inside that weekend mention that changes whatever properties we want. Such as first, I would like to change that color. Colors, dark blue. Let's see Let's see here. Does it change? Yes. Also, I would like to remove this red color background. It's not looking nice. So it's done. Okay. Now, then next property we will be using is font size. Now let's change our font size to 30. Sorry, font size, it should be fun. Says, yes, it accepts an integer, we can say W value. So see, the font size has changed. Next property we will use is their font style. And there will be font-style, italic, and normal. So what is this italic? I hope you know that it will just give it tilted position. Here. See this? And, and neither staling we used is font-weight. Font with dot poll. It will just have a bolder look to it. See. So this is how we do styling to our text element. Yes, remember, there are their properties as well. Here you can just check its background, background, color, decoration, font, family, height, letter spacing, word spacing, shadows. So if you want, you can use all of those. But it's very US Pacific if we want to use it or not. But usually in most other obligation you'll be using colored font size and font weight. Also, if you want to make sure that text is highlighted, you can say. So. I hope you have understood that concept of changing color and styling. That's all for this session, we will learn more about widgets in the upcoming videos. 8. What are Stateless Widget: Hi, This session is very important because we will be discussing what are stateless region. So until now, we were writing code in our main function only. But this is not that case when we believe the obligation, dare, we definitely have to separate our code into smaller pieces and use them wherever required. We can create our own widget, which will continue on the other widgets in it. What types of custom build widgets are stateless and stateful region? Right now, you just have to focus on state less rigid. Definitely we will become worrying the other region in the later videos. So here you can see we can create a stateless region by extending our class to stateless region and have a beer minimum implementation like this. So this is a very basic code of a stateless widget. Let's go in there mean file, Let's have a new file called home dot dot. So now here you can just simply first what you have to do is have to import a material package. Then you can have class home screen, which extends stateless region C. Okay? So here it's done. Now simply have to go and click this bulb. You can see there is 11 missing override. If you click on it, it will give you this thing. So here you just have to return something. I will just return this scaffold here. So see our first screen, that is home screen is written, which is a stateless region. So you might be asking me, Okay, but what is the status widget exactly means? So just simply remember that data within a stateless widget cannot be changed after it's being rendered. Suppose we want that after the button is clicked, the color of the text should be changed. This is not possible in stateless read because that color, that is the green, is rendered. That is when we append our application, it's being rendered. So in a stateless really, it's not possible to change the color. Later on. It's like we didn't click on User do some Harvard or whatever it is. If the user interacts with it, then for those kind of thing, you must have a stateful widget. But you will understand the difference between both of them slowly. Now, here, any name that is, this is a stateless widget. There is a name of the widget, and it has to avoid the function called buildup, which returns a widget as a return type. And this widget means this can be scaffold, this can be container, this can be button, this can be icon. So it's not like stateless widget is always a complete screen. It can also be set, but it's separate chunk of codes as well. No need to take this much stress at present. You just have to go with the flow. So now let's see. Implements, Let's implement does date less widget. Now, this concept, so what you have to do is simply go to this and cut this scaffold and paste it here. Now, within these homes, Can you just have to write homes screen? And in that top, you have to import that screen by like this. Now, if I restart again, you will see nothing has changed. But we have our home screen on a separate file which existed less rigid. And what I mean by stateless, I would like to explain it again. That is this color of the text that is blue won't be changed if I tried to click on it on this ad. So simply, this is the meaning of a stateless widget. Now if I want to change that color of this amber to let say what again? Green, let's say blue. See, this is, you know, and if you see now Control S Hot Reload is working perfectly. And it was not because we wrote everything in the main No.5. Not like this rigid. But now when we press on Control S, this bill function is being rendered again. It's called and being rendered again. My first letter project every day and just hit Control S. See, it's working perfectly. So now that is why hood Hot Reload will work. Now I layer you might be thinking why it's not working just because we haven't separated in stateless and stateful widget. Because at that time when Lee that will function will be recalled and the changes will be done. So I hope you have understood the concept of stateless, stateless widget. And we're able to separate your code from one file to multiple finds. More about this, we will definitely, definitely learn when we will be building some basic projects. But right now, this much knowledge is enough. 9. Asset and Network Image: Today we will learn how to display an image in our application. So until now we were just displaying text, but the real application will definitely contents images. So now there are two types of images. Mostly. That is one is network image and the other is a set image. Now network image, when we sin it for image, it means the image will come from the internet. That is, we are not hosting that image or we are not storing that image in our flutter code. So we have, we must have in URL of the image in order to show it. First of all, bring out your browser and just write Google's any image, you want it as flutter logo. Then I have so many images, I have so many images, I will just choose this image and write copy image address. Now here you can see this network image syntax is image.network. Then inside that we have to paste the URL. Let's go. Now in the center, I will remove this text and image.net and just simply paste it here like this. Let's see. Are we able to show the image or it's showing, yes, see, this is the first time we are using an actual image in our application. And it was so much easy. Right now, we remove that are layered texts rigid because we cannot pass two widgets directly inside the child. This issue definitely will be solved in the later videos where we will discuss about the widget which we, which we can use to display multiple, to display multiple widgets in our application. Now, there are some properties as well, such as here you can see height. So height, we can give, if I reduce the height immediately, very little, very small. If I change it. See like this. This is how we work with network images. Now the other thing is an asset image to insert an image which is already present in your system. So usually what we do is make you fall let images in root directory like this here we have made assets and said that we made images directory before because it's very clean folder structure to make. Now we paste a file inside dead like this. I have this image 6 dot PNG file. Next step is to give CO2 Pub spec dot HTML and uncomment assets section which we have already didn't like this. See these assets section. We have uncommented. It makes sure of indentation or else it will show added, which means. And this file is very sensitive. So you have to make sure you don't give any extra spaces or tabs in it. It just had to write like this acids. Now, it will know that inside our assets images there. We'll be older files. Also, you can write your image directory location with or without the image name. That is, if we don't mention the image name like this on so then I'll say it's correct because it Vince upload all the images in it. Now, in selecting how to insert an asset image earlier for network image, we simply did amazed that network. Now we will do image dot set, image, dot set like this. Then we will just say sets, then images. Then what is the name of the file? Emit 6 dot PNG. 6 dot PNG. And now let's see, does it work? See, we have our asset file uploaded, that is, our flagship application, would know which file we are talking about. And this is not coming from the Internet. Now, we can change some properties as Lake height, we can give a 100 C like this. With also we can change. These are the other properties which you can change. But right now we don't want to. Usually height is okay. We suppose 150 years. Well, it's looking good. So it's very important to understand that difference between asset, the network image, because in your real-world application, you will be playing with images all that time. All application have some kind of image in them. Either it's an acid image like the apps logo, logo. It won't change easily. So we can just send it to them in our code. And the availability, something like a user's profile image. It will be coming from the database because the user will change it, making it frequently. That's the difference. That's it for today. In the next upcoming videos, we'll be talking about some other widgets continuing our session like this. Thank you. 10. Icon and Button Widget: Now it's time to learn about other budgets, such as the Icon visit. Florida comes loaded with tons of icons which can be used to make our app more beautiful. If you see any application, whether it's through Facebook, Instagram, WhatsApp thereof, you will definitely see some kind of icons because it is, it is very pleasing to the eye. People can directly relate to that icon. Now, syntax is very simple. First we have to write icon. And inside that, v cannot just directly write the name of the icon. We have to write like icons dot any icon name. Suppose I can start user, I can start alarm, whatever. Let's try it. I will remove that child of the image. Now. I will just said icon and then I can start excess alarm. Now I will just simply save it and see our icon is displayed on the screen and it's so much easy. Now, like any other widget V used, definitely, we can change its color and few properties as well. Now to change the color, we'll just say comma and then see color, wheel, colors, orange. And then size. I will write to a 100. Now you see it's so much bigger size I have given to an edge just to show you that we can change its properties of the icon. And thing is, it's not that we can use icon only in that body. Now, I, if I want in the floating action button, I can just write icon and then icons, that message in there. Floating action button. See. So now you can compare it with the WhatsApp. Whatsapp app has also this kind of I can end up on them. And it's looking very good. I have to say after the icon button, there is another widget, which is the button region. So without a button, any application is useless. Because buttons are there on lead to give a feedback, are taking feedback from the user. That is, if it say strapping codons Add to Cart. And if it's any form, then you have to submit the form. If any other, if two karma, if you have any editing in your, if you have used any application, you might have encountered a lot of buttons. So in fluttered there are three types of Button, Text, button, elevated button, and I can put them. Let's understand it one by one. So what is this textbook? So in this text button, there will be no alleviation. Our 3D effect like this, if I just remove the icon here and write text. But then first property is mandatory, is that child, that is, what should we inside that button, I will just simply right click me. And the second mandatory is on precesses. What should happen when a user clicks on this button? So see, this is a text button. There is no background color or alleviation or it's just simple text. That is why it's name is this. Now, if you really want to change or styled our button, you can do it. But I don't think it's that much necessarily because if you want do state there is other but density is elevated but an animal. But I will just show you how to change their style as well. If you see the tile property and it will accept, if it's a text, but it will accept texts, but then dot style from and inside that you can just simply write primary, that is that color of the background and this orange. See that color has changed. Then if you want, you can give some padding. Edge insets, areas, right? Simply 10. For the padding definetly, it is not showing right now. We can add background color, background black if you really want this color. Because usually what happens if you really want this kind of button? You will directly go to raise button because it gives you these features automatically. But it's fine. Then. Any other important thing? I don't think so. It's that much important. No. This is how you display a text button. And if you really want, you can style it as using texts, but 10 dot style from and then give different, different properties. Now, just remember if I remove this styling. This is a basic text button. But what happens if I use an elevated button? If I just simply, the syntax is the same. If I just simply write a limited button here, then you see background color is their text color is white and some alleviation is spin given that is, some 3D effect is given. So this is why we use elevated button, because it's very handy to use. Now, again, if you want, you can style it like here. We have a limited but then dot style from and primary will be done background-color. Let means this one. In text button. I mean, it was that text color, but here it's the background color. Now, if you want alleviation, you can just give it five. You can see some more 3D effect is there. If you want to change padding, you can change edge insets. When T C, This is padding is also done. Now if you want to change shape. You can also do that using a rounded rectangular border. And then border-radius border dot. In a border radius dot. And you can use in years that circular as a1 from all the sides, circular, radius dot set of polar and give ten here. See, if I give two in D, you will notice more. This shape is being changed by this show because of that ADS we have given. And here, styling you have understood them. And this on-premise simply what should happen when a user pressed on him button. So I write time, just printing. But usually you do some kind of activity here, see like this. So until now we have discussed texts, but then an elevated button. The final type of button is the icon button. So simply what it does, it's a kind of icon which we can press and do something. And we just removed the previous code and simply raised I can. But then on press will be there in older buttons. And in icon. I have already taught you how to display any icon. This icon here, checkout. Now this is an icon, but you can click it. You can click it here. Now you can discover, check what other properties it accepts, like colors, the blue accent. Then I can say is you can give a 100. See, it's looking so good. And if there anything else, splash color, you might be thinking, what is the splash color? Let's see. See. If I click on it. This is the splash color. And similarly it has on press which I will simply print. I can. But then see in the debug you can say Can button. So we have successfully covered all the three buttons. That is a text button elevated but an NDA icon button. And also how to use icons in our flutter application. In this icon button, just remember, child property is not there. Here. I can properties there which accepts an icon. And in Alda buttons that on pressed is mandatory. So you have to mention what should happen if someone clicks on it because since it's a button, you have to know what should happen after that. So that's it. I hope you are enjoying the course and learning more about different, different kinds of widgets. See you in the next video. 11. Container Widget: In this session we will be talking about container widget. So what is a container? A container just wrap around their budget. So if you are familiar with the concept of div in web development, then it works same as that. We use this widget so that we can give margin in alignment with and lots of other properties to that element are the two widget inside it. So just think of it as a wrapper which will be used to manipulate the other widgets. So what is the syntax? Its syntax is very simple. Like this. Container is the budget name and child mints what should be inside that container. So, okay, let's start it. I would just see move this previous code and have a container widget here. In the child. I will have it decks region first of all. So it will be like this. And not this. It's like flirted is awesome. Let's save it. Let's see here. So you can see that text is there, but there's nothing like you won't even notice that it's been wrapped inside a container widget. So what we have to do if you want to see that container, the first property you can use is that color property. Colors start to dread. You have already know how to use color non. See. So now you can see what is this, this red thing is that container, you can say as a box as well right now. So this is the container and it has different, different properties. First property, first two, we uses child and color. Now let's see what is padding and margin. Okay? So padding and margin are used to give spacing between the elements. So what is a padding? Padding is the space inside, which means you can see this awesome II and the box, and that is here, red thing. The insight thing is spreading. And the red thing end up blue. That is the outside, outside thing is margin. See it with the example and we just give it padding, padding property and it accepts a value as edge insets. Then after, after in say if you click dot-dot-dot, then you will have other the option That's all from left, right, left, top, right, bottom on Lee symmetric. For simplicity, I will be using all that is from oldest site. I will give it 20. Now you see, see from the insight that this, this, and this, This is the padding and it's looking compatibly nicer than before. So this is the padding thing. And what I was saying is the next property which is margin and merging, is that spacing outside that, whether it's here, here are the top and the left here. So if I go to margin and again marginal so accepts values, edge insets, and for all that, I will give 20. So you will now know that difference. See from the outside here you get this margin thing. You can also read here. Margin is space outside and padding. Age is space inside. That properties are also there, such as width. If I click wait and give it a value of suppose AT, then see it shrink. If I give one day. It's like this. If I get to it, it will go further. So this is the containers within if I don't give any way. It will take whatever is inside it. There is a text and that we're only. Now. There is another property that is inside the container, which is alignment. And it has it except Sibelius alignment. Suppose top left, top left, top right. See now I have to give a rate of 250 and a height of 50, 58 years. It's less after you've ate D. The alignment. Right now. The thing is there is no other element, is only this element is here. So that is why the alignment is not working because the height or the position is this side is and this much area only. If I just removed it in C now takes the whole screen. That is the thing that we have to first assign height and weight of the container of all what they were wrapping inside. Then only the wrap. This alignment will work. In the upcoming videos when we will be building some more nicer application. Then I will teach you this alignment and when to use the alignment code. Because right now you might be thinking, No, this is not working. Why it's not working? We might have too many questions. And that property is declaration of the container widget, which excepts box decoration as its value. Now inside box decoration, you can give a shape as well. Box shape, circle. Inside box decoration. See when you are using box decoration. The thing is, these also have a property of color, so you cannot give multiple colors. In that case, you have to give mentioned that color property inside box decoration. And I will again give padding so that the circle looks little bit nicer, it's inside it. Now, we didn't box decoration. There is color, border, border-radius, box shadow. So these properties can also you can use to decorate your container, which is very specific to your need. So if you need it, you can just try it on your own as well. So in the upcoming videos, we will be talking about the very last few visits which are left to be discussed. Thank you. 12. TextField Widget: Today we will be discussing about TextField virgin. So it texts lets the user entered text. Either we hired very kibble are within on-screen keyboard. So it's, it basically allows us to collect information from the user. If you have use any mobile application, you know that text is the backbone of debt application. Now, what this syntax, it's very basic syntax of TXT text field. Then as you shall our parenthesis. Let's try it in their body. I will remove the previous container and have it text, text field. Here. If I save it, then you will say this, this line. And if I click on it, we have our keyboard. I can write whatever I want. But the thing is, this text field doesn't look or say anything to the user. The user won't even know what to write in it. So for that, we have to use some other properties inside it, which are like decoration. Decoration, and it accepts input declaration is its value. Inside that. Here you will see a lot of options. I will use hint or labeled texts first. Now, if you hover over it, it accepts directly string, not a widget. So we can just say right, name like this. And you can see now it's looking till bit by 10 because when we click on it, we know what we have to write in it. Now there are, apart from labeled texts, there are a lot of other like border counter enable, enable it is, if this fails should be disabled for that moment or not. Hint texts is just like and full name, please. And if I save. Now in that text, will you can see this hint. That is we have to write our full name. So at least we can give some dummy data are some hint to the user on what he has to write. Now, another thing you can have is a prefix icon. The icons give some visual. You can say visually it appears good when we are using an I can see now, this text is looking comparatively better. With this small icon on live. There is something more like border, which we can get outline input border. Now. Now you are not able to see it properly. I will do what? I will just wrap it around the container which we already just learned and give a margin of edge. Insets. 20. See, this border is looking so good. And so looking nicer. And if I give input border dot none, then the whole border is C moved. But I usually like this outline in put powder. Now, you might be thinking only this much properties are there anymore. So there are a lot of properties which we will definitely discussed properly. Because without a text field, we won't be able to build any application. Maxlength simply tells us that the name shouldn't, should have unlit Dan characters in it. Not more than that. It can be used when we're using a password, are any phone number, it should be have a specific number of digits in it. Not more than that. And now, right now we will just see the onchange property get a lot that is onsubmit another, but on change means it gives its a function which gives us a value whatever its return text field. We will print that value in our debug console. Now. We just have flutter. See. Now with this value, if you want, we can assign it to a variable and then use that variable anywhere we want. It's up to us what we want to do. But definitely TextField has an important rule. And more about it we will discuss in the next module. Thank you. 13. Column and Row: In this session we will be talking about a very important widget. So we will be talking about two widgets. The first widget is the column budget. So if you have noticed till now, we were just outputting one widget at the time. But it's not happening in real application. A screen contains multiple widgets, like imaged texts, but an altogether. So for that purpose, a column widget is used because it helps to output widgets in vertical direction, that is top to bottom. That is why It's name is column. Syntax is very simple. We have to just select column name. That is, the rigid name is column. But here, one thing is changed now because I live with every widget we were using child property. But here it's children. And simply because we will be outputting multiple widgets. And that's why it's plural phone. So yeah, bring out your text editor. And I will just end up body. I will just see move the previous code and night column. Then here it will be children. Children. We insulin you just scan right from top to bottom what elements you want to print. I will just that first high V, I am learning. Flutter. Then next widget, you can use elevated button. In that child we can have text of submit. Let's save and see. See. For the first time we were able to print out two widgets at the same time, indices body. So this is the use of column widget if you want after the eliminated, but then you can use image dot set, then sets images, image six, PNG. Here we have already, we have this image here. See. Now we have three elements on the skin. First is a text widget, second is an elevated, but then, and that third is the image. So now here you can see in the notes section, children is being used. Instead of a child. All the elements are separated by a comma because it said simply It's a list of widgets, that is Y. And each widget is the order of that widget is will be the same how you write it here. Not this image is being printed out from top to bottom. Dead is another widget which helps you print out an object from left to right. So rho also is same like column. It helps to output multiple widgets, but a row helps to output widgets in horizontal direction. And we'll just first change the height and weight. It's too big. Weight will be a 100. See, it's looking at the sink now. The syntax is same. I will just change this row. So this column to row and save. Now this horizontal thing becomes vertical. So this is a very important element because when you are building a complete UI, Getty's every screen you will be using either a row or a column. Combination of both. Row has another property which is main axis alignments debt. That is how this how the elements should be displayed on the screen. So if we write space evenly, seen from left, left everywhere, all that spaces spacing is equal. And if I write space between, space between, then c is the extreme left and extreme side. Spacing is not there. And there is also center. Everything will come together in the center. So the interesting fact is in row and column port have this main exits and cross existing. The only difference is you have to remember when it says draw the main accesses left to right. And cross axis will be from top to bottom. That is, if I cross x's cross exists alignment, that's centered. I don't think so. It really right now, because the element is already in the center, because this is taking only this much space, not the whole screen. That is why it hasn't been sent to the center. But cross success for a row means from top to bottom and main exists is left to right. And similarly in a column, the main axis is top to bottom and the cross axis is left to right. So you have to just practice on your own and try to understand what I just said. Because the concept is very simple. Column and row we are, we are just using it to output multiple elements in a certain direction. And we can also use a column inside a row and a row inside the column. And with that, with the help of those and Lee, you will be able to build a complete UI. Thank you. So in the upcoming session, we will be talking another widget which is very important and which will help us do output multiple elements as well. Thank you. 14. ListTile and ListView: In this session of exploring visits, we will be talking about what our list style and what is ListView widget. So a list-style is a single row that typically contain X, contains some text as well as leading or trailing icon from the image only you can understand that how, what is a list style and how it looks. It some may it's somewhat similar to the UI often what I hope you love, you have have a WhatsApp account and are very familiar to that. So what is the syntax? It's simply its tile. Then these are the properties which it accepts. Less try it on our own first. I will just have a list tile at first. Then in the title, I will have text of Elon Musk. Let's save. See. So it's what it say row kind of horizontal thing. Then the other element, which other property I will be using is subtitled going to the moon. Subtitle is just Seton, has a smaller font and it's default color is somewhat somewhere crayfish. Then another property is leading, that is what should be a duff front. I will be using an icon here. And I can start at count circle. And we'll give it the color of colors, blue and size for t. Let's try it out. See, this is what I was saying. This is the leading icon. And now another property, a lot of properties, but one more important is trailing. That is what should be at the end. I will have an elevated but ten suppose. And it will just have it text of what should be the text. It's not a good idea to use a button like this. In that trailing. I will just have an icon. But then if I want to, then in the icon, I will have, I can start delayed. See we have an icon here. The trailing means the end of the horizontal thing, the leading wind, the front element. And the last important property is the untap. That is, what should happen. What should have been if the user clicks on this tile. So in the console you just see, I will click here and see then must. I am not talking about this button. This, this we have, if we want to do something good, we have to do write it in this on-premise. But this whole tile thing is printing out this Elon Musk. Say I have click it five-tenths. That's why it's here like this. This list style is also a very interesting UI widget because it, it's, it's a bundle of all the things which may, which we may need in our application. Now, we already know what is a column widgets. I will just wrap it around the column. See nothing will change. Now what I will do is I want to talk about the next element, which is ListView. But before going to that, I would like to show you the issue with the column. If I, if I have this list style, this much, this many times, more, if I have, if I press is mu2 times, see some error is there at the bottom, that is, the bottom is our fluid. That if we directly right. Column here like this, it will show error and it is not scrollable. So here comes our next widget, which is List View. Listview is like a column. That is, it, it prints that thing. Alda widgets from in the vertical way to this top to bottom. But it is a scrollable thing too. If I write List View here and save it. The error is can see we are able to scroll through our elements are widgets. So ListView is, again is say is same as column on leader. Main difference is that it is, it is coral level and remember it, it, it prints the widgets in the vertical direction by default, if you want to change, you can just change it here in the scroll direction and access dot you can give it vertical as well. But our horizontal Saudi horizontally as well. But the thing is, then the element should be different because vertically you cannot print a list style. Also, you might be thinking, what should we do if you don't want to use data? Column rigid? But we don't want to use the ListView widget, but still want to remove this error. Because obviously all the application, all the pages of the screen we'll use will have so many elements in that screen. In that case, you can just adapt that topmost element, that is this, this is the top most element of the body. You can just wrap it with a widget and that visit name is single child scroll view. You just remember this name because it it's a game changer. And this will help you to make the column widget scrollable. See the error is gone, and right now, this column is now scrolling without any added at the bottom. If you want, you can Google these terms. What a single child scroll view, what that ListView, what our column, if we want to go more in depth. But I have given you the basic information at a basic concept of how and when we should use this kind of widgets. I hope you have enjoyed this module because here you have, you are now ready to go into more in-depth things in the upcoming modules. And at the end of this course, you will become a complete flutter application developer. 15. What is a State: This module is very much important because here we will be discussing about what are stateful budget. In the earlier sessions V, we're very used to state less widget. We also created our own stateless widget by the name of home screen. But definitely in ideal world application V, my girl might be a lot of scenarios where we have to use a stateful budget. Before going into state fully widget, you might be thinking what is this state? So a state is just a value or a piece of data in our application. Anything that can change, like a counter count, text, color, etc, can be a part of state statements data in your application. This as Zoom, a state of username, that is what? His or her skills, flutter, Firebase, these are all state. What is the color of the app? Blue, that is also a state. Stateful widget is simply a rigid whose internal data will change on some action. That is, button is clicked and then text color should be changed are the, there should be some kind of animation. In that case. Get rigid is refresh and rebuilt with 10 new data. This is not possible in stateless region. So theoretically you have understood, but definitely we are working on in our code. You might have a lot of doubts. And let's clear it one by one. So I will just again remove all that data. But before removing all the data, I would like to have a new screen. It is home is okay. It's a state less rigid. But I would like to have suppose contact dot, dot. We have this screen. Now let's create our first state full screen. Then now first we have to import material as usual, then create a class and name. Name I will name is contact and then extended due date, full vision. Okay. Then it will have some machine missing or what rights. And this is like this. This is the create state. Stateful widget will have two classes. One is the state full div, which extends the stateful. And the second one is that state class that extends it. So here you can simply returns, suppose I will name it tech. State. This will again be rigid. I will create this context state. It will extends is date, which will have this name. And then now here, again, there will be missing already does the bill. And now you are familiar with this belting. I will simply return scaffold here. So this is the bare minima or dub skeleton of a stateful widget. So you might be thinking, Oh no, I don't want to write this again and again. In that case, you might need some extensions. Like here, I have this awesome flutter snippets. Then you will definitely have Dart and fertile in it. With this awesome flutters, snippets. We get a lot of shortcuts. One of the shortcuts is to create a stateful widget directly. So I will just remove all this shortcut keys S, D, F, that is flutter stateful widget. And then I will just click enter and I will name it. Contact. To see. This is done. We don't have to do anything with this shortcut. And what is that state here? I will have this string name is equal to guest. Suppose this guest name is a state which we will change later on and show you how it's, how does screen dribbles and how it, how the UI change Gs upon any action we do. In the next video, we will be continuing from here. So tendon and joy and practice your best. And you. 16. The setState() method: Now we have already discussed for these and how to write a stateful widget. Now it's time to do it practically and understand when invert, we have to use the set state method. And what is the benefit of using it? Let's do it. We have this page of contact, dot-dot-dot. Here in the scaffold, I will have an app bar, and it will have a type of text. Suppose stateful widget. Okay? And in the body, Let's have a column in the children. And the children less first Habit text field. And below that, let's have a text of suppose hello, Dan, name variable. And in the main dot-dot-dot, instead of going into home screen, Let's go to context screen. Refresh our restart our application. And see you will just see a normal text but text field with this hello text widget. Now what I want is whenever something is changed here it is on changed value. I want this name variable to be set. The whatever rewriting it. Okay? But the thing is, if we do it like this on there is without using set state, it won't work. Let's see Hello, I would like Flutter file. You see, nothing is working here. It's solid. It's again, hello guest. But if we just use the set state method here, that is a change test data and how to, how we'd like to sit States, SET 10 capitals, set state, then parenthesis. And within that, again, IF function like this, this is how it's written. So within this set state, now if I change name is equal to value, and then we start. Now you just focus on the text Hello. See, first time what they were we are writing the UI is being rebuilt just because of one reason, because it says state full widget. Now here does state that is the name. We can change it according to some actions here. That action is a text field. To understand what's going on and how does screen is rebuilding. We can just have a print statement. First in that bill, that is print screen Building. And one here. Print value if you want. Or you can use a print sets state is called. Now when I restart, you just see the debug console screen building that is, this bill function is called. That is why we are able to see this output. Now I will write, see, if I write f, then again sets the discard and screen is rebuilding. And you d, d, e. So all that time the CUI was that it's this bill function was calling again in again and this value name was being changed. That is why it is being reflected here. So through the debug console, you can understand what's going on under the hood. And half letter is using the set state method to alert the UI to rebuild itself. So this is the difference between a stateless and stateful widget. In a stateless rigid debts, the debt is whatever it's written cannot be changed by about whether we wanted via some buttons, clicks or whatever. But in a stateful widget, these values can be changed using this set state method. In the next video we will do another example of set state tail then just try to research and practice on your own as well. 17. Stateful Widget in action: So until now, we know how to use a SET statement and how it can be used to rebuild our screen with Dan new state. But it's, it's better if we practice some with some more examples. Let's start and create a new screen. New, new file will be. Suppose it shouldn't be. And we'll just name it stateful. Dot-dot-dot. As usual import material package. Then have is stateful visit of my date full screen. I have just named it like this. Then have the scaffold. And then as usual, in that title, I have a text of date, full rigid in the body. You in the body. Let's have centered widget and child. Let's have a column widget. Now sits in a stateful widget. Definitely there has to some state where I will create one list of string. I will name it. Names is equal to this. And I learn bill, mark. Okay? And I will have an NSDate of int I is equal to 0. You might be thinking, what are these? So it's just 0 because the index of a list starts with 0. Now here in that first there will be some texts, one text field and to invite, my mean is then names. And I, so it will add the very beginning, it will show IL-1. And for that, we have to change into my mean dot-dot-dot, which is my state full screen, and then restart. Let's see. See my name and my name is 11. Okay? And also the column I will use a main, main X's alignment dot center that is from top to bottom, it should be centered. Okay? Now what I want is I want to raise buttons in the same column. Raised means I sorry, I mean elevated button. And first button will be next. And the second elevated, but then we'll go back. Okay, let's see. Okay. What I want is when I click on this Next button, My name is Elaine should be, My name is Bill. That is H should circle or it should go through that list of names for that. In the on-premise, I have to change that data off. I did is I is 0. It should be one. If I click on the Next button, so far that I will just write set state and then I plus, plus. Let's see. I'm going to click on this next C, My name is built in. If I click My name is Mark. Similarly, if I want to go back, I will just set set state I minus minus. Here. If I click on Next, it will go Bill. In fact, we can go back. It will again learn. But the thing is, if the user click connects multiple time, then it will show some letter C. Because I is only the Atlantis only 0, 1 debt is three. But if I goes more than two, it will start showing error too far that we have to do some kind of conditions here in the on-premise, such as set state. If I will just say right here. If I is less than names dot length, then only execute did this set state thing. Okay. Now let's restart and check what will happen. 012 goes to treat should not execute 01 mark. And again, I have to write minus one here then definitely. Let's do it again. Eland Bill, see, now it's not showing any error. And similarly, go back. When you're going back, we have to check if I is not equal to 0, ten minus if it's already 0, then we cannot go further. Now, let's try it. If I go 123, okay? Now if I go Bill 11, and now if I try to go back also, then also it won't work because we have our condition which will make sure that screen doesn't crashes. So this is a very basic example of set state. One more example you can have is suppose dead is a color, this color is red. Okay? This is one state. Now I will have a floating action button. Floating action button that I like. In that child, it will have an icon. I can start. Let's see. I don't know what is the color lens. Let's check it out. See, okay, I have this icon here. What they want is when I click on this icon, it's color should change. Now. I have this background color and this background color will be the state that is red. Okay, so in the very beginning the state is red. But I want is when I click on this button, that state should be changed though. So when I click on this button, set state, color is equal to colors dot Amber. I'm just showing you different, different examples so that you are more comfortable with datasets data understand what it does. Now I'm clicking on it, see a color change to Amber. So this is the use of sets date, and this is how a stateful widget works. It simply changes that data and rebuild Status screen with debt new data, simple as that. So in the next video we will discuss few of the remaining concept of this module. And after that, we are good to go into the next flatter concepts. Thank you. 18. What is initState() function: So now we have already worked on stateful widget and how to change the state using SET statement and get is another method which is very important in a stateful widget, which is called the init state. So what is in each state? It is a function which is already dead inside every stateful widget we just have to write IN. See here I can get this helper. So if I click on Enter, there is this function in its state and what it does it when this screen, our van, this stateful widget is being built for the very first thing. This is called. So that means before this bill function, before the UI, this in its state will be called. So if you want to see what I'm saying, Let's print. That's brain. Here. Init state and in Bell function. Let's print build function. Now let's restart the application. In the debug console. You will see first the init state was called, and secondly that bill function was called. So this is very powerful and very useful when we are building a real world application. So you might be thinking, okay, but what is the use of this init state? So what we usually do is we assign some value. We assign some value to our variables, instance variables, you can say to that data, suppose this is just, for example, this is string name, and this is one variable. Now, this data is coming. Suppose from the previous screen, use her name. In here. I will just say this.userId name, the two. Jeff Bezos. Now in the init state, I would like to assign that value. That is the data which is coming from the previous screen to this screen. We just write this dot name is equal to widget dot user name. And then in the text, but I would like to show that username. Let's see, does it work or not? See. So what we did was that the data was coming from previous screen to the screen, just for example. And here you are assigning that value to a variable which was empty, which was null earlier. But before building the screen, this value was assigned to that variable using the init state. Since, because it is the first function which is being called when this widget was build. There are, you can say when this budget was building. Now, suppose, I hope you remember the previous conservative set state. If I click on this, then that bill function will be called again. But the init state function is only called once. So see, the bill function is being called again because the page is being refreshed. But this init state thing, von, we cannot call it again, it is already quite this on Lee coiled once ADH you have to remove this screen or go to difference can totally different two-page and then come back to this page again. This is the on livery. Here we just assign that value from the parent widget to this widget. That things you can see. There are a lot of things like streams, texts, and being controller. So dues value are those things which we want to initialize will be used or VK can initialize it in the init state. So right now you might be thinking what I am saying, but later on when we are using Firebase database or we have to initialize something. That is suppose some HTTP request. These things, we can do it in the init state. That means just died are initialized that thing as soon as this page is being built. So I hope you have understood the concept of stateful budgets and how pages being built. This init state is very much important. But right now, if you have understood, unless the concept also, then it's enough. We can move on to some other topics. And Q 19. Understanding Widget lifecycle: In the last video, V, and then how the init state function Vogue. Likewise, we have either functions or other things as well. Any stateful widget, which is called a state full budget lifecycle. So DRF, few of the functions which we can use in stateful widget. The first one is the init state, which we have already discussed. This is the first method called when the widget is created. It is called once and only once. It is usually used to initialize properties that rely on these widgets parenting that tree. Subscript two streams change modifiers. Any other object that could change the date down that widget. So this we have discussed. Then next is deep change dependencies. This method is called immediately after in each state. And when dependency of death state object changes via inherited widget. So you can just see it did change dependencies. I will simply, I will simply write print. Did change dependencies. I will restart the app. And here you will see first in its state will be there. Then they change dependencies, then double function. This method is rarely needed or used. That docks of the flutter also suggest that it could be useful if you need to do some remote calls. But when n inherited widget updates, that this concept is not that important. I have been building absolutely a lot of, a lot of years and this thing is not important. Third is that bell function. This method is called every time that we did this rebuilt, it is a required and must return a widget. So this is the bell function. We have already, we already know it will be called in that 30 place first in its state. Secondly, change dependencies. And third, function for days did update region. This is also a function are given by the stateful widget. It is called parent frigid changes and has to rebuild discrete. That is this widget. So what I mean is, suppose here this data is coming from that parent frigid, it is from the previous screen. And here did update. This thing is called if these dots, suppose name not equal to 0, rigid dot username. Or sorry, You can just say this dot widget dot user name, brand. Did they change? So now we cannot show it, but you have to understand the concept. Suppose a typical cases when a parent passes some variable to the children via the constructor, which is this case which we have already done. The parent is passing some data via the constructor. And if this, if the pad and widgets data changes, then this function will also recall and show that changes done. So for the cause that will function after this, so no need to read set state on your own. This function is also not used that much. But when we are learning about stateful widgets, at least you should know. These terms also exist. 50 set state. We already know that this is a set state king. And after that, the bill function is called again and the UI is built. This is not a new thing. Sixth is deactivate. This function is called when the object is removed from the tree. This is again rarely used. This method exists basically the cost data objects can be removed from 1 to another and it can be removed temporarily. I will just show you that this also exists deactivate like this. When you just print deactivate. And a final and the last one is disposed. This is very important. This method is called when this object, that is when this stateful widget is removed from the tree permanently. Here we should release energy sources retained by the object like stopping any mission are whatever. One example is Wendy's my TED is called vile using the pusher placement of the navigator. Next session only we will be talking about navigation. So that is from one page to another page. If we go, Then the previous page should be disposed properly. There should be no memory leak. So in a real world application, it is very much important to use these dispose mentor. Here we will stop some animation, our database calls or whatever, which is not required later on. So these adult life secular, free, stateful widget first is init state second, ditching dependencies. Third is build function. Than 40 is if we do any, if their parent widget does any changes to their variables here. So then did update vd, this call, we compare that to values. And then the last one are the deactivate, which is also not that much use, but this posting is used a lot. A lot. So you have to make sure, you know all these terms and when we are using it later on, you are not confused on what is this or is this anything new? Because at least that concept we know later on practically we will learn how to use it. Thank you. 20. Stack concept behind Navigation: In this module, we will be starting a new topic that is navigation. Navigation is a key part of users experience for any mobile application. Because definitely users will constantly navigating between different, different screens. It's impossible that you are building and a full-fledged application and will have only one screen in it. If you saw if you see an e-commerce site, DNR, order my order, cart, then homepage, then offer page. There are a lot of screens for debt. We have to know how to navigate properly. Now dad is sick concept of navigation flutter, which is stack. If you are coming from any programming language R, If you have done your graduation, then definitely, you know what is a stack? It is simply pushing and popping off elements. So you can just see this diagram and understand that. Suppose this isn't empty stack. Then one screen that is when the app opens, then home screen is being pushed to the stack. Then from home screen, if we navigate to the context screen, that is, if we just go to the contexts clean and have a option to come back again to the home screen. Then that context screen will go above homeschooling in this like the stack only. That is, it's above one upon another. So you can just say it follows the rule of last-in first-out, that is lifo and not first-in-first-out. So if we pop the contexts screen and go back again to the home screen that this contacts green will be removed from the stack. And then again indust stack. The home screen will be there only, which will be visible to the end user. So this is the 2D, this is the concept behind navigation in Florida. You have to understand because definitely in your mind, you should visualize how pages or how your code is working. Let's start then. If you know the concept, then let's start it with a basic navigation. Bring out that text editor. And these pages I don't want, I will just create a new page. And name is first screen dot dot. Then I will import material. Then it will be stateless. I don't want to change any data. It will be first screen. It will be a scaffold in the AB bar. Let's have and of title text of first screen. Now, just assign this first screen in domain dot dot. Now refresh your application and let's see. The first king is dead. So in the next video we will learn about the concept of Bush and Bob. That is how to send this stack, a screen inside the stack, and how to remove it. And go back again to the previous screen. 21. Push And Pop method: Let's continue working on the navigation part. So if we have this first screen in the body, Let's have a center widget. And then child of elevated button. And dx will be equal to second screen. Okay? Okay, we have this button. Now. We have to create a new second screen as well. So I will just create a new file second screen, but Dart. Again, I have to do this import material. Then have a stateless widget called seconds screen. We, since it's a screen, so it's really scaffold. In this part we will have a title. This is very repetitive, I know, but you have to practice it. You have to get used to it so much that you know everything about it. Okay? We have this second screen, Okay? Now, we have to navigate to, you might be thinking, okay, but how to navigate? To navigate there is a method called push and push placement. That is, first is push. That is, we will just pushed up next screen above the screen. That is, we will push the second screen inside the stack. But the first skin will be daring the stack. What I mean is we have to use the push, but the syntax you have to remember is first is navigator dot, then CD era, so many options. Push, pop, push replacement. So we will be using push. Then here you will see it accepts two things. First is a context and the second is a route. This route we have to send me TDL page route widget like this. See, it's little bit different, but this is a code which you have to just learn or just remember by heart, that's it. Now this Builder is a function like this, which will, here it will be context. And then this function returns. Thus screen name reaches in our case is second screen. So this is that code required to navigate from one screen to another. Apart from this second screen, everything you have to just remember, this is the syntax. And navigator dot push takes two parameter. One is context and the second is material page route. Material page it out accepts a parameter of Builder, which is a function that returns that screen name. That's identity tensor widget. You can just say, Let's see, Is it working? And just remember here we are using and I will just write push method because there is a difference between push and push replacement. I will just click on go to second screen and see second screen is there. So this is a first time we are using multiple screens from one screen to another. And now you can see here there is this arrow button. So just imagine because of this push, we are about to go back to the previous screen. And if you can visualize a stack, that means above the first screen, that second screen was sitting on. And then we just remove it. And you might be thinking, okay, I have understood somehow what is push, but what is push replacement? So push replacement clears that stack. That means we cannot go back to that previous screen. Once we navigate to the second screen date is no back arrow. All that previous screens will be removed. So that is navigator. Push replacement. Simply. After that, everything will be same from context to material page route and everything. Only difference will be pushed replacement syntax. Now, again, bring out the emulator and try it on your own. When I click on go to second screen, see there is no arrow button. We cannot go back from here. You can just understand it with an example of Facebook. First of all, that login screen appears when we enter username and password. After that, the user is, and if it's correct, the user is navigated to his profile screen. And from debt profile screen, he cannot go back again to the login screen until and unless he clicks on the logout button. So this is a very good and in typical example of when to use push and when to use push replacement. Now, we have understand and we have learned how to push pages. But there is another concept of popping pages. So which we will do here in this second screen. Just in their body. Again. Create right center, then child. Then elevated button. Here is I've done something wrong. In the elevated button. Just seen when the child you will, I will write here and go back. Now here we will be understanding the concept of pop, which means just simply remove this page from the screen and less in taxes navigator dot push. Now here just simple pop and it accepts step context. That's it. Nothing much. And in order to pop, just remember here, it's pushed, not push replacement, or else your app will crash on. You will just directly go outside your application. Okay? Now, if I click on go to second screen, see we have this Go Back button and when I click on it, I will again, comes back again, come back to the first screen. Now you might be thinking this routing also does the same thing. It also, by default calls the navigator dot pop function. Both of these do the same thing, but here we deliberately write the code to go back. That's it. And this navigator dot pop removes that topmost page from the stack. So there might be below 23 pages, but it only removes that top page. That's it. And if you want from this second page, you can also go back. Good, two different page. I will just school navigator, but push. Then here, material page route, then simply contexts. Now I would like to go to this contact page. Suppose contact page here. Okay? This is also push. Remember, now what happens from on the index tag dairy. It's only first getting widget at, at this moment. Then when I click on go to second screen, then tech add up very below debt is the first screen above it, then the second screen. Then if I go to this, sorry, I just forgot to change the name. If I go to contact screen, see now the contexts cane is there and now in dest tag directory screens one above and under. So when I go back here, the second screen will come and contexts screen is pop out from the stack. And now if I go back here again, then this first screen is here. But suppose from that second screen, I will use push replacement. Now, what will happen? It's very interesting to see from the first screen, when I go to the second screen, we have two screens in the stack. But if I click on Go to contact and since it's using push replacement, then it will remove all the screens. That is second screen as well as the first screen. Now if I go to Contact, see, it's being removed. Now I have use push replacement here. And that is why we should not be able to use it. You have to say it again, sometimes simply to little l comes, it's fine. But you have to understand that this push replacement removes all the stack, all the visits from that stack. This might happen because of some normal caching or something. But until unless you enough familiarity, you have understood that concept by heart. That's what matters. In the upcoming videos, we will discuss navigation, mode in depth and water, the other functions rather than just push pop and all the other things as well, which will be discussed in a while. 22. Understanding Named Route: Until now, we have learned how to navigate using the push method. But there is another way of navigating is by using named routes. Now suppose if you need to navigate to the same screen in many parts of your app, the previous approach can result isn't code duplication. The solution is to define a name, route, and use that name for navigation wherever you want. And the syntax is also ready simple, not like before that we have to use material page route and then builder and a lot of thing earlier it was much more boiler code, boilerplate coding and all. But right now the syntax is very easy. Thus steps are. First, we have to create two screens, which we have already done, okay? And the second is defined the routes by providing additional properties in ADL widget. So we now have to go to our main dot dot page. Here. We have to use routes properties here like this, and then curly braces. So this is also a property of material lab routes, which will definitely help you in your navigation and clean code. So first you have to determine right task string. It is what it should be called. That is the route name. But here I have just given slash, which means the homepage. And it's a function like before only. And here I will be sending the home screen. And thus second route you can have contact. You can have like this contact. And here again, that funtion and contexts screen. When we are using routes, then we shouldn't use home property. We should use initial route. And here, what is the initial route is this slash backslash. So I have to comment this home and then restart our application. Let's say the initial route is home screen or not. The initial route defines which route the app should start with. So by the name only you will understand. It's taking a bit time in my system. Yes. But it's done. Say that initial homeschooling is now here. And I will just send the initial 2 first screen. Let's see. Now how to navigate to the second screen using that named, that is navigated the push name property layer. We, we are using navigator dot push and push replacement. But now we can use pushed named and push Nim replacement. Let's go to the first screen. Here. See we have our push method, which I will comment and have push named my 10. And the syntax is very simple. Navigator dot push named, then contexts and their route name. And their name will be slash contact. I will send it to go to Contact. Suppose. So you can see the syntax is very simple. It's navigator dot push name. Then here we don't have to use any material page, route and all. Simply we can write the route name and it will help us to navigate. Let's go to Contact and see the contact pages here. And similarly, we have pushed. Push replacement name. It does the same work as push replacement on leader differences. Here we are using a name drought. And it's click and see there is no back button. We cannot go back here also to navigate back. Or if you have, if you want to create a button, then we can simply use navigator dot pop, just like before. The only difference is we are using name routes for us to Navy for navigation. Bush named. And similarly in the meeting, but that you can write as many name you want. Suppose second page, then. Context. And second page. Seconds. Good. Okay? And we'll just say it's second screen. Okay? So this is the way of using routes. Now the thing is, the only downside here is when we are navigating, fee must have to remember this name properly. Suppose we write it. Suppose contact dot S are contexts, then it will show error. And definetely, it, it's very difficult for us to remember the spelling. This backslash properly, everytime far does get easier small solution. And that is using static modifier to call naming routes. What it means is if we used a name, if you start out method to navigate from one place to another within naming concept, then we have to remember the string that we have provided to its name. It's not necessarily always debt. We remember the name when there are multiple screen in an application. So we create one string datatype of it with the static modifier, so that we can assign it directly, calling it through its class, which means simply means we are using a tactic variable inside our state less rigid and give it a name like this home, we will simply write static. String. Id is equal to home like this. Okay? And then in the main.js file, we can simply write for the main as that key. We can write 0 screen dot ID. And this will have a context of home screen. Simple. So it gets very much cleaner and nicer. And definitely you would, you can remember that class name, at least at that home screen. It's much more easier to remember than the string. Similarly, if you go to the second screen, we can simply write, take string ID is equal to. And then I can write second screen like this and go to main dot dot. Here, I just have to write second screen. And since it's static variable, so we can directly call it without creating an object. So this is how it's done. As you can see above, we have used a static modifier, which string data type to both the screen and assign it a string variable. Now the next thing is we have our lady. Then those String IDs, that is those static variables in the routes. Now it's time to call it, because we can directly access it easily and navigate from one page to another by remembering that className. And now we don't have to remember that string. And I'll again and again, what I mean by that. Again in that context, same as before. X static string ID is equal to contact. Then here, simply write contact dot ID. And if you can change this as well. Now when I go to the first screen here, I don't have to write this string like this contact. I can simply write contact and aesthetic. So thus, tactic method, I can just call the ID like this. See the difference. It's so much clean way of writing our and managing our code. I can just say illegal to contact like this. And see, again, it's working. There is no error. If we are using this approach. It's up to you which one you prefer. If you are watching a lot of videos and tutorials, you might come across this method as well, because it's a personal preference. Whichever you like, you can do it, It's not always necessary to use this tactic, but definitely I will suggest you because when you have a lot and lot of routes, then it's impossible for you to write each and every string correctly. That's it. In the next video, we will learn more about how to pass data between two screens and show it in the UI. 23. Passing data via Constructors: So till now, we have understood how to navigate from one screen to another using a normal way and using a named way. So now it's time. We understand how to pass some data while navigating definitely in an application. And there will be scenarios. Then we have to pass one data from the first going to the second screen. Also suppose there is a situation like in the second screen, we need that user's username, it net case. We don't want to again have a database calling the second screen because it will be very time-consuming and resource consuming. It's better that if we have the data already in the first screen, we pass the data to the second screen to that constructor. As we already know, there are two types of constructor. Parametrized constructor, name constructor. So to accept data, first we have to create instance variable in the screen we are navigating to. That is a second screen you can see and create a constructor in that spirit, which accepts and assign the value to the instance variable. What I mean by that is, let's go. Suppose we have this context cream it does. I will just simply take this second screen. Here. First, I will have an instance variable of string name. And then I have to declare. I mentioned a constructor which will except this value and assign that to Buddha, named to that variable. But definitely down we have only did this constructor. I will just remove this one and create a new like before. And simply write this dot name. Okay? This section is done. Now in in Main.jack definetly. Here. It's asking that we have to send some value. So it's better when we are using, because vendors are using named routes now this is not to send a value. We will discuss that as well. But for the time being, I will just comment that second screen. And now in the first screen, I will use the push method, not the push named my turn. And you can see in that push method, the second screen is giving some added because it is saying that there has to be some argument inserted at the second screen is accepting some argument. So simply I will send that because since it's a positional argument, not a named constructor, it's a partitional that is the 0th position. So I will just simply say name, name, I will say kids. Now in the second screen, in the init state, I'm sorry, this is a stateless region. So we have this button go to contact. Here. I will just simply print the value, which is name. And I will write it print. Okay, Now let's see, does it work? Are we able to send data from one screen to another? Let's find out. Bring up your emulator. Now go to contact so that it should be good to seconds. I hope you understood. So when I go, now we have this button print. And when I click on this button, see Bill Gates in the print screen, we can see that Bill Gates value, which was sent from the first screen. So finally, v know how to navigate with data setting. But now it was only a positional argument. Same as that when we are passing data to a name constructor. That it's not a very difficult thing as we have done that again in again. Simply what you have to do. Go to the second screen and simply make it in name constructor. And you can give required since it's not a null element in a liberal value. Now in the first screen, you will have to do nothing. It's a name parameters to have to write the name which is the medium as we mentioned it there. And right now I will name it Elon Musk. Now again, check if it's working with name constructor as well. When I go to the second screen and click on Print, see Elon Musk. So this was that difference and from the very beginning of the dots sessions, you should know the difference between partitional constructor parameters and name parameters have been emphasis on this again and again because it's a very core concept. Now, that thing is dead. In the very beginning, I remove that named route because it was showing some added. Just because if you have a name route and you want to pass that data, we can also send parameters val1 navigating, but we simply add argument to a map by pushing to the next screen. You can see here with the example navigator dot push named contexts, contact dot ID. Then it's a new parameter called arguments and it accepts map. Here the key is name and a value I have given has string. But you can also have different objects or custom models in future. But to understand that concept, you have to see how it's done bringing out your editor. Now in the first screen, I've filled go and check in domain dot, dot. Okay? And since we are using named routes, I have to remove this constructor. That is, we cannot accept value like this. For that, What was the steps? Step 1 was? Here, you simply go to the third position that is fastest context. Second is the name of the screen. That is contact dot ID. I'm going to contact, but I would like to go to second screen, so I will just close second screen. Here we can screen. If you see the red is this argument parameter called arguments. And here you can simply write name as key and value. As you can see, Mark Zuckerberg. And I'm just saying here, suppose I'm sending two values, founder, Facebook, okay? So we are now sending their value, but definitely in this second screen, we must accept it. Retrieve it. And to retrieve the data. This is the code which you have to remember that is modeled route. Lot of context, dot settings, dot arguments too. So just remember this. I will first of all check if it's null. That is, if value is given or not. Neck, this is not equal to null. And here, this will show some red, pink because cannot be unconditionally access. Because obviously this can be null as well. So either we have to use the operator like this, which means it wound. We know r, we can VR, allowing it to check. This concept is recently added in the non-safety. So here first of all, we are checking if it's not null, then yes, except store it in a variable. Same thing. Copy and paste. And just like as map. So you have to write map in order as map because otherwise it will be an object. It comes as an object, which we are saying No, it's a map here. And then simply write arguments. First key was name, and then print arguments. And the second key was founder. Let's check again. Now from first screen name and funder, are we able to print it? As soon as we go to the second screen? Go to second screen and see Mark Zuckerberg and Facebook. So this is the V ofs passing data to name drop. Our earlier we learned how to pass data to a normal, that is normal way of navigation through constructed. And second way is using a name route. Here we have to make sure we remember model route dot off contexts. This is a way to extract the values vinyl navigating. So the last thing off passing value is that we also can return a value when going back. So from first to second screen, we'll learn how to pass data. But there might be some scenarios where from second screen, you must get some kind of conformation. Some kind of success, can sell status and which will result in that change in that first screen. For that, we need to modify the post function in the first screen to make sure it waits for the value using await and pass the value in the pop function of this second screen. What I mean by that is, in the first screen, suppose while pushing, right now I'm not sending any data. We have to wait. So I, boo status is equal to await. This async and await concept definetly we will learn in the next session. Right now. You just remember here, we are waiting for this value, for this function, for this action to complete. And then on lead, the value will be stored in that state does Boolean. And here I will just say print status. And now in thus from the second screen. While we go back, we value. Here, I will simply write a dot Bob context. And then here we just cut my relate true. That's it. So simple that popping out of the screen, we have to send this true value. Now when I go to the second screen and when I click on, go back with value c, true. So this is printed from the first week because we need to await. It was waiting till we come back from the second screen to the screen. And after that, only this code was executed as async and await are a very important concept. It's called asynchronous programming. And definitely in the later session, we will be going very deep into that because without this concept, you won't be able to build any complete application. So that navigation portion is done. I hope you had fun and you had all your doubts clear. Please try to make more and more screens and practice it, because definitely you have to remember it by heart. Thank you. See you in the next session. 24. Drawer Navigation Widget: In this session, we will be talking about the trawl widget, which you can also say it sends side navigation bar. So if you have use any application such as Amazon, I guess most of the application has this three lines or at the hamburger icon at the top. When we click on it, is sidebar comes with a lot of options to navigate. So we'd definitely in Florida, it's a very easy way to implement that. In apps that use material design, there are two primary options for navigation. First is taps. That is, if you have, if you see the example of what CEP, the tabs at the top, chats calls those steps. And the other option is drawers. When is insufficient space to support taps, to provide a handy alternative, we can use a drawer only inside a scaffold widget. So you have to remember that. Let's try it out. Let's go to the first screen. Indus scaffold. We have this drawer. Okay. This is a syntax of writing it to our widget. Let's check if anything happens in the first screen. See this hamburger icon has come. These three lines. When I click on it, we have this, this side navigations pops up. But since we have nothing inside it, it's empty. But I hope you understood that we just one code, we were able to show it in the UI. Now inside via it accepts a child. I can definitely, there will be a lot of other dairies, will be lot of navigation ops shuns. So in there we will be used suppose not column the ListView. And I will show you why we didn't choose column as well. But right now, just remember, except inside that just have a list view. And inside ListView, V can have different, different options. First, I will just show you list-style with one navigation option. In that Titan. I will have text of second screen. And on tap I will do nothing for now on, but I will just save and show you see our first Navigation option that is go to second screen you can see are just example Home Contact Us About Us categories, whatever you want, It's up to you. So if you have if you remember, our header as well, if you remember gmail lab, there in the header there is some accounts detail such as a username profit for boosting. You can have that using user account, user account, draw our header. Then simply mentioned those things. Account name should be Elon Musk, account, email can be Tesla, and that it is.com. It's very rare that you will never use a Gmail account likeness. The third, we can have. So current account picture, I will use a circular avatar. And inside that you can have a network image, but I will just use an icon. Let's see what is the output. But if you have a Gmail app with you right now, just appended Gmail and show. See that side navigation of that as fin. You can compare and see. We have this profile image, username, and user email with this beautiful background as well. You can change other things as well. But right now, it's better to keep it simple. Because flutter is very vast and there will be lot and lot of properties arguments to give. If you want to see, I will just go here and say Arrow color, key margin on details pressed. These are other options in it. Leading AI will give me an icon to look. Now it's looking like this. Suppose this is the home. I will copy and give another deck as simply write. See. So with this side navigation, it's looking really good. I will just skip another homepages. Well, home and just write whom here. You can see this drawer. Now it's looking very professional with mainly because of this header. It's still looking awesome. And as I said, there is something called drawer header as well, which you can try it on your own if you want. And now suppose this is not ListView but the column, let's say there's anything changes. Say no, nothing changed. But remember, if you have a lot of data that is still here and it won't be scrollable if you are using a column. So list we use it when you have a lot of other options in it as well. Column works fine. Also. Now let's go and navigate. To the home screen. I relate, navigate, push. Dan in the route. We will have a page builder. Context. Name is home screen. Okay. Let's check. Do we navigate to the home screen? See, we are in the home screen. Now. You have to give attention and understand what happens when we click on the Go Back button. When we click on the Go Back button, this drawing is still open, but it doesn't look good. It should be closed like this. Far that before pushing via, have to pop. We have to write, navigated up pop in order to close the drawer and then move to the second screen. Start your app. Now when I go to the home, we navigate to this home screen, but not in this time if I click the back button, it comes properly to the home screen and not that draw append because we already closed it with the navigator dot pop. So this thing you have to remember because when we have a complete application, you don't want anything which is not placed into the user. User gets annoyed or anything, we have to avoid it. So make sure you take note of these things because definitely lay out later after one month, you might forget it. That's it. That's all far down and draw a portion. That next video we will be talking about bottom navigation. Thank you. 25. Bottom Navigation Bar: Today we will be talking about bottom navigation bar. I leave it if we have discuss what is a drawer and how to implement it. So this is another very often navigation. And this widget is used in most of the application. Because just imagine this is the screen and in this area that isn't a bottom side, there are some options that tiles, that is home contact or chats or whatever. If we click on it, thus clean will get changed. So this is very cool widget, which has been given by the Florida framework. And we can easily add this to the scaffold. As in that drawer as well. There is a parameter in scaffold. So let's try it on our own. And if you see does syntax in that scaffold, there is this bottom navigation bar, which accepts a bottom navigation bar, rigid, which has one pair. First parameter is current index. That is, which screen is VR at that, at that moment. And the second is items. What these items that is the, that is the icon or it can save what we, what we are about to navigate to. That is, is it home chats are whatever we want to mention in the UI? And the third is on tap. That is what should happen if someone taps on that navigation option. Usually we have to change this screen. And here in the notes section you can see there should be more than one bottom navigation bar item in order to make it work. Obviously, if the other multiple items then only sin navigation. For one option, why someone use a bottom navigation bar? It's of no use. So here in the image you can see what I'm talking about. This is what we are about to build. Bring out your VS Code. And now, Okay, We didn't. This is the error because of the Boolean thing. Nothing much. Since you mentioned already that we need some kind of Boolean value there. Comment, toasting. And thus scaffold will use the bottom navigation bar. And a widget name is bottom navigation, but now it has items. Current index for right now we'll just say 0 items. I will have negation bar. I don't know how to give any icon. I should be. We will be using labeled because the ideal is being depreciated and label accepts string. Straight home. Similarly, days and paste it twice, say can and will just end here. And when suppose you can give nightmare, I will keep it simple. And we'll just say, okay. And the next is on that. Which gives, which is a function which gives us an index. I will simply print the index for now and let's see what has been done. See home contact uses. It's looking so good. When I click on Contact, index is 1. When I click on Users, index is two. When I click OK. Whoa, index is 0. So this is what I'm talking about. With this index. Now we will do the changes so that whenever someone clicks on contact, he should he should go to the contact page. Or you can say here the contact page will be built. Not, we are not navigating directly, but here only in this screen, only Alda pages we will see. Now what we have to do. We have second spleen. We have a full screen. Your screen. You simply go to the screen and at the very top, less have an integer which is 0. Second should be a list of pages. Here. What shouldn't happen? We should write all that pages we need. So first should be suppose screen set is contact. And third is this one which is my state full screen. My state full screen. Okay. We have all the pages here. Now simply end up body. Here in the body. I will remove everything and write pages. Then the index is at the very beginning, it's still. But when someone clicks on anything, it should change. That is state, the state should change. And for that we have to make it a state full vision. Now it's a stateful widget. When anyone taps on that particular navigation, said a state of index 2, this index which we are getting the d 0, 1, 2, 3. So you might be thinking, why? What is the need? I will explain you again. We have a list of pages, a position in homeschooling, then one position contexts clean and to position my stateful screen. And we have a variable called index, which start initialized with 0. So at the very beginning, always the home screen will be shown when anyone starts our application. Because in that body, we have this pages and index is 0. Now, whenever someone clicks, that is on tap on any of these bottom navigation bar item. Whether it's weak contact or whatever, it's index will be taking that is one. And that screen will be shown. Bring out the emulator and see we have this contact. We have this home, and we have these users. So what homeschooling instead? This is the homes in Sibelius. Change the screen and the screen like this. Now the home screen is properly it is. And users, we have all the list. Now I don't want to 2 of this app part. So what I can do either I can remove the AB bar from the screen, that is the first screen. Let's bring our app again. Say it's looking far better. Now when I change at bar gets changed. But it, it, it is looking very nice. Also, you might be thinking why this color is not changing, because we have not mentioned that index here. We have just read 0. But here we have to write that variable index. And then try again. Now, this blue thing, blue color will be shown on whatever we click, See now the contact is blue. Now when we click the users, this is highlighted. It's looking very good. Now we have a very basic UI, at least. We have learned how that draw works, how the bottom navigation works, how to navigate from one screen to another. So in this module, we have learned a lot. In the next module we will discuss more concepts of Flutter Framework. Till then, just practice and make sure you understand all the code by your heart. Thank you. 26. Deep Dive into TextField Widget: In this module, we will be talking about the textFile virgin. V will be getting very deeply into this widget because it's the only widget which we will be used intensively to handle user input. In any application. There has to. We have to take some input, whether it's the username, password, what they like, what they dislike, whatever age. So textfield is a very important region. So what is a text field? I think we have already discussed. Texts fill in Florida is the most commonly used widget that allows users to collect input from the keyboard into an app. So this is a code snippet that is the syntax of how to show text field. It has some properties as always, decoration, border and many more. So to get started. And what I would like to do is I would like to remove the previous screens because I don't want so many screens at present. If you don't want to, you can just leave them as it is. But since it's a new module, I would just simply remove everything. We have this main file. I will create a new file off page, dot, dot. As always. I will just create this date less rigid of home page. And we'll have this home screen. Let's start with this scaffold. Use input. And in the party will have a column wizard v whose main exist cell alignment. Alignment will be on center. And children. Now in that children, I will have this text field. For with that declaration property, we can give some decoration such as what to do, what this textFile is all about. With this level text. You should write its name. And border. I want outlining border. Let's reload our application and save the output. To check this output. It's a basic screen. We did text fill in the bottom. Also. I would like to wrap this column with a padding widget so that we have some spacing all around and it looks little bit decent now. Moreover, if you want, you can have sent two of the APA. Make sure you remember this properties by practicing. That is why I would suggest you to write does screens each and every time by yourself, so that at the end of the course, you will learn all that code. So remember all that codes by heart, and you don't have to check again and again. So now we have this texts filled in damages. But we should know how to retrieve the value from that text. Now, if I write, then definitely there should be some code to retrieve the value from the text field, which we will be discussing in the next video. Thank you. 27. Adding a TextEditing Controller: Today we will learn how to retrieve the value of a text field. We have this textual already. But at least we should know how to get w, whatever the user types. For this, we will be using the controller method. So what are the steps? The first step is to create a text editing controller like this. Here you can see we have a text editing can collect type. Then the controller mean that is the variable name, which is equal to text editing controller. Now, attach that text editing controller to the text field. In that text field, definetely the area is a property called controller, to which the value should be dark controller name. Now, the third is retrieve the value of the text field by using that dot text method provided by the text editing controller. So here you can see this will output W, that is, when we write that text editing controller name, then dot txt, it will output the string value. So I hope you have understood the steps of using one kilometer long stride on our own. So here, first of all, I will define that text editing controller and name it mean controller, which will equal to text editing controller. Okay? The first step is done, which is this created txt and ending controller. Second is at that dark Controller 28 texts film. We have this text field here. Let's see, does it have a property called controller? Here? This is the name, property name controller which accepts a text editing controller value. And our learning is named control them. Okay? Now, that third step is the value of the text field by using the dot txt. Now far that let's first below the text for when we should have an elevated and leave a date button. And in that child, I will just simply write print. And elevated. I print. What is the name of the controller? Name controller and dot txt. Okay. Let's restart in the name. I mean, right. Jeff Bezos. And simply click on Print and see in the debug console, you are able to put whatever I have in the text field. Also. If you want to show it in the screen. Ten simply we can make this homepage a stateful widget. And this name controller. We can have it somewhere here. Above that text will simply write the name controller dot text style x and have a font size of the font-weight, font, weight, bold, and lays, dot. What is good. And similarly like the OK. And now we just have those tests. That's it. Let's try it out. Does it work or not? Now, if I write Elon Musk and click on Print C, we can output whatever we have written into the UI this time not in the debug console because we are using set state. It just, I just want you to practice this again and again and understand because of this set state disbelief and Chen was again called. And now this text has this value of Elon Musk. Another way is to retrieve the value is we can let a variable called string, name is equal to mt. Suppose. And in this text field we can simply write on changed. And here we get the value. And this value, this, what is the name? String is name should be called took while you, that's it. And we can send tested as well. We can just set state this. And here the text should be simply name variable. This is another way of retrieving the value from the text field on change. But most of the time, people use text editing controller instead of this unchanged. But it's not like you cannot use. I will simply write name as who were. There's very good. No one is coming to my mind that present simply Bill Gates. But see, when I'm typing, it's updating the UI because on chain is like whenever we click on one keyboard, one alphabet, or whenever it's changed, the whole screen will be rebuilt. That's it. So these are the two ways of retrieving value. Most of their time will be text editing controller unchanged and get our other option sensors such as on editing country, complete on submitted. These are also other ways to get W. If you want to read more, you can search as well. But I have taught you the most, the most, use the most application or the most way of retrieving the value from the text field. Thank you. 28. Validating User Input: In this session, we will be talking about how to validate a user's input. But before that, you must understand a new widget called a form widget. Involving a form virgin in your app simply makes it easier to validate a reset and save multiple input field at once. And remember, we use the widget text form field inside form instead of just texts really. So we're here, we're using text will. But since we will be using form fully from now on. So we have to use that text form filled with him. So what we have to do, we will simply first of all, I would like to remove this name and onChange. Then for the form widget to work will simply wrap this column with the budget. Okay? This part is done now. And this text field should read text form filled. This is also done. Now the next part is form validation. So if you are building an applications, are if you are taking some input from the user, It's very necessary are it's compulsory that you validate input? Because suppose you have a password which should be minimum of eight characters and the user types only four characters, then we shouldn't allow him are a phone number should be minimum of 10 digits. It cannot just select nine digits and go and give a fake number to our application. So to make sure those adders never happened with us, we will have a very strong form validation rules. So to validate a farm in flutter, we need to implement mainly three steps. Step one is used a form widget. We take global key. So what is this global key? Simply remember that it's a kind of state which we will combine or you can say we, which we will give to the farm so that we know later on what is the status of the firm is validations are working properly or not for that. So it's just a syntax we have to remember. It's not think very complicated. I will just give it the variable name of foreign key and set it to blue bulky. And then here, form state. This is the syntax of assigning a global key of state and just copy it. And in the farm field, you will have this property called key and just paste it here. In this way, you are able to make sure that Lou bulky and your phone are connected. Now the first step is done. Second is use texts from failed to give the input filled with validator property. So there is this milliliter property which we have to use. Okay, We will do that. And the step three is created by 10 to validate farm field and display validation error. Okay, we will first do the step 2, which is assigned a validity rules to the text form. For now we have to use the validator function in that text fun-filled to validate the input properties it the user gives the wrong input. The validator function returns a string that contains an error message. Otherwise, the validity of function returns null. Let's go to the text form field. Here. I will simply have this validator property, which is a fine Shen Dao value, whatever is being typed. Here, I will simply check if the queue is empty. Or you can say if value is equal to. Now like this. Now you can see the empty string like this. Then I win. It turn field is required, otherwise, return null. So okay, and then next law of touch step was to create the button which we have already done, which validates it. Form filled. So here, this is the code which you remember, but now it's time to use the foreign key. I will just simply write qi dot state dot validate. Current date dot validate is equal to true. You can say, Yes, I will simply write, print. Submit 10 sexes for Li k died out. First, Stefan. And also I will submit not print. It looks professional. Within empty string. If I click on Submit, see Phil is required. So this is the validation I was talking about. This is very important because definitely when you have a login or sign up form, you have to show the user this error messages as a feedback because the user don't want to just stay on his screen and do nothing. And if I, if I write flirted and then print Submit, then you can see firms that we did successfully. So yeah, this is how you validate the form field. You can have multiple form fields as well. I will just show you one more form fill. Just simply write name and password and password or is it acquired order? No, I would just I will give it a length. Value dot length less than three. If value dot length is less than 3 and we get password should be more than three. Directors. Now I have a new x form free, but this foreign key, this font is enough to validate both of that text field and also for the second text field, we must create another text editing controller, which will be named password controller. I will simply copy and paste it here. Now if I write the name flirted, but password I only give 12 characters, then see password should be more than three characters. Now, if I have four characters and click submit, form submitted successfully. But this is how you validate multiple fields at once using the form key. And that is, that isn't, we use this widget to validate form fields or you can say text fields. Now, another concept which you should know RE, which might be handy for you is saving a firm. While building app, we probably want to save the form data to do something with that. In this set, we will just create some saving rules for other fields. And then when we call the Ancef my dad, it will execute those three rules. What I mean by that is in that text field, apart from validator, we have dead own on saved. And I will simply print out here. I will simply print out a name. Field is saved. And in their validity that is isolate on saved and print. Password field is saved. And to make sure this code or this function is executed, we simply write foreign key, dot current state dot save. That's it. So you might need it somewhere. It's up to you. But at least you should know that these concepts also there. When we go in to the app and gray colored, I'm going 2345. And click Submit. See nymphal the same password for lists save, and then forms submitted successfully. So here we have just print out valuing onset, but it can be used to assign the value two variables, r and do some network calling on what they were SET, does state or whatever you want, It's up to you. But every property or every method is being used for some certain purpose. And now it's up to a developer what he wants and what he doesn't want. But I hope you have understood how to validate a form field and make sure that user doesn't input whatever he wants. In the next session, we will be talking more about that text field and its properties. But until then, I hope you are enjoying. 29. Decoration and other properties: So till now we have learned how to use features of text field, how to validate, how to save and whatever. But now we will make it look good as well. So for decorating the texts will reuse the declaration property, which takes an input decoration as its value. Let's try it out. So we have this text field off name. Here. We already have this declaration property which is accepting input decoration its value. So now first is labeled text, which we used to give information to the user. Now I will just have to remove this. And the second is the hint text. So it says a solution. So I will just write your name. Okay, let's see. You can see first is use the hint and level properties to give information to the user. Now when I click on the name, you can see there is this additional thing. That is right, your full name. So and when we write something, it gets removed. And when it's empty, it is shown again. Second is you can add icons using I can prefix, I can add suffix, I can add properties of the input decoration. What I mean by that is inside the input declaration, first, I will show you. I can. I can, I can start. Now. Okay. Check it out. See, you have this icon here. Now when I say prefix a can, It's that same thing on Linden Lu are bordered, gets extended. It comes inside the border. When we are writing prefix and suffix, I can. We have this icon on the right-hand side. So only this is the difference. Nothing much. But there are finitely, this icon gives it a whole lot of efficient and look, I like that prefix one, so I will just leave it with that prefix I can. Okay. The next. You can also give powder for productive add, remove about it with a text field. So right now, if we are not writing or given any beautiful property, then down below are the down bartered is already days by default, you can remove that as well. To remove that, we simply have to write input, burger and save. And see that below border is. But if you are like me, that is I like the whole border. So our plan input parameter is the value which we have to assign it so that it has a border from all the sides of it. And it looks very nice. And also, I would like to give some spacing between texts, fill in text form fit for that I will be called psi squawks. It just gifts and, uh, give it a height of 20. So that there is this spacing between the two texts, farm fields. Now the third declaration which we can use is use helper texts. If you do not want a label, but you want a persisting message for the user. What I mean by that is in that password text form filled, I will simply have the helper text and password should be. Boss, greater than three. Okay. Okay. You have seen labeled texts, you have seen him texts. Now, let's see what is the helper texts. And see here, It's always there. If I click on the password, then also it will show here it will not be removed. So it's a good thing to make sure the user don't do any error because he might not know that your application, except password on legally then three characters in that case held. Text property is very handy. Now. And next is you can change keyboard properties for TextField as well. That is, the types are input texts, input type, text, that is normal keyboard, then text input type dot number, numerical email address, normal keyboard, we, we tend at the rate sign, date, time, then multi-line. So example for that is I will have a name, suppose then name. And remember this keyboard type is properties outside the input declaration here. And there's a keyboard type, text, input type dot number, and that's it. And I will say, and when I click on Name now, see this numerical keyboard pops up. So this is used when you are asking for age or you can save mostly phone number. For that, you have to use this keyboard technique. Now, what is the meaning of this obscuring text to hide text in if TextField set up skirt text property to true, we mostly use it in a password field. So definitely, you know, when user is and during his password, we don't want it to be in the normal alphabets. We want to hide it. For that, just go to the text form field outside the input declaration, right? Obscured texts and I just drew. And save it. Now when you go on the bus fluid-filled and type f, l, you the ER. So you can see that password is hidden, it just dots and not the proper alphabet. So it's best practice because the user also fills that you are, that this application is safe to use. Now, the next property or the next feature text field is controlling max characters, Codex Wilkin control them, Mac's character numbers, a term inside it. So if you know intuitively AT some length, are that our limitation? Same way? We can have this limitation. Suppose in the name field, we can simply write max length of 15 that say, more than that. Very clear person's name will be there. So I will just say here it's alphabet numeric. But since you ate 15, if I try to cross it No. Now more than that, I cannot type. So I hope you have understood the properties or the declaration of that text field. The same declaration can be used in text form field when we are using a form widget as well. So this is, I've written you want to learn about how to work with text files. In the next video, we will just learn about some new widgets like alert, dialog box and snack bars. So till then, just keep practicing. 30. Alert Dialog Widget: In this session we will be talking about the new version called the alert dialog. So an alert dialog is a useful feature that defines the user with important information to make a decision of provide the ability to choose a specific action. So in simple words, if you want to give something like a popup alert, the user has to select yes or no are conform for those 10, we can use an alert dialog box. What are the key properties of the box? Those are actions. That is the set of actions that are displayed at the bottom of the dialog. Typically buttons, which I already sketched is Canson are, I agree Those kind of buttons then tighten that I loved that dialog is displayed in a large font and the top of the dialogue in simple words, suppose, are you sure or a warning are important? This kind of keywords, then content. This gives a message description about the title which you will have provided. So it can be simply like, are you sure you want to deactivate your account then from the actions you can have a guess, IM or no, that's just a scenario I'm saying. Then simply background color or alleviation. So to show an alert, you must have to call show dialog function, which contains the context and the item builder function. So here you can see that syntax show dialogue, then contexts, real acceptor contexts and their bill. There is a function which returns an alert dialog. So let's try it out on our own. In the last video, we did till here. Now, vendor validation is true and the form is saved. Then we can show a dialogue like show dialog. And then in that context, it will be context. But the builder, dear Will we function, which returns an alert dialogue. Okay? So in the alert dialog, that title property, I will use as 10 Q. Suppose. Then in that content, I will write that text from submitted successfully. Submitted, successfully. Then in that actions, that is, water, the buttons I would like to provide are some kind of action that a user will take from this alert dialog. I will have, sorry, not text. I would have an elevated button which will write text. And simply K. And after when they use it, click on this, okay, I want this dialogue to disappear, this to pop out. Usually what you can do is something like done. Then you can also navigate to different screen. Or if you have a cancel button, then this navigator dot pop function you have to use so that the user again, this removes that dialog box from the screen and get back again to the previous screen. Let's see name. I will write flirt and password 123456. Then submit and see this. I was talking about this kind of pop up with that title. You have 10 Q and set the content here. And when I click on this okay button, see that dialog box or alert box disappears. And also apart from actions, these are the properties it accepts. There is alleviation, its background color. If you write background colors, accent, and then padding around that content. And see you can give piling titled by adding an owl in that shape, you can have rounded rectangle border or anything like this. So you can have round and then Googler border, border radius. Border-radius setup cooler will get 10. Let's see again what this background color and shape does to our alert dialog box. Knowing then name, I will let flutter again, password 123456. Now when I click on Submit, see that color is red and the borders are looking very good here because it's surrounded. So you can say it can be an alert that is something went wrong or anything like that. It's up to you. And if you click anywhere outside also, then also the alert dialog disappears. So it's not always necessary. We can if we want, we can also make sure that doesn't happen. But I guess there is a different property for that. If you want to study more about it, you can just explore on your own. But a basic, we have now learned how to, how to use a basic alert dialogue in our flutter application. So in the next session or the next video, we will also talk about a new widget, which is the snack bar. Thank you. 31. Displaying Snackbar: In the earlier session we talk about dialogue. So in this session, we will be talking about a new widget called the snack bar widget. Snack bar widget is used to display short message. It's usually displayed at the bottom of the screen. And also damn message is displayed for a very short period of time. And vendor a and vendor specific time is completed, it will disappear from the screen. So when we are using the snack bar, that user doesn't have to do any action on it. Pretty not interrupt his app just but when we were using alert dialog, it gives us hip pop up. So that user, whatever screen he or she was working on he was using, that will be interrupted. But snack but is very lightweight and it just comes and goes. It, it does sent. It doesn't make the experience uneasy, ready, unpleasant to the user. So this is the syntax. It's a basic snack bar and then content. Here, content accepts a virgin as value, which is usually texts visited. Now, how to display a snack bar? To display snack bar v, have to use this code that is scaffolding messenger dot off context. And after that we can then show snack bar. Let's try it. Now. I would first of all comment down this dialog box. And here I will show us snack bar with simply scaffold, messenger dot off context dot C. Here you have show snack bar. And inside it you just have to write neg bar. And in that content, you can write form submitted successfully. Okay, let's try it out. Bring your emulator. You name the password 123456. Now, when I click on the Submit, see form submitted successfully, and after two or three seconds, it disappears. So it's a very good feedback to the user. If there is any error. Suppose the password field or the user already exists. So this kind of error messages are success messages can be displayed using the snack bar. Now also apart from content. Thus, snack bar has other properties as well. Like action. That is, suppose you can also have something like dismiss, cancel, OK button. Same as the alert dialog box. Then background-color. Suppose I will add colors, dot-dot-dot, read, not read, since it says success, then I will let green. Then there are margin, padding shape, duration as well. It is if you want the duration to be less. So here you can have seconds and I will simply write 1 second. Now let's try it again. Flirt. Then 1, 2, 3, 4, 5, 6. And submit. And C form submitted successfully. And now since it was one, Secondly, it disappeared faster compared to the earlier one. Earlier, I guess it was two or 3 second, a default one. Now it's up to you how many duration you want. Or also if, suppose if there is an editor, you can have the background color is red. So it's a very good feedback to the user. He is not confused why he's not able to log in or something like that. So just remember this neck but is very important for widget. And I guess when compared to an alert box, let dialogue v will be using snack bar more frequently in our application later on. So that's it. For this module. We have learned how to utilize text will visit how to retrieve its value, how to validate, then what are the properties of text field? And then Andy and we have learned about these two new widget, which is the alert dialog and that snack bar. So in the next module, we will be starting a new topic. Tilden. Just keep practicing. 32. Understanding Futures: Hi, welcome to the new module where we will be discussing about us synchronous programming. So if you're new to this concept, you might be thinking what is a synchronous? If you see closely? Simply in a normal way of writing codes, codes are being executed line by line. That is from top to bottom. And until one funtion complete execution. The next function has to wait. So it will wait until that line of code is executed and it will go to the second line. But in asynchronous programming, we mentioned the functions which may take time to execute and wait for the completion embed ground without stopping the execution of the next piece of code. In this way, parallel execution of code is achieved. So simply just assume that you are uploading some file to the database, to the server. So till that the file may be big and it may take some time to execute. So in vials that phi is being uploaded, you can also serve browse or do some other things in the app. So you don't have to wait till it completes a 100 percent. So this is a very nice one example, the other different examples as well. So when we will do it practically. So then at that time you are, your doubts or concepts will more clear and you will understand it properly. That's it. So when we talk about asynchronous programming in that two terms that come to our mind, our futures and streams. So these are the two way of types of us synchronous programs. You can say. We will discuss it one by 1. First, we will discuss what is a future. So if you chair is simply what its name is. Debt is that data will come after sometime in future. Imagine we will asks for some data from database and the result will be returned after a few seconds. So definitely venue. Start your Instagram app or Facebook. It takes one or two seconds to refresh your feed. So dead time, you might be able to do something, but are you may not. It's up to them, but that is one example of future. That is, that data will come embed near future. And it's a guarantee that something will come from the ended. Either it's a data or it's a null. If there is no data, you just have to remember that concept. That's it. So now we are understood what our futures, it's time. We'll know how to define the future. If you, Chad is defined exactly like a functioning that, but just we use future as a prefix, prefix. You can see as that data type return type. If you want to maintain the return type of the function, then you can write this future then type I that that function is returning some kind of string, boolean or void. That is, it's not returning anything, but it will be doing something. That said, now, we know how, what our future's, how to define a feature. Now it's time. We also know how to use the future in our program. There are two ways to execute a future using Dan catch and using async await. So future events I usually network requests are input-output operation that is, from your own device. It will save something or it will retrieve something. But here we will simulate our fake and network request by using Future dot delayed, which will help us to understand the concept without calling an actual API at this moment. Because in the next module, we will be working with real data, which will becoming from a dedicated API. At that time also, we will be using futures. But for the purpose of understanding the concept, we will just fake or simulate death scenario in our application. This Future dot delayed takes two arguments inside it. So to execute it, we have to pass two arguments. First is duration, which will specify how much time it will take to execute. And second argument is a function that should execute after that time duration is finished, is completed. Now enough with the theory portion, you might be thinking, okay, I have understood something but there will be a lot of doubts. To clear those things. Bring out your text editor. In the leaf file, I will create a new file of future screen dot-dot-dot. Here. Import material, as always, have a stateful visit of future screen. Then simply scaffold app part. Then I will just give future. Okay. Now in the body, lead service and television, then child having elevated button. And in that text you can simply say, Click here. That's it. Now, go to the mean and make that future screen your default screen, default main file. Okay. Yeah, we have this page. Now what we will do is we will create a function which will be a future. Simply create a future void. It will not return anything for now. Then give it the name of Get Data and AI. Then what we can do is use Future dot delayed mattered. See Future dot delayed method to fake a network call. Now the hear that data should appear after three seconds. And what should have been here? What should do? What should be done is it should print. It's flutter. Developer. Because here the first argument was the duration and the second argument or as a function that's should execute after this Future dot delayed. Dynamite is done the district second. And the next line of code we will write here is random line of code. Just imagine, just remember this thing. And since it's a future, it should be synchronous. We have to write a sink there. It's, it's a thing that you have to remember all the time that that flutter should know that this function is an asynchronous function. That's it. Now, copy this, get data on, press execute it. Now. Now just save Also if you want. You can have, again, two futures just for the sake of understanding and will give a t second end up below 12 seconds. If you are getting envy, you can just pause the video and try to understand that code again and again. Oh, okay. Now, if we see our code from top to bottom here, user ID should come first. Then this, hey, it's fluttered development, that is the user's data. And then this random line of code is the last line. But when we click on the button, see the first thing that gets executed or that printed out was random line of code. Then that, hey, it's flooded developer. And lastly the user ID. So you can see that futures. What is a future? That is, it will take some time off two or three seconds. But after that, the value, we will get the value or the code will get executed. But it doesn't stop. So that was the thing that it didn't wait for three seconds to execute. It just went directly to print a random line of code. And it just executed that line of code. So this is running us synchronously, but there is one issue. That is, the username should be fetched only after user ID. That means we should wait for one function to execute. Just imagine if this is your Instagram app, then when the app is calling the database for the user's information, are the user ID. After that, only, the home screen should appear with those details. Without the details, it should wait and don't, and shouldn't go to the next line. For that purpose. We use This Dan catch. So using this then catch means after this duration are these futures is completed, then only do does second line of code are then only do the second thing. So just wait and try to understand. Dot Dan is attached to the very end of the function. So here, before this semicolon, I will just click dot and then see there are a few things and we will use dot-dot-dot. So what it means is first the future should execute and it will take three seconds. After three seconds when this sprint is done. Then on Likud to this line of code, that's it. And then catch it and wins. If while executing this function, if something, some error or something went wrong, then these should, for now print dot print that added. But usually we ve give a feedback to the user using a snack bar or some alert box. So if you remember the previous output, it was random line of code at first, then hates Florida and then user ID. But now we want a user ID. This random line of code will execute first because this is a future and it will take some time. So yeah, It will not wait and go directly. But you can see in this output that the user ID, we have the user ID and then only we have the users detail. So we have successfully conducted, wrote a future function in theatre and also learned how to weight or how to use the catch error while working with futures. I hope you have understood the concept. If you have some doubts, I will suggest you to just have patience and Vig. Because in the next two or three modules, by the end of the three models, definitely you will have all your doubts clear because this is just a very dummy example. But when we are building real application, you will wilting. Okay, For this reason, while we are, while you are learning these things are, this is the use case scenario for 10. So that's it. In the next session, we will be talking about this. We will be talking about this sink and await. Because using Dan cage and using async and await does the same thing, but they're way off. Writing code is different. That's it. Hope you practice and you are practicing a lot. See you in the next video. 33. Async Await Concept: So in this session we will be talking about async await keyword while using a future. In that previous session, we learned how to use them catch error, and it definitely works well. But there's also an alternative syntax that many fine to be much more readable and also to avoid multiple chain of dengue cage, we use a sync keyword. Afterwards our function name, and add await keyword before anything that needs some time to run that. Just for example, our GET request or this future delayed. Now, everything after that await will run when the value has been returned. So what I mean by that is you can see the syntax. We have this future and future name. Then this function has this keyword of it, which simply means this print variable will only work if this future financial return that value or else not. So let's try it out. First off, you want, you can do it with the same example if we want. Now, I have this function outside that ten o'clock and I will remove it. Now. Suppose this function returns an ID that is one and V have this id stored in a variable called user ID. But now, but now that thing is V1, that user ID, and bring it out here. Okay? So if we do it right now, definitely, it will show some added or something like null. Si, hay, its future user instance a future that means that value has not been stored in that user ID variable. We should wait. And here comes the keyword weight, which simply means this function. After this function executes, then on leader code will go to this line. So now what you will see is when I click on this button, this random code of line is not executed. First. This is executed. Then this because it's in sync, we haven't told to wait here. And now this has this value of 1. But this concept is very, very, very important because when we are building with Firebase and databases, the future will be used all the time that I'm. So that is why you have to understand it. This await function clearly await keyword I will say. Now you will say no, I want to wait for this also. And at last the quotes should be executed. So simply write a weight function. Before this function. And now you will see the output change. First, user ID, second, hey, it's flutter. And then random line of code. Because we have our application to Whittier. Until then, don't go to the next line. So it's a very important concept. Please try to practice it again in a kid. Now you might be asking what will happen if there is some kind of error. For that, we use this try catch block to catch any network error. And toward those things here, That's it. And in the catch if you want, you can just bring directed. Because previously we had then and catch it. But now when we are using async await, we should use that try catch block as well. And sink doesn't mean only you have to create this kind of separate IT function. Now, suppose we have this print. Second function. Suppose. Now what will happen? When I click here, see second function is executed first. And then this get the doubt because flutter knows that it's a future. So it, that it didn't wait here and went to this line of code. In this scenario. Again, if you say no, I want is get data to execute first, then on lip print this second function line of code. Then again you have to use a sink here and a weight here. Now check out your output. And we were able to use, it's a function also, and this was also a function. So you have to understand that you only need a function for us in to work. Now, this line is executed first and see, it was executed at that last. So I hope you have understood the concept of async, await and futures deeply. Because this concept is so important that we doubt this concept, you wouldn't be able to work on any further application. And don't get don't be overwhelmed by it. Because I know it's a very new concept if you are new to this programming tin. And if you haven't understood everything, it's fine. Because as a beginner, I understand that you will have some doubt. You will have to practice a lot, but eventually you will get it. That's it for today. I hope you are enjoying our photo sessions. And also when you are not watching our videos, I'm just trusting you that you are practicing on your own. And Q. 34. What are Streams: Hi. In this session we will be talking about streams. Earlier we have discussed what is a future, but now it's time V node, the second type of synchronous programming that these streams. So when we are using streams, then we have many values being fetched us and honestly, and instead of appending a connection once, like in future, we can make it stay open and ready for new data to come in. Simply, any change occurs or any new data is inserted, it will reflect at the end. Future has only one response, but stream could have number of responses. So simply, I would like to say that when we are using a future, if something changes already knew notify or new message appears, that a user has to refresh this page or application. But when you are using streams, it's in real time. That is, any data change, their database will reflect directly in your application debts. It. You don't have to have, you don't have to think anything else. This is the basic difference. So in the next module, we will be talking about streams more practically because we will be using Firebase. Here we will again simulate our fake, an event that returns a new message every few seconds, just to make you understand that concept. So there are four steps involved. Creating streams, adding data to a stream, listening to a stream, and then closing a string. Let's do it practically. Bring out your text editor and have a new file called stream. Screenshot dark. Again, the bare minimum thing we need, right? It's fine. I will uses the less rigid because the UI has not been changed. Stream, screen, dense, scaffold, Dann die Daten text stream. Now, what we will do is we will simply create a stream. And to create this stream, we have to predict stream controller, which will be used to control that stream. Stream. Stream controller is due leg this. And this is automatically imported because we are using streams and odd. The second step is to add data to the stream. For simply for that, create a function called stream data. And here you can have a for loop of int I is equal to 0, I less than 4, I plus, plus. And then stream controller dot add. You got the message. And then I will just wait for two seconds here. Then only is FOR loop will execute again. This seconds to, that's it. Nothing else. Now in the body. Let's have a alleviated, but done. Whose shine? When we Click to stream. Then in the main, make it default. Screen and just rebuild or the stat. See. You have this the stream. And we'll just make it centered. Okay. Now in that stream data, I will seem, please list, start listening. Do, does tree. That means listening means any new data comes in. Each should get printed. I will simply print data. And the string data I will assign to that function. I know there is a lot of things to understand here, but you can just see dust steps. First to us creating a new stream. Second was adding data to the stream. Tired was listening to the stream, which simply means what? That simply means, which we started connection that this is true is basically like a river. That is when you start one. If, if task starting point is not closed, then that data or the water will start flowing continuously until and unless you block its way, simple as that. Okay, Let's click on this button. You have got the message. You got the message C3, 4, four times it print because we have this four. And if you are thinking no. So I will just write print here after two seconds and it will simply print, read. Kay? Let's try it again. Sorry, this because it was a stream. So you have to restart it. Because it already started listening. You cannot do it again and again. See you got the message. Read. You gotta message read, you gotta message rate. So here data us continuously flowing. I need change was deflected without us changing, restarting the application. This is done meaning of the stream. That's it. So you might be thinking, what happens if I know the data gets entered? So if another data gets entered later on also, then also it will be printed. What I'm saying is, let's have a floating action button. Shea. I will simply write, add an on-premise. I will simply in that stream controller, we'll add you have a new node defecation. Okay. Now let's see. Here I haven't wrote any print or anything, but since it's listening via have already wrote this code and execute it. Like if I click on this, it started to listen. Now, after everything is done, if I click on Add, see you have a new notification. So we don't have to listen again as the connection was already open and needed that, that flows inside that stream will be outputted. In simple words, just imagine you have your messages on notification bar here. If anyone sense you new notification, our message, this count will increase 123. So this is the concept of restraint. In simple words, what is the difference between future and stream? Futures executes once one state goes to the database and bring that into that connection is over. If something changes in the database, the user have to refresh this page or has to restart his application, then only a new future request will be sent. But in case of freestream, when it goes and ask for the data, it, it, it appends a connection. What, and in that case, if that value or if anything changes in the database, it flows directly from the database to the app. Without the user refreshing or anything. It will just update here automatically. I hope you have that basics clear. And also with the real-world example we will do in then next modules. But till then, just enjoy whatever basics of whatever theory we are learning. Thank you. 35. FutureBuilder and StreamBuilder Widget: Welcome back. In this session we will be talking about a new widget called the Future builder. And it basically is a visit with helps to deal with futures. Some future when that removes some of the code which we have to write when we're fetching something from that network, that is from the database or server. Let's say you want to fetch data from database on launch of the application and show a loading spinner till later comes, in that case, future will look comes very handy. It's not like dead readouts. Future will there cannot perform the task, but it will take a lot of time are some more code. You have to do some set state and all. But why do all these things when we have this awesome reject with us? So it's returned like any other widget. It accepts two parameters. One is future and the second is a builder. And the builder also takes a function which has two parameters. One is contexts, which is by default, and second is snapshot, which is just a variable name. But it's very important because it contains the data returned by the feature function. So here you can see the syntax, simply future builder. Then future is the function which is returning the future. And that builder, it returns a widget inside it, but it's a function. So let's do it practically so you understand it more. Go to the future screen. And what we can do is we can have this function return again. I just did it for testing. Let's have a future function called get username. And it will be same because it's the future. Now let's set a variable. Finals string. User is equal to Future dot d laid. Let's have a duration of two seconds. And then I have a function that basically returns the value of Bill Gates. Tessa Violet, the user variable, and then we return this user. Now it's a future which is returning a string value. Now this future has been returned. We have to show it in our body, will just remove everything and have a future. With us. A typo mistake. This future builder, which is first parameter is future, which we should assign this get username. And second. And the second is builder, which is a function and it accepts contact not exhibit gives us context and a snapshot. And it has the datatype of sync snapshot. So 10. Now, I hope you have understood it. First. We wrote this future Builder widget. We assign it to a future video. Now the important things, CMS, which is the role of this snapshot. First, we have to check if snapshot dot has data. If it's greater than, it's fine. Till then we will show some thing like a loading indicator. Will simply events could learn progress indicator. So this will execute till that time. That is this 2 second, first to second it. So till that time definitely we have to show something to the screen. And we will be using this widget called circular progress indicator. Now suppose we have data, then we will simply return. In that child, we will have a text widget. We will output dot data, which is inside the snapshot. Snapshot data. That's it. Let's try it out on our own. We start sorry, I mean, we have to assign this future screen. See this loading and indicate there was there for two seconds. And then we have Km value, which is being returned by the future function. So I hope you have understood the future builder. Most importantly, you have to investigate in the snapshotting because this is that thing which we will use to manipulate our widgets. That is FASTA file show a loading indicator and then show a show or are put that data. That's it. So yeah, you can see the code here again. Then next we did is a StringBuilder. Stringbuilder works same as a future builder. Only difference. It, it continuously listens to that change is made and updates the UI accordingly without having to refresh or rebuild our screen. Now StringBuilder also takes a two parameters, that is trim and a builder. Now also build that takes a function which has two parameters, contexts same as by default. And snapshot is just a variable which contains the data. Let's try it out again. Go to the stream screen. Earlier we create, we created a dummy future. Now we will create a dummy stream, stream. My stream. It will not be seeing, it will be seen as trick because since it's a string in future, we have this sync keyword, keyword that will, that is assigned if it's a future. But when it says stream, we have to write a sink asteroid. That's it. Now, here is simply, I will simply have this for loop function where I will read what I is equal to 0. I less than 10, I plus, plus. And I will yield not return. I will leave that I value. And also I will let future dot D lipid here so that the values takes a little bit time. Our function is written properly. It is what it simply, it's saying that far I should go from one to nine and our value should be inserted in the stream been bound, that is 1, 2, 3 it to just float through the string. That's it. Now again, we will have the stream builder. First parameter is a stream, that is my stream. Second is a builder, which will have a context, which will have context. And in snapshot. Now as usual, we have to always check if snapshot has data. If not, first of all, I will return a circular progress indicator. And if it's hazard, if it had data, then in the center we did have a child. And the text said snapshot dot data dot toString. That's it. Since it's an integer, I did two string here. And in the homepage. Now right stream screen. Restart and check the output. C 12. Three, we are not doing anything. We are not refreshing the page. But since it says stream, data values are being updated in real time. So finally, I hope you are concept of streams and futures are clear. At least you know the concept, that's it. I'm not saying you should know each and everything, what we have written here and everything because it may be a little bit complicated for you right now. But trust me, when we will be using a PS and Firebase, all your doubts will be cleared. So that's it for this module. In the next module, we will be implementing real APIs in our application. And all that data's will be coming from the server. Thank you. See you in the next module.