Learn Flutter in 15 minutes

[Music] you wanna learn further in just 15 minutes well this is a right video for you I'm gonna cover all the steps you need to get you started for your first flutter project I can assure you by following these simple steps I will show you in a bit you will become a flutter expert in no time okay so you've successfully created your first flutter project and they give you this boilerplate and you might be wondering like what is all this so let's just remove it and I'm gonna start from scratch so you guys can understand what's actually going on under the hood so flutter starts with defining a void methods that is your main magic methods and this is going to return a run app which is necessary for all flutter applications and this is going to return your main class which is called my app so let's start by creating this and you can type I type st less for stateless widgets this is a shortcut and flutter that shows you that creates this boilerplate for you so we can copy or my app in here let's just paste it so at the top of the application we want to return any material app and the material app is something in flutter every unique app and flutter should only have one material app and this is a stack that all the way at the top of your application and we should always keep this file or this class quite tidy quite empty what they mostly do in material apps is that they specify a team or team data and we can set the team data due to dark or by default it is set to team data that light if you want to overwrite text values or text you're going to use in your app we can use that by extending the dark dot copy with and then you would set a text team and you would create that object and we can set body text for example and we can specify a specific style to here and let's say we want a textile of with a font size of 12 and I'm gonna say in a color of colors that's color stock black for example and a font weight of font weight dot volts I'm gonna I'm gonna put a comma I put in comma after all the parentheses is gonna result in a nice little tree and then further if you need to flutter everything and flutter is a widget right and everything you stack in the widget is gonna be part of the budget tree in short basically so let's use another team as well we can copy that text style and let's say I want to specify a display one so this is gonna be another text style and we can use for the counter value we will be creating it's gonna be quite big so this should be let's take it white and let's take the font way to be the maximum is w900 so let's create the home value of our material app and then here we would actually specify our home view right and we can say okay let's give it a title and that title should be flutter in 15 minutes now let's go outside of the class and let's create another stls you can see stateful or stateless and we're gonna see the difference and embed so there's always two type of widgets you can create so we can create a stateless widget which is gonna create again the boilerplate is it gonna overwrite and it's gonna give our build methods for the widget tree basically so let's copy let's take that home view and let's use the title we provided in here and we can use that by setting a final variable it's gonna be of type string and it's gonna take the title then we need to set up a constructor so you can actually pass it in like you would do in a sort of function but in this case it is a class constructor and you would say this that title remember to put the curly braces inside of the parenthesis like so and now we can create our scaffolds and now scaffold is something that as access to an app bar which again is of type object a bar itself and every app bar can have a title and a title is going to be a widgets and we can take the string we just provided in here and now we can do command S or press this little Thunder icon in here to do a hot reload so remember there's two type of restarting your app there's the hot restart which restarts the whole application and there's a hot reload which is going to reload everything that's inside of this build methods or inside of this built methods and you're gonna see why it's really handy in embeds so let's also create inner scaffolds we can have a body and a body again as a widget and the widget tree and our body should be of type column why is what is a cone really a column is stacking items or widgets in a vertical way up or down well as a row is stacking them horizontally so on the x-axis or the y-axis lucam so a column thereby takes a property called children we can specify children let's say or texts and we're gonna say taps button this many times and and here we can set our style and we can set okay the team we provided in the material app can be of the type team of that context and then we can set it to text MDOT body one and after new command s or a pest under icon it's gonna appear right at the top here but let's Center the column and by wrapping it in our new widget we can press alt enter and then we can select rapid Center and this is gonna Center your widget and it's gonna add the parentheses by itself so you don't need to type them manually what you also want to specify in the column is the main axis alignment this will assure that is guessing AG that is getting vertically aligned as well so here we go that's at the second item of the column by copying this text like so and then here we want to specify our contour value which for the moment I'm gonna use just at a static and it's gonna be display one so this is here let's start by adding our buttons so where we should be at our buttons because we're working in a scaffold widget we can add a floating action button and because we're gonna have more than one I want to wrap this in a row because we want to stack them on a horizontal way so I'm gonna get type in a row the row is gonna have some children which is gonna be the floating action button every floating action button can have a child so I'm gonna start by creating the first one and it's gonna be of type icon the child is gonna be rigid so it can be really any widget you want but for us it's gonna be an icon so I'm gonna type icon start adds like so this is gonna align it's bit strange but we can solve that very easy but adding again in main axis alignment and the main axis alignment is gonna be of type ends if you see a yellow border underneath a widget it means there's a missing and you can see it in a dart analysis the parameter on press is required whenever something is required you obviously need to type it in let's just for now create an anonymous function that's not gonna do anything let's copy all this floating action button let's put a comma behind these and I'm just gonna copy this and I kind of added three times because we are gonna have three buttons so the next one is gonna be the last one is going to be the add button the before that is gonna be I'm gonna remove and this is gonna be a refresh button she's gonna hot reloads and you can see how we can actually add some padding to it by adding a size box widget which you can place in between the children of a column or a row and you can specify a width value of 10 put a comma behind here and we can copy yet another time so it's happening two times let's compress command s and we can see the effects happening now because we're working in a stateless widget at the moment the state won't be updating and an easy fix for this is you can press alt enter and we can convert this to stateful widgets now under neither home view state we can create a private variable for our counter a private variables are always declared with specify an underscore in front of the name in example this would be a public variable but we're gonna make it private we are going to have to set a method that is gonna say increase counter and avoid methods if you're not used to this it's not returning anything it's just doing a simple action what is it going to happen in order increase counter it's gonna update our counter with one you can say plus plus or you can say plus is one in order to make this actually updating the state we need to make use of something that comes with a stateful widgets and that's called a set state methods a set State method is gonna rebuild everything underneath the build function now we still need to use that counter value in our text widgets which is specified in here because the taxes is currently set to no to add a variable and between these columns or semicolons we can you need to add a our sign and then we can use the contour value so now if I'm hot reloading the app it's gonna give the same results but when I'm pressing the plus icon it's gonna increase now let's add functionality for the my the decrease values and reset fingers as well so we can simply copy our methods and a set of increase in we wanna decrease and the Condor decrease should be counter min min so counter goes minus one every time you press the button but we only want this to happen when the counter is bigger than no so it can't go negative let's test if this is actually working and we can go to our remove value decrease counter that's just hot reload because we're also doing stuff outside of the build methods you're adding and we are removing and it can't go below no now I still need to add resets which is gonna be fairly easy we can copy the increase methods like so and then we can say reset or counter and this will just simply say counter will be no now we can use the reset counter in the refresh and put it in the unpressed methods in the floating action button now let's how to restart and if everything's working fine and we did everything perfect they should reset to no now let's add something other to it we can use the background call let's say we want to update the background color every time the contour changes so let's say I just want to simply create a list of colors and I want to use this color in my background color and I want to make use of that counter value but I want I want to make sure the remainder of my color that lengths will be the same so if I'm if I'm hot restarting the app yeah it's gonna start on the first index but I'm adding items and if it in the last one is gonna the remainder basically solves the issue of that your array index is not correct and it's gonna reset the index after the last one so now we got an app that says this let's say we want to add the app bar we don't want a background color here for example and we can say okay colors dots transparent and then the elevation and elevation on a bar is basically that little drop shadow you see in here and as it expects you entering a float value and we can say zero point zero and now the other is going to be gone so a quick recap of what you've learned so far by using flutter we've started with our main material app that has at home and in the home we are specifying our main home view class and in that class which is a stateful widgets because we're updating the counter value or decreasing current value or resetting the content values we have a scaffold and the scaffold contains or app bar all the way at the top it contains a body which is gonna be your text and that's gonna say you've tapped this button this many times and it's gonna be your contour value and all the way at the bottom we got a floating floating action buttons which is resulting in a row of our three buttons recreated which only have their own functionality for increasing decreasing or resetting the contour value so I can assure you if you get comfortable with using these kind of things this kind of functionality this kind of States using stead States then you can move on to more advanced topics likes provider or block for state management's do some networking maybe but firstly you need to master this kind of skill set before you even continue to create more complex or advanced witches so this is really the base of flutter and that's basically it's also guys hit the like button and subscribe to my channel if you want to stay updated on the latest videos on posting for you see you later [Music]

Channel: Twistbase

Views: 28,504

Rating: 4.5797467 out of 5

Keywords: flutter, dart, flutter course, flutter tutorial, mobile development, software tutorial, flutter app, coding course, android, ios, education, user interface design, ios development, android development, beginner flutter tutorial, beginner coding course, flutter for beginners

Id: nvAh3ENt2Kk

Length: 15min 42sec (942 seconds)

Published: Sat Apr 04 2020