Flutter Tutorial For Beginners | Build Your First Flutter App | Flutter App Development | Edureka

[Music] hi guys my name is Aria and I welcome you all to this flutter tutorial now Before we jump into the video let me just go ahead and give you guys a brief introduction to the topics I intend to cover today so first of all we will be talking about mobile application development and how it is done what it is then we will look into the spotlight matter for today and that is flutter so we will be discussing what exactly is flutter and why you should learn it moving ahead we will be discussing the architecture that makes a flutter the types of widgets that flutter uses and half ladder compiles in the end I will show you guys how to install flutter on your windows system and then we will be writing a very simple application using flutter itself okay so let's get started so the first topic for today is the poll of mobile application development now as you guys know the world today is kind of divided into iOS and Android now iOS and Android take up around 99 percent of the market share and comes to mobile phone applications and mobile phone systems now they both are actually rival companies and as you guys know Apple or iOS is developed by Apple and Android is developed by Google but the story is not the same for a software developer who is targeting mobile applications because for a software developer when he develops an app and he wants it to be successful he would want it to run on port systems be given Android and iOS take up 99% of the shares so what do you want to do is you want to write an app that will run on both systems and that is pretty much prevalent in today's norms you see that there's Google Maps for Android there's Google Maps for iOS there's even Apple maps for Google and Apple Maps for iOS there are a lot of mobile applications that run on both platforms and most of the times to improve performance companies will try and go for the native approach now if you don't know what I'm talking about when I say native approach you might want to go and watch my introduction to mobile application development video which we talked about a p.m. which the testing framework and the world of mobile application development so just to give you guys a gist we normally have three kinds of applications web hybrid and native now if you want an application to be performance specific and have no sort of performance issues and should be able to access all the hardware features and all the software can be optimized to the tee so that is the time when you go for a native approach mostly a native approach costs a lot of money and this is because you need to hire two different teams to write applications for Android and iOS when they are taking the native approach for example if you are writing a native app for iOS you will be needing a swift developer and if you want the same app to actually run on Android you will need a Java developer somebody who is proficient at Android the bluffin so basically what you are doing out here you are spending twice the amount of money for the same app just so that it can run on two different application platforms now this has become quite a big problem for smaller industries and startups where they want an app to run on both platforms and they end up not having so much money that is a time they go for the hybrid approach now in a hybrid approach you mostly have one code base that works on both platforms has given Android and iOS but normally the performance of the app takes a hit in this measure so this has become a problem for most startups and smaller companies because they would be spending a lot of money on applications just so that they can run on both platforms and they have a bigger scope of a crowd to approach to now this is mostly because of three reasons so the first reason is an SDK now on Android and iOS both different SDKs or software development kits are used for the development of an application now a software development kit is typically just a set of software tools and development tools that allow the creation of applications and software packages with a lot of ease now these are different from frameworks and I will explain how frameworks are different because framework contains more than just an SDK now moving on they have different SDKs above that they have different frameworks because they come from different SDKs so you don't want to really have one true framework so that you can develop enough using that framework and it will work on both platforms so this is quite missing in the industry today so this brings about a general lack of uniformity in today's mobile application development world so if there's a developer who's starting out in his career and he wants to develop an app that runs on both Android and iOS he will have to spend a lot of time just developing the app itself instead of doing the nativities like maintenance and actually optimizing it so even for those nitty gritties he is going to spend a lot of time because both the application platforms work very differently for example in iOS Bluetooth behaves differently then in Android keeping these things in mind we could say that there is a general lack of uniformity in case of SDKs and frameworks when it comes to mobile application development so to solve these problems as usual Google has come up with a solution and this solution is called flutter so let's take a moment to discuss what exactly is flat enough so this is the spotlight topics in today and this is what our entire videos will be based on so what exactly is flutter well flutter is a software development kit and framework that is made by Google for the creation of 2d mobile applications so if you want any sort of 3d game that will run on an Android or iOS device flutter is not what you should be learning right now you should be learning something else on the other hand if you are trying to create a 2d application that runs on both iOS and Android flutter is certainly the way to go so flutter is a software development kit and it is made on the language taught so dart is the main language used around which the framework is built so the framework is basically a set of general tools that help you with the whole mobile application development process to give an analogy of a framework let's say you cook breakfast every day in the morning now to cook breakfast you need a lot of things you need your vegetables you need your proteins that can be chicken or eggs and you need your cooking oil and all this is normally spreaded out in your house and if there's also the process of actually cooking that whole thing now suppose all your breakfast items would come to you in a box every day at your doorstep so suppose your bacon came to you in a box with a bottle of milk and you got a loaf of bread you got some butter and you also got some vegetables to just throw on the grill so when all of these things come to you in a box in a unified manner you can call that as a framework now put the same analogy in a mobile application development wave so think of something like you need a search bar so something to make a search bar already exists in the framework all you have to do is write down the piece of code which is already there and your search bar is just ready to go it just makes the whole development process a lot more easy now the main USP of flotter at this moment is that you have one single code base for both iOS and Android devices and they both act as native apps so acting as native apps is not suppose the right way to see it they are native apps they work natively on Android and iOS and we will understand how so first of all let's go and understand while on flood or in today's varied world now today we have a lot of other frameworks so flutter is not the only framework out there that does the whole cross platform gimmick there's also Cortland where you can write client and server-side code using one language unless and it is a lot like JavaScript so what exactly is going for flutter well the first thing is the whole motto that one for all and all for one so flutter allows you to develop and create native applications for both iOS and Android but as I just said this is not the first framework to do it there have been a few but they have haven't had the success so what's so different about flutter well from one Google is using it and when you know Google is using something you can say that framework or software or tool has a lot of credibility going for it another selling point in the flutter is it's easy learning curve so flutter has been heralded as a very easy framework to learn it if you are a beginner that is starting out his career in mobile development Shalonda is definitely the way to go because that will give you one framework that you can use to build both iOS and Android apps so just think about the doors of opportunities that you are opening for yourself you can apply for iOS Jobs you can apply for Android Jobs and you can do it just from the get-go without knowning Swift or Java and personally for me Java has always been a paint loan and master because I find it extremely systematic as a programming language and if you don't want to go through that whole hell of an experience of learning Java you can just learn flutter and use it on Android development and on iOS development too so on the other hand if you are a person with some experience in mobile application development it will only be more easy for you to learn because it says that you have some experience with object-oriented programming and mobile application development as a whole the third point that is why you should learn flutter is because in today's competitive world it makes your resume shine so somebody who is actually hiring a developer for his or her company so that he can build an app now according to the norms of tape the person might want the app to run on both the platforms so if he sees flutter on your resume you know that you can write both apps for Android and iOS and this will not take a hit on the performance of the app so this only makes your resume a whole lot more brighter and shinier in the eyes of somebody who is going to employ you okay so those were three great reasons that you should definitely try and learn flutter now let's move on with our topic of discussion today so the next topic of discussion in this video is gonna be fathers architecture ok so now let's take a deeper look into how flutter works and let's discuss its architecture so first of all on the left hand side of the screen we see is an app made using flutter well is a Jif it is basic let's imagine that it uses flutter now when a app is made using flutter it actually uses something that is called as a widget tree so everything that you see on the app or the app itself can be considered as now the other elements that go along with the widget like the menu section the select sections the different buttons the drop-down menus all of them also found visits so basically what you get in the end is a widget tree now the main app will be the parent widget for everything else then it responds different children and these children can be of different types of widgets and we'll get to that later but for now all you have to understand is that whenever app is made using flat L it is basically a collection of widgets and it looks something like this which is basically called a widget tree the moving forward one might think that widgets are not exactly the best way to go around and using for a design layout or for design performance well Google actually disagrees with that and they have also given you way to actually embrace platform differences using the widget tree so when I mean platform differences I mean the difference is that lay in iOS and Android both now well apps might perform the same way and act the same way on both platforms how do you actually interact with the hardware services like the glue to the speakers everything is completely different so you have different api's that are called and handled for these different services and the best part about flutters architecture is that it has those less column blank spaces in the framework so that you can put them yourself and you can develop and have an app that has complete control over the applications and its behaviors or regardless if it runs on Android and iOS poor now let's take a look at the different types of widgets that we have so first of all the flutter has two types of widgets so the first one is called the stateful widget and the other is called stateless widget so whenever you are making an app you aren't going to be using a combination of stateful and stateless visits these are the two kind of widgets and they form a majority of the UI elements like search bars buttons invisible boxes just boxes for layout purposes everything everything is either or stateful widget or a shtetl search so let's go and see what exact these two are and how they are different from each other so stateful widget is basically one that can be changed when ever the app is running so it has the ability to be changed dynamically so this means stateful widgets are mutable and can be drawn multiple time within its lifetime so this could be something like a weather card now a weather card actually changes throughout the day if you are using Google Google's Android service called Google now which shows you the weather in a quick-draw and you can see that it is shown in a card like fashion now if you are using this feature every day you will see that the weather gets updated more often than not so how is that possible well if you are using flutter that will be a stateful widget because that is changing all the time on the other hand stateless widgets are the complete opposite stateless widgets are immutable ones built and to draw a stateless widget you will need to create a new instance of that widget itself so suppose let's say the card in itself is a stateless widget because the shape of the card is not really changing while the content is changing so the content can be put in a nested fidgets inside a stateful widget and that can be I'm sorry so I mean to say that when you are imagining a weather card the outer card could be a stateless widget as the shape of the widget is not changing it is only being drawn once while the contents of the card could be in an invisible stateful widget inside and they can be mutable from time to time so these are the two kinds of widgets that you get with flutter and these are the types of widgets that you were going to play around with now let's take a look into how flutter codes actually compile into native codes now most of the people when I say that flutter code actually compiles in the native code get really confused as to how this is exactly possible so well let's take a look into how flutter actually compiles it codes so at the center of all the service you have your dart code which basically makes up your visits and the code of your software or your program or your application whatever you'd like to call it is being used by the dart code or is being used and being built on the dart code itself aside from that now after the dart code you have the flutter API that sits on the dart code now the flutter API provides you with an ease of development process this lets you create your widgets your stateful widgets your stateless widgets and besides how you are going to shape up the whole UI in a much more uniform and systematic fashion so it basically gives you utility and widgets now this dart code is then compiled into armed binaries which is both understood by iOS and Android so basically you are not going down and using a specific up-and-down compiler to get different codes for different systems what you do is basically just compile them into armed binaries which is understood by both platforms and this is done by the flutter SDK so this allows you to actually write dart code that can run on both iOS and Android and as we have already discussed the flood or framework gives you enough flexibility to actually buckle all sorts of changes that might be there in both platforms so now is all about flutter and what it is and why you should learn it now let's go ahead and take a look at how you can install flutter on your own system okay so it's time that we look at how you get install flutter on your Windows system so to install flutter first of all open up your browser and go to flutter on tab so this is the site where all the news about flutter is going to be available you can go and see the docs out here you can see the community and what it looks like and it also has a whole get started guide out here now out here you have to go and click on get started and first of all this will direct you to the installation page now all you have to do is click on Windows and this will come and show you the system requirements and what you need to do to actually install flutter on your system so out here to insult and run flutter your development environment must meet these minimum requirements so first of all we need operating systems such as Windows 7 sp1 or layer Plateau and we need a disk space of around 100mb and this does not include the disk space for ide and tools and we get to the ide part later and for tool section we flutter depends on these tools for being available in your environment so first of all is Windows PowerShell 5 or newer and the second one is git so to install gate all you have to do is go ahead and click on that link and that should go ahead and show you your git download page so I already have git installed on my computer and the path already set if you don't have that you can go ahead and see that in a separate YouTube video and how to install it set of git for now I'm just going to discard this so for now what we have out here is we need git and we need Windows PowerShell 5 so go ahead and install those boat so let's read up on how to get the flutter SDK so first of all we need to download the flutter zip file that is there so let's go ahead and download that so let's download this and that will be the flutter SDK so you see that this is a following installation bundle to get the latest stable release of flutter Brother releases and only you can go for the SDK archive so the second thing that we need to do is extract the zip file in place to contain flutter in a decided station location it says that we should not put it in a directory like Program Files because that requires elevated privileges and to locate the flutter file we have to actually go ahead and hit the flutter con solder pad ok so let's go ahead and actually see how we can do that so let's wait for this thing to download up now on the ide side of things I would recommend that you go ahead and download Android studio on your system downloading under studio is pretty pretty simple if you have some trouble downloading Android studio you can go ahead and look at my appium installation because during a PIM installation we also go ahead and install Android studio but just in case you don't feel like watching a new video for this particular thing all you have to do is go to developer.android.com slash studio which can be easily reached by just googling android studio on your favorite browser now once you open the page the first thing that you will see is this pic huge Android studio download button all you have to do out here is agree to the terms and condition which nobody probably reads and then all you have to do is click on download now I don't really want this file because I already have it installed so I'm going to discard that but for now let's concentrate on the spotlight for today and that is flutter so as we can see we have this downloaded and as you guys can see I had already previously downloaded it and this is the one out here and that can be unzipped into this file once you have unzip the file you will get this folder called flutter windows version 1.2 point one stable in this what you have to do is go ahead wait aaseesh decompress this and show it to you so all you have to do is use your decompressing software I have 7-zip and I'm going to use that so let's just decompress them and see what we get so let this process run and I'll be back with you guys as soon as this process has finished okay so now that we have extracted our folder we see that we have a flutter folder in the folder that we extracted it to and according to our instructions that we read on the installation page what we are supposed to do is go ahead and click this now out here you see a bunch of other instructions so use the console below or this message to interact with the clutter come on so what you want to do out here is run flutter docto to check if your system is ready to run flutter apps and once that is done all you have to do is run flutter create an app name so that's very simple now if you want to run flutter commands from any command from or partial window all you have to do is go ahead and set your pot so the setting apart all you have to do is go ahead and put this folder into any place that you would want now I could just put this folder here but what you have seen is that I normally put my folders in my eat ripe so out here if you see I have the flutter folder and all you have to do is go into the bin folder and copy this out out here copy the address go into this PC click on properties and click on advanced system settings and environment variables and only how to do out here is going to part under system variables so definitely found out here going to edit and all you have to do is put in the bin folders address out your so as you guys can see I have already done it here and you can do this yourself by actually coughing down the address so that will actually put your flutter bin folders address into your system variable so that your system understands that flutter is a command that should be understood by your system ok so that sets up for setting the environment now all you have to do to see if you are ready to run flutter or flutter applications all you have to do is go ahead and your command prompt and all you have to do is go ahead and run the command flutter dr. now as you guys can see out here when I run flash dr. Oh God I'm running the same thing again so if I go and run flutter dr. it gives me this doctor summary so this doctor somebody tells us required things that you might require for running a flutter app so as you guys can see I have the flat o channel and the flutter SDK installed it's all to the Android to chain I do not have an Android license status because that's unknown I have Android studio installed and there's no connected devices so the doctor has found two issues in this category but those issues can are not really very major but all you need is mostly a droid studio and the flutter SDK so if you didn't have anything other than these doctor would tell you what other things you require for flutter to be actually running on your system so another thing you can do is create flutter apps using the flutter come on so let's go into our desktop so once we are in the desktop we can go ahead and say flutter create let's say demo so we're gonna name our application demo let's go ahead and hit enter and this will go ahead demo is not a valid dart package name to use lower score so let's see we can do demo and it should go ahead and create our flutter app that will be ready to run now we will be editing this out ourselves and we are gonna make our first app using this so on the Android studio side you also want to make sure that you have a few plugins that are there for your flutter application and your flutter development to go seamlessly so let's go ahead and look at those so once Android studio loads up you will see that I have a separate option that says I can create a new flutter project so I'll teach you guys how you can actually get that so let's just wait for this to load up okay so it seems like my android studio is loading up a separate check so let's go ahead and see that so let's close this tick box and it's also close is okay so we don't want to actually exit out nurse studio but what we want to do is open so what we have to do is go ahead and go to our poll go to desktop out here you will see that there is a demo app and if we open that lets open it in this window so this app is a basic app that comes pre-loaded whenever you make a flutter app now what I want to draw your attentions to is you have to go into file and then into settings and out here you have to download a few plugins before you actually go head and start developing your flutter apps so until you go into plugins and you're going to browse repositories and out here all you have to do is go ahead and search for flutter so out here you see that this is flutter and you can go ahead and download that now I have already downloaded that so it's not showing me a green download button so it will show you something like that and other than flutter you also have to include dart so I already have the dart plug-in installed so it is also not showing me that install buttons but if you were to actually install it it will show you a green plugin button like this I mean a green install button like this so all you have to do is go ahead and do the repositories and install the plug-in for dart and for flutter okay so that would set up your Android studio for writing your first flutter application so now let's go ahead and see how our first flutter application actually looks like so out here if I actually go into tools in the end of abd so let's go into EVD manager and let's start up our virtual device so you need an emulator or a virtual device to actually run and test your apps and we are going to be using Android studio just because it gives us this whole EVD feature now let's go ahead and turn this on now what do you see out here let's go ahead and see this is the main door dart file and if you're going to project and let's go into packages so demo and we have this made not hard file so this is the part where your code is written for most of your apps for today's simple application we will be writing our code in the main the dart file and this is not going to be very complex application it is just to make you apply what you have learned today that is how you can install flutter and make a couple of widgets like a stateful widget and the stateless widget and see how flutter runs both on Android and iOS so let's see if our emulator has started okay so we see that the boot logo has come up and as soon as let's just wait for the you wive startup okay so now that our emulator has started out what you see out here is an red phone that is being emulated right now so this is a pixel to model and the model doesn't really matter out here as much as the API version so we are currently running Android eight out here so my purpose of actually puffing up this emulator is to show you how a flutter app looks like when it is actually run so what we can do out here is go ahead and press this Run button and this will go ahead and out here even if you will go to the terminal section out here all you could do is go ahead and say flutter run and this would start up your app on your emulator so as you guys can see this will give you a summary on the processes that it will run while actually starting up the app and let's see what goes on in the app right now so let's just see what's gonna happen now this is not to be a complex app and people then the palm is up just to show how flutter works so today we are going to be actually making a random word generator with somewhat of an infinite scroll but before that let me actually wait for this run command to actually be executed okay so that seems to have failed because our Gradle is still being actually being assembled now that our table has been assembled I see the process out here has actually stopped so let's see so there seems to be in some sort of error we should actually go ahead and resolve that so let me just go ahead and run this come on once again okay so as you guys can see our screen has gone fight on our emulator at this moment so let's just wait for the app to pop up so as the summary is going it's currently installing the build and apk to our system so our system UI isn't responding at this moment so we can just go ahead and click the wait option and that should normally go ahead and dismiss da for now let's see if our app pops up now this is generally taking a lot more time because I haven't actually given so much memory to my hack simulator so let's see if it actually pops up there are me actually going and fiddling with the memory settings so seems like it will pop up as it's syncing the files okay so it seems that our flutter app is running somehow but this is taking a lot more time expected to actually load up okay so it seems like I have ended the connection to the app right that also should have so let's go ahead and do a flutter run again okay so as you guys can see after running fluttered run on our terminal we have popped up the flutter app or to our emulator now as you guys can see out here this is a very basic app and if I go ahead and press this button out here why isn't this getting pressed if you go ahead and press that button out there the counter of the button actually goes up and we can see that being represented in the code somewhere out here so we see that a counter has been set out here which is int counter equals to zero and every time we are going to set a state and that is going to be counter plus plus now what we want to do out here let's see now let me show you a cool thing about flutter and that is called a hot reload now if I were to go to this counter part and do equals to counter plus two now out here I could just go ahead and press R and that will actually go ahead and hot reload my entire app now let the hot reload commands now if you see I pressed the button once and went up to 14 and if I press the button again goes up to 16 so as you guys can see changes in your code with the hot reload are reflected almost instantaneously in your app so that's a great thing about flutter now the final part of today's presentation is that we are going to try and install and run our own simplify our application so do to do that let's go back to our Android studio project and we are going to write our own piece of poop so this piece of code or as you might say application is going to be an application for generating board so we are basically going to build a word generator using flutter today so what we are going to do first is basically let's remove all this code from your first one right now what we want to do is we are going to write our own piece of code so for that just follow along and I'll try and explain what I'm doing because this is a very introductory video to flutter and if this video gets a lot of appreciation we are going to produce a flutter playlist which will actually go into the index of the entire framework so just hang on and try to follow along as to what I'm doing so first of all we are going to actually create a flat or half now so the first thing that you want to do is going to mean dot dart under the lip folder and delete all the code that is that no we are gonna be making a bow generator so I'm gonna be driving you down the code line by line so first of all we need to import a certain package and that package is called and this is how you import packages in flutter all you have to say is package and the first import package is trackage slash emotional dot dot and since I have my plug-in ready that is my shuttle plugin and the dart plugin this is being so much easier now what we want to say is void main' and you want to open and close the bracket and then we want to say run app so run app and let's say my app fine so this is the basic command that you would put into any flutter application so that your app get started now all you have to say is class my app and the same way that you spent it in the second line and you're gonna make this extend so you make it extend something by saying extends and you say stateless so this is going to be a stateless widget so we can go ahead and select that and we say stay to this widget and now what we want to do is open our parenthesis and now when we want to say is something important we want to say we this will override every single widget that is built into this class the first widget that we are going to build is going to be with the build function so we say widget build and what you see out here is a basic widget that has been built for us but what we want to do is not exactly gonna be so basic so you want to return null and that's not what we want to do so what we want to do is return our material so we wanted to turn a material app so to determine material app you could say something like a title of the app so title would be let's say welcome to welcome to my first application okay now over here we also want to set up the home so for home all you want to say is we have to define a home and once we define a home we can put a scaffold is now a scaffold it is just an element you learn in future videos and I'll go into the details of all these elements so what do you want to say is this is our scaffold now what we want to do is build an app bar now the app bar is also going to be built with the app bar function and now you say app bar and all you have to do is put in the title of the app bar in the title we could give about them text so we could say something like text and we could say again let's put something like welcome to my first application now that should put up a title and now in the center I would like to also show a hello world so outside of the app bar so this is the app bar now we come into the scaffold so we go to the app bar and we want to create a body now our body is gonna be in the center so let's see Center and center should pop up and what do you want to say in the center we want to treat a child remember everything is a widget so what we want to say is this is going to be a child fidget and it will show a text and in this piece of text what we want to say is hello world so once that piece of text has actually been done you want to go into material app and we want to put a semicolon out there so that everything is properly let's see this ends here and this ends here so what we want to do now is go into our terminal and press a hot real now let's go into our app and as you guys can see we have a nice little scaffold going out here and it says welcome to my first application and if you were to zoom in out here it says hello world so as you guys can see we wrote a little bit of code and this has started transforming our application into some that we want so what we have out here is hello world now the next step what we want to do is run the app so we've done that so the scaffold widget from the material library provides a default app bar title and the body property that holds the widget tree for the home screen so the widget tree can be quite complex at times but for now we're going to be keeping it real simple now the widgets main job is to provide a bill function method and that is a build method that we just solve and that describes how to display the widget in terms of other lower-level widgets and the body for this example consists of a center which is containing a textile widget and the center widget aligns itself with the widgets subtree to the center of the screen and that says hello world now the next thing that we are going to learn is to use an external package in this application that we are building so to do that first we have to go to the pub spec dot gamma file so let's go ahead and open that and out here you see all sorts of dependencies and stuff going on so inside the dependencies part what we wanna add is a line so let's add that line so this is going to say English words and the name of the package is basically English words and we want the version 3.1 points here oh so well that's that and that's all we want for now now let's go back to our main the dart file okay so as you guys can see we have changed our dependencies and our IDE already tells us we can get dependencies so let's go ahead and click get dependencies ok so it seems that all our dependencies have been fetched so what we want to do next is import our new package stuff we just add it to our dependency and we can do that by actually going and typing the import come on again and we want to say is so it's single quotes and package English words English word starter as you guys can see sensitive added amount of dependencies this thing pops up so that is the next thing that you have to do Oh another change stuff you want to do before actually doing our next hot reload is let's see if a horror word is actually loading up so what we want to say up here is in our visit build part so let's go into our vision field and what we want to say here is we want a final word pair so let's see final and so final is basically like a constant so final word and let's see but let's call it word pair because we are going to be generating a pair of oars it's going to be equals to so this is the function that comes along with the English word slash English words art art so English word pair dot random so word pair dot random is a function that we are going to go for now in this child text part what you want to do is say let's remove hello world and we do not need the semicolons anymore I mean the single quotes now if you want to say is word pair chart as path Lee case so you want the Pascal case so as Pascal case basically means as every word will basically begin with a new capital letter so it's kind of like title case you can look up what the case means and that's for your grammar lessons but for now let's go ahead and do this hot reload out here so let's go ahead and press R so let's go into our terminal and let's go ahead and press R so that seems that there seems to be an error so there seems to be there we need to put a semicolon off here and let's try hot reloading again okay so we need a semicolon after these two so that was my mistake no let's go ahead and hot reload that too so going to the terminal part and press R and that will perform a heart reload so if we go ahead and go into our app now what we see out here is two little words so out here it shows that means you swim into it so out here if you see it says the word web mess now if I were to go ahead and hot reload again it will show me a new word every time now this time it says to let us crush so what we have done is basically remove a added new dependency and external package and use it in our app okay so that kind of covers one aspect of what I wanted to show you guys as to how you can import new packages into your existing applications now the next thing that we will be doing is adding a stateful widget to our application so stateless widgets are immutable meaning that their properties can't change as all finally your final values are final so stateful widgets maintain state that might change during the lifetime of the widget now implementing a steeple which it requires at least two classes one a stateful widget class that creates the instance and the state class so the stateful widget class is itself immutable but the state class persists over the lifetime of the widget so in the step we will be saying how we can have a stateful widget so let's go ahead and see that so first of all we need to create a minimal state class so we need to add the following code into our main door dart file so first of all we will be creating a new class so out here what you want to say is let's see where our class ends or a class ends there so we want to add a new class and this class is gonna be called random word States and it is going to extend so extends and it is gonna be the state of random words so we write it like this so random words so that's how you do that now out here let's just keep this empty for now so like that so we have created a class called class random word state which extends this is the state of random words so notice something about the declaration it says date and then random vote so this indicates that we are using the generic state class specialized for use with the random words most of the apps logic and the state resides here it maintains the state of the random words widget so this class saves the generated word pair which grows in fluently as the users crows and the favorite word pairs in if we add that feature of favoriting of WordPad now we need to add the stateful random words wish it to the main dot dot files so the random word which is thus a little else beside creating its date so what we have to do is create a class called random word so let's go ahead and do that it's a class random words and this will extend stateful widgets so extends just a full widgets so out here we want to open up the class and we want to say a then it overrides so at the rate override and what does it have to / a so random word state so random word state and this will create States so let's see so we create the state with the create state function so create state and this will be new random word state so new random words State fine so this we have created a new instance of the state that we created right out here so that's for the semicolon after that now after adding the state class the ID complains that the class is missing a build method let's see you see out here so we actually have to add the build method so out here we only want to say is widget build so this is actually missing a tilt method so missing comforted implementation of state dot bill so Pomona a dot here is let's see first we override and we want to bill the widgets a widget build and while this is returning now we don't really wanna do that so widget build and build context so that will return a context object so what we want to say is final word pair equals to WordPad or random so what kind of random and only one do is return text that says word pair as passive case so word pair Todd as Pascal keys so let's not forget to put our semicolons in as semicolons are necessary in dart as a language now since we have added this to our state out here what we want to do is remove this similar commands in our main file so if you want to remove from here is the final word pair so let's go ahead and remove that so let me just quickly select this and leet it out and we also want to actually go ahead and remove this child out here now instead of this child giving a text what we want to see is it will give us random words so random words so once we do this we should actually restart the app so let's go ahead and hit a hot reload and let's see the changes that have been in our app now it's basically the same thing but all we have done is put in a stateless widget so each time you save the app and you again hot reload you all got to see another word go in on there so I'll here you see pod keys and you saw our different app a different word the previous time so now it's time to create an infinite scrolling list view so in the step you'll expand the round of words state to generate and display a list of word filing so as the user Scrolls the list display in the list view widget flows infinitely and the ListView built a factory constructor allows you to build a list like that and this is basically called lazy scroll so what we want to do is add a suggestions list to the random word state class so firstly let's go there so out here what you want to do is add a bunch of suggestions so we can do this before the override part so what do you want to stay out here final and let's see suggestions now you can name available whatever you want but I normally you'll name them with an underscore because that's how normally variables are named in the industry so what do you wanna see is word fair and you want to add an area out here so that is how you would say it and let's see and you wanna our another variable or bigger font so that we can make the font size bigger so let's see bigger font so out here what you wanna say is constant and text style if I was not wrong per se style textile and you want to say a font size is let's see font size is 18 point O so that does that so let's go ahead and end I with a semicolon so next you will add a build suggestion so let's go ahead and see how we can add a bit suggestion function to the random words tape class so out here what you want to do is add another widget so we want to say widget and we want to build suggestions so let's call this pill suggestions and let's go ahead and open that up so if anything is grayed out don't be worried it just means that it hasn't been used so let's go ahead and do that so build suggestions so what we want to do is return on this view dot builder so return list view dot builder now in Spencer what we want to do is go ahead and create a list a few want to return so first of all we need to add some padding so for padding we are gonna say constant edge inserts so edge inside is basically a little cover that up right now so edge it's set so we want to go for the edge inset at all and let's see so basically it will give padding on all sides so basically what you would do in HTML and CSS if you remember if you were to put for different values of padding that would put in top right bottom and then left this is basically a shorter way to do that in dot and all you have to say is amount of padding you want so we want 16 padding now what we want to say is when item build up so we want to build an item so we need an item builder so say item builder and out here you put in context and I so let's see context then I out here what you want to do after this is remove this open this up in item builder what do you want to say is if so this is how you do if statements in dart if I dot is odd so this will check if it is an odd so what you want to do if it's odd is return or divide oh and if that is not the case what do you want to do is go ahead and put in the final index as I and then scraggily backslash and - okay so that should do it let's see that is the final and if then we also want is one another a statement so if index is greater than equals two suggestions dot length so suggestions dot length so if it is greater than the suggestion so that means a few I'll stops if you are going more then what is meant to be scrolled you want to add some more suggestions to it so we can do that by going suggestions equals 2 or rather just say suggestions dot add all and let's see generate word pairs and let's see we need to put a take function so take and 10 so we won't take them so that should finish this part of the if and this part of the if was just returned divider and after that what we want to do is return the build row so we're going to do is return build row was not popping up so let's see return build row and this will be having suggestions of index basically this is how you formulate an array and you're manipulating it to actually form infinitely scrolling view so don't forget to put your semicolons so this should be a semicolon here and here okay so that returns an item builder and this is the list view builder and we have to put a semicolon here too and that ends our class okay so let me just explain a bit so the item build a callback is called once per suggested word padding and places each suggestion into a list I'll row or even rows the function adds a list I'll row for the word padding and for the all rows the function adds it divided which it to visually separate the entries note that the divider may be difficult to see on smaller devices now we add a one pixel high divider widget before each row in the list view and the expression I and the squirrel backslash two divides I by two and returns an integer so what you see out here is basically a division operation and it returns a literate in teacher as a result for example one two three four becomes 0 1 2 2 so 1 by 2 becomes 0 2 by 2 1 3 by 2 becomes 1 4 by 2 becomes 2 and 5 by 2 becomes 2 so this calculates the number of world pairings in the list view - the divided revision so if you reach the end of the available word pairing then it will generate 10 more and then add them to the suggestions list so now what we need to do is add a build row function to the random word State so what we need to do now right now is go back to our steepest widget and what we see out here is that we have returned a scaffold so in the scaffold we are saying the title and what we need to do is change the body so we change the body by saying let's put this body out and the body will be returned by pill suggestions so build suggestions okay so that I think that our ListView builder what we need to do next is go ahead and put in the build role function so let's see how we can do that so first of all what we have to do is go ahead and put in the build row which it so we do that in the random state class so random word state that part so we only have to do is say widget we say widget and it's going to be called build row so out here what we say is word pair so we are getting a word pair and this is going to be called pair for us and let's open up the widget class so ultimately we want to return a list style and in this style all you wanna say is title is gonna be the text and so in this text we want it basically make it back encase so we say pair chart as fast we case and we also say it style is basically bigger font so remember the bigger font that we had set up so we're going to be using it here so out here all you want to do is it or the style so you want to put a semicolon out here and that bears our row so in the random so with build row this is how you are going to do it now in the random word state class you have to update the build method to use the fill suggestions so we want to use our build suggestions in the build part of our random word generator stateless class so what we want to do is go ahead and put it in the following piece of coal in our build part so let's go ahead and find the build you chose random word stator this is the build part so let's go ahead and leave this so what we want to do is basically return a scaffold and a scaffold is as I just said it is an app bar so it basically has space for your app bars let's go hand nether now so app bar and in the app bar we want specify the app part part and we want to say it has a title and title is gonna say text and let's just call this word generator so word generator so that is gonna generate our words and we also need a body so we need a body so the body will be and build suggestions so you're going to be doing it for the bill suggestions part so that is why we did this entire process and after that you only have to is in do scaffold now in the my app class update the build method by changing the title and shading the home to be random words so all you have to do is go to class my app and we'll be changing a bunch of stuff so first of all we need to remove the title and the home and let's improve the title out here and let's call it word generator and we are gonna update the home for retired random words okay so let's see the return random words so as you guys can see we have simplified our my app part at least with a lot of widgets that we just created ok so now it is time to restart our app again so to do that all you have to do is go and fetch our out here and this should do a hot reload and let's go ahead and look at our app so as you guys can see we have an app going out here so if you scroll out here you can find a bunch of words that get added and this is basically our first app that we have created and this implemented a lot of things so first of all we learned how to create a basic app using the flutter terminal then we learned how we can actually go ahead and use a hot reload function which is pretty nifty in my opinion then we also learned how to ignored external libraries in this we use the English word library you created a steep food budget we create the stateless widget and we also added a lazy view and lazy scrolling to our entire application okay guys so if you guys can understand any part of the application please leave a comment in the comment section below if you'd like me to actually take out more flutter related tutorial videos please also put that down in the comment section below if you enjoyed actually watching this video I hope you go ahead and put a thumbs up for us and this video because it represents better for us on YouTube thank you for watching with me and learning flutter today I'll meet you guys in the next video goodbye I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to any rekha channel to learn more happy learning

Channel: edureka!

Views: 220,335

Keywords: yt:cc=on, flutter tutorial, flutter application tutorial, flutter for beginners, flutter app development, flutter app, flutter app development tutorial, introduction to flutter, flutter basics, flutter framework, what is flutter, why learn flutter, flutter installation, build flutter app, flutter application step by step, flutter app example, flutter widgets, flutter architecture, flutter example, flutter project, flutter explained, flutter course, flutter training, edureka

Id: 9XMt2hChbRo

Length: 60min 27sec (3627 seconds)

Published: Tue Mar 26 2019