Flutter Crash Course

[Music] this video is sponsored by Ella node anyone can build on the node whether you need a development portfolio to land your next job or you're ready to put your app into production lonoa can get you there for $20 in free hosting credit click the link below or sign up at lynda.com / traversée hey what's going on guys welcome to my flutter crash course so in this video I'm going to show you how to get flutter up and running and talk about it a little bit what it is we're gonna look at just a couple slides and then jump into our project which is going to be a simple word pair generator app similar to the one that you'll find in the docs so if you want to use the fluttered documentation kind of as a supplement to this project then you can do that and this is meant to be a beginner course it's meant to be an introduction to flutter even your first your very first flutter video and projects so let's talk about what flutter is it's an SDK or software development environment and a UI toolkit from Google to build natively compiled apps for mobile web and desktop although it's mostly used for mobile and that's what we're focusing on and what's fantastic about flutter is that you can build very performant iOS and Android apps native apps using only one code base rather than the traditional route where you'd have either a Java or a Kotlin code base for your Android app and then you'd have a swift code base for your iOS app with flutter not only do we have a single code base but it's easier to create applications at least in my opinion and flutter is cross-platform you can use it on Mac Windows Linux although if you're building for iOS then you want to use a Mac and flutter is extremely fast it gives you that native field there's there's other options for mobile development using kind of the web technologies you know you have react native you have native script ionic some of the other ones but flutter is is generally faster because it doesn't have that extra JavaScript bridge to the OEM user interface flutter actually uses the native ARM architecture binary which makes flutter faster than all of its competitors so flutter uses a programming language called dart which is an object-oriented language that uses classes and it's optimized for building you eyes and it's very fast on all platforms now I realize that many of you probably don't know dart however if you know any language especially JavaScript I don't think you'll have a hard time picking it up because it actually resembles JavaScript in a lot of ways and it even has some elements of Java so many people learn flutter and dart simultaneously I do have plans on creating a dart crash course within the next month or so so if you're watching this in the future I will put the the link to that core that crash course in the description there's also plenty of other videos and and the documentation for dart is really good as well if you need help also we'll be using the flutter Visual Studio code extension which basically I mean any method or anything in dart you can just hover over and it'll tell you exactly what it does okay so don't worry about it if you've never even touched dart before so everything in flutter is essentially a widget and flutter widgets are made to look exactly like the stock OEM widgets pixel for pixel and material design comes out of the box with flutter some of the common widgets are scaffold which is like a high-level widget that can have lower-level ones inside of it like a container an image and icon even text and app bar things like that and there's a whole catalog of widgets and the documentation there's widgets for like animation and motion input accessibility pretty much anything that you can think of also widgets can be stateless or stateful which I'm going to talk about in the next two slides and there's a lot of similarities here with something like react or pretty much any front-end JavaScript framework instead of using components we use widgets and each widget has a build method that can be overridden just like in react you have render which is a you know a method within a component that will render it into the UI so there's a lot of similarities here so it's it's not the most difficult thing in the world to go from something like react to flutter all right so let's take a look at stateless and stateful widgets so stateless widgets are just that they're immutable basically the their state can't change during the runtime of the app and here's an example here where we have a class called Start screen and extends stateless widget and then we're just overriding the build method here and we're just returning basically an empty container widget so for stateful components I'm sorry stateful widgets we have mutable state that can be redrawn on the screen multiple times now in this example we have this this Start screen class which extends stateful widget and what we're doing here is instead of overriding a build method we're overriding create state and we're returning an instance of this start screen screen state which we have defined down here and down here we're overriding our build and we're outputting our UI which in this case is just an empty container so in most cases when you have a stateful widget you're gonna have two classes like this one to override the create state and then one to build your UI okay and if that's confusing don't worry about it we're gonna get more into that later okay so as far as setting up your system there's some requirements if you're building iOS apps on a Mac you need the latest Xcode and that will give you the iOS simulator that's what we'll be using to basically view our application on Windows you need Android studio and if you're on Mac and you're building for Android you need Android studio the SDK the emulator which is the AVD the Android virtual device so you need to get that stuff installed I already have it on my machine but I will show you where to get it and how to install it you also need the flutter plug-in for Android studio and then if you're using vs code you want the flutter extension which is fantastic it has a ton of intellisense features so if you if you're confused about what a certain widget is you can just hover over it it'll tell you exactly what it is and also we can use the debugger to run our application right in the iOS simulator so it's a really nice workflow alright so enough with these slides let's jump in and let's start to build our application alright so real quick I just want to go over the application will be building although this crash course isn't really about the application itself it's about learning the fundamentals of flutter to be able to build you eyes and widgets and stuff like that so basically we have a word pare generator and it's similar to the application and the docks so if you want to use that as a supplement you can and we just have a list view of different word pairs maybe for a server name or a user name or something like that and we can keep scrolling and it's just going to keep generating new word pairs and then on the side you can see we have these heart icons that we can actually click or we can click anywhere in the the what are called list tiles and that will select them as basically our favorites or our saved word pairs that we like and then we have this little list icon up here in the app bar that we can click and it will take us to a new page or a new route that shows us all of our saved word pairs or our favorite word pairs alright so we're gonna be dealing with routing we're gonna be dealing with a bunch of built-in widgets we're gonna deal with custom stateless and stateful widgets so we'll learn quite a bit in this crash course even though this is a pretty pretty useless application in general but I think you'll learn a lot of fundamentals so that you can move on to create your own stuff alright so that's it let's go ahead and get into it all right so as I mentioned before I have my machine set up for flutter development but I'm gonna go through and show you all the steps you need to take to get set up now if you go to the flutter dev website and you go to Docs and then get started you can pick on pick your system here for instance windows and it gives you some instructions download the SDK and so on but I've actually created a gist to really just lay things out in a simple manner so first thing you want to do is download the SDK so from here again choose whatever system you're on I'm on a Mac so I would choose Mac and download the zip file and what that's going to give you is a is the SDK it's gonna be a folder called flutter and you need to put that somewhere on your system alright so for instance for me I have mine in my home directory so this is my home users slash Brad traversée and then in a folder called utils that's where I put that flutter folder now once you put the SDK somewhere on your machine you want to create a path okay and on Windows I don't think it shows you how to do it but it's just like if you were to add a path for anything else yeah you need to add your environment variables which I can't show you because I'm not on Windows however if you're on Mac what you would do is go to your bash profile which should be in your home directory although it's hidden in on Mac if you want to see excuse me hidden files and folders you can do command shift period and it'll show all of you are hidden files okay and just gonna organize this and right here is my bash profile now if you don't see this if you don't have this on your machine you can create it by going to your home directory which I'm currently in and then you can just use the touch command to create the file and you can say I've got brash bash underscore I'm sorry dot bash underscore profile and you can create it okay if you don't have it and then you just want to edit that so I'm going to just go ahead and open it with TextEdit and you want to add your path to your flutter SDK so I make this a little bigger and this is the line that you want to look at this is what you want to add so you want to add export path equals money sign path colon and then the location of your the bin folder inside the flutter folder which for me is in my users Brad Travis e utils flutter bin okay obviously your path will be different so once you add that and you save this file you can restart your terminal and then you should be able to run the flutter doctor command and what that's going to do is give you a summary of kind of your dependencies and what you have installed and and what you need you can see I have all green checks here but you may have some red X's so we have flutter we have the android plug-in Xcode which I have installed you the latest version of Xcode if you're on a Mac Android studio and the vs code extension so I have all this stuff installed however you may have some red X's and you need to take care of that all right so we're gonna move on to what else is required so we're at this point right here now if you're on Mac you want to have the latest version of Xcode I'd suggest getting it from the App Store so if you just open up the app store and search for Xcode you want this right here okay you want to grab that and then you want to run these two commands right here this is also in the docs or is it right here okay so just run both of these commands and that's to configure the Xcode command-line tools to the newly installed version of Xcode so run those and this is and this is only on Mac obviously and then once you do that you should be able to run your iOS simulator so let's try that out we'll go ahead and run open - a simulator and there we go so we get an iPhone 11 Pro max right on our desktop and this is actually what we'll be using to look at and test our application okay but I'm gonna close that for now so at this point if you're on a Mac you should have Xcode installed and you should be able to run the simulator now you want to install Android studio so this is for the Android apps and on Windows this is required so make sure that you know if you're on Windows you install this you can get it from here just go ahead and download it install it and then you want to install the flutter plugin in Android studio so I'm gonna go ahead and just show you how to do that real quick I'm just going to open up Android studio and from here you want to go to configure and then plugins okay and then just search for flutter and right here you can see there's a flutter plug-in and I already have it installed so you just want to click install all right once you do that you want to create a virtual device so you go to configure AVD manager which is the Android virtual device manager and you can see I already have a pixel to set up here so what you want to do if you don't have any setup already is just create new virtual device you can choose from a bunch of different devices I just go with the default pixel too and then just go through click Next and create a new device and then once you do that you can quick click Play and it should launch the emulator alright so now you have an Android device and if you're on Windows this is what you'll be using to to view and test your flutter application ok but I'm going to go ahead and just quit out of that ok so we have that set up and that's pretty much it now you just need to install the vs code extension but I'm going to do that after we actually create our flutter app so to create an app we can just run flutter create and then whatever we want to call our application so I'm gonna go into my dev folder where I want to create my application and run flutter create and let's call this word pair underscore generator and that will generate our application ok so now I'm just gonna CD into word pair generator and I'm gonna open it up with vs code and obviously you don't have to use vs code you could use like Android studio or some other text editor IDE but if you install the flutter extension so I already have it installed looks like there's a reload required no go ahead and do that dart has been updated ok so I just want to show you real quick the extension where to go so it installs the dart extension or maybe it doesn't maybe you need to install that just make sure you have both the flutter and the dart extension yeah but this so this is the flutter extension and it'll allow us to have a really nice workflow - - with hot reload and all that stuff and then the dart right here dart language support so this will give you like code highlighting snippets stuff like that so just make sure you have those two installed all right so now we're ready to get started so you can see we have all the files over here that were generated and in order to run this what we can do is go down here you see this no device so if I click that I now have the option to use either my pixel - Android device or my iOS simulator I'm gonna use my iOS simulator and it's gonna open up it's not gonna run the app just yet but it will open the simulator and I'm just gonna make this a little smaller so we can see both at the same time you can minimize this and to run this all we have to do is go up to the menu which is you guys can't see it's off the screen but if you go to debug and then start debugging and choose your environment which is gonna be dart and flutter it should launch your application so we have a really nice workflow I'm just gonna close this up we don't need that anymore and this will make it so that one when we save our files it'll auto reload and it's just a really nice workflow okay so what this will do is load the basically just the boilerplate app so we have just an app bar up here we have this you have pushed the button this many times with a zero and then we have a floating button down here and if I click it it'll just increment the number by one so this is just the little default application that they give you but our app is running so if we look over here you can see our files now as far as the file structure the only thing the only place that we really need to worry about right now is the Lib folder this is where all of our code is gonna go you can see there's a main dot dart file and this is what is running the app this is the the main source code now this may look a little intimidating but it's it's like 85% comments so don't get too intimidated by it but basically I mean I'm not gonna go through all the code but we're importing material design and every dart application is gonna have this main function okay so void main void just means that nothing is returned from it and then here we're using an arrow you can use basically arrow functions in Dart similar to JavaScript arrow functions and then we're just calling run app and we're initializing this my app which we actually have defined right here as a stateless widget okay we have our build command in here I'm sorry a build method and from there we're returning material app which allows us to use material design widgets okay we can do things like set theme data and then down here we have a home property which is equal to a custom widget called my home page and then they proceeded to create a stateful widget alright but I'm not gonna go through all this I'm just gonna get rid of everything actually and we're gonna start fresh so first thing we're gonna do since we want to use material design is import that from package colon flutter slash material dot Dart okay so this allows to use material design now like I said every dart Apple has a main function which is basically like an entry point so we're gonna say void because it doesn't return anything main and then we can use an arrow for an arrow here because it's just a 1 a one-line function and we're just calling run app okay and then in here we could actually pass in directly the material app like that however I think it's neither to create basically like a core or root widget which we'll call my app like that and then we'll define that by saying class my app and that's gonna extends not sextants extends the stateless stateless widget class okay and then in here we need to run our build method or I should say override our build method because the stateless widget class has a build method and when we do this typically you'll see this at override like that which isn't required but it's just more readable and it shows you that you're actually overriding a method and then we'll say widget build okay and then every build method has a build context passed into it so build context and then context and then from here we're gonna go ahead and return our material app all right now just to show you real quick if we go to the docs let's search for flutter or material okay so the material app class which is an application that uses material design it's a convenience widget that wraps a number of widgets that are commonly required for material design applications so you can see right here material app and then there's a whole there's a lot of different properties you can use but home is basically what's going to show on in the UI and typically what you'll do is use the scaffold widget okay so if we want to look at that say flutters scaffold so scaffold is basically a high level widget where you can have multiple lower level widgets inside and there's different properties like for the app bar you use the app bar widget in the body you can use whatever widgets you want in this case we're using the center widget you can have the you know buttons this is a floating action button so before we get into scaffold I just want to get something up on the page so I'm actually going to say for home we'll just use a text widget and if I hover over this if you hover over any widgets it'll tell you exactly what it is so this just creates a text widget it can also take in a style property and you can use what's called a text style widget so I'll show you that as well so in here we'll just say hello world and save it and this should actually run so let's minimize this and that's what we get which is very ugly kind of the default look if we want to we can add in a style property here and we can use a text style widget and what this takes in is a bunch of properties for instance if we want to do font size we could say I don't know 30 let's do 30 point five and for color we could say colors dot and then we can use any material design colors so for instance we'll say green and if I hover over this I believe I don't yep so if I hover over this we'll see some options here for different shades of green so let's say we want this right here we could use green brackets 400 for our color so let's go ahead and save that and there we go okay so what we have here is just our main widget which is using material app which is just showing a text widget with the text hello world and then we're using a text style widget to add some style to that which still looks incredibly ugly okay now I don't want to use a text widget I just wanted to give you a quick example so I'm going to go head and get rid of this so we just have our home property and from here we're going to use scaffold all right and in scaffold we can set an app bar property and we're going to use an app bar widget okay now the app bar widget takes in a title and for that title we can't just put a string like we can't say it's a word pair generator so obviously I mean this is giving us an error here so string can't be assigned to the parameter type it has to be a widget so we're gonna use a text widget so we'll wrap this in text like that and that should be good so if we go ahead and save that there we go so we have our app bar so in addition to app bar actually I want to show you how we can set the theme so another property that we can have in here I really don't like how vs code formats this but I guess we'll deal with it so we can set theme and we have a theme data widget we can use and let's put in here we'll use primary color so if we want to set the primary color we can use colors dot and let's use we'll use purple and let's see we'll do like I guess just purple but you can change the shade if you want any of these actually I kind of like purple 900 let's do that so brackets 900 and we'll save what did I do wrong here home scaffold oh I'm sorry theme does not go in scaffold it goes in material app directly so we want to put that here there we go okay so now you can see that the app bar has changed to that deep purple so for the body here obviously we want to put stuff here so inside the scaffold in addition to app bar we're gonna have our home property and for now I'm going to use a center widget okay and if we hover over this it'll tell us that it creates a widget that centers its child so basically you have a child Widgit in here so we can say give it a property of child and let's just set that to text and we'll just say hello world let's see why am I getting this so I put home sorry this should be body so scaffold takes in body not home home is for the material app widget so there we go we have hello world so I mean this this kind of gives you an idea of how you build up your UI it's just it's basically it's a widget tree is what it is what I want to do now is look at packages because we're gonna use a package called English words and that's going to give us the the core functionality of generating these word pairs so if I go to my browser and we go to its pub dot dev this is dart packages and just like you have you know NPM for nodejs you know you have all your you have packages in just about every language so dart has its own packages and we're going to use English words which is right here and this is a package containing whatever five thousand used English words and some utility functions and it just kind of gives you some information now to install packages we want to add it to our dependencies in our pub spec file our pub spec dot yeah MOFA so we want to take the dependency I'll just grab this and go back to our turn our editor here and go into our pub spec yeah mol file and you'll see that we have our dependencies here so we have the flutter SDK we have this coppertino icons which is included by default what we'll actually be using those in a little bit and then we want to put our English words okay we actually want it at this level okay so we'll save that and then to install this actually it installs it automatically with with how we have everything set up so we should be able to use it but if you don't have you know if you're not running the flutter extension and the debugger and so on then you have to run pub get or flutter pub get which is like an NPM install all right so let's minimize this and then we can close this file and from here we're gonna import our English words package so we can say import package colon and then the name of the package which is English words and then it's gonna be English words dot dart ok so that'll bring the package in and we just have this blue line because it's unused we haven't used it yet so down here in our build I'm gonna go ahead and create a variable now this variable is going to be a constant meaning that it can't be changed or I shouldn't say it can't be changed it can't be reassigned so I'm gonna use the final keyword here we're gonna say final and then we'll call this word pair okay now final is similar to Const in JavaScript so basically you can assign like a list which is similar to an array and then that and you can change the values you just can't directly reassign this variable and it can be something dynamic like let's say we wanted to use date/time dot now or something like that which this isn't going to be a static value that we always know so it's fine to do now there is a Const keyword as well but you don't want to use it with something like this in fact we're gonna get an error and you can see right here Kant's variables must be initialized with a constant value so basically when you know the value when you if you're always gonna know this value you can use Const but usually you're gonna use final okay if you're gonna use one at all and then we're gonna just check that's not what we want here what we want to do is use the word pair object which comes with the English words package and then there's some actually there's only one method I think on this called random and what that will do is it'll generate a random word pair in fact if I hover over it it'll tell us creates a single word pair randomly so for now down here let's just replace inside the text widget we'll replace this static string of hello world with our variable of word pair and then there's some methods attached to that to how we want it to be displayed we could do as lowercase Pascal case I'm going to use Pascal case which is it'll start with an upper case and then each word after that will start with an upper case okay so we'll save that and now you can see I get bunch beds so it's gonna create just a random word pair if I reload a Pierrot I click the reload icon we get on to cure click it again we get trunk rod so it just generates basically a single word pair now for this application we want a whole list of them in a ListView later on we're also going to be able to favorite a word pair and have a separate page where we can view our favorites so instead of for the home property right here in material app instead of just adding our scaffold here I'm gonna call a custom widget that we're gonna create called random words so let's see material app ends here so everything within this home property I'm going to just get rid of and we're gonna have this call random words which we haven't created yet so let's go down here and let's create a class called random words and this is gonna take care of the state so this is gonna override the create state so we need to extends state full widget and we're going to override and then we're gonna have another class called random words state and we're overriding create state and we're gonna call random words state okay and that's really all we have to do in this particular class so now we're gonna create the class random words State and this is where we handle all our UI stuff and this has to extends state and inside brackets we want to put our random words okay so this is where our build will go so it's a widget build takes a build context and let's return here a scaffold widget okay so within this scaffold we're gonna have our app bar because remember we took away the app bar and stuff up here we're calling random words directly for the home property so let's see we're gonna have our app bar which is obviously going to be an app bar widget which takes in a title property and for that title property we're gonna have a text widget and let's just say a word pair generator semicolon there all right so if I save this okay so it's still working we have our app bar so for the body just to test it out we'll just say we'll put a text widget here and say hello okay so we get hello obviously this isn't what we want what we want to have is what's called the ListView so I'm actually going to create a new widget that will hold our ListView so instead of that just this text widget of Hello inside the body let's say underscore build list and then we're gonna go above our build here and let's say widget underscore build list and then we want to have our ListView now I'm gonna just pull up the docs real quick so flutter ListView and a list view is the most commonly used scrolling widget it displays its children one after another in a scroll direction so something like this in this example it's a ListView and there's some padding so for padding we're using the edge in sets widget and we have a children property which just contains containers and inside the container we have some properties like height color and so on and then we have a center widget with a child widget of a text widget with entry a entry by entry see in fact we could grab this and we could go ahead and return paste that in just how to semicolon down here and then if we take a look at our app there we go so we just have basically a static ListView now we don't want this to be static we want this to be a dynamic list of random word pairs so in order to do that we're going to use the Builder method okay in fact if we look it's just search for a builder so right here we can use this dot builder and then we can have a property called item builder which is basically like an iterator okay it takes in the context and index and by the way you can use static types like this like int index so this has to be an int I haven't been doing that I probably should have mentioned that in the beginning but yeah you can you can add types to your variables and functions and stuff like that I just haven't been doing it so anyway this is what we're gonna do is turn this into a builder or use the Builder method so that we can use dynamic data but before we do that let's create a variable appear our property called random word pairs and we can get these generated using the English words package that we're using remember we used word pair up above up here which we don't even need this anymore I can get rid of this but we called this word pair random well we can actually get a list of word pairs by doing it this way okay we want to add just some brackets here which defines this is a list okay so representation of a combination of two words and then a list or urn array I guess arrays are called lists in Dart so that will generate the list now we want to iterate through that list and output list items okay list items of list tiles each one of these is actually called a tile list tile so padding let's see I'm going to actually change that to 16 and then instead of children we're going to use that item builder property which is a function so item builder and then we can get rid of this widget and then everything within the brackets and the brackets themselves and let's say context and item okay so basically we're gonna iterate through the items now basically what we want to have is the word pair and then a divider and then word pair divider and so on so to do that we're just gonna do a quick if statement and see if the divider is odd there's a property called is odd and if that's true then we're going to return a material design divider okay and if we hover over that you'll see creates a material design divider you do have some stuff you can add to it like height and thickness and so on but we're just going to keep the default okay and then next thing we want to do is create our index so we're gonna say final index and we're gonna set this to our item and basically we want this to calculate the number of word pairs that are in the ListView minus the divider widgets and we do that like this okay so we don't want the dividers included here and then I want to be able to generate new word pairs as we scroll down so we'll just generate ten new word pairs so let's say if the index is greater than or equal to the random word pairs length just like in JavaScript we have a length property for lists or for a raise then we're gonna take random word pairs and we're gonna call a method called add all and inside at all we're gonna call a function called generate word pairs which is available because of that English words package that we're using and then we can add on to that a method called take so the and then the amount that we want to take our or create I guess which would be 10 okay let's see what's the problem here I mean a builder isn't defined oh I forgot to add dot builder so it shouldn't be just returned list view it should be list view dot builder which contains the item builder this function has a return type of divider yes so this item builder needs to actually return something and what we want to return is actually a list tile for each one okay each of those items is a list tile and I'm gonna put that in a separate widget called build row so inside the item builder at the very end we're gonna go ahead and return underscore build row and then we want to just pass in what we want each row to have which of course is going to be the random word pair so random word pairs and then the current index will get passed in okay and then we'll go right under that widget and create build row which takes in a pair okay and we can even add here word pair because that's what this is let's see yeah so widget build grow and then in here we're gonna return a list tile which is basically a row if we hover over this to see what it says doesn't give us much information create it's basically just one of the rows in the list view and then that takes in a widget or it takes in a property of title which we could add a text widget to and I could just say hello and if I save that we just get a ListView with a bunch of list tiles that say hello and you can see the divider between each one because we basically said if the item is odd then we want it to be a divider but obviously we don't want to say hello we want to pass in whatever the pair is it's being passed in right here okay the current index so we'll just go ahead and replace this with pair dot and then we want it to display as Pascal case and I just want to add some style I want to make it a little bigger so we'll say style and let's set that to a text style widget and we'll set the font size to 18 okay we'll save that and there we go so now we have ListView and in each list style widget we have a text widget that has the word pair okay random word pair and then for style we have a text style widget so you can see that a flutter app is just a bunch of widgets okay the UI is just a whole bunch of widgets and if I scroll it'll keep going and it'll keep generating new widgets and it's very performant okay because right here we're just generating more so that's that's it I mean yeah so that's all we can create a dynamic ListView now I want to add some functionality here I want to have an icon on each one on this side where we can favorite or are like certain word pairs and then we'll have a separate page because I do want to show you how we can have is a second page where it shows all of our favorites alright so let's get into that now one thing I would like to do before we do that actually is move our random words widget into a separate file and include that rather than having everything in this one single file so inside Lib let's create a new file called random underscore words dot dart okay and then we're gonna need this we're going to need both of these imports so I'm gonna copy those and put those in there and then we're not going to need this English words here anymore what we will do is import the random words the random words file so from here let's say dot slash random words dart and then I'm gonna take both of these classes I'm gonna take those and move those to our random words dot darts and save that and then go back here and save that let's see what's this going oh I forgot my semicolon all right so now we're gonna go back to our random words and we need a new variable our new property up at the top here so let's go under random word pairs and we need a place to store our saved word pairs okay so basically we're gonna have a cons when we check on the heart it's gonna get stored in save word pairs which is going to be a set so let's say saved word pairs which is going to equal a set of word pairs okay we need parentheses here so basically a set is a collection of objects where each object can only appear once so you can't have multiple of the same objects and that's fine because we don't want multiple saved word pairs all right so now that we've done that we have this initialize let's go down to our build row because that's where we're gonna be working for the most part in terms of the functionality in order to click the icon and show the icon and so on so in here let's go above our list tile and create a variable called already saved and we're gonna set that to our saved word pairs and see if it contains that the current pair which is passed in here okay so each one the build row represents each one of these so we're gonna look at whatever this is and see if it's contained in saved word pairs which we just defined above all right and then down here we want to have our icon so let's see we're gonna go I don't like how they vs code formatted this so in the list style after the title which ends title no after the text sorry which ends here yeah let's put that over there and put a comma here and then we want to have a property called trailing okay which means we can put something over here we want an icon so we want an icon widget and in here I could just say icons dot and then there's a for the heart icon it's called favorite so if I save that we just get a bunch of heart icons now the icon needs to be conditional right it needs to be read if it's saved and then basically blank if it's not so instead of just putting a hard-coded icon I'm going to take that already saved value which will be either true or false and use ternary and say if so then we want icons dot favorites else then we want icons dot and we're gonna use favorites border which is basically like like an empty heart it's not filled in gray but we do want to add a color if it's saved right if it's already saved we want it to be red so we're gonna specify color which is also conditional depending on already saved so if it is saved then we're gonna use colors dot red else then it's gonna be null no color so let's save that and now we get a bunch of blank hearts so we need the functionality where we click on a heart and we have an event fire off and we basically either add or remove this item to already saved so we're gonna go underneath trailing so let's say we want to be I really don't like how this is formatted so we have trailing no so underneath this we're gonna put on tap okay which is just that it's when when this icon is tapped we're gonna run a function and this is where we're going to actually change the state we're gonna use set state and set state takes in a function and we want to check to see if this item is already saved okay so if it's already saved then we're gonna take our saved word pairs which is where it's stored and we're gonna remove okay if we click it because we're gonna be able to toggle our saved items else then we're gonna take the saved word pairs and we're going to add the pair okay and the pair being whatever the current iteration is whatever is passed in right here alright so let's save that and if we go over here if I click even if I just click anywhere in here it doesn't have to be on the actual icon you'll see that it turns red so it's getting to this already I'm sorry it's getting added to this saved word pairs okay if I click it again it should toggle it and unsaved it so we're actually using state here now the last thing I want to do is I want to have a separate page that shows us the ones that are saved because if we go like way down here and click one you know we don't want to have to just search for them so we want a separate page that lists our favorites all right so let's do that we're gonna create a little button up here to be able to do that so down where we have the app bar in the the build method here in addition to title let's put a comma here because we're gonna add on to this actually let's put you see so this is more readable put this here and then right under the title let's have actions and actions we're going to define widget and then open up some square brackets okay and in these square brackets let's put a comma here we want to put an icon button okay which is just another widget and inside here it takes a property of icon and we're gonna set that to an icon widget which takes in whatever icon we want to use I'm going to use the list icon so icons dot lists and then after that we want to put on pressed so what happens when we actually press this we're gonna call a function called push saved okay and then I'll just create that function right up here so void because it doesn't it's not going to return anything and then push saved alright and I'll just save that and now you can see that we have the the actual icon up here and when we click that or when we tap that or press it whatever you want to call it it's going to call this function so in here we basically want to navigate to a different route on the stack so your home page this page here is the bottom route in the stack and you can use a navigator class to basically add another add another route on top of it what's called a mere material page route so we're gonna say navigator dot of our context and then push ok so we're going to push on to the stack and then here what we want to push is a material page route and material page route has a function called builder okay so I want to set that to a function and that takes in a build context and in here is basically what you want to show on this new route and I just want to show you real quick this is the Navigator class documentation so it's a widget that manages a set of child widgets with a stack discipline mobile ads typically apps typically reveal their contents fullscreen they're called screens or pages and flutter these elements are called routes and they're managed by a navigator widget the Navigator manages a stack of route objects and provides methods for managing the stack like push and pull and pop let's say so down here it says it's right here to push a new route onto the stack you can create an instance of material page route with a builder function that's what I just did that creates whatever you want to appear on the screen and then here they just have a simple example where they have a center widget with a text widget and so on but what we're gonna do is create a list of our saved word pairs alright so here we're gonna create a variable let's say final tiles so we're creating a list tile actually we're creating an iterable so let's say iterable Liss tiles and we're gonna set this to our saved word pairs and we're gonna use the math method here okay so we can map through this and then in here we want another set of parentheses because we need a function function gets passed into map and for each one it's gonna be a pair and it's a word pair okay and then from here we want to return a list style and a list tile takes in a title which you're gonna say text a text widget and it's gonna take in whatever whatever pair is and then we're gonna display it as Pascal case we'll add some styles so we want to use a text style widget here and let's do font size and set that to 16 because we want this to look as much like the home page as possible you need semicolons here okay so this builder has to return something so let's see builder ends right here so we want to go down here and we want to create our list with dividers okay remember on right here on the home page we have these dividers so we can do this let's say final divided actually let's give this a type of list which is a widget and set this divided to our list tile which has a method called divide tiles okay so we're gonna call this divide tiles and if we hover over this it says it adds a one pixel border in between each tile and it will use the theme color and so on unless unless you'd provide a different color but that's what we want to call and this takes in a context which we're passing in the context from up here and then it also takes in tiles which we have right here okay so we have our list tile here so let's see that's just put a semicolon here and then finally we have to actually call to list and if we hover over that you'll see that it creates a list containing the elements of this iterable okay the elements are in iteration order the list is fixed length if growable is false all right and then finally we want to return a scaffold widget so we're going to go under the two lists here and we're going to return from our builder function a scaffold and in here we're gonna pass in an app bar because remember this is a new route or a new page and we're gonna have an app bar widget and this takes in a title and we're gonna have a text widget as the title and it's gonna say saved word pairs and let's see after the app bar we have our body and the body is gonna be a ListView component widget sorry and then this can take in a children property which is going to be our divided variable okay our divided list and I think that's it but save gets full-auto formatted and if we click that there we go so you can see all of our saved word pairs if I uncheck some of these will uncheck dark mine and warm Eze and go back now we have just these two all right so this gives you a good example of how we can keep State in our application go back there we go all right so it's it's not the you know the most useful app in the world but I wanted to do something that was more than just some you know static static list or whatever just showing you like UI components and widgets and actually having some logic so hopefully you at least learn the fundamentals and learned how to create stateless and stateful widgets and learned about you know scaffold and app bars and all that stuff and how to add some logic list views list styles and and so on so as far as publishing to a device like creating an app for the App Store you can look at let's see flutter iOS build so this page here will tell you how to do that you need to register your app on the App Store connect and you need to take some steps and preparations for that and you can also search for flutter Android build and some steps to to go through that as well okay but I'm not going to do this in this course obviously this is just a beginners crash course alright so that's it hopefully you enjoyed this and I'll see you in the next video

Channel: Traversy Media

Views: 424,062

Rating: 4.9304981 out of 5

Keywords: flutter, flutter tutorial, flutter crash course

Id: 1gDhl4leEzA

Length: 59min 19sec (3559 seconds)

Published: Wed Dec 11 2019