Creating Our First Flutter App

hey everyone in this video we're going to be creating our very first app in a very simple way using very simple code and avoiding in completely the boilerplate code that's generated by the flutter create commands so this is how I personally create my own apps so come basically branching off of what we've learned on for the basic dart like what functions our classes are we're going to be using that knowledge and going to be starting to work with actual flutter widgets so a widget and flutter is basically a chunk of code that displays something on the screen or it may not display something on the screen they might be doing something in the background but a widget is basically an atomic bit of code in our flutter app that kind of separates logically components of the app so typically though a widget is something like a button or an image or text so that's like 90% of the widgets out there are going to display something but for the stuff that's just not displaying anything it can also be a widget and you'll see that in this lesson so last time we have this main function and we went over the fact that when in a flutter app starts there's this main dart file that flutter finds and then it looks for a function in that file called main as well and it runs whatever is in that function now to run your own app we're gonna have to kind of use the components that are offered by the flutter SDK and that library is called material it's it's short for material design so material can work for iOS Android etc but it's going to be a file called actually material Dart and that's located in the flutter SDK that you downloaded so to use that we're gonna have to import it so this is one concept that you're gonna have to know about is whenever you want to use some code provided by someone else or even your own code in your own project you're going to have to use a special command called import this is a special keyword that the compiler knows about when you want to import some code so we're going to say import and it's always going to be at the top of the file you're going to say portes and then we're gonna import something called a package there's many different packages and flutter that you can use and whatever you do import a package you're gonna have package : if you're importing just a some code of your own and it's not really a package you're not going to really need to use package : but well but typically for for flutter you're going to have to use this package : and then did path to the file so in the flare SDK we have a flutter directory and then I we have slash and then material dart and then of course as we went over everything has to end with a semicolon that's basically saying you're ending your statement you're ending your line of code so a statement in dart code is a single unit of work and it has to end with a semicolon so let's go ahead and use material dart so the first widget we're going to cover this is the very first widget and it's the most important widget it's a widget that we need to use to kind of encapsulate and run our entire app and that's called material app the material app widget is one of many kind of like container widgets that you can use but it's the most popular one and material app will offer special configuration options options or parameters and remember parameters are something that you pass into a function lets us easily customize our app and the main kind of parameter it provides is something that lets us specify what we want to display as our default starter screen in our app and that parameters called home so every app has a home right it's a starting screen so that's the parameter it's going to provide so let's go ahead and implement that so we're going to use a kind of a widget now that we imported the material design package here to use a widget a widget is essentially a class it's a it's it's you're using a class and we went over that in the last lesson what a class is so whenever we want to instantiate a class ie if the class is kind of like a template we're creating an instance of the class meaning something that we can customize right and we did also go over that in last lesson we say the class name material app and that's the name of that material app widgets so again a widget is essentially a class and we're gonna have to use parentheses here and anything inside these parentheses are the optional parameters we're going to provide some classes require specific parameters to be set and this app and this widget does but other classes or widgets may not require any parameters so you're not going to put anything in here so these are the parameters that we have to provide and you can read the documentation to see what parameters you might need or you can do something which is hold command or if you're on Windows control and click on the class if you want to hover over it it'll tell you the definition of the class but if you click into it it'll show you a lot of probably ugly code because it's ugly because you probably don't understand it yet and nor should you look at this yet because it's a bit overwhelming but later on you can actually look at this and see what are the configuration options you have for a given widget so let me just go back here so basically just understand that like there's a parameter for material called home and we're going to provide some data to this home parameter so to basically the reason why it's it's skipping down a line here is that my because I installed a flutter extension for visual studio code it's going to automatically format my code every time I save the file so basically the default way of specifying the home parameter is saying home : and then whatever data you're going to provide so colon is the way that it knows that this is the data it's going to you're going to provide so you always have to use a colon here for every parameter so if I have let's say praying 1 : some data parameter am to : some data for am-3 : some data each per am is separated by a comma and after the name of the params : and then the data that you're going to provide so if this material app requires a home parameter I'm gonna have to give it a value and I can't just give it any value because dart is a what's called a strongly typed language I need to provide it a specific type of data so as we went over in the last lesson there's three main types of data and dart there's a string which is a bunch of just text which could enclose by single quotes there's an integer which is essentially a number and there's also a boolean which is true or false but in this case home is not any one of those it's a special data type and we can see what data type is required for it by just floating over the home parameter and we can see here that home is needs to be a widget type now a widget type is a widget is a basically a class so it needs to be of type widget and there's many different types of widget you can use you've probably heard of them already stateful widgets stateless widget etc so home can be either any type of widget and typically it's it's a stateless widget because this screen we're gonna display for the home screen is gonna not have any state and if you don't know what state is just we're gonna cover that in the next lesson so you can not worry about it for now but basically this screen is gonna be a stateless widget it's not going to have any data to it and basically when I another thing about parameters here is if I provide some data here like let's say home was a string and I say data comma let's say pram - colon comma more data right this is not very realistic when I save my file it's gonna automatically insert line breaks here and and so this is what you're gonna see a lot with flutter so for every parameter it there's just to kind of make the data look better look on the screen so it's not like very long it's gonna add a line break in and indent so instead of something long like this let's say I have more programs like this pram to pram 3 etc this is very ugly because when you're writing a lot of code having a long long list of parameters it makes it not very readable so you're gonna see this lot which is whenever I have a lot of parameters it's going to automatically add these line breaks and indent so that's really important for like readability so this makes the kind of code a lot read a more readable but also whenever we nest data so I can add let's say the pram for your passing another class to it you're not passing a string let's say another the class is called another class and if that class requires other parameters like another per am and then some data let's call it an integer like this another brand to let's say it's another integer and let's say another pram 3 is a string fubar whatever also that's gonna be formatted so it's not going to be a long list here it's gonna when I save my file it's gonna indent again and it's gonna look like this so this format of data is your you're just gonna you're gonna see a lot it a lot in flutter so every time I nest things and this is where I'm nesting I'm nesting another class inside / am for and I'm nesting / am for inside my material app this is the kind of format you're gonna see so you're gonna have to get used to that so anyway let's go back to actually implementing our screen and let's finish this up so the home is basically a widget and basically we want to show a mean screen of information and to do that there's a special convenience widget called scaffold scaffold is is what you that the word scaffold means just some kind of like when they build a building there's like construction work you know people have to work on the building there's like different levels of that they can climb on and it's just something that's temporary and so scaffolding basically gives you the support you need to kind of create a screen that's a convenience widget and it's a convenience widget because it lets you customize some parameters that is that are very common and two parameters that lets you specify is a navigation bar at the top and some main body of data in the center of the screen so most mobile apps have a nav bar at the top as you already know probably being a mobile app user and so this is they the scaffold widget lets us specify that using a parameter called app bar so app bar is our main navigation bar at the top now app bar requires a widget of type preferred size widget now that's really confusing because we would preferred size which it doesn't mean anything like and I'm not going to go into what it is but basically there's a specific widget called app bar now it accepts this app bar which is essentially a navigation bar and app bar is extending this preferred size widget which again you don't have to know about so that's why it's not complaining it's not giving me any errors so just I'm just noting this because as you look through the code it might be confusing that oh it it accepts a preferred sized widget what does that mean and just know that widgets can in extend other widgets so app bar here extends or kind of uses the features of this weird preferred sized widget so that's the best explanation I can give but basically just I would say trust the process and you'll you'll kind of get the hang of it so AB bar our navigation bar and app bar requires a parameter let me look here called title so the text at the top of the screen that's what we're going to display here so the text at the top of the screen and that the parameter here is called title colon and then we need to provide it some text and we can't just write in some text here because it doesn't accept that if we float over the title pram it's of its requiring a widget see widget title here so the way we display some text in flutter is using a widget called text and text you can just pass a string to it so now basically like this now basically there's no parameter we to provide a kind of like a string to this widgets there's there we can't just say the name of the parameter some widgets don't have you don't specify any name for the parameter if it's something that's a common sense parameter instead of define specifying the name of a parameter you're not going to type in text data : hello like all the time throughout your app there's a shortcut flutter and dart provide which is basically something that's just it expects you to provide like the parameter so if I click into text here you can see this this data here you provide is the actual text that's going to display on the screen but there's no name for this parameter okay so it's a non optional parameter and there's no name for it really we're just gonna say hello so that's just another style in how to instantiate widgets and it's important to note that because you might be wondering why is there a why isn't there a parameter name there so this navigation bar is going to say have a title with text hello and then there's another parameter on scaffold that is the final part that we have to implement which is called body bodies the main section of the screen so we're gonna say body : and we're gonna also provided some text we can typically provide whatever we want here but we can say this is some text welcome to my app so now that I save so basically we have a bar here is the first parameter of scaffold then we have a comma because remember parameters are kind of separated by commas and then we have the body per am so that's the second parameter that's provided and it's requiring a widget and we're going to use the text widget here and then each parenthesis here parenthesis here is going to end our end it here so ending scaffold so we just in what I'm highlighting here is we've instantiated the scaffold widget and this is going to be passed to home and then material up here now the final thing we have to do is we can't just run this app yet so there's a special function in main that that flutter provides and that's called run app so this this special function that whatever we pass to it is whatever is is going to run when we run the app so we're gonna have to say run you could say return because this is going to return something we don't really need to specify it actually run app and then I'm gonna give it my app so it's gonna we're going to provide it our material app right and as I save this file the the flutter extension for visual studio code is going to format it for me automatically now we're gonna break up this code into different files in a minute but right now it looks a bit ugly because it's all deeply nested but we're gonna have to just deal with it for now so I'm gonna hit f5 and run the app you can also go to debug and say just start debugging the bar down here is going to be purple because it's crunching away doing something and it's running the app so that's why the bard is down here is purple and as you can see on the right we have hello as our app bar our nav bar text and then we have this is some text welcome to my app that's this is the beginning of the main body and because I'm not customizing material app in any way by default it's going to have the style of kind of an material design and material design is a certain kind of design library flutter and google offers that and they use material design for web applications mobile apps a lot of stuff and it's just basically a general style of how to kind of present UI to people so that's why you're gonna have like a blue by default here at the top and a little bit of a shadow here under the nav bar and then some text so we can style flutter apps in kind of the iOS style not the material design style but we can also customize the material design style if we want we don't have to have a shadow here we can change the color of this we can change the text size etc but by default this is what it's going to look like so now let's do the final part of the video and we're gonna split up the code into kind of something that's a lot more readable so let's stop the app here okay so let's create a one file that will contain our main app so well first of all actually let's start from the backwards so let's create a file that contains our home screen so this scaffold represents our home screen because we're providing this value as the home parameter here of material app so I'm gonna cut this here and say right click on lib and say new file and I'm gonna say hello and this is gonna be the hello screen basically and basically to create a screen and flutter I'm not going to paste this in yet so because it's going to be confusing we're gonna have to implement our own stateless widget so there's two types of widgets stateful and stateless and basically state is data which all it is is data that's associated with a witch so stateless widgets don't really have any data to it we're just gonna just display something so I'll go over that in depth in another lesson but basically most of the widgets can you're going to be using in the beginning are stateless widgets so so that's to create our own stateless widget we're gonna it's going to be a class as I said all widgets are classes so we're gonna say class and then we're gonna name our widget so we're gonna call our widget hello and because it's a stateless widget flutter already provides some code to render a stateless widget so we're gonna have to use that code but we're gonna extend that code by writing our own customization options for the screen we're gonna tell it what we want to draw on the screen so we're gonna extend stateless widget and stateless widget is a class and we're gonna use this extends keyword here so whenever I declare a class I can have it extend using this extends keyword and then say the name of the other class I want to use here and then we're gonna have curly braces here because this is where our code is going to go and to extend the stateless widget to implement our widget we're gonna implement a special function called build so build is gonna have a specific way to implement it and let me just implement it quick and explain to you so build is a special function that we're going to implement which requires that we return a widget so the return value is going to be here so if I don't have a return value I have just nothing here so this is what we're gonna return and what it's gonna pass in as a build context and we're not going to go over build context right now but basically build context is something required by our stateless widget so that it can draw properly or render something properly so we might not use this build context parameter but we still need to provide it and I'll against explain what that means in another lesson and we're gonna paste in what we copied here so we're gonna say scaffold appbar etc and the reason why this is erroring out a lot is because we haven't imported our material dart file so we're gonna go back to the main dot dart file copy this import and just import it again here so now there's no read errors and because we're returning a widget here we're gonna have to use a keyword called return and return basically returns what we ever value we provide to it and then because this is a statement I have to end it with a semicolon and because I provided everything the compiler needs and I hit save it's gonna automatically format my code for me so it's going to return remove the empty line break here it's going to indent things properly so basically what you're looking at is your own stateless widget and this is a single screen in flutter and this override means that we're overriding an existing function that stateless widget provides to us so if I control or command click into this stateless widget and this is a lot of ugly code because you just don't understand what it means but because we're just starting off but there is a function here that it's expecting us to implement called build right and so that's where it is so we're overriding it and and this @ symbol is basically called and an annotation so an annotation is something that you can provide let's say could be anything but in this case the stateless widget is is requiring an annotation called override because we're overriding something and what it's doing is it's it's just basically like a label for a function so it's basically adding a label to our function that gives it some characteristic or gives it some unlock some functionality to it so we can't just remove this over I we have to provide this here so so this override returns a widget and then the function name is build and providing a build context you're going to see this a ton in flutter because if you're implementing a lot of state stateless widgets you're going to be needing to override this build function a lot okay so let's finish this up so we have our hello screen it's going to return a scaffold which is basically a screen and then lastly we don't want to have a material app here we want to move that to a separate file so let's move that and to move it we're going to create our own app dart file and the recent and app that dart is it's just a convention so let's copy our hello screen here and because it's gonna have the same structure it's going to be a stateless widget I'm going to right-click Lib and create a file called app dart and then we're gonna paste in what we've copied we're going to rename hello to app and then we're gonna go to main and then cut this here and then go to back to app and it's not going to return a scaffold it's going to be the container so it's going to return a material app and it's gonna return our homescreen our hello screen right now we can't just provide it this hello here because it doesn't know what hello is we have to import the hello class that we defined so to use hello in the app dart file we say import and we just say hello dart and then semicolon so now that we have imported it it's not going to give us a red underline here and then we save our file and you see it auto formatted it and it's one line here because there's not a lot of text here and now we can import app our app widget here into Maine dark now before we continue real quick app is as a convention we're in flutter where or in other web app frameworks or mobile frameworks that basically is our main container for our entire app so if we are using this material app widget we're going to kind of return it in our app stateless widget so app is a common file you want to create for any flutter project right so whenever I create a flutter project I'm going to have main dart I'm gonna have an app dart which contains our material app widget and whatever screens I want to show to the user so right now we only have one screen hello dart so we're going to go back to main and we're gonna say imports app dart and then because it's going to run an app we're gonna say app and we don't need to provide any parameters we're just instantiating the app class and we covered what instantiating means in the last video and we're going to provide whatever this is to run app now this is a shortcut so we could say this right so final app which is the name of our variable equals app semicolon and then provide that variable to it but basically instead of doing this if we just say app this is a shortcut so this is really useful this is just the shortcut here so I'm gonna hit f5 and we're gonna run this thing so let's see if that worked it's gonna build the app and load it up and there we go the app works fine still so before we wrap up here we're done let's just I'm just going to walk through exactly what we did and what's going on here we have our main dot app main function here that flutter looks for when it starts running there's a special function called run app provided by just the flutter SDK when we import that here and we're gonna instantiate our own app which is again the wrapper for an entire app that we're gonna write and what app is does is it's a stateless widget and it's going to return a material app right it's going to have a default screen called home and home is something that material app expects us to provide it's the starter screen that displays whenever the app starts and we're going to provide it a screen to show to the user called hello and hello is another stateless widget it's going to return as scaffold and again a scaffold is a kind boilerplate convenience widget that lets us specify an app bar which is the navbar at the top here and a body which is the main bit of content you see here so that's it so any time you create a new flutter app you're going to be wanting to create main dart app that dart and it's gonna look exactly like this and then whatever starter screen you can name it hello dot dart for our example but if it's your own custom app you're gonna name it something differently so thanks for watching

Channel: Nick Manning (seenickcode)

Views: 27,205

Keywords: flutter

Id: Xzjnqhu6SHM

Length: 29min 34sec (1774 seconds)

Published: Sat Feb 02 2019