Flutter App Tutorial For Beginners #2021

[Music] hey everyone and welcome to this flutter course in this video we're going to show you how you can actually install floater and we are going to talk about it through some couple slides and at the end we are going to be building a very nice interactive onboarding screens so before you proceed do make sure you hit like button and also the subscribe button so floater is a google ui toolkit that you can actually use to build beautiful natively compiled application and it supports cross-platform both on android and ios and also on windows and you can also use just a single code base to build this application so you could see over there we have viewed android and ios apps using a single code base so with the help of that programming language which is client optimized and it's very fast very fast performance on any platform that's what we're going to be using on floater and it's a programming language optimized for building user interfaces so when we talk about user interfaces we're actually making a reference to the widget which you're going to see in some couple of slides and it's very productive with the help of a hot load or static analytics statistical analysis which kind of helps you to build less buggy codes and it's very similar to javascript and if you're familiar with for loop and also the java structure you could see that floater looks similar to that we are still going to see that as we proceed so with the help of widget we can actually use that widget to build the natively uh beautiful ui application so we have the material we also have the stateless and stateful widget we then at the bottom there you could see we have a scaffold app bar container image and icon these are all examples of widgets and the next one is supposed to be the stateful widgets okay the stateless widget so the state level is just an immutable widget which we can actually tamper with and uh you could see that inside there we have a container widget which we use to render application but we are seeking to see what a stateful widget is set for jet is dynamic and it changes immediately you save even immediately you are using it on your android app or on your ios application so we have examples of it like the check box the radio slider the form and text field so if you want to use floater on your machine make sure you have the latest s code or ios emulator and if you're on windows make sure you have the android studio sdk and also the emulator and then in your s code or in your android studio make sure you have the android studio plugin or if you are going to be using the vs code which we are going to be using on this video you need to make sure as well you have the flutter vs code extension and finally let's get started so once more before you proceed do make sure you hit that like button and also the subscribe button and this is just the example of the application that we are going to be building and it's just a simple embodying screen with an image and also a button and some couple of text and if you can notice here we also apply some colors on the boxing which we are actually going to do and also secondly we are also going to build this to also help us understand more of how we can actually use floater so by the time we are done with these two application or these two onboarding screen application you should be perfect building a simple basic float application and as time goes on we are going to go into diverse animation and also diverse advanced programming aspects of flutter so guys before you proceed once more do make sure hit the like button and also the subscribe button so in this tutorial let's go ahead and install our float application or floater sdk on our machine and this tutorial is not only targeted for windows although that i have a tutorial i put down on the link description that you can actually click on it's going to take you to a page on a website that you can actually learn how to install flutter on your ios device so we are going to be focusing mainly on a windows machine in this aspect so let's just click on documentations or quickly let me just go ahead and open that as well so we have to just go over to both skills and down here you can see floater installation and step so all you just have to do simply is to uh come over to this link i'm going to put it in the description you're going to see how we do it so for the benefit of simplicity i think it's best that we just follow the one on the website although that one also on the documentation looks very easier but anyways then just click on get started and when you click on get started you can select the platform which you want your floater to be installed then you can select windows so for windows operating system you just have to go ahead and download the sdk so i already have the sdk downloaded so i have it extracted on my local c drive sroc folder and i extracted the sdk over there then the next thing you have to do is to add that folder project your path so over here you can see update your path but on this tutorial here i just made it simply add parts for location or for your floater so this is going to be a floater location you are going to add this part so if your windows just search environment variables and when you click on edit environment variables come over to path and click on edit so i didn't notice that earlier but you could see here we have the c directory source directory floater and also the bin directory so simply if you want to check whether your floater has been added perfectly you're just going to run this command from your bash so when you run when you run which floater is going to show you where your floater is actually is on your directories so that's it and that's uh you can also run flux. to have some couple of things installed but uh if you're on iox just go ahead and download the xcode configure the s code with the code below and also if for windows go ahead and install your android studio then inside your android studio you just have to create a virtual device just like this one you could see over here and then inside of vs code you just have to simply install the floater plugin and lastly you can just run floater create which is actually going to create the application just with the app name so that's it for the installation very simple and that's similar to what they just put down down here so once you add this to your path you can run which floats at that or with floater which is going to show you where your floater is and just like that you can run flutter. and uh if you wish to do some other things like i said you can install android studio and install a plugin and set up your avd manager or virtual device emulator and that's it so let's just uh get started with so to create a float application is just very simple all you just have to do is to stay on the folder we which you wish your folder should be or your folder application should be so you just simply have to run floater then you put down the create command and then you type down the name of the application so we are going to call the first one on button one and when we hit enter it's going to grab everything for us and have it installed for us in that directory so once that is done you just have to switch down to on body one and uh i would have told you to run this command which with the help of this command we can be able to run application but i think the best part of it is to open it on our visual studio code and run it directly from there so when you come over to your visual studio code once it's opened click on this section over here and search for floater so when you search for floater you could see the floater extension just go ahead and install it and that's it and then come back to this folder so you can open the lib folder and you could see the main that file so in the main that file is exactly where our application is so we can just quickly use the debugger over here to run our application but let's kind of uh take a look at what we are seeing over here so right here you could see we have a stateless widget a state let's widget which renders once and does not allow for uh rendering or does not allow for changing things dynamically so we have just a simple title inside the material our projects and also here we have a theme data which you can actually use to set your primary swatch colors and with help of flutter we can access over millions of colors so we have colors that let's say red so when i click on red you could see a lot of colors that it affords me to select so when i select any of this one so i could say red 900 you could see it's going to be applied to that and also once you have that floater extension installed you could see it's going to be recommending those colors for you just like emit or beautified login so we have here just a simple uh stateful widget which we can actually use to pass things dynamically so over here we are passing just a simple title to our home page so that's it over there so a lot of uh uh a lot of this let's just go ahead and run our application and when we run our application we just have to give it some couple of times and it's going to open that application on our virtual device right now the application has started and you could see we have flutter demo homepage over there and when you click on this button because of the stateful widgets we're able to update these dynamically so we are still going to come to that aspect so this is going to be the first time you're going to be uh seeing this if you are new to floater and what you see here is just a stateless widget and it's going to be supporting uh material up so material up kind of wraps every other thing that we want to do because basically floater is kind of based on that material ui so uh for the basic of sim for the for the purpose of simplicity we just want everything to be started from scratch but before we move ahead i just want to make a reference to this color so flutter kind of supports a lot of colors so you can actually change this to red and when you change that and save it's going to change this as well to red so which is kind of looking very cool but let's just go ahead and make sure we get rid of everything here so just go ahead and clear this and make sure you get rid of every other thing there so you can just clear this comment as well and also clear this one so uh for the primary swatch we don't actually need this because we are going to be uh using our uh sorry we are going to be doing colors by ourselves and the visual density kind of make things to be more that adaptive whenever you are on different platform or different mobile screens so we just don't need the theme data you can still get rid of that and you can change this to your first floater app if you want so let's just go ahead and change this to flare first plotter up and then inside this home is where we are going to be putting every other thing that we want so if i just come here and put down the text widgets so i can say hello world and when i save that you could see we have the hello world text over there which kind of looks really cool and is very very fast so if you want to put more things like uh let's say we can add a container over here and inside that container we can have a chart and inside the chart we can have the coulomb and inside this column if we want to put down multiple containers we can bring down the children and inside the array we can just say text so we can say text one and also you can just put comma over there and uh you could say text too so when you go ahead and save that you see we have the text one and text two so why you see it on on a vertical axis is because we're using coulomb and you can also change this to row if you wish it's going to be on a horizontal direction so that's how we can actually change things in the way you want it to be so if you want to change something like this test call over here you can just simply type down style and then you can bring down the text style and inside our text type you can just give it a font size let's say of 100 so you could say 100.0 and when you save that you see the text side of that first one kind of get more bigger so let me just get rid of the second one and make sure that this is coulomb as well so you see we have that text one and if you want to give it a color as well so you could say color and you can refer to colors then you can select the one you want so let's just select any color over there so let's say colors.view and when we save you see we have colors.blue so that's how we can do that so gradually you're beginning to understand how you can actually uh use a floater so there's one more thing also called a scaffold widgets so if you want to make use of this scaffold widget instead of us using that coulomb object it's very simple you can just type down scaffold and there you can just reference to the upper and for the upper you just have to use the above widget and inside the above we just could see the title then you could put title which is my first floater up and now we are kind of having some errors so make sure you uh kind of delete these and also remove these comma the last and you can just close that properly and when we save you could see we have that about title over there and if we want anything to show in this home over here or in this body it's very simple all you just have to do is come beneath the upper inside the same scaffold you can just reference the body and you can just put everything in the center if you wish then you can put a child and that child can be either a coulomb or row so let's just use a simple text we could say my first body so when we save this you see we have that my first body over there so flutter kind of have similarities with javascript so if you don't want this this way just very simple you can just make it in a way as if it's an ess syntax so you can just simply say run up and inside that you can put the name of the class you want to run so make sure you close that properly and add a invite comma at the end and simply is going to render the same thing to us so that's it for just a basic introduction of floater and right now let's go ahead and start working on our application so if you notice here application kind of have some couple of images both the first one and also the second and bottom screens and simply for you to use an image it's very simple just come over to this popspec.cml file so in this pos popspec.yaml file is where you can actually use your dependency uh put the description of your application and as well change the name of your application so we are going to change this to a very nice name i can just simply say on button up so just go ahead and save that and whenever you save it it's going to apply that to your application so we are not actually working on these but i just want to show you how we can use images and also custom fonts so in case you have any dependency you want to use you can just go over to pop let me kind of show you that quickly so when you come over to pop.dev so this way you're going to be grabbing a lot of packages it's just like node modules packages so you can make a selection of the pump.dev that you can actually sorry it make a selection of dependency you want to use so the basic ones are always english words so when you select english was and click on search you're going to see that's english what's over there so when you scroll down over here it's going to give you some direction of how you can actually install that all you just simply have to do is to import this one on your main.that file but to use dependency uh you have to think click on installing and then on inside the installing you can just go ahead and copy this and come over here and just go back and paste that so that's how you can use a custom dependency on your floater application so when you scroll down here you're going to see some comments made here we have the fonts so if you want to use a custom font all you just have to do is to uncomment these then you can add the name of the phones and also put down the fonts and make sure it's going to be coming from a directory called fonts if you have a directory called fonts but if you're using a custom directory you just have to pull down the name of that font but we are still going to come over to these ones as time goes on so if you want to use images they are very simple which we are going to be doing right away you can just come over here and select uh on comment the ad set and when you comment on commander access you can come over here and put down the name of the image from the image directory but we are not going to be only using one image we are going to be using multiple images so all you just have to do is to change this or get rid of this one and just leave it that way images so if you want to use the images folder you can just use it but i prefer using the add sets folder and quickly just go ahead and create a folder called add sets so inside here we are going to be grabbing every single image from this application and we're going to add that then we can just then then we can add the image to application from the floater codes so right here you could see inside that asset folder i kind of grabbed every single image that i need and put it down and i also added a font and hopefully we should be able to touch the font aspects so right here you've seen that we've added that and let's just go ahead and add use some couple of fonts as well since we've actually done we are actually done with this image and one more thing do not forget to put a forward slash at the end of this access in order to get rid of the yellows quickly line and here we are going to be using the fonts and we are going to have a font family of month series so let me just kind of check whether we don't have that font so we are we don't have much but let's say we are using little and here you can make the selection of the font you want to use under that font family so we have add sets so here all you just have to simply do is to add add sets slash fonts so if you can recall here we have access slash fonts then the name of the file or the name of the font itself so we have the little black dot ttf so you can also add something like a font tweet which is simply you can just add the weight over here and you can just say let's add a weight of 700 so let's just leave this one font for now we are going to still make use of that unless they go back to our application so right here i'm just back in our application and let's start a simple design first then we are going to see how we can apply all those image as we code along quickly and back inside your main. file you just have to like uh create a file called on button1 inside the lib folder so let's just go ahead and create on button1 dot dots so inside the operating one make sure you import from the package we have the floater uh make sure you spell everything correctly and then we can refer to the material the dots so when you are done everything should be uh set for you but why we still see that sorry that blue which uh squiggly line is because we are not yet using any widget so quickly just slide down a class called on border one and we're going to be extending that to stateless widgets because that's going to be a first renderer and then we can override so inside these override we just have to override the widget called debuted and then we can put down the build context context and then inside here we can add whatever we want to add so do not forget we initially use something like his car food so this is the perfect time for us to use that and inside that you can add a body and that body can be text or anything so let's just go ahead and add a text and let's call this one onboarding on and let's go ahead and save that so using this is very simple bug inside that main dot that's filed uh you have to just simply come here come to this body and kind of remove everything here at the center and simply you can just type the name of the function or the name of the class and close that properly and when you save it's going to render that on bottom one for you so when you when you're done with that in case you did experience some errors just come over here and make sure you properly put an invited code there and you could see that it's going to show that on body one so that's how we can use a class of another file and use it inside our main body scaffold file so right now let's go ahead and start our designing and that's going to be the first part of this video so guys if you've come this far do not forget to hit that like button and also that subscribe button so we are not going to be making use of these uh my first flutter app title over there so i simply all i just have to do is to get rid of that title so that we can have a simple screen which we are going to be working with and uh sorry guys not exactly this title i mean this app bar so just go ahead and get rid of it and you could see we have just a very nice flat screen over there so this kind of touching the the edge of that status bar and we don't actually want it that way so inside this our on bottom one so let me kind of reduce this a little bit inside this on body one all you just simply have to do is to put that that same scaffold the text and inside this body we are going to put something called a safe area and inside the safe area we are going to have a chart and the child is going to have a coulomb because everything is on a vertical axis so do not forget always that a column does have children and then we can put multiple things here so let's say text one and also we can also put another text over here so whenever we save you see we have that escaped from the status bar and also placed it properly for us so right now let's start off our first design so inside here we're going to have a container and inside that container we're going to have a padding because we don't want it to touch the edges of our screen and we could say cons of edge inside dot uh if we if we wanted to not touch the parts of our screen we can use all if we want the top right left and bottom but if we want from some specific side we could say that only as well then we can mix some selection like top then we can put the number like 20 so let me kind of add something here so that you could understand what i mean so let me just say text so let me say padded text so when i say top of 20 you could see over there it gave us a top of 20 when i say a left of 20 as well so uh it's supposed to show us a left of 22 so let me kind of make things uh organized so that was supposed to be just one and when we save you see it still gives us that padded left of 20 so that's how we can use it but we we can actually use this or we can also use from left to right so we have left right uh bottom left top bottom right and bottom so you can actually from here then put the numbers respectively so we are going to be using 24.4 42.0 24.4 and also 42.0 so that's how we can add that and automatically you see it's going to give us that padding from each edge of that screen and inside here we are going to have a row and inside our row we are going to have uh a children and inside our children we are going to have an image so we can actually use image. then we can put the name of the folder we want to use then we can say bug.png which is the name of the image so when whenever we type the name of the image correctly if you notice here at this little uh something like a minimap or left pane you could see that image so this is one way of using images with flutter but if you want to still use the image in another way you can just wrap everything you can just say something like this image then inside there you can put down the image like from the add set image then you can put add sets slash back dot png so whichever one you want to use just go ahead and use it but for simplicity's sake i think when we use image dots at sets i think that would be the best then we can we can use access slash back dots png so that would be the best we can actually use over there so inside this row uh one more thing we have to do is to add something called text or the text we did sorry for that guys so the text over here we can add that word called skip so let's see if you see we have we have it over there but it's kind of joined together and let's go over and style it so we have the main axis alignment the main axis element is just like applying a css class of of the horizontal as is so we could say the main axis alignment of space between so whenever we save this is going to space it out you could see we have that back over here and also we have that skip over there so that's how we can use the row to print this down so right now let's go ahead and add the image parts and beneath that we are going to add a container so make sure you type things properly so inside this container we just have to open that parenthesis and uh first of all we have to give it a margin so this margin we are going to use the edge inset dot only so we have the left of 20.0 the right of 20.0 and the top of 34.0 then you just have to add a comma and beneath that we're going to add some constraints so whenever we want to give something like a fixed height and also a fixed width we use constraints so with the help of both constraints we can just expand or we can make some selections here you could see loose tights lab tight for uh finite finites but for now let's just focus on expand so with expand we can reference the heights and also we can reference the width but we are not going to be uh dealing with width right now so let's just use the height and we just want something like a height of 300 or let's say 300 pixels so you just have to say 300.0 and we also can give a width or we can also give it with the boss constraint but for now let's still focus on this one so we can actually give a fixed width or if we wanted to to be more responsive we can use something called media query so we use the media query of context dot size then we can specify the width then uh what we actually doing here is we want to we want to take a very nice width size of each device screen only 65 percent of that screen size so you just have to add 0.65 and if you're familiar with react native you will see that we mostly use a figure then we multiply by a decimal value and it's going to take that percentage to actually fit that to that specified uh width and height so this kind of are the same thing but here we are just using media query because we want it to be responsive on each devices that the app is going to be run on then we can now add some decoration so we can also use the boss decoration here and inside our boss decoration we can now add an image as a background image so you could say decoration image so over here you can now select image then you can use the add set image add sets dots png then we can use fit to box fit so if you're familiar with css we can use cover or contain and also read native so let's go ahead and save that and see what what we have so right now you could see we have the girl picture here so i kind of use this image in another way we've already seen how we can actually use image in a straightforward way so it is also another step you can actually use to use image as a name as a background also use image in your floater application so that's it so the next one now is to add uh the text beneath this image so you just have to come over here and put a comma once more then type down a container so inside that we also have to give it a margin so we are using only so this time around we have so this time around we are going to use only top of 20.0 then with the width as well we can use a media query with dots of the context so sorry guys my machine is kind of flaggy then we can use the size dot width then we can multiply with just 0.60 of the screen size therefore here we can give it a child remember that in a container we can have multiple children so instead of us to use uh a let's say we want to have multiple children we can just use a child then inside that child we can add a coulomb or a rule then we can list out the children inside our column but for this one we are going to just use something called fitted fitted box so fitted box is more like a container but it's just like a fitting or fitting something like a text like let's say something like that wraps a particular size so we just want something that should just fit that fits height so we don't want it to expand unnecessarily then we can give it a child of text so for this text over here uh let's just kind of apply some couple of styles as well so don't forget that before you apply a style you have to add the text so we can save visible changes in three weeks so this text over here is exactly what we saw uh from the demo application so if you check in the demo application here you could see visible in three weeks so that's exactly the same thing that we just added so simply if you want to add a text type don't forget to add a style and then you can select the text style so let me kind of break this down you can say style text style and inside our text type we can just reference the font size and we can just say 38.0 pixels and it's going to just select exactly that font size so if i happen to change this to 12 pixels it's still going to reduce that is it's kind of not responsive but anyways we've already seen how we can actually do that but i don't know why we are not able to actually change the text size then we need this container as well we can add another container so we want to add the childhood button so we can use a button we can actually use the button here but because we have we are going to have something like a ripple if something like a ripple effect in a button something like a material button so we have to use the erased button so when we check in the demo application you could see that kind of a cool ripple effect so if we want the same thing in our application it's very simple for us to do we can just bring down the erase button so make sure you type things correctly and inside that you can give it a ship so we want the edges to be rounded so we just have to use rounded rounded rectangle order then inside there we can give it a border reduce of border reduce [Music] but i will use that secular of 18.0 so that's how we can add a buddha reduce to that so we can also give it a padding of edge in size dot only so we just have to make a selection of top of 15 and also a bottom of 15. so if you wish to add a point zero there there is nothing bad but if you if you wish to leave it that way same thing therefore the child itself we can add a text of get my plan so let's just make this look uh nice if we uh want something like uh the text to be uppercase just put dots here you're going to see more recommendations from visual studio code of some things that you can apply to a text so we have trim right we also have trim or machines maybe for regular expression but we are now going to that right now what we want to actually do right now is just to select to uppercase so make sure you close the parentheses then we can add the style so don't forget for you to add a style you must use the text style so we want a font size you can actually use a font family but we want a font size of 14. so for the font family i think we are using little so i can just say little so let's save and you can see we have that our font size applied and also we have our button looking very ugly but at least it's a button so let's kind of make things look very easier for us or very nicer for us so if you if you notice here we have this uh yellow squiggly line kind of showing us there are some things that we've not yet added in our button so right now let's just go ahead and add those things so whenever you use erase button you must add an unpressed so you must add that so when we add that you see that yellow squiggly line gets away and also we can add a color so for the color uh it's kind of somehow but we are still going to see how we can actually do we can actually use colors.thread so let's just use a simple color there say background color then for the test color itself we can actually use colors dot whites so let's see so everything is kind of looking nice and let's give it imagine so at the top there okay i think okay at the top before the child you have to select the margin and use the edges as well dots only and i guess you should know that we just need the top so you can use 40.0 so you see it's properly spaced and it's kind of looking more like a button right now so and we also have to add so we also have to add something called padding so there in the pattern we can use the edging set as well that's only we have the top of 15 and also the bottom of 15.0 so close this look nice why is it not spaced out it's supposed to space out and i guess you must have noticed that we actually applying this to the container and not to the button here so for us to fix that it's also very simple you can just come over here and add a top i think we already have it up let's see a left of 15.0 and also a right of 15.0 so make sure you close everything to look uh very nice and you just go ahead and save and you can see we have our button space and when we click on it kind of looks more like a real button right now right now so we want this color this red background color to get out we want to use something similar to that so uh for some reason i don't know why i kind of uh wanted to find a way we can actually do this but there is a way we can just quickly do that we are going to create a method called uh colors from hex so let me just add that quickly so just follow along so we can just specify the color we want to add if you want to use hex values so we can use 75 db and 4. so if we want to create a method called colored from hex just go ahead and you can copy this or you can just come beneath this uh uh method over here this viewed widget so since it's going to return a color you can just you can just say color from hex and definitely you know we are going to be passing a string of hairs color so it's kind of looking more like uh kotlin or java so right here we have colors from hex and because we are not yet returning anything we can see that uh bluish squiggly line so we can just define a file finder has color code of hex color dot replace all so we want to replace hash with mcspace and then we can return a color then we have to pass that color so uh with the help of flutter you you do it this way then you use a dollar sign use a dollar sign of x code then then you put a radix of 16. so i don't know why it is like that but trust me it works so when we save we are supposed to see that our color working fine and uh i think we we are not getting something here and that's because we are using the wrong radix so we use 16 so 16 should definitely solve that right now you could see we can use that function to apply background colors or use hex value colors in floater so that's one way you can use hex value colors in floater so we are done with that so the next one the next one we are going to be adding is a text so i think let's kind of check in our demo app so we have the sign in text and beneath this contact comma then you can bring down another container then you have imagine of edge and size dot only we can select the top of 20 a child of text we have sign in then we have a style so this style we have just have to break this down put the textile of color so with the help of our function colors from hex we can just use any hex value color there so we are using 73 7 c a and four we also have to put a font size so we have a font size of 18.0 and a font family of later so make sure you properly place everything properly place everything and put comma we are necessary so when we save that finally when our application refreshes you could see we have that text over there signing text so your own challenge is going to be adding a custom font to this one and also adding a custom font family to this one so both of these just go ahead and do that so we are done with the first part of this tutorial in the second part we are just going to start with the second on boarding screen which is not actually going to take much time so before you proceed further do make sure you hit that like button

Channel: Bolt Skills

Views: 26,358

Rating: 4.9026217 out of 5

Keywords: Flutter for beginners 2021, flutter app tutorial for beginners #2021, Flutter tutorial 2021, flutter app tutorial for beginners, Dart Tutorial, Dart Course 2021, Flutter Onboarding App, Flutter Tutorial 2021, Flutter Crash Course, flutter for both ios and android, flutter for begginers 2021, simple flutter app tutorial, flutter crash course, flutter course for beginners, flutter onboarding screen, flutter onboarding example, flutter crash course 2021, flutter tutorial vscode

Id: 5IasY6A5IYo

Length: 44min 4sec (2644 seconds)

Published: Fri Jan 29 2021