Full Flutter Tutorial For Beginners: 2021

everybody welcome back to blile dev today we're gonna be going over a full flutter course for beginners so this is for people who have never done flutter before but want to get into it see what it's about get a little familiar with how it works and so we're gonna be going over what flutter is flutter setup and building your first application so let's get into it so chances are if you're watching this video you've probably heard a lot of hype and a lot of things regarding flutter from a friend or online or you're just curious to get into mobile development and this is the first place you looked so flutter to give a quick recap of what it is if you're unfamiliar it is a framework that utilizes a language called dart it's backed by google they manage it they have teams that further develop it and although it is open source it's closely managed by the google team flutter allows you to build multiple different applications on various platforms all from a single code base so it's what we call a cross platform development framework now if you're a little unfamiliar with those kinds of terminology basically what it means is i can write a single bit of code and it will publish to ios devices android devices and if you'd like to you can also do desktop apps such as windows mac or linux or even websites the bottom line is though it's a great framework to use if you want to build some mobile applications or if you have some desktop applications as well that you're considering building if frequent flutter content sounds like something you'd be interested in make sure you first smash that like button to help the youtube algorithm so others can find my video and also be sure to subscribe to the channel so you can get weekly flutter content so now that we've talked at a high level about what flutter is let's get a little bit more into it and how it works so flutter utilizes something that we call a widget a widget can be any type of object that you see on a screen a container a form a text field a button all of these are what we consider widgets they're containers that perform some kind of function and they encapsulate uh other information and other widgets within them so what we do in flutter is we have what we call a widget tree where basically we build widgets upon widgets upon widgets so let's say we have a screen we would first create a scaffold as our base widget or you know some kind of object to contain all of the core information the screen that you see then within that widget we could have another widget that's called a column and a column basically it's a list of widgets that go vertically so we could have at the top a logo we could then have a text field and then we could have a button and the user input something in the text field when they click the button something happens so there's three widgets within that column so the idea is though is that we're building this tree of widgets that kind of build upon each other and are nested within each other and a lot of what you do in flutter is dependent on these widgets and on this widget tree structure and so we're going to get to see and play around with that firsthand and the application that we're going to be building but first we need to make sure that you have flutter installed and set up on your computer so in this specific video we're not going to get too into the details of installing flutter i am going to direct you to some resources that you can use if you're struggling to install it yourself however the first one and this is the most important one the flutter documentation has a clean setup on how to install everything on your computer personally i use a macbook most often and so i'm going to click on mac os and you can see here that it'll tell you one if your mac has the capabilities of handling flutter and two the steps you need to follow for downloading flutter so you can see here you can download 2.0.4 flutter 2.0 it's the newer version and then you can update your path on your computer to include flutter and once you do that you should be able to run flutter assuming you have a couple of other little things installed which it talks about how to set that up now if working with the command line and then the terminal on mac or windows or linux it's something that seems a little bit difficult for you to grasp right now there is a slightly easier way that you can go about installing flutter on your computer and that is by going to yazid al khalafs excuse me if i pronounce that wrong his installer that he made so he created this installer for flutter where basically you can download it from this link for windows mac os and linux and basically it's just a um how can i describe it's a just a pop-up it's like an application that you walk through some steps and it will automatically configure your computer and set up flutter on your computer for you so you don't have to do anything with the command line or the terminal so i'll direct you and i'll put some links down below if you find that useful and i'll direct you to these resources that you can use for downloading it i'll also include one or two youtube video links on how to install it or maybe fixing some common issues that come about when installing flutter so check the description below and i'll put some links to these resources for you if you need help with that okay now that you have flutter installed the first thing that we're going to do is we're going to create a blank brand new project so i'm going to be working on a visual studio code for this project you're welcome to use android studio as well both work great android studio when you first pull it up you'll see a page just like this and as you can see here it should say start a new flutter project and upon clicking that it'll create the base template project for you if you don't see that however you can go to configure and then we can go to plugins and then you just want to make sure that you have the dart plugin installed and the flutter plug-in installed and you should be good to go once you install those you should see this start a new flutter project appear now like i said i'm going to be working out a visual studio code so i'm just going to go to vs code right here so what i'm going to do is i'm going to do command shift p i'm on mac i believe on windows it's control shift p i'm not 100 on that so you may just have to fidget with it a little bit but basically we're getting to the command line here in vs code and you'll see here that i have this flutter new application project right here now before i click that because i am going to click that to get it going i do want to make it clear the reason that this appears is because i have some plugins already installed for flutter the main one being flutter and dart i also have this awesome flutter snippets plugin as well that i use quite frequently but you don't need that to get a project going so like i said i'm going to go back create a new project and i'm going to place this just on my desktop and let's see what we're going to call it let's say uh flutter complete demo perfect let me go ahead and make this application the size of my screen perfect all right and i'm going to increase the size of vs code that way if you're on a mobile device you can follow along a lot easier with me okay so let's go ahead and talk about the project architecture before we get into writing code and flutter now we have a couple of core things that are important to us we have a android folder we have an ios folder we have this folder called lib and then going down here this is one of the most important pieces we have this pubspec.yam document so what we have here pubspec.yaml is where you're going to put all your packages it's where you're going to put um any assets that you want to put into your project so if you have images that you want to use audio files videos you're going to import them through the pubspec.yaml file and like i was saying this is where we put all of our dependencies and so you're actually going to use this quite frequently as you go along because there's some amazing packages out there that people have made that simplify writing code and flutter a great deal and some of the other packages that you know are also important to use are things like firebase auth so if you want to do authentication logging in a user you can do that with firebase through that package so there's a lot of useful things that you're going to do with your pubspec.yaml file for this demo though we're not going to get into packages quite yet i'll put that in another video we're going to focus mainly on our lib folder so our lib folder is where all of our core flutter code resides so you can see here we have this main method and then it calls uh this method called run app so what it's gonna do is when we spin up our code um we're gonna pull up in an emulator to see our mobile application and work working in progress and it's going to first call this main method the main method is going to run any necessary logic that you put in front of it and then ultimately it's going to call this method run app and it's going to pass my app and all my app is it's going to return a material let me close this so we can see it a little bit better it's kind of going all over the place it's going to return this material app widget and basically all of our code for our project is going to reside within this material app in some manner so we're going to let me go ahead and remove some of this just so we can see it a little bit better okay so we have a theme established we have a title for our project established and then our core app is going to be under home so home is going to direct us to this homepage widget and that's basically all of our code that you see on the screen is going to reside within home in one way or another so what we're going to do here and i do want to clarify another thing whenever we build our application what's going to happen is everything within the lib is going to be configured for both ios and for android and all the necessary things that need to be changed and updated are going to be done to these two repos and so we can from this single bit of code we can go ahead and we can run um an application on uh android emulator as well as an ios emulator and so i'm going to show you what that looks like so i'm going to pull up in the ios simulator and the first time that you run your application it's going to take you a little bit it's going to take a second to build that initial time and also if you can hear in the background my computer is starting to kick on the fans it is going to heat up quite a bit that first time that you run your application it's also partly due to the video software i'm also running at the same time but it's mostly due to the fact that we're running a flutter project for the first time okay so it looks like it's building right now and what it's going to do every time you press play it's going to do a couple things it's going to run a pub get command which is basically going to say i'm going to look at my pubspec.yaml file see if there's anything that's been updated any new assets placed in there any new dependencies placed in there and i'm going to basically tell my project hey i've got some changes let's update it the next thing that it's going to do is it's going to go ahead and build the application for either ios or android it kind of depends on which emulator you have open in my case it's building for ios and so you can see here below it says running xcode build and it's going to build here you can see here i've got a couple other applications that have been built in the past and you'll notice let me exit out of those you'll notice that it just added this new one called flutter complete and if we were to see the rest of it it would probably say complete demo but i'm going to go ahead and open them back up and this is our flutter application this is the default project that flutter comes with so we have here a page where basically i can press this counter and it updates in real time and you can see that it's the same thing because if i go here from flutter demo home page i can say flutter complete demo i can save it and then you can see here updated in real time for me that is called the hot reload so basically we can make any changes that we want that don't affect the state of the application um and by clicking just control s saving the file it is going to go ahead and automatically update our screen for us so we can code and we don't have to keep on rebuilding and re-running our application we can just keep it open and start working away and it'll update as we're making changes to our code if you want to fully relaunch the application we can do a restart which is this little loop button right here so we have hot restart hot reload and we have a hot restart so i'm going to click that you can see here it said restart application it reset it to zero and you know i can keep going on my merry way so let's get a little bit further into what exactly is going on how we get this 11 on the screen in this text how we get that button on the screen and where all that's coming from so i'm going to just go ahead and clear out some of these comments here just so it's a little bit easier to follow along and read i'm going to close out of that i'm gonna do this just bear with me for a second there's a lot of comments in here to on the initial default application okay so let's take it from the top as mentioned earlier basically our entire application is residing within this home this home option right here and so in this case we have my home page which is what it calls my home page is a stateful widget it has a title and you can see here that it calls my homepage state so we go down here we have a counter variable and then we have an increment counter method and you'll notice it's very similar to java or javascript basically any other object oriented program that you've worked with in the past dart is very similar and it is important to note that this is dart this is the dart language if you're unfamiliar a framework and a language are two different things uh language is what we see here like java javascript dart python a framework is basically a library that contains useful things to help you build upon that language so flutter is one of these frameworks okay so going down here this is the core piece to every class that we're always going to be interested in and let me put a space here um we have this widget build method and basically what it's doing is when we call um on home when we call my home page it's basically going to say let's place this giant widget on the screen and so everything you're seeing here from this blue header all the way down to the white at the bottom that is all contained within this scaffold widget okay and you need a scaffold widget at the root of your application to build this screen now you can see here we have a couple things we have an app bar and that contains an app bar widget and so this is all within our scaffold uh scaffold can have an app bar and that is what you see here in blue we placed a title there we have going down we're going to skip over body we're going to look at this we have a floating action button and that is what you see here this counter and you can see that when the button is pressed we call our increment counter method which is going to update the value of counter by one and then the core piece that we're very interested in and it's important to know where to place widgets is our body widget our body option within our scaffold and this is where all of our widgets are going to be contained so we have a center widget that basically aligns everything to the center of the screen and then within that we have a column widget as discussed at the beginning a column widget lists everything vertically so top to bottom and so we can have an alignment on that column and when we call this main axis alignment it's going to align things vertically there's another option here called cross axis alignment and let's do uh end so you can see what this looks like you can see it pushes everything to the far right side so that's going to control things horizontally because we're dealing with a column the default is always going to be the direction that the widget goes and these values are only applicable to rows and columns but these are two widgets that you're going to use a lot and so it's good to get familiar with what they do the next thing that we have within our column widget and you can see here we're starting to nest widgets inside of each other we have our scaffold inside the scaffold we have a center inside the center we have a column inside the column we have a list of other widgets that are stacked so you can see here we have a text widget which is basically you just place text exactly as it sounds and you can see here we say you push this button this many times that's this line right here let me go ahead and save this so readjust to the middle and then we have another text widget that contains the value of our counter variable so any time we click this button counter is going to get updated not only that but we call the set state method which is going to refresh the state of the screen and rebuild the page for us so that we can or rebuild everything within this class so that we can see the updated value on the screen okay so if i wanted to add let's say inside another thing let's say i want to add an outline button there's various types of buttons this one's going to be called outline button it's going to contain a text as it's as the widget inside of it and so i'm just going to say hello world and i'm going to say unpressed not on long pressed and i'm gonna print hello world saving let's look okay we have this button i'm clicking it a lot of times and if i open up my debugger console you can see here that it typed hello world 17 different times for us so you can see here with the column we can add as many widgets as we want but we could potentially have some issues to where there's an overflow and they don't all fit on the screen in which case we need to have some sort of widget that we can scroll with so we're not going to get into that the focus of this initial demo is what we're going to do next i'm going to show you how to import assets so we're going to have a image of a logo at the very top we're going to have two text fields so a place where the user can input some text so we're going to say like a username and a password and then we're going to have a button and when the button is pressed some sort of action is going to take place and maybe we'll also do a little bit of routing to a new page and so we're going to cover a lot of the basics with flutter in this short small application we're going to create widgets handle data handle routing so let's get into that so what i'm first going to do is i'm going to get rid of all the things that i do not need for this the first being our button the second being our app bar and i'm going to remove everything within this column widget so everything contained under this children tag i'm going to remove so all i'm left with is a scaffold widget that basically has nothing inside of it it's got a center widget and a column widget but since those contain nothing we see nothing on the page right and so i'm going to start off by saying logo here i'm going to use this as a placeholder and after each widget in a list you do need to put a comma as a break point before the next line and same goes for any options within a widget so you can see here we have main access alignment we put a comma at the end then we say children then we put a comma after children and if there were other things in the column we wanted to add we'd keep on putting a comma after everything and that's just going to help format our code nicely with the dart formatter okay so we're going to say logo here we're going to say text field here and these are just placeholders we're gonna eventually remove these okay so we have four key widgets we're gonna have we're gonna have a logo a text field another text field and a button and this one's gonna be text field username and this is me text field password okay so the first thing i'm going to do i'm actually going to close out of my emulator i'm going to go to my root folder of my project so i've got my yaml file here i'm going to add a new folder called assets the next thing i'm going to do is i'm going to get an image let's see here i'm going to put this off to the side and i'm going to find an image i'm going to find an image that we can use for this application so i've got one here that i like i'm going to drag it over and it's just a dark gray version of flutter okay and i'm going to leave it with that name that name is fine and you can see here it actually even tells you in the comments how to do this how to import assets so we're going to kind of copy that we're going to say assets do a tab dash and i'm going to say assets slash flutter dark gray png i don't need any of this i'm going to shorten my file a little bit okay so i've got that imported now and upon saving it'll run flutter pubget so i can close that now close that okay so the first thing we're going to do is we need to do our image so we're going to go ahead and right here i'm going to create a container widget and a container widget is basically think of it as a box and it contains anything and we can style it to look a certain way to shape a different way and basically it's just going to the only reason i'm using it is to have a fixed width and height for our image the container itself though isn't going to be visible so we just want to use it to make sure that our image stays a certain size so i'm going to add a width on this i'm just going to say 100 and i'm going to say a height of also 100 and then i'm going to give it a child and the child is going to be image.asset and for the asset name i'm going to go back to my pubspec.yaml and it's going to be the name of the path to our file and let's go ahead and test this out i'm going to run the ios simulator close that i'm going to say run without debugging i'm gonna put a trailing comma here a trailing comma here and you can see that with each time i do that it formats it a little bit better okay it's still building let's give it a second it should update um i believe it's this one right here this is the most recent one that we did yep just updated opening awesome we have our image now that might be a little bit too small so i'm going to update this to 250. perfect that looks great okay so we have our image the next thing that we're going to do is we're going to add our text field so let's go ahead and add that text form field is what i'm going to call it and we're going to have several things in this text form field the first thing however that we need is a controller a controller is going to capture the value that the user inputs into this field so let's first create our controller for this we're going to go to the top right under counter actually we can go ahead and delete these two because they're not being used anymore and we're going to say text form or i'm sorry text editing controller and we're going to call this underscore let's do user name controller is equal to a text editing controller object we want to instantiate that okay let's scroll down inside of our text form field we're going to go ahead and assign that username controller to our controller field so now you can see here it's taking up the full screen right now but now whatever we type in here um this is getting this is getting set to our username controller um it's being captured by that controller um you'll notice the other thing right now is that one the coloring is not what we want it to be i want it to just be black not this blue that you see here and also it's too wide the width is taking up the full screen we don't want that so i'm gonna go ahead and i'm going to cut this widget i'm going to create a padding widget and i'm going to paste this within the padding widget and then i'm going to give this a padding of what we call edge insets dot let's say dot only and then we're going to give it a padding on the left side of 50 on the right side of 50 and on the bottom of 10. perfect so it gave it a little bit of padding before it hits that next text field and then it brought it in on the sides by 50 pixels okay and you're probably a little bit confused on where i'm pulling out all these widgets from there are hundreds of widgets over time you're going to start to familiarize yourselves with more but as you start progressing and learning more about flutter you're going to be able to start typing on stack overflow and looking at the documentation on flutter and discovering more widgets that will help you accomplish what you're trying to do for now though you can follow along and utilize the same widgets i'm using and then from there you can start exploring a little bit on your own and messing around with it a little bit more okay so the next thing we need is we need to continue updating this text form field like i said the coloring's not what we want it to be the width is okay now and you can see here if i hover over this these are all of the different options available to us for styling and working on this specific widgets customizing it to our needs and so there's actually a couple that we're going to be using the first one being this input decoration we're also going to be utilizing let's see here where is it there it is text style i saw it when i was talking earlier and then i lost it and i couldn't remember which one it was so i'm gonna do the style first so text style so you'll also see here let me delete this but whenever we create we input one of these options if you just hover over it you'll see that it tells you exactly what type of object it needs to be set to so a text style widget is basically going to allow us to customize any text so we can add a color so we want to say colors.black we can say a font size and i can set it to let's say 22 and you'll see here it's increased the size and it's made sure it's black now you'll notice the cursor color is not what we want it to be so we can type in cursor color and then change that to black as well you'll see here now it looks black and then the last thing we need to do is get this underlying color so that one's a little bit trickier what we're going to need to do for that is we're going to need to do a decoration and we're going to need to assign it an input decoration object and we're going to need to do a border so you'll see here there's a couple different borders that we have here there's your default border a border if there's an error in validation a border for if the box is enabled focused disabled there's a lot of different borders so i'm actually going to default quite a few of these borders to an underline of black so the first i'm going to do is just your basic border i'm going to assign it an underline border underline input border and i'm going to say border side it's going to be equal to border side color colors dot black okay and then we're gonna have a focus border oh i'm sorry focused border and that is gonna be set to the exact same thing and there we go now our underline has turned from blue to black now you may be wondering why it defaulted to blue and the reason for that is everything in flutter is going to default to the app theme which is the blue color if you want to change that we can do it in two ways we can customize it within the widget itself there's also a way through our theme data to pre-assign colors to different things so you can see here we can pre-assign in the app theme a button color a highlight color divider color and we can also store different colors so that we can reference them as well when we're doing customizations i know this sounds a little confusing again this is a concept that it's probably better to talk about in another video so we're just going to keep on going with our text fields in the meantime okay so there's a couple of little small things that we want to add on top of this to make this text field complete the first being hints and that is going to be contained within our input decoration so if i say uh hint text and we're going to say input username and there we go you see it's kind of like a faded gray it says input username oh my goodness can't type and then i can input it there whenever i go back to no characters it'll automatically pop that hint up again we can also say um hint style and i can say text style um and i can say color colors.red and you see here modifies it to red so there's a lot of other things you can do to modify and customize this a little bit further but i'm going to leave it at that i'm next going to copy this entire widget that we just made and i'm going to paste it in place of this one the reason being is that we're going to basically do almost the exact same thing for our second field the only difference being is that i want to update the controller to be a password controller and i want to add an obscure text value set to true okay and i'm going to go back up to the top right under where we created our text editing controller for username i'm going to now create one for password okay let's scroll back down so we now have our password controller set to controller we've added this value obscure text which is going to hide the characters as they're typed and we are keeping the same styling that we did for the input username i'm going to go ahead and look at this we can test it so let's do a wild dev for the username for password i'm going to do one two three four five six and you can see as i type it obscures the previously typed text okay so those are working how we want them to work i'm now going to add in the button and for this there are several different things that we can do we can do an outline button as we've seen earlier in the demo right where i have a child save text outlined button so it looks something like that i can do um raised buttons although that is now deprecated with the most recent version but that looks something like this kind of like raised off of the page um but what i want to do is neither of these for this example i'm actually going to create my own kind of custom button i'm going to give it a container in that container i'm going to give it a material button and that's going to have an on pressed method press the button and i'm going to print that actually and material button is going to have a child of its own which is going to be a text widget that says press me okay and you can see here there's no border or anything it's just a text widget and everything highlighted right now that you see that is the container so the container is going to shrink to basically encapsulate just the area around everything inside of it the widget inside of it so if we were to make the widget inside of the container really big the container would expand so that could still fit that widget inside of it unless we establish some boundaries on that widget we want to basically say i only want the width of this widget this container to be so big then it will only allow the widget inside of it to increase to that amount but no more so what we're going to do here is i'm going to add on a width i'm going to add on a height and i'm going to add on a border for this container so what i'm going to do for this container is i'm first going to give it a width and i'm not just going to give it a numerical value you know we could be having an application where somebody could be on an iphone 6 something really of screen really small because it's an older iphone or they could be doing a 12 pro max like we see here in this emulator so the size of the screen could vary and let's say we want the button to be different depending on the screen size we want it to adapt and be responsive so what we can do is we can say media query dot of context dot size dot width i'm going to save and you'll see here it now fills the entire width of the screen so let's go ahead and break this down and see what this is all about media query basically you pass it the context of what you're working with so at the beginning of each class let me scroll up here you can see here we generated this value called context which is a build context object inside of our widget now because we are establishing this context at the start where our scaffolds defined that context is basically going to say you know when we pass this to media query it's going to say i want you to get and capture the context of what i'm working with which happens to be the entire screen right now so what it's going to do is this basic install media query i want you to get the details pertaining to the entire screen that i'm currently working with which happens to be the full page of the application then what i want you to do is i want you to tell me what the size is and even further i want you to tell me what the width of that is and so it's going to basically return a double value of the width of the entire screen that we're currently working with and it's going to set that to width and so that's why it's taking up that full screen now we don't want our button to take up the full screen we only want it to take up um let's say like probably up to here almost matching the width of our text fields so what i'm going to do is i'm going to say width divided by 1.2 and by doing that we're essentially shaving off a little bit of the edges and you can see here it's not exact so maybe i'll do like a 1.3 and it's still not going to be exact but it's going to be pretty close to what we want and then you can also see here that the height isn't exactly what i want it to be i could do the same thing and i could say height is media query dot of context dot size dot height and i could say divided by something like 10. and you can see here this is exactly a tenth of the screen's height but screen sizes vary quite a bit and i don't really want to change the height at all i kind of want that value to be fixed and so i'm just going to keep that at a fixed value of 50. you can see here that's a reasonably sized button so there is still one more thing missing here and that is a border around this button because right now you can't really tell that it's a button that should be pressed so what we're going to do is we're going to add a decoration to our container widget it's going to type box decoration and we're going to give it a border radius and similar to html css and other languages that modify the ui of an application uh border radius is a pretty straightforward object it controls the cornering on objects it's going to set all of them to a certain value it's going to curve all of them to a certain extent and we're going to place a double value right here of how much we want it to curve and then i'm going to place a color uh so let's do colors dot let's see what amber looks like save it okay so we get this kind of yellow and you can see here it curved the edges if we want to curve them even more let's say 35 do something drastic you can see here it really curved the edges and made it look like a more round button now we are going to need to do more styling to get rid of this you can see here that there's some shadowing on the hover when you press but we're not going to worry about that right now we're going to focus on functionality in getting us to route to a new page so we have our input username input password and press me now press me currently it does nothing all it says is uh you have or pressed the button you can see here it said press the button three times i'm gonna click it one more you can see here it just updated um what we want it to do instead is we want it to utilize the values that we just just typed in so we're going to say username is equal to usernamecontroller.txt i'm going to copy this paste it and say password is going to be equal to password controller.text give it a nice hot restart i'm gonna type in a username type in a password pressed it you can see here that it successfully captured those values that i typed in now the reason that this is useful is if we had authentication set up and we were working with firebase or some other kind of service such as aws cognito we could capture the values that the user inputs and sign a user into the application so this process of capturing data in text fields is very useful it's also useful because most applications have forms in some manner or another for inputting data and doing something with that data and so that's what we're doing here so the next thing that we want to do is we want to route to a new page entirely so let's say when they press this button let's just assume that we have everything set up for logging a user in and we want to route them into the home page of our application so what i'm going to do here is i'm going to create a new file i'm going to call it homepage dot dart and i'm gonna do a stateful widget and call it home page and you may be wondering how i just did this how i just generated this super quickly and the way that i did it is using the awesome widgets um where is it extensions plugins i just lost to begin extensions um it's awesome flutter snippets package so nav nivash ram dial forgive me if i butchered that pronunciation but uh created this amazing extension that you can use for flutter and this is in vs code um but basically it allowed me to create a new stateful widget from scratch with ease without having to type all this out myself so i've got this new page now called homepage and what it is it has a container and i'm actually just going to do this i'm going to give it a material widget instead and i'll have a center widget inside of that and i'll have one more widget that's a text widget that says home page okay enough of that page i don't really care much about it the one thing i want to do now is i want to route to that next page now we can do one of a couple things we're going to be working with our navigator and just pushing the next route that we want to go to but you can also set up more intricate well-defined routing systems in your application that make it a little bit easier to route to new pages but we're going to go with the default way with routing in your application and that's by using navigator.push navigator.push is going to take two things it's gonna take a context and then the route that we wanna push and we're gonna call this material page route let me go ahead and add some commas here just for the sake of it looking cleaner and material page route is going to have a builder which takes in a context and pushes on our new page which i believe we called home page i'm going to import home homepage okay and give it those parentheses it needs alrighty no more errors so what we're going to do is we're going to print out the username we're going to print out the password and then we're going to navigate we're basically going to push another screen on top of the screen we're currently working with and that screen is going to be our home page which we just made and if we look at our home page all it is is a material widget that contains a text that says home page so i'm going to go ahead and restart this application i'm going to input a username and a password and i'm going to press this button you'll see here printed bliodev123456 and if you saw that animation you can go back and re-watch it again but it slid this next page right on top of that page you can see here homepage so we've successfully routed to a new page where you can now put another widget tree containing whatever it is whatever it is that you need to do on that page and just like that you have successfully created your first flutter application so let's go through one more time everything that we've covered we've covered the purpose of flutter installing flutter setting up your first project we've covered importing and usage of images and other assets into your project how to import those into your pubspec.yaml file as seen here we've covered um basic usage of image widgets text form fields buttons capturing data and using data routing to new pages and all that and so there's a million other things that you can do with flutter and i recommend that you watch my other videos and kind of explore and get a taste of what are some of those things that you can do pretty much any application that you want to build however you can do it with flutter it's going to take some time like i said there's hundreds of different widgets out there hundreds of different packages so there's a lot of stuff that you can familiarize yourself with and use in your application but that does take time to learn but i encourage you just to build keep building pick a design or something that you really want to build pick an application you've been wanting to build for a while and just try to build it start to finish and flutter no google on your way ask questions along your way youtube for tutorials and information on how to do things along the way but the important thing is that you're building build build build that's the best thing that you can do right now to get better and more comfortable working with flutter i hope this video in this tutorial was useful to you i know that there's a lot more to be covered and you probably have a million more questions now that you've kind of gotten your feet in the water i'm here if you need any help or have any questions feel free to join the blou dev discord channel we're always available to help and there's others in the community who are willing to outreach to reach out and to help you with any questions that you might have if you found this video useful please click that like button and subscribe to the channel it'll help the youtube algorithm and help others to find this content as well as well as help me out and giving me the support that i need to keep on putting out these videos for you guys on a weekly basis i hope you found this video useful again i'll put a bunch of links and other helpful information in the description below that hopefully can help you get going and i hope that this has sparked your curiosity just a little bit more and i'll catch you guys next time

Channel: Bleyl Dev

Views: 12,166

Rating: 4.9369369 out of 5

Keywords: flutter, flutterdev, dartlang, flutter tutorial, flutter for beginners, how to flutter, flutter 2021, 2021, how to, learn to, coding, programming, bleyl dev, bleyldev, freecodecamp, full tutorial, full flutter tutorial, google flutter, flutter ui

Id: b-NS_5za44c

Length: 50min 58sec (3058 seconds)

Published: Thu Apr 08 2021