Flutter Tutorial For Beginners - New Flutter 3.0

this is how to learn flutter in 15 minutes let's start right now first thing first you have your folders inside the library folder you have the main you double click on this and you will have this page if you start your application you can see you can click on this button this will start the application and it's a counter app or you can click on run and start debugging f5 once you have this application now what we'll do is we'll remove all the comments so this you can see it's comments it's not code you can remove this we will also remove the bar on the side so we can click ctrl b and this will move the remove the side we will remove the end the increment counter we don't care about this we will start from scratch all right i remove the comments and now i will just keep the scaffold and i will remove all the things inside so you should have something like this okay i will remove the the comments there also and there also awesome you have those two things you can restart the application if you want this will restart everything or you can just refresh the screen you can see right now because we have removed pretty much everything we only have a white screen the scaffold is the the skeleton of the application inside you can have the app bar and flutter is widget over widget it's very nested one inside the other so you use a widget inside you have an argument and in the argument separate with the two point you have another widget this one will be called the app bar widget and if you don't have the pop-up like i do like this you can just click control space and you will see the pop-up and you can click the arrow to have more information about each things we will use the app bar you can use the arrow to scroll down and we take the app bar as i told you flutter is widget inside widget and to add another widget inside one you need an argument and then you use another widget and all the widgets start with a capital letter so it's very simple to know if it's an argument or a widget let's add another widget and also if i press enter you will see my code is working but it's not structure if you want to structure it you can right click and say format document or you can just press format document shift alt f so if we control save if we save the app now we have a nap bar we can add a text inside the app bar to do this we will need to add an argument inside the widget so we click inside control space to have all the argument available and the one we'll use is title if you go over title you will see this will tell you you need another widget inside there is a widget called text and again it's with a capital letter the widget and the text if you go over you will see this take a string which is a text value you will just use the quotation mark and then you will write by example i don't know flutter you will save and if you save this will automatically trigger the urge reload this thing it will refresh the screen in other words now you have a little problem with the blue thing if you go over you will just see you can click quick fix and you have the error problem prefer a const this this needs to be a const value so a constant i will click on add const because if again i just go on click on quick fix add a const and this will add automatically next thing with flutter if you have two bracket one after the other you add a comma and then you use the command i show you the format document i will use shift alt f boom this will restructure your code perfectly i will save and now we have the flutter in the app bar another thing i want to remove is the debug banner this one will be located inside the material app widget we go inside i will press ctrl space and write banner this is the one if you go over you will see this ask a boolean a boolean is a true or false value i will write false ctrl save boom we don't have the banner because the banner is disgusting the next thing i want to show you is in the scaffold as i tell you is the skeleton we have the ab bar which is the top and we have the body it's an argument buddy the body is all the middle of the app and in this one we will use a widget called the elevated button and how do i know it's a widget well if you go over buddy you will see the body required a widget with a capital letter so i will write elevated button i press ctrl space to have all the suggestions i get the elevated button and the unpressed argument will require a function a function is simple it's to bracket like this one normal and one curly first we need a child the child just means we need another widget inside and we will use a text widget which we have already used before and this one inside we need to put something by example add and we can save so we have a button right now that do nothing because we do nothing inside the function i will put the const before the text to not have this and we have to bracket what we do a comma and format document in the unpressed function we will use something called print this will print in the terminal anything we want so this has been clicked and you can see when you use functions at the end of the function you need to put a semicolon like this and now we have a problem print should not be called in production mode we are not in production but instead we can use debug print it will do just the same but we don't have the the problem i will format documents save if it was something like that and i use format document it will replace everything now when we click on add this will show inside the terminal the debug print this is this has been clicked to show it you can press a ctrl g and you can see inside the debug console this has been clicked if we just close everything and we redo it you see it this has been clicked i will press again ctrl j and next thing i want to show you is how to add another widget one over the other so we have one widget but how do we add another one that's pretty unfortunate because we have already one widget inside the body for this we will click on elevated button right click and refactor i will do it slowly right click refactor you can press ctrl shift air and you will wrap with a column okay this is a column widget it's still a widget but the column will allow you to put multiple widget inside a list so if you want you can just copy paste the elevated button like this format document save and you will have two buttons similar but we don't want this right now what we want is use another widget called the text field the text field you can see because we are inside a list we need to separate the list with comma all right now we need also the cons because this will be a constant this will never change um and inside we can add stuff like there is an argument called the controller the controller will require if we go over a text editing controller so let's create this variable i will go on the top and just before the override i will i will write text editing controller we will call this one a controller and this will be equal to a text editing controller but we use the bracket by saying the bracket this will define this information as a text editing controller now you can copy this and go paste it inside your controller and you can see that this is is not working because it's an invalid constant value now we use the controller so it's not a constant anymore good if we save now we have a text place we can write stuff inside and um actually what we can do we have yeah we have enough time um yeah what we can do is when we click on add this will add the text right under and delete this we could do something like that so i will add a text right under a text widget right after the comma because it's inside the list and inside we will add just a test for for now test i will save and you have the test so what we will do is we will create a variable i don't know just after this one we will say this is a string and data we can call this one data or text or whatever and this one will be when we start hello i will put the semi-column at the end all right because when you are over when you are before the override you define variable you need at the end of each variable to put a semicolon with flutter okay after this data we can put it inside the text widget right there and if you go over text you can see that this is a string which is the data is a string i will save and now you have hello if you want to put this information inside hello instead what we will do is when we press on the button the add button right after the debug print what you could do is say the data is now equal to the controller oops controller dot text no so the text of the controller i will save and now if i click add this will this is now the value data is now this information but we don't see it on the screen the reason is because when we press the add the screen is not refreshed and we need to refresh the screen how we do this we we call something the set state and maybe you don't have it right now inside your your possibility like this to have it you will need to have the extension awesome flutter snippet i have this extension you just enable this and you install this you will have multiple chunks of code uh super quick to do so you will save a lot of time i will go back inside the main i will put the ctrl b to remove this side and i will write set state like this i will put the data controller inside and i will format document now if i restart the application this should remove yeah perfect and we will say something random and if we click on add boom we have the text that's pretty cool but now how do we change page if we want to have another page so i will create another another button this one will use a text button uh actually no we will do it inside the app bar i will create a nikon button so obviously you you get it you could have created a text button but whatever we will go inside the app bar and inside we will say the um action i think yeah action this is a list of multiple widget if you go over widgets and we will add one widget which is called the icon button this one will have a num uh a function which is empty for now and an icon this take a widget to create an icon it will say icons a bracket and then uh icon bracket inside you put icons with the s and you will say next my example skip next whatever you can see all the icons if you click on this you see this icon all right um can we do like right maybe fork right whatever whatever the icon that's not a purpose we have multiple bracket i will put comma and format document save now we have the icon i will put this as a const and now we have two minutes so we need to hurry up if i click on this i want to leave on the other page so i will say navigator dot off context dot push and inside we will say a material route or material page route and inside we will just put a simple scaffold with the bracket i will put my comma like this and my semicolon perfect uh this is now what is saying uh type scaffold can be assigned to the type okay perfect the builder instead it will if you go over builder you see it need a build context so you will say this context and the arrow just like this so this will create a scaffold i will put this as a const and inside the scaffold we will put a nap bar so i will just copy the one we already have or actually not i will say a bar up bar like this a bar widget like this all right i will format document i will remove the cons because it's not required anymore if we save if i click on this this will bring us to a new page and we can just click this button to come back and that's pretty much it last one i want to show you is inside the material app team data you can change the color for our range by example and restart the application and everything will be team orange if you want in the description i will put a one hour tutorial like this so you will learn a little bit more and if you want to learn everything about flutter i have a full flutter course available on fluttermap.com i see you in the next one bye

Channel: Flutter Mapp

Views: 8,421

Keywords: Flutter, learn flutter, flutter tutorial for beginners, learn flutter for beginners, flutter tutorial 2022, flutter 3 tutorial, flutter 3 tutorial for beginners, how to learn flutter, flutter in 15 minutes, flutter tutorial in 15 minutes, flutter mapp, flutter tutorial

Id: aG9uSXdU2sk

Length: 14min 0sec (840 seconds)

Published: Mon Jul 25 2022