Build Your App With Flutter - EASY Tutorial

in this video you will learn flutter the fastest and simplest way possible so first thing first I need to tell you is I use the version 3.7.6 which is the newest version so you should not have any problems next I want to tell you that I created a complete checklist for this course on YouTube if you don't have it on FL map.com and the website has change you can go on slash. free and you should be able to find it inside this thing but I will try to put the link in the description of this flutter checklist in the description of the YouTube video okay so now that you have the checklist what we will do is we will create a brand new flutter project so what I can do is I can close this one I can close this project and we will create a brand new one first you need to open the terminal so you will go inside the common prompt okay and in this course we will use visual Studio code so I think it's way better for you to use Visual Studio code because I will use some extension and stuff like this so instead of Android Studio use Visual Studio code and also I prefer this one next what we need to do is to create a flutter project how do we do this there is a way to do it and it's the good way to do it so we would go inside the checklist there is a section called utter and inside this one what we will do is you find start a new project you just copy this code okay and this one will automatically set up the application ID so this is a good way to start an application instead of creating the way without the application ID this will save you time in the future so copy this and then we'll go inside the terminal I will go inside the document I want so you can see that I have a document inside my document flutter project and this is where I want to create my project so I will go inside this one and to navigate we say CD and then I will say documents oop documents and then I will CD inside the other folder which is flutter projects and after this I can create my project so I will paste which is this commment flutter create org your website and the app name so what we do is I will delete uh the website name and I will put mine which is FL map and if you don't have a website which is possible you can put anything it doesn't matter okay after this you will need to put your application name in this case I will say flutter YouTube and you need to make sure that everything is in lowercase and also if you want to separate words you need to put a little thing like this okay now I will just press enter and this will create a project if we go inside the file you should see flutter YouTube right there okay this has been open next I will close this and I will close also the terminal and we will go inside Visual Studio code to open this thing I will say file open folder I will go inside my documents and flutter project and I will click on flutter YouTube and I will say select folder great okay so at this point I already have a emulator set up inside my thing you should already have flutter installed and you should also already have the emulator set up inside your computer so first I will close this and we will reopen it so you can see how it works okay I want to show you step by step so you don't have any errors and stuff like this what we will do is you will click right there you see windows we will click on this and you will click on start a pixel or start the emulator you have and I will use the offline emulator okay so I will click on this and this will start the emulator later I will'll put this on the side next thing we need to do is to go inside the Library folder so lib you click on Main and when you click on Main you will see that now you have access to the play button and if you press on this this will start the application with flter inside your emulator and it will start inside the emulator because you can see at the bottom that we have selected the pixel 6 emulator great this will launch the application next thing you need to learn learn and know is some commments with flutter so I will press contrl J and you see that the terminal will go up and down okay and you can press also contrl B this will remove the sidebar okay so we have more place to code and all the commments are inside also the checklist if you go down you you should be able to find shortcuts so contrl B and contrl J okay and we will use a lot of commands inside this uh free course all right so I will put this on the side and now you see the application has been launched what we will do is we will minimize the terminal and the sidebar I will keep it for now we will go inside the Explorer and we have the main what we'll do is we'll delete pretty much everything this was comments okay you see I will delete all these comments I will delete this one and then I will delete all the comments inside my code okay from line 21 until the end we can actually delete everything because we will do it together from scratch so this is what you should have next we will remove this and we will create a new file okay to create the application let me show you we will create first a folder so you right click on Library you say new folder and we'll call this the pages okay you press enter and then inside pages will create the homepage so you right click again new file and you will say homepage. Dart and you have to make sure that everything is in lowercase again you see everything is always lowercase and when I separate words I put this little thing then you can press enter and now you have a dart file that's why we put the dart next you can say import material so you can see that I have already a command you you should not have this okay when I press on it this will automatically import the thing so it automatically import stuff and chunk of code how to have this inside your computer you will go inside the extensions and you will need to have the same extensions that I have the awesome flutter snip head this is the extension that will automatically generate code for you so you just have to write this by example and it will write a big chunk of code so make sure that you have all these extension if you forget about the extension inside the checklist you should have all of them if I go up yeah this is the five extensions you need so I will put back on the side and the material icon theme this one will actually show icons on the side which I think is pretty cool and the other extension is the better comment this will allow you to create commments inside your code with colors so you see we have the red color blue color and stuff like this I like this one so that's about it we can go back inside the homepage okay and in the homepage we will press enter and write stat less widget okay so I I will select this one this one with the square and the dot under and you should have something like this this class you will write the name of the class we will repeat this homepage but this time we use um big letters so home page like this okay capital letters okay and every words need to have another capital letter if you want to select both of them at the same time you can press contrl D and this will select both of them so you see we write two things at the same time again if you don't remember the commments it's right there you see we have the contrl D select the next identical word great what else we need to do we need to replace the container with a scaffold okay the scaffold is like the skeleton of the application so we will put a scaffold and for now we will just replace inside the main in the home which is like where we want to show the application we will put the homepage that we just created so I will save and now you should see like a wide screen like this all right so we will just put some something on the screen so at least you can see uh how it works I will put I will go inside the homepage and inside this one I will write app bar with the lowercase letter and I will write AB bar with the capital letter and now you see we have already a problem if we go over this will be a section inside this course also I will show you how to solve bugs by yourself so we will go on the App bar we will scroll down and now you can see that the Constructor being call isn't a Constructor so this is the Constructor the the constant we will remove the constant and now it work so let's save I will press contrl s again if you press contrl s this will save and also when you press control control save this should automatically out reload which will re refresh the screen you see now we have an app bar let's put some title inside this app bar I will press control space and we will see all the arguments available inside there is one argument called the title with the lowercase title okay and inside we will put the widget text I will put the bracket like this and inside the text if we go over you see that this will require a string data so it will require a string to put a string you just need to put this thing and you will write by example flutter map and I will save and and you see that we have the textt inside flut map maybe you have not seen it but this code will automatically put the const when I save okay this is a tip that it's the best tip ever if you go on the top you will see that we have the autoc const this work with Visual Studio code and to have this you need to control shift p so I will show you how to do this I will say control shift p and then we will open the settings Json so you can write settings and you should be able to find this I will click on it and you can see that I have this line of code I will bring back the the checklist this line of code will automatically fix everything when we save okay onsave action this fix everything put this on the side for now for this example I will remove it okay so I will comment this out because some sometime on Macintosh it it don't work so I want to make sure that we put the constant manually every time together but one day you will be able to just put it automatic great now I will save and I will remove this and if I if I remove the con and I save you will see that the con is not added automatically now so we will need to write it every time great this is just because I want to teach you flutter step by step everything you need to learn all right the next next thing I we need to understand is flutter is widget over widget simple as that let's bring the checklist if we go on the top uh it's not on the top it's at the inside the order section I think we have something called the uh key concept okay this is super important flutter is uh widget inside widget or widget over widget it doesn't matter okay what happened is we put One widget which is the scaffold then we put an argument inside the argument is the app bar then we put another widget inside and we put an argument a widget and like this one over the other forever it will create an application at the end okay so the scaffold is the background the ab bar is the blue thing the text is the thing over the bar which is the text great after this widget always start with a capital letter so you can see that all the widgets are in green and also start with a capital letter so that's great and all the arguments always start with a lowercase letter you can see that this is an argument this also and they are all start with the lowercase letter Al perfect after this uh this is the example we just did you see we have a scaffold which is a widget the app bar is an org the up bar this is a widget so just make sure that every time you have the lowercase and the capital letter perfectly set and flutter is widget inside widget simple as that also there is a command called the control space or on Mac is the common space uh yeah it's the common space this will automatically show you all the arguments available so you can see that after this one this is the argument which we have the widget ins side and we separate with a coma after this we have other arguments that we can use and if you press control space or command space with Mac you will see all the available arguments this is super important after this you can click on one of them and you see we have the actions and you can stack multiple Arguments for example I don't know the brightness and stuff like this other arguments inside the abar widget great you can see that this one is deprecated so we won't use it and we will just use the title for now you won't use always every arguments inside a widget just the one you need great after this we need to understand another thing inside this checklist we have all the widget we can use or the widget you need if you want to see how widget look you can click on this link flut map.com widget and you see we have visual A visual representation of some widget what is a column what is a row what is a stack a center widget and stuff like this we have also the visual layout which is the container the list style uh by example a vertical divider how to put a text we have already used this one the text right there and you can play with this you can just see how things works we have also all the user inputs that you can use by example a dismissible button and stuff like this you can play with this and have fun okay if you like this you can share it on your we uh on your website on on social media it will be very nice from you all right so you can see that we have layout visual layout user input show if we go inside the checklist so I will go back you will see that I have separate everything the same way we have the master layout the layout visual layout and the user input and stuff like this this is all the widget you will need to create pretty much every application and inside this course we will play with a couple of them for example this scaffold this go inside the master layout because it's like the skeleton of the application and all these widgets will be pretty much a skeleton of the application after this we have some layout this will just like structure how we want to have the widget how we want this thing to look and visual layout is all the thing that have a visual so when you put it you see something on the screen okay user input will be all the buttons and text field that the user can use to input something inside the application then we have some show this will show things on the screen which is pretty cool we will use the show snack bar later great so you have a couple of them we have some State the stateless State fold widget we will talk about this later also and we have the Navigator this is to change Pages inside your app so so that's about it you have also the section of of Dart this is how a value Works how to put a string int double Boolean stuff like this how to put function class pass data everything is inside this checklist and we will work with pretty much everything inside this course great so now we have this the next thing we want is to create the application I show you before so I will open it back this one so what we will do is exact ly the same okay but together and step by step so what I will do is first we will put the application if we go inside the main we'll go back in our app you see that we have a debug Banner okay we will remove this if you go inside the maal app like this you will put the debug Banner this one the B shock check banner and we'll set this as false okay how do I know it's a true or false value if you go over the debug CH check Banner you will see that this require a Boolean as simple as this and now we don't have it anymore the next thing we want to do is we will remove the uh mat we will put the material three okay use material three this is the new version of Android and stuff like this so it just look better I will put this as true also and save you will see that the application has changed material three will be by default in the future so it's better to put it every time so now we have already we live in the future kind of you understand what I mean all right now what we need is to put the following okay we need these this is a card okay so if you go inside the checklist you can go and go inside the visual layout and we should see the card this is the card wiet and we will use this one so I will go inside the homepage like this and we will go inside the body of the scaffold this is the scaffold Widget the argument body the argument abar but we have also an argument body okay and this argument body if we can go in the other app like this the argument body is all the center of the application so you can see this is all the body what we will do is we will put first by example a text a text and we will say test I will save you see that we have the test we can right click on text and refactor and wrap with a widget Center okay I we click on Center and save again now the text is in the middle this is the body we can now remove this because we want to put multiple thing one over the other for this we need to use the column widget like this so I will write column if you don't have this this uh you can press control space and this will show you all the widget available I will use column with the bracket and inside we will press control space and we will use the children argument you can use the arrow to select which one you want we'll use the children and we'll press enter great after this I will put a coma because we have two bracket one after the other you see we have the square bracket and the rounded bracket so I will put a a comma between every bracket inside the code if you save uh if you format document which is the comment alt shift F this will reput the code and put it restructure the code you see this is better visually and you have also the command inside the other section always everything is inside refactor you can uh is it no it's not refactor it's uh did I put it control space yeah alt shift F format document structure the code and make sure to had commas great so this structur code if you can't find it you can right click and you should see format document shift alt F great next thing we need to add a card widget so I will say card with capital letter again because it's a widget I will say card and inside I will press control space way to find arguments I will use the argument child and in the child which is what goes in what goes inside the card we will use the text widget with the capital letter inside we need to put a string so we will say hello for now I will format document and I will save when I save this will automatically refresh the screen you see we have the hello and over we have a little card what I will do is I will wrap the text text wiget so I will right click on text and I will say refractor with a padding wrap with a padding and if we save you will see that we have a little padding around the text okay you can see that now we have some blue line if we go over this is just recommendation it told us use a const which is a constant because this will never change it's just a text and the user input will never change this value which mean we can put a const like this and and the const we can remove this one because we don't need two cons one after the other we just need to put it at the maximal maximum level the the root level C and now we don't have error we tell the this is a constant and this will never change which mean every time the the user press on the screen or do something if the the screen refresh this will rebuild this thing okay but everything that is a constant won't be rebuil flutter will will remember and it will save time to build the application okay so now we have the card I will save and what we need is some image inside okay so for the image I have created a folder for you that you can download to have all the image you can download it from this flut checklist I just updated it and you will see you have now the images when you download this thing okay so you should be able to have the same image and when you download the zip file this is what you will have you will have all these image plus this text file this is where I found my image when I need some of them you have the icon 8 website and the pixel website I will close this and I will show you both of them first this is the icon 8 the only thing you have to do is you have to use the illustration and you can can also you can see right there you have either icons illustration photo music I will use illustration and I will say welcome press enter and you will have a lot of illustration like this I have found all of the one you have downloaded like this inside this website you have also the pixel website this one will allow you to have photos and videos so it's up to you you can either select one or the other but for this little course I suggest you to use the picture that I use because as you can see there is a the are PNG image which mean there is a transparent background and we will need this okay it's important so you can use the same image as I do so to use the image inside flutter we will need to create a folder I will right click inside the Explorer and I will say new folder I will call this one image and inside we will drag and drop all the image we need so I will take travel yay Space and Rocket I will say copy or we can just drag and drop it like this and now if we click on image we have all the image perfect we cannot close this thing we won't need it anymore all right so we have all our image but now if we want to use the image we need to tell flutter inside the pops spec. Yom so I will go down and you will see we have the pope. right there I will right click and and I will go down until I found the section asset like this make sure that you don't delete stuff inside this file because uh the structure of this file is very important like you will see you will need to put your mouse just before asset and you will delete twice one two perfect now we have allow the asset to be used with flutter okay the next thing we need to do is to put the cursor after the hashtag right click like this and now you will delete twice one two it's very important you do the same thing otherwise it won't work after this we will delete this and we will just keep the image folder with the slash okay I will use the contrl J to put the terminal at the bottom and now you can press on get package and we should be able to use the image let's try this I will close the pops spec. yon and we will go inside the homepage and I will go inside instead of the text we will say image with a capital letter because it's a widget Dot and we have multiple option we can use Network which will be an image from the Internet or we can use asset which is the asset we just added inside our project now you need to put the path of this of this asset you can either go over the image right click and say copy path and then you paste it okay or you can just write it it's very simple you just need to put the name of of the folder it's image so I will say image slash and I will use rocket.png now you see we have an error so I will go over and it's a good time to show you how to solve error by yourself so we will take the checklist okay and we will go down until we find the error section it should be like this the debug okay so you have two type of error with f you have either the error with the underline red like we have right now okay or you have other error when it's in the terminal and you will probably have the red screen okay by example if I show you I will create a red screen error after we have solved this one I will show you what is the red screen error okay so first to solve this one what you need to do is you need to go there and you need to put your mouse over the widget red with the curly line after this a box will appear and you will scroll down read the error and this is what you should see let's do this we put your mouse over we scroll down until we find the error and now we see the value in a const list literally must be a constant okay so we see that the program is about the constant so what we will do is we will go over and I will delete this constant and now it work the thing is this can't be a const and we we try to tell flutter everything inside this list will be a content that's the error it's a pretty common error so I will remove this one but now let's try to show an error with the red screen so what I will do is I will remove the image you can keep it for now it's just for to show you how error works so I will say a text and inside I will put my example a variable that I would create in 5 second I will say string text is equal or string text like this I will put this nullable and I will will put the text inside like this and I will tell flut this should not be null but this is false so we should have an error so I will save now you see we have a little error I don't like when flutter uh warn us like this so you can go inside the run and debug and click uncut exception we remove this we are not stupid if there is an error we will see it on the screen so please flutter so please the visual studio I mean don't show this next thing so I will play and now you see we have a red screen so the error is saying if I contrl J and I go inside the debug console how to solve an error like this you just bring the checklist and you see that we need to go open the debug console terminal this is what we did click the uh the link on the top and it will bring you to the error if you can't understand Google search perfect so what we do is we go on the top to find the error error we scroll down and you see that we have an error like this we click on the first link the main okay it's not this one we'll keep going down and now we see we have another link homepage I will click on this one and to click you need to press control click and this bring us straight to the error so we know this is the error and if we don't understand then we search this information null check operator use on a n value and this will tell us the error on Google we will do this later in this course but for now let's just remove this and if you have no idea what I just done with the null safety thing with the question mark and the uh the other thing it's also in the checklist so let me show you in the checklist you will have the null safety if we go on the top null safety is all explained there so the question mark mean that this value can be null which I told flutter and then after I use the the uh this thing the exclamation point to tell FL I confirm that this value is not null but it was absolutely false which mean it threw an error after you can uh read this thing to understand how n safety work everything is explained great now let's go back with our image I will control Z and control Z is also a command inside the checklist I will save and now we have the image if you don't have it and you have something like this okay a square unable to load the image it's either because you don't have the good pth or it's either because the image has not registered yet it can happen sometime the only thing you have to do is to stop the application you click this button and you relaunch from the main folder you reclick this thing this will relaunch your application and everything will work great now let's continue I will put this back and now we have the image what we want to do now is we will use uh widget to make sure that this go at the extreme okay so I will wrap the padding or actually what we can do is we can convert the padding into a container and the container like the padding have the padding argument but it's just way more complex than a padding because you can put other stuff like color colors. red and then your the background will be red we won't use this but what we will use is we will use the width okay the width argument is the size for the width and we'll use the double do Infinity like this and this will take as much place as possible so what we tell letter is what is inside the card the what is inside the card we want this to take as much place as possible on the WID which this is what happened for the uh Little Blue Line try to solve it yourself I will give you Zer second because we will do it together right now so uh this was just to put a con and how do I know this you just put your mouse over use a const that's why so flutter will always tell you the answer next thing we want to add two image back to back okay now we can add image one after the other because we use a column but now it could be nice to have also something to put horizontally okay so what you can do always you can always go to flutter map.com and use widget and you will see that we have a widget called row okay this one will be the perfect thing for us and it's also inside the checklist in the checklist you have all the widget that you can use you can see that you have the row right there great so we will use a row widget we will say row and this is after we put the coma of the card so the card is the first widget inside we separate every widget with a comma because we are inside a list I will say row and then I will select the first one this will automatically show us and I will press if you don't have it you press control space like this if I remove can when you press control space you will see everything so we'll use the row widget inside we have the arguments so control space children it's the same thing as the column and inside this one we'll use the same thing we will use also a card so we can copy this one contrl C and contrl V I will put my comma because always put commas between two brackets boom like this format document like this and if you forget about format document you right click it's this one format document and now if we save we should have something so you can see that if I save we have nothing that's great so that's great because I will be able to show you how to solve error yourself and now I will just put my comma because you can see that we have two brackets get I put my comma save and nothing happened on the screen why I would press contrl J and now we have the errors okay I will restart the app just to see what happened okay and now we have an error let's go on the top this is the type two so we go on the top and the Box contrain Force an infinite width okay so what happened is we have a row this is the row and inside we have the with which is infinity but the row is also Infinity so it's like a double infinity which will crash the application so we will remove the width and we will save and now we should be able to see it on the screen so I will save again and you see that we still have an error so what we will do is I will restart the app again and now you see that it work that's perfect that's fine so I will press controll J to remove this and if you want to REM to reset the screen you press this this will reset the screen and this will restart the application okay this is the difference so the next thing we will change the image we will use space for this one now it worked and we want to add another image next to this one so I will take the card I will copy this and I will paste it right under because we are still inside a list this is our first widget in the list this is a comma to separate both of them and we will put another widget after okay now we have another problem this mean we don't have enough place on the screen to show both image one after together so what we can do is we can use a widget called the expanded you should be able to find it inside the layout because it's not visual it's only to to structure the thing so we have the expanded widget this one we will use it right now so I will wrap the card I will right click and I will say refractor with an expanded widget so I will say wrap with a widget because we don't have the suggestion and I will say expanded I will save and now you see that it work but we can do the same thing for both image we can wrap both of them with the expanded so I will right click refor uh refactor W with a wiget expanded so we'll use this one and I will save so you see that now the image are way better okay the next thing thing we need is to add the last image on the bottom so I will copy the card one again once again I will go after the row because this is our second widget inside the column we have the column all the list like this and this is our s witchet you can click also like this if I click next to the uh next to the bracket I will see the other bracket okay so this is how I can visualize which widget are the next one after the comma we will put the card widget and I will save we have again an error and this is because the screen is not scrollable okay so we can either wrap the column so I can right click refactor and wrap with a widget single child scroll View and I will save and now our screen is scrollable but the thing is what we want is if I go back to the other thing that we want to create oh actually that is what we want to create which is pretty cool perfect so we can do that I thought it was a different layout so that's good and what we need to do now is to change this we need to have a text and a description and that's about it for this page so I will right click and go back inside my app this is the one we currently create and we will just change the image first so I will say the second one will be by example travel and the last one will be yay and I will save great now we need to put a text right under so we need to wrap the image okay with a column widget if we wrap it with a column Widget the image then we will be able to other to add other widget right under so what we'll do is we have the card we have the container and the container uh we have the image so we'll use the image we will right click refractor wrap with a column and now we can add stuff under so I will say text and I will say by example title and I will add another text right under text description and put all my commas and save so we have the title and the description now we need to put this as constant because this will never change that's good the next thing you want to do is to change the size of the title so you can go right after the text like this you can put the coma and write or press control space to have all the options and one of them is the style this one will take a text stle okay so I will click on style if you go over you will see that this take a Tex stle so we use the text stle and inside the texttile what we will do is we we will press control space and we have have multiple option one of them is the font size okay so we can click and if you don't have this box on theci side to show you more information it's because you need to repress control space okay this will show you even more stuff so you will use the font size and the font size we will use maybe 22 I will put my coma all at everywhere I will save format document and I will put this on the side because we will have more place to goe so I will press command uh control B okay so the other thing we need to do is to put this as bold so I will go after the font size and I will you have your comma I will press font weight font weight oops font weight and this one will use the if you go over you see that this will take font weight so we'll say font weight. bolt it's already already a suggestion and you put your comma save now you have a title that's great what else do we need to do so if I go back we have this maybe a space on the top in at the bottom and that's about it so we'll go back in the application and we'll add a space after the description and before the image so I will go before the image inside the column I will use the sized box which yet this and I will use the height argument and the height would be by example five and then you will put your comma I like to remove this one and save so you have a little more space like this if we put 55 you will see you see it's a little bit bigger okay we will do the same thing for after the text description so I will copy this and paste it right after description let's save you see that now we have a little little more space we will put maybe 10 and I will save that's great so what is good to do is to open the Explorer and all the thing like this like 10 five and the numbers it's usually a good thing to put them as constant so what you will do is you will go inside Library you will right click and say new folder and inside this one but you you will call this one core press enter and inside the core folder I will create a new file called the constants dot Dart like this so this will be a constant it will be a double why a double because if we go back in the homepage you will see that the height take a double and the ENT sets. all take also a double so we will say inside the constant double this will be called the kou 5 equal to 5.0 and you put your semic colum at the end we have created a constant we will do the same thing for a couple of them so we will use 10 20 and maybe 40 okay so I will say 10 20 and 40 so you can re rename them also so you will use 10 20 and 40 so we have created Five variable or five constant that we can reuse throughout our project I will close this and I will use them right away so you see that inside height I will say k double five this one and I will press enter and you see that this will automatically import the package flutter YouTube and I will click this if we go on the top you see that this import the core and the constant if it doesn't import automatically for you you just need to import them so you say import and then you will just say by example core and so it's core slash or is it I don't usually import them like this so yeah you can use this like that core and constant so it doesn't work like this it work so you need to double dot use this and conent usually it will automatically import this for you so you don't have to to struggle like this and why do we put the two point before this mean we need to get out of this folder so we are inside the page folder we get out of this one so now we are inside the library and from the Library we can now access the core okay that's why we need the two point like this okay after this we can replace the 10 also we can say kou 10 and we can say the the eight will be kou 10 also perfect we need to add all the constant before so I will say const and I will say const and I will save and that's great after this we need to do pretty much the same thing for the other the other card so I will just copy this card because we don't want to redo everything like this I will just copy this and I will put it inside the row so I will say maybe we can replace the card this one if you remember we just need to remove the the width Infinity I will save and now uh actually we will do something even better I will show you something something new okay we will create inside the Library we'll say new folder and we we will call this a widget this will be the widget folder inside this one we'll create a new file called the card widget. Dart and what you need to do usually is if you create a widget folder every time you finish inside with every time you have a file inside you end with the widget it's the same thing with page you see I end with page we are inside the page folder I end with Widget we are inside the widget folder this is easy to find out your folder after when you have a bigger project okay so what we will do inside this one is we will import M this will import the material flutter this will allow you to use all the widget with flutter and the import m is used because we have the extension awesome fluts the bed okay so next we need to create a state less widget so I will write this and I will select this one the state less widget I would press and I will replay is the name so by example if you if you unselect you can click name contrl d and it will select both of them you will call this the card widget just like that the same name as the file and after this inside we will paste the card so I will go inside homepage and I will copy this card like this we copy this and I will put that I will put it or you can actually cut so control X to remove it and we will go inside the card widget and replace the container like this I will format document and you can see that we need to repport the double 10 so you can just put your mouse over you can scroll down and you have the option uh Quick Fix Quick Fix is a good thing for you with flutter it will save you a lot of time so you just click on Quick Fix and import core constant just like that okay uh it doesn't appear always but but when you have the Quick Fix usually it will solve your problem okay after this what we can do is go back inside the homepage and we can call this new widget that we just created this is a custom widget called the card widget we will use this one inside the homepage. doart and we will say card widget I will press enter and this automatically import the widget card widget we can remove the core constant because we will not use use anymore because it's inside the card widget now and we can put this as a constant so let's save to see what happened you see that nothing change because it's the same structure but separate into different files so now what we can do is we can replace this card also and we will put the card widget and this will create an error but we will solve it together so we'll say card widget I will also do the same thing for the other expanded like this I will put this as a const just before the list okay because everything is a constant now and we can replace this one also the card oops this one would be just card widget great we can put the constant and it's about it so you should see all the same image now but now you see how the code is way smaller it look just better okay and this is something you need to do because otherwise you will have a file with like a thousand lines and this is just way easier to understand the code after this uh you can see that uh everything works which I don't think it should work so I will restart this I will go inside the card widget and you see that this use the width double infinity but it seems to work anyway so I will press contrl J like this and you see that we don't have any any errors which is good so I will repress contrl J and now what we will do is we will create a logic to be able to send the title and the description information inside this card widget how do we do this so I will bring back the checklist and what we will need to do is we will go inside there is a a section so you don't have to remember everything by heart you just have to go in the code and you will find out go in the checklist so you can we will create a class later but for now what we want is to pass data inside another widget and this is how we do it so we have two options we can either go with the stat less widget or with the state full widget for this example right now we use the state less widget which mean the screen will never change there will no there will be no refresh if the user click the screen and everything so we use the stateless widget we'll go on the top and what we need to do is we need to say required this. Title by example so I I created multiple example if you want to do call backs functions uh if you want to do uh Boolean stuff like that for now we'll just use the most simple one the required disc title and then we need to call the final string title we'll do the same thing I will go right there and I will go inside the Constructor so right there when we recall the name card widget this is what we call a Constructor it doesn't really matter what we need to do is just put stuff inside so I will press the command the comma and I will say required this. title I will put my comma again you see that we have a problem this is because we need to put the other part of the code which mean is the this the the title will be a string title and semicolon okay we still have an error and this is because if we go over we can Define this as a const because we need to put this as a final value and if I bring the checklist you see that I use the final string title so I will say final before because we tell the we tell flter that this will never change once we receive the information title this information will never change it's final I will save and format document now we can use the title inside oops sorry now we can use the title inside the title text so I will remove this and I will just write title and you can see that now we have a problem and this is because we need to remove the const so you see we have a problem with the con we just need to remove this save and now we should be able to oh we still have an error we need to fix this but before we will put the text style as a constant so we don't have the blue line error great I will go back inside homepage and in the homepage you can see now that we need to pass the title inside the card widget if I go over you will see that this required the title string that we just added so I will go inside and I will press control space and this is the same thing as a widget you see that we have all the arguments inside that we can use and one of them is the title that we just created which is really awesome so you can click on tile and this one will requir if you go over it required a string this is what we created so I will pass this as Rocket and I will say oh nothing happened because we need to fix all of them so I would just copy this card widget and I will replace this everywhere so the title will be rocket everywhere so let's save and now if so we have saved the the document I will format document and I will click click on this the hot reload okay so I think I have already told you about the autoc const uh it is right there the autocon if you have this when you save it will automatically format document for you so that's why I'm a little bit confused because I'm used to have the auto uh fix and everything but now we don't have it because of teaching purposes so let's save this and now let's uh for the hot reload and now you should see that it should be rocket it is not so what happen is we will restart the app so we'll say restart and now we should see rocket H perfect okay that's good now we need to do what what you need what we need to do now is maybe to change the description or maybe to add an image path because we don't want to have the same image so I will go inside the card widget and what I will do I will just just change description for this is a description nothing big just it look a little bit better and what we will do is we will do the same thing as the title but now we want to send an image path so I will say the same thing required this image path and I will say final string image path and you can oh this is a semicolon okay perfect and you can see that I can write pretty quick on the on the keyboard and this is because I use touch typing okay so if you are new to coding or you like coding I absolutely recommend you to learn about touch typing you will save a lot of time in your life that's crazy okay I don't want to talk more about this but it's something you should you should try touch typing anyway so image path what we'll do is we'll replace this inside the asset we will replace this I will cut it first to control X and I will write image path now if we go back inside the homepage you will see that we need to add also the image pad because this is required so if we go back and I re I re I remove required by example and I put this as a nullable value so we can it can be null and I say I'm sure that this is null and I go back inside the homepage you see that we don't have error anymore because it's not required I we go back inside the card widget and undo everything so contrl z contrl z and contrl Z to make sure that this is required we go back inside homepage and we add it so I will put my coma control space image path I press enter and this will take what I just cut before so I would press control+ V and it's the image racket I will put my commo format document and and now what we need to do is do the same thing so I will copy this and I will replace all of them so you can select this control dtrl D and contrl V perfect let's save and see what happened uh actually nothing should happen because we have all the same image let's replace this for by example um it will be travel the other one will be space and this one will be yay and let's save you see that now we have different image inside so it's pretty cool another thing that you have to understand is how to create class with flutter so if by example inside the card widget we have like I don't know 500 arguments like this it's pretty messy okay at some point you don't want to have too much of them so what we can do is we can create a Class A Class is just a box you can even you can imagine this as a box of multiple things inside so we will create a box and inside the Box we will put the title in the image path so we will be able to just send the box and in the Box we will receive the title in the image path information so let's do this together and for this we need to create a folder class I will go inside Library I will right click and I will say new folder I call this one class and then you can right click and say new file uh let's call this one item class or any name doesn't matter do Dart you see that I repeat the class at the end also to make sure that we uh it's easy to see and understand the code let's press enter and create a class how do we do that so you can open the checklist once again and you should be able to find how to create a class right there classes it's as simple as this so what we need to do is say class the name of the class and then what we need to do is create a Constructor with inside we have what we need to put in the class and then we just recall it it's pretty much the same as the past data but it's for a class and it's a box so let's do this what we'll say is we'll say class and we'll call this one the item class I will open the curly bracket like this now we need to put a Constructor The Constructor will use the same name so item class and you need to put the same name after this what you can put is the bracket like this and then the curly bracket and inside we will say required this dot uh what do we put we will put the title and the title and we will put also the image agage path format document I will put my semicolon at the end format document and now we just need to put also the other part which is this okay you can see that we don't need to put final this time because this is not a const okay we don't say that this is a const great so what we'll do is we'll say string title semicolon and string image path semicolon easy as that now we have a box of information which which contain the title and the image path we can close this and we can go inside the home page okay or in the card widget sorry and instead of passing the title and the image pad we will pass a box a box of the item class so I will remove the image pad and I will remove the this one also I will change the the type for the item class and this will be by example the uh we can call this the Box okay it will be simple to understand we need to change title for box and now you can see that we can use the box the same way we did with the title in the Mage path let's remove the Mage path and say box and then I will say dot and now we have two option the title in the image pad and now it work so we'll do the same thing for the title we say box do title but the last thing we need to do is to go inside the homepage and we need to remove all the titles and stuff like this because we need to just pass a box now so I will remove this and I will say box Inside the Box we need to put the item class so we say item class and I will use this one I will press enter and you can see that we need to pass in inside the item class the title and the image path I will remove the constant like this and the title will be the same so it will be rocket I will copy this and the image path will be the same thing the image travel or rocket this one great so we have our first card widget that pass the Box item class so I will copy this one and I will paste it all the other place so I will press contrl dtrl D oh doesn't work so I will paste and I will need to remove the coma remove the constant go inside the other one paste it remove the comma and how do I know we need to remove the comma if I do back you just go over to error expect uh expect identifier which mean expect another widget but we don't have one of them so we just have to put one comma after this we need to do the same thing for the last one and I will paste remove the comma format document save and now let's restart the application we should have all the same image now we shall have all Rockets great so you see that we have done a couple of things but nothing have changed on the screen we have created a Class A Class is a box of things that we can send instead of receiving multiple things inside the card widget we just receive a and we use what we need because sometime you will have this widget and this widget will bring you to another widget to another widget but you don't want to pass like multiple things inside you just want to send one box that contain everything so that's why we did that after this you see that we have a long text so what I will say I will put my coma format document and now you see that it look just better I will put my coma right after the image pad every everywhere format document save okay what we need to do is now put the real image and the real title and it will be good for this page so let's remove rocket and say travel let's call it travel Also let's remove this one we will call it space and we will say space and now the last one is the yay and let's call it yay Also let's save this and now we have have all our image that's great if we go back inside the other application what else do we have to do so you can see that uh when I click on one of them or actually this is the same one oops sorry right click okay so when I click on one of them it goes inside another page okay and this is what we want to do so we still have a lot of things to do oh another interesting thing is this is this is the description of the rocket this is the description of the rocket maybe we could put something this is the description of the space this is the description of the travel so let's do this on our other app and also we will need to create a button that when we press on it it bring us to the other page so let's do this I bring back the other thing and how do we do that how do we send the information by example this is a raet this is a travel what we'll do is we'll go inside the card widget and inside the text what we do is we put this is the description of or this is the something description and to do this we will put the curly bracket we will put the dollar sign and inside we will say box. title we will remove the constant and we will save so I will restart the application and now we should see that this is the rocket description this is the travel description this is the space description and so on so what happened here this is just to tell flutter okay for the rest of the things we won't put text okay so we need to use this to tell flutter that inside the bracket we won't use text we will use variables variables that are coming from the box okay so that's about it next we need to create this as a button so we will wrap the entire card widget so I will right click and I will say refactor with a widget so wrap with a widget and this one will be called the gesture detector okay I will press enter and now I will use inside the arguments we have the untap so I use this one I will put a function inside so you can see that the option if you press control space you have two options we will use this one this is a function so now it's clickable but how do we go inside another page first we will need to create this other page so inside pages I will right click and I will say new file and I will say description page maybe Dart so I press enter and I create this page first you need to create to import the M import material because otherwise you won't have any widget and after you will need to say stat less widget again this is the structure the name will be description page and the content inside this will return when we build this widget we will return something and the something will be a scaffold so we will say scaffold and we press enter and we will also put a nap bar inside this one otherwise we won't see anything so I will say app bar the app bar argument and the app bar widget inside and now let's just save we can now go inside this description page but how do we do that I will close this one I will go inside the card widget and let's bring the checklist so how do we navigate this is on the top level okay you have all the widgets and there is a section Navigator this is to navigate inside the application you have all the code that we will use or can use so you have three option either you can push either you can push and replace or either you can pop pop will will remove the current page push replacement will remove the current page and push another page or push another page instead and push will just put another page over so you will stack two page one over the other but the user won't see the one in the background because it will only see the first one so let's try this you see this is the code and I will show you how it work so we will say navigator dot pop uh do push sorry so we'll say push like this and you press enter now you see that we have the route the context is just the information that we need to pass to the other page to make sure that fluts still understand that there is a page before okay after this in the route we need to call the material page route and if you don't want to remember everything like this again in the checklist all the code is there so you have the material page route you don't have to remember everything by heart so let's go back material page route you will click on this and now you see that you need a builder but what is a builder if you go over you will see that the Builder require a function build context okay so how do we work with that you just remove Builder you will press command uh control space and you will have the answer so you will select the second one again you'll press enter and this one will need to return so if I bring back the checklist you see we need to return the homepage or the other page we want so we'll say return and this one is the description page let's press enter okay now we need to fix a couple of things first we need to put the semic colum like this expect to find a semic colum next we need to put another one expect to find a sem column and we need to put the coma because there is two bracket one after the other let's format document and everything work we can put this as a constant and save if we click on Rocket you see that we go inside another page okay and we have a button a back button the back button is available automatically because we tell flutter that we just want to push another page over this one so flutter will remember that there is a page behind so it will allow us to to return but what we can do is we can go inside the description page and inside the app bar we could tell flutter the leading automatically imply leading we could we could set that as false so I will save but now the thing is we won't be able to come back to the previous page because we removed the back button so I will remove this save and now we can go back okay so for the next part of this course what what we need to do is we need to create all of this and this is what we'll do together okay so what we need is image buttons title and description so let's do this inside our application I will go back inside ours and I will click inside rocket by pool you can see that there is nothing first inside the abar we will say the title argument okay I will press enter and I will use the text widget say text and inside we will put the name of the current thing we just clicked on for example rocket but we need to send this information and like we did uh previously we can send the box of information inside this description page so let's go inside the card widget and you can see that we have the material page route that goes inside the description page but we have access also to the box so we will do the same thing with the description page you can control and click on this widget and it will bring you to the other page automatically so what we will do is we will create the this or required will will tell fer that this is required this dobox we will send the box to the description page so I would say final this was a nightm class and let's call this box again great now we have access to the box if we send it from the card widget so we told flutter that this is required which mean we need to go inside the description page control space and click the box and inside we will send the Box information if you remember inside the previous page the home page we had to create an item class to send the Box Inside the Box argument but we have already done that and we have the information inside the card widget which is the box coming from the item class box so we can just send the box like it is and we just need to remove the constant format document save and now we should be able to receive the Box inside the description page so I will go inside the text I will say box dot title and now let's save and I will go inside rocket and you see nothing happier we just out reload we will reset set the screen and still nothing happen so I will restart the application okay now when we click on Rocket we have the word rocket we have the box information inside the description page okay next thing we need to show the image so maybe you can try to do that show the image you will need a column an image the T the the buttons we will do it togethers but you can put the title in the description otherwise I will do it with you right now so the scaffold have the body inside we have the app bar which finish right there then we put the coma and we put the buly argument this one will take a column widget so let's go and take the column still again if you remember widget start with capital letters argument with lowercase letters so the column will take the children argument and then I will first format document and inside the list of widget which is the children we will put the first one the image. asset inside this one we will use the Box do image path and if we save you see we have the image coming from rocket if we go in travel we have the image coming from travel okay the next thing we want to do is we want to put the text title so I will say text and we will put box dot title I will put my coma format document save and now we have trouble now we want to put this text way bigger than that and we want to change the style so try to do it yourself if you remember how to change the style of a text otherwise let's do it it's by using we use the coma and then inside we use the argument style and inside if you don't remember what goes inside an argument you can put your mouse over we need a text style so we say text style inside what we will do is I will press control space and I will say the font size and for now I will put uh 100 then I will say the font weight the argument font weight which use the widget font weight. bold like this and then since we have two comma I will put uh two uh bracket I will put my comma format document save and now we have travel I will put this as a constant and save great okay so at the end of this we have bold and I will put my coma for my document and you see it just look better next I will put this on the side we won't need to use the Explorer for a while so I will Press contrl B so we have more place to work with after this I will change the font size for 200 by example we want to go over the screen size size so you see this first we need a single child scroll view so I will go over the column and I will wrap this so I will right click refactor and also you can do it in another way you can go over column you can click this little thing and this will wrap with something okay so I will wrap with a widget and we will use the single child scroll view this one so I will press enter and now with the single chart scroll view this is now scrollable but the thing is how do we make sure that the word travel take all the place but just in one line okay for this we can use a wiget called the fitted box so I will bring back the cheat sheet and inside the cheat sheet you see we have all the widgets so this should be a visual layout okay so we have the is it a visual layout or or fitted box yeah fitted box is right there so we have layout and visual layout it's more like a layout I put it like this inside the checklist but sometime it's hard to find the the line between the visual layout and the layouts but you have the fitted box and this work best with the text widget so I will bring back this on the side and inside the text I will wrap so I will click this I will say wrap with a widget and this is the fitted box and now let's save and you will see that the text now take exactly the good size of this but what we can do is maybe we can wrap everything with a padding and in this way we have it just look a little bit better okay so I will go over the column and I will right click and I will say refactor and wrap with a padding like this okay here we go inside we will use the K double 10 and you see that this will automatically import the flutter YouTube core constant okay and I will save so you see it look just a little bit better next we need to put the description I have a little cool thing for you you can write on Google bacon ipsum okay and this will automatically Generate random word about bacon for you so you can click give me bacon and this will give you a lot of text talking about bacon so I will copy this this line of code this uh description and we will go inside the constant so I will open the Explorer with control B I will go inside my constants and I will create one constant about this will be a string and it will be called the bacon description like this and this will be equal to to I will put my this and semicolon and I will put all the text inside great but let's say that inside the text you have a thing like this okay you have uh you have this inside the the text so it doesn't work what you can do is you can use the backs slash and this will tell the code okay this character don't use it as use it as a raw text okay so by example another another one could be uh the the dollar sign maybe yeah dollar sign is don't work inside the text so what you have to do is you have to put the backslash before and now the dollar sign work so what I will do is I will remove all of them and we will just put like this great now we can use the bacon description I will close the constant and I will go after the fitted box so you see I always click uh on next to the the bracket to see where is the next one okay you can see that this is the next one so what I will do is I will use another text and this one will have the bacon description inside you see that this is a string and it's coming from the constant I will put my comma put a constant before and save great so this is not enough text so I will add another one right under so I will copy this and I will paste it under but we will need to do a couple of things first so actually we will remove this one and we will just make this one a little bit bigger so it take a little bit more place in the screen so we will write style so we use the comma style text style okay and inside we say font size and let's say we will put maybe 20 let's find out what how it looks perfect so now it's scrollable and it look pretty good so the next thing that we want to do is so we have the text we have everything yeah I want to show you how to put this uh justify so the the text if I go back in the other app this one you see how the text look very straight like this this is what we will do okay so what I will do is I will go inside the text after the style so I always CLI to the bracket I will click and I will say uh text align I click on this one this argument if you go over this take a text align widget so you say text align dot justify and now let's save and you see that it look way better great another thing we'll do is instead of 20 we will put maybe 18 and we will add a sized box under the text widget so you see see this is the text we will add a sized box and this one will have the height okay the height argument we will put the K double 10 so we'll put a little spacing of 10 I will put my comma and I will add another text description right under like this here we go now we can format document I will remove this coma format document put the constant and save great so now we have multiple text under and we only need to add the buttons so what we will do is let's find out which button we have first we have a text button then outlined button elevated button and filled button so if I bring back the checklist you will see that this is a user input and we have the elevated button filled outlined in text okay so we will use these buttons what we will do is we will go right over the text so I will right click will go right there perfect we will go over the title so this is the fitted box and then what we will do is we will write a row okay we will use a row widget because we want to display multiple one after the other I will click on row and I will put my coma I will go inside the arguments and use children inside the children we will use first the Tex Tex button so I will write text button and I will press enter okay for for the unpress what you need to do is you need to delete and you will press control space this will show you what you need to put inside so we will select this the second one okay and inside the child we will put a text so I will and if you go over you will see that this take a widget so you could actually put anything inside but we will use a text okay so we use a text widget we open the bracket and inside we will say um hello for now we just say hello bacon hello I just want to have a long word okay you will see why I will put my coma format document you see that we have two bracket I put my comma there also format document again if you forget about format document right click format document it's Shi shift alt F I will put this as a constant save and now we have a text button so what I want to show you is what happen if we have multiple text button one after the other so if I save you will see that okay we are lucky that work but if we had another one third a fourth one and I save you see that we have now an error because we can't display everything inside the screen we don't have enough place so we C if we take the checklist let's go where we have the row we can replace the row with the wrap widget so let's use the wrap widget instead like this here we go and now you see that this will automatically if we don't have enough place we'll put the next widget right under so that's why I wanted to put multiple long text okay so what we will say instead we'll say small text or small title then we will say medium title then we will say large title and finally we'll say huge huge title okay because when we will press on the buttons If I go back in the other thing when we press on this we want to change the title for huge small medium or large I want to show you how to do this so I will go back in the app and first we need to replace the buttons with the good one so what did I wrote it was medium text large text okay that's good so I go back in the app and now what we need to do is we need to change the text button for the it was the outlined the second oops cancel it was the outlined button the third one was the elevated button and the fourth one was the uh fill it button so let's save now you see this is what we have but they are all too close to the other so we will put some space between them we can put um a sized box between each of them and it will work so by example I will say size a box with 20 and put my comma and save you see that this will work or we could use an argument inside the r app widget so I will press control space and then I will say spacing and this will say k double maybe 20 or maybe 10 10 should work let's save and now we have a little space between each buttons it look way better great but now we need to change the size of the text when we click on one button how do we do this okay so first we need to create an INT variable let's go inside the checklist and how do we create a int if you scroll down you should be able to go in Dart in Dart we create an INT like this int value equal five as simple as that so we would say this inside the build but what happened is we can't refresh the screen so we need to refresh the screen and for that if I bring back again the checklist we can go inside the States you see that the states the stat less the state less widget can't refresh the screen the state full widget can refresh the screen and we need to use the set state to refresh the screen so it's a three thing together let's move this on the side and you can go over the stat less widget right click refactor okay and then you can click on convert to State fold widget great so now the only difference is you have when you use the Box you need to say widget dobox otherwise it won't work and this is just because we use the stateful widget in the stat less widget we don't need to see widget so let's bring the checklist so you will know that everything is wrote inside this one if we go inside the arguments I think so if we pass thata you see that this one is the state less widget so we don't use the widget do something we just can we can call title right away like this but if we are inside a state full widget you will see that the title in order to access it you will need to say widget. tile okay so in this example you have both of them I will put this on the side and now I will save and what we need to do is we need to change the size of the text when we click on this so we will create a variable right over override so you see we have the widget build override before the override because we don't want to every time we refresh the screen to reset the value of the variable right so I will say int this will be or instead it will be a double sorry because the font if we go down the font size is a double okay it still work if you write 200 because it's the same thing for flutter they will be able to convert it so that's why I will go up and inside double I will say font size Uh custom by example and I will say this will be set as maybe 20 when we start or maybe more maybe 25 will look better and then we will take font size custom I will copy this and I would go inside the title so the widgetbox tile the Tex stle and the font size instead of 200 we will say font size custom and now you see that we have a problem this is because it's not a constant we need to remove const save and now you will see that the title or the text should be smaller okay now we need to change this when we click on the button so what we will say is we will go inside the text button and we will say um so first let's do it with the field button okay because I want to show you something we will go inside the field button and I will we will say um what is the name of the variable I will put this on the side okay the explor the font size custom is now equal to 200 and I will put the semicolon when you are inside a function every time you trigger something or do something you need to separate everything with semicolons okay it's very important otherwise you will have bugs okay uh and anyway flutter will tell you if I remove this flutter will tell you you need to put your semicolon okay so we have this let's save and when we press on huge text nothing happen why this is because if you go back inside the states so I will go back inside the States you need to use the set state in order to refresh the screen the state fold can be refreshed but it doesn't mean that it will so I will move this and inside the set inside the function we will say set State and we will use this one I will click on this and inside the set State we will put the font size custom and put this inside of it now we can format document and save so if we restart the application we will go inside by Example The Rocket we'll click on this and now you see the title is currently 25 but when we press on huge text the title go to 2 200 and since it's bigger than the screen the uh fitted box will end all it and make sure that it doesn't take too much Place great so we can do the same thing for all the other size so I will copy the set State and I will paste it inside the unpress of the small text this one will be 25 then inside the outline button it will be maybe 30 35 maybe and inside the outline the elevated button we will say this will be 50 so let's save and now when we click on small text is small medium large huge great this is how to change the screen with flutter so we use the state full widget great after this we need to create another kind of button and this one is called the icon button so let's do this inside the bar of the ab bar we will go there and maybe another thing I want to show you is we'll do that after okay so first I will show you the icon button so we go inside the app bar and we press control space and actions the actions is all the things that are at the end of the the app bar and we will put only one of them we will put only one icon button widget and if you take the checklist always everything is inside this one so it's inside the user input icon button great even the gesture detector that we already used I put this like this the onpress will delete control space and this will show us what to put inside so I we will use this thing for the first time and this is the same thing as the function but you can only trigger one thing inside and the one thing we'll trigger for now is we'll say print and inside we say uh clicked by example okay and the icon this is a a little bit interesting is you need to call the icon widget but inside the icon you need to put an icon data and for this it's a little bit special you need to say icons with the s dot and then you can put stuff inside uh you can select if you press control space again or you click this little arrow this will show you more it will show you the visual of the icon so you have multiple icon with fluts okay so the one we will use is the info icon and then I will format document I have two brackets I will put Mya Mya format document in the icon we will use a constant before and save so let me show you what happen when we use the print function uh we will open the terminal so control J like this and we should be able to when we click on this the icon it will print in the terminal the clicked so let's press on it you see we have clicked this is useful when you just want to debug stuff or try stuff okay next thing we'll press contrl J again and we will replace what we could do also just to show you the difference between the arrow and the normal function we could use a normal function and inside put the print just like this put the semic Colum format document Save open the control J and it will do just the same it's the same thing okay but you can only trigger one thing when you use the the arrow function inside this one you could print multiple thing one after the other that's the difference if you see it one day I prefer to always use this one so it's very simple so we'll delete the print and what we will do inside we will trigger something called the snap bar the snack bar I think let's go down it's inside the show okay if you want to show something we will show the snack bar with the scaffold messenger these two you will see that these two use the scaffold messenger and I have an example for the scaffold Messenger right there and all the others oops all the others don't use a scaffold messenger so you just need to call the show something you just need to call this and it will show it so you have the two type of example right there we will use the show snack bar so we need to create something like this let's go and say um scap scaffold messenger scaffold messenger. of context so of context Dot and you see that this is sometime hard to remember so that's why you will need the checklist everything is already wrot in for you okay so we'll say dot dot and we'll use the show snack bar like this okay next inside we need to put a snack bar if you go you see that we need to put a snack bar so I will say snack bar and I will press enter the content of the snack bar is what will be inside we will just put a simple text saying by example um hello or snack bar it doesn't matter like this and then I will put the comma comma and semic column at the end now let's format document save and the snack bar we can put it as a constant and save what happened here is when we click on this you see the little snack bar at the bottom that appear for like two second and then it will disappear it's 2 second be because if you go inside the arguments you will see that you have a duration and if you go over duration you will see that this it's 4 second the default is like 4 second so you could change this but we will keep it like that it doesn't it's good and another thing I want to show you is the behavior so the behavior argument if you go over it's the snack bar Behavior so we we will write that snackbar behavior. floating and you can now save and I think this just look way better like this great so you have learned how to create a snack bar with flutter okay so this page is pretty much done another thing I wanted to show you was inside the app bar something pretty cool so you see that you can remove the the leading you could say by example leading automatically imply leading false but what you could do also is you could change this button and do it yourself so let's go inside the leading argument and now we will use an Nikon button again like this the unpress will be an empty function for now okay and the icon will be icon and inside if you remember it it's a little bit special you need to recall icons but with the S and say dot something so we will say by example um anything so I will say dangerous that's good let's put the coma format document and save so you see that we have a dangerous icon right there but it doesn't go back if you want to go back to the other page we need to use the Navigator popop this will pop the page so again the checklist if we go inside Navigator we need to use the pop this will pop the page that we have pushed previously which is the description page let's do this we will say navigator dot Navigator do pop like just like this and you put your semic colum save now when we click on it it will pop the page and bring us back to the previous page but if you do it on a page like this one the homepage it will it will pop this page but there is no page behind it so it will just show a black screen so you don't you don't want to do that I will show you just to to uh for an example purposes so let's copy the leading let's go inside the homepage and replace and let's go inside the app bar and put this I will save you see that now we have this but if we click on it it will remove the page but there is no more page behind so it there is an an error so you need to be careful with that I will remove the leading of the homepage so we don't need it let's go back inside the description page and I will remove the this thing I want to show you a couple of things that you can customize also you could customize the app bar by using the colors so it's the background colors like this argument and to to change to use colors it's a widget and it's a little bit like the icon okay again you have everything inside this one it's inside the visual layout probably we have the text we have the icon and we should have color yeah color so the color will use something like this colors do something this is just an example we should have a bracket here but it's a little mistake okay so we'll say colors with the S it's just like the icons colors and then you will say dot and you have all the options okay if you press control space you will see the colors like this on the side control space control space and we will use the color red just to show you that now we have the a bar in red okay another thing I want to show you is how to customize button by example we will remove the background color red this was just to show you how it works and let's go inside the buttons to customize a button we will use the elevated button we will go inside the arguments this one is a little bit funky so we'll say control space we have something called the style and inside if you go over you will see that this take a button style but it's a little bit funky as I told you you will need to recall the name of the button so elevated button elevated button Dot and you will say style from and inside you can change the the look of the button we can say color and just by writing color we have all the options Shadow color background color foreground color the background color is the background of the button so currently it is gray and the foreground color is the color of the text so let's say background color colors. red and foreground color colors. white and if we save you will see that the button is now red with the title The text white okay just to make sure that you understand if you want to take the style to another button let's go inside the outline button I will paste this code you need to change the name you need to use outline button. style from and now we can save okay this is important uh it will still work if you use the elevated button but the behavior won't be the same so it's better if you just recall the outline button okay it's just a convention great I will remove the style once again and save and now this page is complete great we can go back and now if we go inside the other app let's see if we have other stuff to show yes we did we have we have this bottom navigation bar that we need to create you see that when we switch we have the home and the profile the profile will just be a little thing I want to show you this is one widget that is very useful with flutter that I will show you how to use and also I will show you how to create a crop image so the image is now Circle which is also nice so let's create the bottom navigation bar first and for this we will need to create another file so we'll go inside our files if you want you can go on homepage or anything right click and say close all so we clear everything we will go inside the library and we'll right click and say new file this one would be called the widget three. Dart and I would press enter okay what is the widget 3 is this will end all the first and the second page okay I will go back and oh also another thing cool is I want I will show you inside this video how to create the dark mode like this and how to how to do that yeah so let's go back in our app and inside this one what we will do is we need to create the Bottom bar I would say import M like this and then inside this one we say State less uh it will be a state full widget actually because the screen change when we Press buttons so State full Widget the name will be the widget three okay and inside we will use a scaffold scaffold widget because inside the scaffold we have the bottom navigation bar argument this one we won't use the the a bar we won't use the body because these will be used inside the other scaffold the one inside home in description okay so the bottom navigation bar this one can take two things so let me show you the checklist again this is part of the master layout we have the scaffold we have the app bar that I already showed you the we have the navigation bar or the bottom navigation bar so the bottom navigation bar is the old version and the navigation bar is now the newest version so I always prefer to use this one now now so we'll use the navigation bar inside so navigation bar widget like this and you see that this time the bracket was not automatic so what you can do is you can remove a couple of letters and rewrite and use the one with the bracket automatic this will automatically put the thing that are required so I will double click on destination I will remove and if we go over destination you see that this take a list of widget so we need to create a list and a list with flutter is just the square bracket I will put my coma format document and inside the destination we will need to put the bottom uh it is the navigation na navigation destination item uh put navigation destination let's try this one yeah it's this one so we take uh this one navigation destination and the icon if you go over icon this is just a normal icon we know how to do this we use icon and inside we say icons Dot and something so we'll use home for the first one first icon and the label will be just home this is a text because if you go over label you see that this required a string so now if we save uh we don't have an error but we should have an error if we displayed the widget 3 okay let me show you what will happen in the body of the scaffold so we'll say body for now argument and we will show the homepage so I will say home page if we click control space on homepage uh control and right click on homepage uh left click this will show you the homepage okay this is the page we created the one you see right now so so if we show the widget 3 then the scaffold will show the homepage in the Budd so we will go inside the main file we will replace homepage with Widget three like this and now we will save and now we should s an error and the error if you press control J you will see that this is the type two of error what you have to do you go on the top again and you try to find a link that will show you the error so you see I click on this one and it's a navigation bar this never modify this this thing this is coming from flutters you should never modify this we will go down you see that we have a problem in the main and a problem in the navigation bar so let's click on the main it told us it's the widget 3 it's not that let's click on the navigation bar it's not that let's click on the widget 3 and now you see that as soon as you click on this it show you that the navigation bar is there is a problem with that so if you read the error the error is available right there and also in the red screen so you see that the destination should not be null and the destination. length should be bigger or equal to two so right now the destination are only one so we need to add another one and this should will fix our bug so I will press control space and save now you see that it work okay it's not clickable yet so I will contrl J contrl B just to see better I will put my coma after home and home format document save and I will put also my constant so the code look better okay we will replace the label the second label for profile and the icon will be a person like this and let's say now we have this but how do we change page when we click so you see nothing happen now we need to go inside the argument after the destination after the list of destination we have an argument selected so selected index if we put one this will show the profile if we put zero this would show the home okay so we can play with this now we need to create a variable int that is the current page we will go again over the build and over the override and create an INT this one will be called the current page and we will set this as zero when we start so we can take this current page and we can put it inside the select index now let's save and it should be home that's good but we need to change this when we press on the the button so there is another argument called the on destination select you can press control space this will show you what to put inside and we'll click this one so the on destination selected will return you a in okay it will return you which uh which value you just click on so if you click on profile it will return you one if you click on home it will return you zero and what I like to do is I like to type to to show the type of the variable before so I like to write in value so in this case it it will have less error in the future okay for the value what we need to say is we need to say the current page is equal to the value but this will this doesn't work yet and do you know why this doesn't work so you see if I click nothing happen but the current page change and the reason is if you remember when we use a state full widget we need to tell flutter okay I want to refresh the screen and to do that you need to use the set state so we use set State and inside we put the current page is equal value now we will format document save and when we click on profile we go on profile home home but the page doesn't change we need to create two different page the homepage and the profile page so we will go inside our Explorer and inside Pages we will right click and create a new file this one will be called the profile page. Dart and inside we will put the import M first and then we will need to create a state less widget so I will say State less widget like this and I will press enter we will need to call this one the profile page and we will change the container for a scaffold like this let's just save like this and now we have this page it will be an empty page but for now it's created we can go back inside the widget 3 and inside this one we can replace the homepage for the the profile page just to see what happened so profile page and now let's save you see that we have now a wi screen always on both out side so we need to create a logic that the body will either display the homepage or the profile page by using the current page so we will create after the the end current page we will create a list and the list would be a list of widget because the homepage and the profile page are widgets because they start with a capital letter and we will say this is the pages and this would be equal to a list because we tell flutter this is a list of widget so we need to put a list if we take the checklist you should have inside Dart how to create list so we have the dart we have the list and you see that this is a list of bull and this is how to create it so if you don't remember how to create list it's available in the checklist also for maps and stuff like this everything is inside the checklist let's go back and inside the pages we'll have two of them we will have the homepage that starts with a capital letter and we will have also the profile page so I will take this one and I will put it right there I will format document we can't because we need to put something in the body first so I will put my coma and I will say this inside the body will return the pages and we'll say dot element at and inside we will put the current page so this will either return the element number one and element number zero or element number one so the first one or the second one and if you don't remember how to use things inside the list you have generate. length. ADD actually I should have put the uh do element at but I forgot so maybe in the future I will add it okay so you have the element at and let's sa now if you go on profile you see nothing it's the scaffold and home have the homepage you can create a constant just to remove the Blue Line before the list great so now we are able to go inside the homepage or the profile page and all the rest are is still working everything is still fine so let's go inside the profile inside this one I want to show you uh multiple things like how to create the image Circle how to add the list style how to change the style of the application with dark mode and Light mode and that's about it so let's do it right now first we will start with the image I will go inside the profile page and inside this one we will add the um do we need a nap bar we have a napar inside the the homepage we will add it also there I will say appar argument appar widget and inside we would say control space and use the title argument this one take a text and the text will be profile I will put my coma format document save and add the constant great okay so now we need the image so we'll go inside the body of the scaffold so let's press after the bar we'll use the body argument this will require a column and inside the column we will use the children argument to put multiple widget inside the body inside the column of of the body the first one will be the image. asset and this one will take the we need to say image slash it was yay. PNG let's save and now we have the image but how do we put a circle this you will need the circle uh it was the circle Avatar so if you go on top you should be able to find visual layout Circle Avatar this one so I will go over the image I will right click refactor and wrap with a widget I will call this one the circle Avatar uh save and now you see this is a little circle what we'll do is we'll put all the coma format document and instead of using the child of the circle Avatar we will use uh first I will just make it bigger so we will say size so radius we will put 60 and save okay so maybe a little bit yeah that's good but you see how the image go over the circle okay it look it look pretty cool honestly but let's try to make sure that the image is cropped with the circle for this you will replace child with the background image and instead of using the image asset if you go over you will see that this take an image provider this one is also funky a little bit but you need to reverse image asset like this so we'll use the widget asset image so you see it's a little bit funky but um you will remember when you use it multiple times so the column will require a constant now we can format document now you see that we have the image perfectly fine after this we will add first a sized box like this the widget Siz box with the height K double maybe 20 just to put a little a little bit of spacing before the next widget and I will put the coma remove this one format document save format document is always this one shift add f after this we will use the list tle widget let's go back inside this checklist inside the visual layout you should have the list out and again you can go on flutter map.com widget and you will see that inside the visual layout you have the list out this is how it looks and if you have other question like how it look a divider how an Nikon look how the circle progress indicator look you have multiple of them and again you can watch all of them if you remember we have used the snag bar this is a snack bar this is hardless okay so I will uh put this on the side and inside the list we will put just let's see what we put in the other one we have the icon and something so flutter map web uh website and email okay so inside the list I will press control space and then I will say title the argument title will require a widget which mean we can put anything but we will put a text widget in the text widget we will say um it was flutter map yeah it was just flutter map this was the name so will format document but we will put another argument this one will be the leading okay this will be the leading what is at the start of this listle it require a widget also but we will put an ncon with the icons. person let's save now you see that we have the list we will do the same thing so I will put the the comma and I will add two other list style one after the other and let's save and I will replace the text for info@ flutter map.com if you have any question about flutter you can email me at info@ flutter map.com this is the email we use so uh you can just do that we will replace the icon for email and if you have any question feel free to just email us we usually answer pretty quick after this the leading uh of the other one will be web and this will be the website so flut map.com let's say okay so that's about it I think the only thing we need is a little button to change the style so that's is it let's let's go inside the app that's everything that's great so let's do the last button this one is pretty cool so I will show you how to do that and also if you want to have like this is just a surf surface level of how to code with flutter okay there is way much more stuff to learn okay but we can't explain everything in like 3 hours or so so if you want you can go on flut map.com SLC course and everything will be explained about letter so that's about it let's do the little icon like this and that will be done for this video so for that we will need to use the floating action button if you go inside the checklist you will see that in the widget we have the floating action button this is inside the master layout so it should be in the scaffold let's go inside the bud after the Budd we'll click on column and after I will say Floating Action button argument and inside we use the floating action button widget this will take the unpress so I will delete and press control space let's take this an empty function format document and save you see that if I go back to the other app we have now a button but we need to be able to put something inside and for this we use the argument child and this will take an icon with the icons Dot and we will use by example dark mode I will save and I would put this as a constant format document and save great but now we need to click on this so what happened is we will create what we call a Notifier so you see how we use sometime if we go back inside the description page we use the state fold which in the the description page in order to refresh the screen with new data okay this is a way to refresh the screen but there is another way because right now we can only refresh the things that are inside the stateful widget but when we will click on this button we need to refresh the entire application starting from the main that use the team data because this is where we will change the team for dark mode by example if I go in the team data and I say brightness brightness. dark and save you will see that everything is dark but we can't do it from the profile page we need to change the value from the entire application to do that we will use a Notifier okay a Notifier is the same thing as the stateless or St stateful wiet with the set state but you can use it as a uh at any place in the application okay so let's go inside we have the Builder States I think I put it inside this thing Notifier I'm pretty sure I put it so let's find Notifier okay the only thing I did yeah it's right there it's inside the builders we have the value listenable Builder with the value Notifier this is what we will create okay so I know it's really hard to remember everything so that's why I need uh I want you to have all the code available so you can just look at it and don't have to worry about remember everything so this is what we will do right now I will put this on the side so the first thing we need to do is create a Notifier we will go inside the core I will right click and say new file we will call this the notifiers do darts okay inside this one you will call the value Notifier and this one will open the this this bracket and we need to to show the type of the value Notifier this will be a Boolean it will be a true or false value because it will either be dark or light so we'll say value Notifier Boolean we will call this one is dark mode Notifier and this will be equal to a value Notifier widget it's the same thing okay value n value n and inside we put the Boolean so either false or true we will say is dark mode we will say false when we start so this will mean this mean it will be light mode when we start and that is the value Notifier okay you see this is exactly what we did after this we need to create also a value lonable Builder and this is what we will do right now I will put this on the side and we will use this uh after so we will go inside the where it is profile page so we can remove the description we can remove the widget 3 and just go inside the profile page what we need to do is we need to go inside the onpress and we will say uh is dark is dark mod Notifier which will automatically import the package okay which is this the notifiers that we just created do value is equal to is dark Notifier value and the semicolon but this will just set the value as the same value if you want to use the the opposite of the of the current value so this is false if you want to use the opposite you can put this like that and this will tell FL for a Boolean we want the opposite of the Boolean okay okay so this is what happened if it's currently false then it will be true because it will be the opposite of false which is true so we can go inside the main and inside the main we will need to wrap the material app or we can yeah we need to wrap the material app with the value listenable Builder so I will right click refactor or again you can just click the little light bulb and we'll see wrap with a widget uh actually this one is a little bit different so what we'll need to do is we'll need to press enter a couple of time just to create it and after we will just drag and drop this thing okay you can cut it put it at the end like this and we will work with it later so we'll say value lonable Builder the widget click the first one the value listenable this is the thing we just created inside the Notifier so we'll say is dark mode Notifier I will put this on the side so we can see better and the Builder if you double click you can delete control space and it will show you what you need to put inside so I will click on this and next I will try to format document so you can see better I will put my semic colum and I will copy this I will cut this remove this format document so you can see how it works great inside this this we will need to return and we will return the thing we just got the material app and I will add back the semicolon great so so now okay because we use the valueable Builder we have access to this information you need to use the Val inable Builder to have access to this it's very important you don't need it when you want to change the value but if you want to listen and see the value in real time action you need to listen to it with the value listenable Builder now how do we use it it's with the value now we will re rename value for is dark and we can use is dark which is a Boolean you see it's a Boolean we can use is dark to change the brightness so we'll say is dark and if it's dark then show brightness dark otherwise show brightness light and we can save but what does this mean okay it just mean it's a if or else condition if this is true then show this otherwise show the brightness light and if you forget about it I put it inside the checklist which should be inside the dart so you have Dart and inside this you have the functions and you have also the condition right there so you can create conditions with if health or you can use the condition like this with the question mark and the two points okay if this is true do this otherwise do that great and this the double equation just mean this if this is equal to this okay so it's a question equation so it's a question if this is equal then this or that okay if you just put one one equal sign it mean it will set the value so we don't want this in this so I will put this on the side let's save and go inside the profile if we click on this you will see that everything change for the dark mode but what could be interesting is you see the little icon doesn't change it will be nice to have the sunshine or moon when we click on it how do we do this we will need to use the valueless enable Builder inside the profile page so we need to wrap this icon with the value listenable Builder because we want to change the icon coming from the is dark Notifier or not so I will cut this so I will remove this one and I will write the value listenable Builder and inside the the value listenable is the is dark mode Notifier the the Builder we will delete and press control space and we will select the second one will format document and inside we will return so what we will do is first we will change the value for is dark and what we will say is if the is dark is true so it's another way of condition if the is dark is true then we will return oops then we will return the icon dark mode otherwise so you see we still have an error because we need to return the otherwise so else if it's not true then we will return something else we will return the light mode so let's save okay so now you can see that uh it's the invert so what we should do we should change the dark mode should be down and the light should be up or we can just reverse the is dark So currently it is is true so if we put this now it's the invert of is dark so the icons should change and when we press on this we have light and when we press on this we have the dark mode so that's about it for this video I really hope you have learned a lot about flutter and if you want to learn more about flutter you can just go on flutter map.com and that's about it wish you the best luck with learning flutter and have fun that's about it see you in the next one and bye

Channel: Flutter Mapp

Views: 41,071

Keywords: Flutter, how to learn flutter, flutter for beginners, how to learn flutter for beginners, flutter tutorial, flutter tutorial for beginners, tutorial flutter, flutter and dart tutorial, flutter in 2 hours, flutter tutorial flutter mapp, flutter mapp tutorial

Id: 1wrPe6EWHKI

Length: 135min 50sec (8150 seconds)

Published: Sun Mar 05 2023