Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart

so what is flutter flutter is actually a package of multiple things you could say it's a sdk a software development kit for creating mobile 2d apps and that's important if you're planning to do a 3d app some game flutter won't be able to help you but if you're planning some 2d app which the majority of apps are in the app store then flutter is your thing now i said flutter is a package of things the most important part probably is the framework it ships with the programming language you're going to use is actually called dart and you don't need to know it you'll learn it in this course but flutter is a framework for dart and a framework is just a set of utility functions classes objects you can use in that programming language so that you don't have to write everything from scratch flutter ships with a huge set of pre-built widgets for example and widgets are simply just ui elements like buttons sliders tabs and so on so that you don't have to write everything from scratch but instead you can use all these tools from the flutter framework add your own code add your own logic enhance the code or the features you're getting from flutter and build your native app with these features so you write code with one language only that's the core thing you don't have to learn java or swift or anything of that you write one language dart and you use the flutter framework features when writing that code you can then find out on which platform your app runs in cases where you need to execute different code this is something i will cover in the course of course and by the end we use that second part of the flutter package thus far i discussed the framework part the set of built-in features now flutter is not just dart code it's also a set of tools that allow you to test the app you're writing on the device with cool features like auto reload whenever you change something in your code and you're running the app on an emulator it reloads automatically that's really convenient and it gives you build tools to build your code so to build your dart code into the native app you can upload to the apple app store or google play store so it compiles your dart code to the native code that's what it also does so flutters both the framework and a lot of useful tools and to make this really clear flutter builds up on dart dart is the programming language flutter then offers this framework which is well connected to dart or which is built up on dart which offers a lot of utility features and all these widgets and then flutter has this second part the sdk the tools and so on you need to build and test your application this is flutter this is what you will learn from scratch you don't need to know anything about it and we will use flutter together with dart to build native mobile apps and ship them to the app stores obviously we now want to dive in and get started and we will we'll install flutter and write our first flutter app in a few seconds but first i want to highlight how a flutter app looks like what its core architecture is what its core concepts are it's important to understand that flutter works with so-called widgets and that will become clearer once we work with them in the next module we'll dive deeply into them but in the end of flutter app an app built with flutter is just a tree of widgets and you can think of this as your app being a widget a ui element your whole app is one ui element and then it holds other elements like a tab bar maybe some text fields where the user can enter something a button to confirm the choice and all that may be laid out in some invisible widgets like columns or rows to position elements above each other or next to each other and then you got the visible widgets like buttons and so on so you structure your app like this additionally flutter embraces platform differences this means that of course we use one code base that's the third important thing we use one code base to write ios and android apps but since these platforms aren't entirely equal flutter gives you some tools to find out on which platform you're running so that in cases where you need it you can execute different code so one code base but the possibility to differentiate between the platforms that gives you as a developer a lot of power because you have the advantage of generally using one setup but if you need it you can still write different code so that's the core flatter architecture now let me dive into the widget thing really quick this is a screenshot of the finished app we'll build in this course and on this screen we can identify a lot of widgets and actually there are even more widgets than i marked here for example that add image button at the bottom well that button is a widget and then it has two child widgets the camera icon and the add image text and this is how you build the flutter app and even the whole app as i mentioned is one widget this gives you that widget tree where you have a root widget wrapping the app then you have widgets for the different pages you might have in your app but which mean you can navigate obviously you'll learn this in this course and then on each page you have child widgets some of them doing some layouting some of them rendering visual things like buttons text fields and so on so that is how this works the obvious question is how is it then compiled to native code because we write dart code we do that with the help of the flutter api the framework which gives us utility features built-in widgets pre-styled widgets we add our own code build our own widgets yes we do that a lot actually and in the end we want to get an app which runs on android and ios flutter helps us with that the dart code gets compiled to native code for these platforms and the flutter sdk does that it has tools that do this compilation so that's really cool you don't have to worry about that you don't have to write any native device code you write your dart code using these flutter features and the flutter sdk will do the compilation that's pretty useful now that is what flutter does for you and this is how it compiles that and with that we got a very cool setup that allows us to write very powerful and flexible apps and speaking of that it's time to create our first step it's time to install flutter and set up the development environment we need for this course and then get our first application up and running on an emulator so let's do that in the next lecture so let's install flutter then and the installation actually differs between mac os and windows or the rest of the course the code we write and so on will be the same but here for the installation it differs so therefore in this video we'll set up flutter and all the surrounding packages and dependencies we need for mac and in the next video we'll do the same for windows so if you are a windows user you can simply skip this video and if you are a mac user you can skip the next video so let's proceed with the mac setup then on flutter.io you can simply click on get started and then choose install on mac os by the way if you're on linux the steps are pretty much the same but you can also click on install on linux to see them in detail and that's in general what i would recommend go through these steps in detail the good thing is you can read them here and i strongly recommend following along here and reading these whilst you also watch this video or whilst you are going through the installation process because a some tiny steps could change over time and b this is a great way of resolving issues since there might be something you overlook in the video which you can then simply read about in this article so let's continue first of all let's check the system requirements well we need the operating system mac os obviously enough free space on our disk and then we depend on these command line tools which actually should all be available by default now git might not be so it's a good idea to download it before you get started you can simply search for git on google and then actually pick that first or actually that second link to find the downloads page and there simply choose mac os or linux depending on where you're on and then the download should start automatically if it doesn't you can simply click here obviously and this will download an installer for which you can simply walk to install git which is a version management system on your machine now you don't need to use that version management system but flutter uses it behind the scenes this is why you need to have this available once you got git installed with the help of that installer you can download which i showed you a second ago you can proceed with these steps and the next step is to actually download flutter now at the point of time recording this the latest version is 0.3.2 beta chances are that when you're watching this there's a higher version available but the code we write will still be the same so download the latest version you're seeing here of course now i'll go with this one simply download it to your machine and this can take a while as you can see it's quite a big file so i will jump forward to the point of time where this already is downloaded the installation just finished for me you can now simply unzip this and you can do that with the command you see here or simply well click on that downloaded file simply open it in the folder where it was downloaded simply click on it down there and then unzip this now this can take a couple of seconds of course since it's a rather big file once it is unzipped you have this flutter folder and now you should copy this somewhere where you want to store this now this flatter thing here is an entire tool set it's the sdk the software development kit you need for developing flutter apps it includes a lot of dependencies flutter needs so this is really a central packager program you should store in your machine and you can copy it wherever you want on your machine now i got that tools folder where i want to have it so i'll just drag it over there and now with flutter added to that folder we can proceed with well the installation or with using it so the flatter tool is actually a tool we execute from the command line therefore we need to add it to our path the path is basically a global variable which ensures that the flatter program or which ensures that any program can be accessed through the command line and we want to configure the flutter program to be found there now to be found there we could execute this command in the command line if we navigate it into the newly created flatter folder or we do something which is seen a little bit further down the article here we update our path permanently now how does that work for that you should go into your user folder and there you need to turn on the setting to see hidden files you should then see that bash profile file now you can simply open that with the normal text edit app or with any text editor of your choice now if you're using the text adapt just make sure you're viewing this in plain text mode not in rich text mode so if you open this then let me make this a bit bigger you can edit this file and this basically configures pof settings for your terminal for your command line tool on mac or linux now we want to add something here we want to add this line which you can find in the installation steps simply add it at the bottom and we need to replace this part here with the actual path the folder path on to that flatter tool on our machine now that of course depends on where you dragged it for me it can be found under users than my user name then there's a development folder and then there i created a tools folder and again you really have to pick your pop there where you dragged that flutter tool you can view that also by clicking on get info here then you can see where it's found in my case users my user name development tools with that simply save that file and thereafter open your normal terminal app on mac or linux once you did open that you should be able to run flutter doctor now this is a tool which will also check if you need to do something to make flutter work and it should at least do something if you set up your flutter installation correctly by the way the fact that my installation is 30 days old we can ignore that here because we know we just downloaded the latest version 0.3.2 in my case so this is all fine now this is already looking quite good here because i actually have a decent setup i'll still walk you through the remaining steps here though so we updated our path we now ran flutter doctor 2. now what we need to do is we need to configure our system to be able to build ios and or android apps for that if you want to build ios apps if you want to test your app on ios and ultimately build it for that platform you need to install xcode which is apple's development ide but also a absolutely required tool for building ios apps even if you use flutter and no native code for that so install xcode by downloading it from the mac app store and once you got it installed you need to make sure that you can use the so-called xcode command line tools and this can be done by simply copy and pasting this command into your terminal so you can simply run this you might be prompted to enter your password there and then it might or might not do something depending on whether you already configured this it might prompt you to accept the license once you completed this step you can continue to step number three and execute this command to accept the license agreements of xcode build which is the build tool we're going to use now here you can simply scroll to the bottom which can be sped up by hitting space a couple of times and then type agree down there now with that out of the way we can continue and we can bring up the ios simulator which simply is iphone running on our machine it can be started with this command you could also start it from within the xcode by the way but i will simply start it with this command open dash a simulator with a capital s and now what this should do is it should bring up this ios simulator here now this is the device running you can change the type of phone you're emulating here from that menu device and then ios and then choose your favorite device here and now with that up and running what you can do is you can start your flutter app by running flutter run in the command prompt now for that we need a flutter app though right because right now we only installed flutter but we haven't set up a flutter app a new project so let's quickly do that and for that you should first of all navigate into the folder where you want to create your flutter app once you navigate it into that folder where you want to create your new flutter project run flutter create and then the name for example first underscore app important this project name must not contain dashes or white spaces it should be using underscores instead or would be one word only hit enter and this will now set up a new flatter project in that specified location a new subfolder which holds that project to be precise can take a couple of seconds and once it's done you can navigate into this newly created folder in my case it's named first underscore app and then hit flutter run enter this hit enter and with the ios simulator up and running you should be able to see that flutter app on that ios simulator momentarily the first build or the first time you run this can take a couple of seconds longer by the way here we are now important keep that process running don't quit it you could quit it with control c but you want to keep that running so that you can always rebuild your project and instantly ship that new version to the device whenever you change something in your code so with that you should see this your first flutter app running on the iphone and you can hit that plus button to see a counter that is incremented this is an app the flutter tool created for you we of course didn't write any code yet now that's cool and we will actually edit this a little bit to see how we can well work with that first flutter app but obviously we also want to build for android right so let's go back to these installation docs we're done with the ios setup here the simulator at least now if you want to deploy to a real ios device you can follow these steps here you will essentially need to plug in your real iphone then also again execute these steps to install homebrew and then these extra tools which you need to be able to ship your app to a real iphone and once you're done with that you can continue with these steps and you will need to do some tweaking in xcode to be able to ship your app to your real device now that is something i'll come back to later in this course when we will actually test this on a real device and also deploy the app at the end but again feel free to already go through these steps they're really simple if you want to run this on a real device now i'll move on to android for now and for that we will need android studio just like xcode is the official ide and contains all the build tools for ios apps android studio is the same for android so click that link to be forwarded to the download page of android studio and on that page it should automatically present you the mac os download so you can simply hit download android studio here accept these license agreements and well then download store it is in any folder of your choice and this again is a little bit of a bigger file so let's wait for this to finish before we continue now the download did finish you can then simply execute that file and it will launch an installer for you i'll be able to close the ios simulator here now that android studio installer is pretty straightforward on mac just drag that into that applications folder and this will copy or install that tool in that folder which again will take a couple of seconds since it also unpacks that folder and once you are done with that let's go back to the flutter installation page once you're done with that you need to start android studio and go through the setup wizard to configure everything and install everything you need now you could also be getting a security warning that the opening of android studio was blocked because it was from an um well from the internet not from an identified developer you can then open it anyways through the mac security and privacy settings and ultimately this should bring up this setup wizard now click next on the first screen click custom on the next screen next again now here you can choose your editor theme if you want to have the light or the dark one you don't need to use android studio as an editor for this course and actually i won't but you can so i'll go with darcula here but that is totally up to you now on the next screen make sure to also check android virtual device here under the installation options the default installation path then should be all right click next and finish and now this will download a bunch of things and install all the sdks and tools you need to develop android apps and these will be used behind the scenes by flutter which is why we need them so let me fast forward until this is also done now by the way this can take a couple of minutes so don't worry if it takes a bit longer it downloads and installs quite a lot of things now the setup finished for me here so let's click finish and thereafter you can click on open an existing android studio project now there simply navigate to the folder where you just created your new flutter app in my case that's that first underscore app folder select the whole folder and click open and this will bring up android studio with that project opened now when you open it for the first time it will actually scan that folder so let's wait for this to finish and it should actually suggest you two things down there it finds something about a plugin and there you can simply expand this and click on configure plugins it actually also shows you something about the dart files we ignore this for now so now choose that flutter plugin and click ok and thereafter click yes to also install that dark plugin for which it's asking up there thereafter simply restart now once you restart it you may get a message at the bottom here regarding ide and plugin updates if you don't that's fine too in my case i do get one so i'll simply update now to install the latest versions of all the sdks and build tools i might need and that again will get downloaded which again will take a couple of seconds and now with all that done let me click finish here and now this is our flutter project now i will open this in a different ide where it's also a bit easier to read in a second for now we won't work on that code here instead let's run this on an emulator for that we can simply go to tools and then avd manager that stands for android virtual device let's open that tool and here i actually got some pre-configured devices you should at least have one that nexus or some other device which is created with the installation you can always create a new virtual device by clicking that button here at the bottom and then you can choose which device you want to use let's say the pixel 2 continue choose your api version now typically the highest one is a good choice or the one selected by default i should say not necessarily the cutting edge one but this one click next again now here on emulated performance you should choose the hardware emulation for a faster emulator the other settings should be fine simply hit finish and this should create that new emulator and you can then start it by clicking on that play button on the very right here now this will bring up your android emulator now we can of course use that emulator to run our flutter app there too and to run it what we need to do is we need to go back to that command line where we previously already ran it on the iphone and repeat that flutter run command if you still got the old one running which you probably don't have if you shut down the old simulator you can always quit the running process with ctrl c so let's hit flutter run to run it on our android emulator once that emulator did boot up and it will build the project with the help of the android sdk that was installed together with android studio and that first build process can again take a couple of seconds subsequent ones will be faster and now it should be up and running let's do it and there it is this is our device and this is our flutter app and we can click the plus button to increment this counter awesome so this is how we install flutter and run it on both the ios and android emulators now if you want to run it on real devices you can follow the steps outlined in the documentation but of course we'll also run it together on the real device later in this course for now let's focus on the editor with which we're going to work on this code i will not use the android studio editor though you can absolutely do that there's nothing wrong with it it's a fully fledged ide with the flutter plugin you can work in it and if you want to use that you can follow along through the entire course with that id without problems i'll quit it though because i have another id which i like more and that's visual studio code you install it from codevisualstudio.com and it's a free ide just like android studio it should automatically present you the right download option for a mac and you can simply well download it then and once you did download it you will have a file which you can execute and which will walk you through the installer the installation should be pretty straightforward there's nothing special on it or nothing tricky on it once you did install visual studio you can open it run it and then in the starting screen simply choose open folder or choose file open to open your flutter project so that is what i'll do open that first app folder and this will now open flatter in well that ide now i will actually use this id and also this look of the ide which is the dark theme you can change to look under code preferences color themes but i will install some extra extensions to make working with flutter a bit more pleasant and that extension can be added by going to view extensions or using that shortcut or using that sidebar you will probably see here on the left extensions are simply add-ons to visual studio code which lets us enhance the coding experience and there you should simply search for flutter to find your official flutter plugin or extension click install there and this will also install the dart extension as a dependency once you did install it you can hit reload to reload visual studio code with that extension added there's one extra extension i will use throughout the course which is totally optional and that's the material icon theme now that's not related to flutter it just makes the icons look nicer i already got it installed you can install it from this page and once you did install that but more important the flutter one you can switch back to the explorer here with that shortcut or by clicking in the menu and you're back in your project structure and now you're well prepared to work with flutter and for example here in our main dart file we can manipulate our first app by for example going down to the increment counter method here and changing that counter plus plus thing to counter equals counter plus 2. this should now increase the counter by two on every click now the very cool thing is you can hit save here and then go back to your command prompt where you ran flutter run and simply hit r with that flatter run process running so don't quit it hit r whilst it is running and it will hot reload your flutter app which means it will reload it on the fly on the emulator without the need to rebuild it if that gets stuck somehow you can press shift r for a full rebuild and reload still with that process running so let's go back to our app and it looks like nothing changed we even have the old counter but if we click the plus now it increases by two and that's already showing how cool it is to work with flutter and how easy it is to develop with it with that hot reloading and this also is the setup i will use throughout the course and i will teach you all about flutter dart and some tricks with the ide throughout this course now let's see how that works for windows or if that doesn't matter to you because you're using mac only let's continue with the chords and dive deeper into flutter in the last video we installed flutter for mac now if you're using windows let's now install it for windows 2. if you're using mac only you can therefore skip this video so to install flutter on windows first of all let's visit flutter.io click on get started there and then choose install on windows there you will see all the installation steps in detail and i strongly recommend all going through these step by step along with the video because for one they can't change in one or the other detail in the future and then this is great to see or easy to see in that written form and additionally it's easy to miss a step and therefore this is a great companion for this video so first of all let's have a look at the system requirements we install flutter on our machine we need windows 7 or higher the disk space which is mentioned here and important one of these two tools powershell or git for windows now git is a versioning system and even if you don't use it actively flutter does use it so here i'll install git for windows by clicking on that link then we have the chance to download that git tool from that git page here it should automatically give you the right download for your machine download it and then walk through the installer now in the installer you can choose a place where you want to install git then simply hit next and well install that tool now very important you click next a couple of times and most of the default settings are fine one important thing to note is that on this screen here you should use use get from the windows command prompt don't use one of the other two options use the middle one here this is also mentioned in the official docs now with that hit next a couple of times and leave all the other defaults and with all that simply hit next one last time and it will install git on your machine with that you're fine you can now close this and continue in these setup instructions the next step is to actually install the flutter sdk which you can get from this download link here now important the version of flutter of course will change in the future right now it's 0.3.2.beta it's production ready already and the code you learn in this course will still be all correct in the future even if you are downloading a different version but make sure to download the version you are seeing here so whatever version that is for you so this will now always be downloaded will take a couple of seconds since it's quite a big file and once it is downloaded you can extract this folder into the place where you want to install that flutter tool now important the flutter tool is not your project for your mobile app it's a sdk a software development kit which you install globally on your machine and which you will use from different places on your machine to create new flatter projects and to work with the ones you created so to build them to run them on an emulator things like that so unzip flutter into that directory and once you unzipped it you can go into that directory and in my case here i'll also move all the files up one folder so that they're all directly in the flutter folder and then you can execute that flutter console.bat file here now this will open up a command prompt which already uses flutter and you could stop here and continue with the flooded commands and with bringing up your android emulator and so on and always open that tool here to run the flutter commands which you need to run or build your app however i want to be able to use the normal command prompt so let's close the flatter console here and let's move on and make sure that we can use the flutter commands from the normal windows command prompt for that we'll need to update our path now the path that simply is a global variable which windows uses to find the tools we can use from the command line and since we picked a custom folder where we installed flutter or where we unpacked it to we need to make windows aware of where that is you do that by opening your control panel and then going to user user accounts and there simply click on change my environment variables now in the window which opens you should find a path entry which you can select and where you then can click edit now here you can add new locations of tools you want to be able to execute to that path by clicking on new here and then here you need to enter the path to your flutter folder so the folder you unpacked simply go into your windows explorer and there navigate into the bin subfolder to be precise that is what you need copy the path to that bin subfolder and add it to your path variable by clicking new adding it to that empty blank space which opens up and thereafter hitting ok now you're prepared to run flatter commands from the normal command prompt click ok and make sure to close any command prompts you might have opened already restart windows if you're facing issues thereafter and once you did all that you can bring up the normal command prompt and simply enter flutter there now this might show you a warning regarding the installation being a bit older you can ignore that because we actually did just install the latest version so that will be all right but the fact that you're seeing this and not something like flutter not recognized means that we did successfully add it to our path and that we can use that flutter command line tool from our command prompt now flutter is now available the next step we have to do is we have to set up android studio this is the official sdk provided by google for building android apps and whilst we will not write native code with it it includes all the sdks and build tools flutter will need too so simply go to com slash developer.android.com or use the link you find in the flatter installation documentation and download the android studio version there it should automatically give you the right version for your operating system you need to accept the agreement before you can continue and with that the download will start and it will also take a while since it's all the quite a big download so let me fast forward to the point where this is done now once the download did finish simply execute the well executable you got and the installer will start now there you can continue make sure to choose android virtual device as a component you want to install though that's important that you tick that thereafter you can choose the location where you want to install android studio and you can use the default here or pick your own location on your machine and then you can simply hit next now this will again take a couple of seconds and once it's done you can start the android studio and for the first time you start it a wizard will come up which allows you to configure it now in that wizard hit next and then choose custom here and the next step is that you can choose your ui theme now that's most important if you want to use android studio to build your flutter apps which you can however i will use a different ide in this course and i will go with the dark theme here but of course you can choose your favorite look in the next step it's important that you check android virtual device that this option is ticked because we will need to be able to bring up such virtual devices with that ticked choose your android sdk location use the default or create your own path and thereafter simply hit next now this will install a couple of things and you can start installation by hitting finish here this will actually take quite long because it downloads and installs a lot of packages so don't worry if this takes a couple of minutes maybe even 20 minutes or something like this and i will be back once it's done for me once the installation did finish you can well close the installer and then bring up android studio again now here you can open an existing android studio project which would be your flutter app you're working on but we don't have such a app yet so our next step actually is to create such a app however we will need an emulator to view it so let's make sure we fulfill all requirements for that you can see them here in the official docs and by the way if you want to install your app on a real device that is something we'll all to do later in the course and you can of course already go through the steps you see here if that's important to you right now already but again we'll do this together later in the course for the majority of the course we will work on the emulator though so there on the emulator you see that it's important that we have hardware acceleration enabled on our machine click that link to learn more about it and see how to turn it on and thereafter we can go back to android studio and now we need that flutter project to continue so back to the command prompt there you should now navigate into the folder where you want to create your new flutter project you can navigate around in windows with the cd command to change the directory you're in in the command prompt now make sure to create a folder and navigate into that folder where you want to store your flutter app and once you're in that folder you can create a new flutter application and project by running flutter create and then the name of your project now important that name must not contain a dash or something like that also not a white space words should be separate with underscores or you simply use one word only so flutter create first underscore app is my command here to create this project and now this will add a new folder in the location you're in in the command prompt and configure your first flutter project in there as you can see it creates a couple of files and once it's done with all that you can open the project in android studio by clicking on open an existing android studio project and there you should navigate to that folder you just created and open it there in the flatter folder my case so basically open that project you just created first underscore app in my case this will open it in android studio and before we do anything there let's bring up that virtual device you can do that by in android studio going to tools and then avd manager which stands for android virtual device manager and in the window which then opens up you can start a new virtual device by clicking on to create virtual device you should also have one by default which you can use but let me show you how to create a new one there you choose your blueprint basically regarding the general hardware and layout profile i'll go with the pixel 2 here on the next screen you choose the image the android version you want to use and i recommend not going with the cutting edge version but using the latest stable version in my case oreo api level 27 typically that's the one which is selected by default hit next again now on the next screen make sure to choose hardware acceleration from the graphics drop down there and you can have a look at the advanced settings but you typically don't need to change these and with that all done you can finish that and create that new virtual device now with it created you can start it by clicking on that play button on the right and this will open the virtual device on your screen it will bring up a android phone on your machine so to say now with that running we can't run our flutter app yet because we still need to do some things for one we need to install the missing dependencies the missing plugins for that click on install plugins here at the top where it tells you about the missing dart plugin you could by the way also skip this if you already installed the flutter plug-in but here i do it in two separate steps so install that dart plug-in once the installer is done you need to restart android studio and once you restart it you should actually get a message here at the bottom where it suggests you a new plugin expand that message and click on configure plugins and there it will suggest a flutter plugin simply accept this by clicking ok and now it will install the flutter plugin too and that would have installed the dart plugin with it so you can actually do that in one step only once this is done you need to restart the ide one more time so let's do that let's restart the ide again and now we have android studio configured to support flutter now we still don't see our emulator here at the top and therefore we still can't start our application let's quit the emulator for now and to make it work first of all go back to the setup instructions and make sure to install that google usb driver now that should only be important for running it on a real device but it still doesn't hurt to set it up already so that it will work later so click on that link you see there and install the usb driver you can do that from within android studio by going back into it and they're going to tools sdk manager and in the sdk manager go to sdk tools and choose google usb driver there hit ok thereafter or apply and install it you also need to accept the license agreements there now with it installed you will need to also do one more thing if you installed your android sdk in a different place on your operating system than the one suggested during the wizard which i did you need to add one other environment variable you can also see that if you go back to the command prompt and run flutter doctor a tool which tells you what's missing here it tells me that it's unable to locate the android sdk and therefore i will go back to my control panel and there to user accounts user accounts and then change my environment variables and first of all we need to add a brand new variable so click new here and then name that variable and the name is important android underscore home all uppercase make sure to not add a typo here now with that name defined you need to define a value and that simply is a path pointing to the android sdk you can click browse directory here to choose the android sdk location and there simply choose the location you selected during the wizard or in the wizard which opened or which ran when you opened android studio in my case it's the android folder it should be this folder which has a platforms emulator and so on subfolder simply hit ok with the root folder selected and now you also need to add something to your path variable so select that again and click on edit and there you need to add two new entries the first one should be percentage sign and then android home so that variable name you just created written exactly the same way and then another percentage sign backslash tools and then you need to add one hour entry which is also percentage sign android home backslash platform tools make sure it's written exactly as you see it here in the video now with that added hit okay and restart the command prompt and now also restart your virtual device by quitting it potentially wiping the user data if you're facing issues restarting it and then hitting the green play button again this will bring up the emulator again and now you should see it here in the drop down selected and now you can press that run button to run your flutter app on that virtual device now this build process which will start it on the device can take a couple of minutes when you run it the first time don't worry about that and once it's done you should see your flutter app running on that emulator and you can hit the plus button here to increment the counter pretty awesome our flutter app finally running on an emulator and of course we'll change this app soon now as i mentioned i won't use android studio as an editor here and therefore i also want to show you a way of running this without android studio you can do that by going to the command prompt navigating into the folder where you have your first app or into this project folder you created and in there you can run flutter run and this will now do the exact same as you did with the command inside or with the click of the button inside android studio but without you doing it through android studio it will build the app and ship it to your emulator and run it there and this is actually how i will run my apps for the rest of this course since i won't use android studio you can use either approach however using flutter run will have advantages like the hot reloading i'll introduce in a second now which editor will i use then i will use visual studio code you can get it from code.visualstudio.com it's a free ide which also has an extension that provides awesome flutter support you can download it from that page and it will automatically give you the right version for your operating system and you can simply walk through the installer it's pretty straightforward nothing special about it simply install the ide on your machine now once you did install it in your favorite location you can start it and in the ide you can then click open folder or choose the open option from the file menu in the top left corner and simply choose that first underscore app folder you created now this is your flutter app and in order to be able to work with that really well we should add a so-called extension so a plug-in we can add to that ide to add extra functionalities you can install extensions by clicking on this icon on the left or selecting view extensions in the menu at the top and there simply search for flutter install that extension you find here it's the official flatter extension and it will also install the dart extension together with it because that will be a dependency and once it is installed you just need to restart the ide to have that installed now i will use one extra extension throughout the course and that's the material i can theme that is not related to flutter development i just like the i can look i get with it it's totally optional i just want to show it here so that you don't wonder why my icons look different than the default icons once you install that if you want it you again can reload the ide and with that we can finally make a change to our flutter code after i activated that new theme you can see your flutter code in the lib folder of the project you opened and there in the main.dart file you see the code which is responsible for the app which is currently running on the emulator there search the increment counter the underscore increment counter method and in set state change underscore counter plus plus to underscore counter equals underscore counter plus two this should ensure that we actually increase the counter by two every time we hit the plus not by one anymore with that change made go back to the command prompt and make sure that the flood run process is still running don't quit it you could quit it with ctrl c but as long as you are developing you should keep it running because then you can hit r with that process running to hot reload your app which means the changes you added are pushed into the app without the need for it to rebuild now sometimes this fails then you can press shift r to do a full reload and a full rebuild and you can quit that process with ctrl c if you're done with development for the day so i pressed r and if i go back to my emulator here you can see that i can now increment by two instead of one and this is our first little change we will do much more of course but this is our windows setup finished was quite a lot of work but now we are prepared to continue and dive much deeper into flutter of course we set up our environment and we created and edited our very first flutter app now before we dive way deeper into that in the next module and the modules thereafter let me briefly talk about some alternatives flutter is of course not the only way of creating native mobile apps there are three alternatives i want to discuss the first one is that you write real native apps by learning java and android and swift objective c for the respective platforms the advantage of this is that you got full access to all features and you don't need to worry about finding some workarounds to get that feature to work in your app the huge downside is that you have to learn two completely different languages and that takes a lot of time and possibly all the money so this is a huge downside and flutter can actually get you to the same result so not the best alternative maybe except for cases where you have a very specialized app where you absolutely need that latest cutting edge feature and you would end up writing a lot of native code anyways because you can connect flutter with native code we'll cover that in the course so an alternative but flutter has a lot of advantages second alternative is that you create a progressive web app now you might not know what it is it's a website essentially it's not a native mobile app it's not distributed through the app stores instead it's a website which can also access some device features browsers are evolving and give you more and more access to these features but you can't control which browser your users are going to use so maybe their users are using a browser which does not support that feature so this is a nice way of creating a app for cases where you can fall back to a well less capable version but if you're building an app that needs to be able to take pictures well then you might need a mobile app now the third alternative gives you a native mobile app just as flutter does but it uses a different approach you can use solutions like ionic cordova you might not have heard of these but what they do is they give you a real native app but they give you a wrapper which just runs a browser in that app you could say and therefore you create a web app which then runs in the browser which is guaranteed to be able to use certain features ionic cordova gives you access to these features but you still have a website the cool thing is if you're a web developer this is pretty easy to use and pretty easy to create awesome apps with it that look really great but of course the performance is a bit worse than when building real native apps or when having real native apps in the end as you do with flutter because here obviously everything runs in a browser still so you have this extra layer with flutter you get real native apps because everything is compiled to native code and therefore performance is better so flutter is not the worst solution and flutter is definitely a cool tool to learn which should make the development of native mobile apps way easier than it was in the past you might have seen it in that first little app we spun up a few lectures ago flutter uses the material design now this looks something like this you might have seen that in different google apps material design is a design system developed by google it's not google's style only though instead it's highly customizable and in this course you will see that you can set different colors that you can change the look of widgets you can do a lot with it it's important to understand that flutter embraces that material design though but you can tweak and adjust basically everything you can add or remove drop shadows you can change colors so you can make it your design you're not creating a google app here that's really important to understand but it's also important to understand that you're going to use that material design for both android and ios though there are some ios specific widgets which really have that ios look i'll have a whole module about that four cases where you need it but in general be prepared to use that material design and adjust it to your requirements well you will see how it works in that course obviously so material design is built into flutter and embraced by flutter you'll see the term material a lot because a whole flutter app is in general a material app where you then add various widgets with all of that out of the way it's time to dive into flutter and learn about its core features we'll do this soon but here's one important thing flutter is a moving target it's actively under development it's still evolving and evolving quickly it's stable now and marked as ready for production by the vladimir team so we shouldn't expect huge braking changes but new features could be added tiny things could change i'll do my best to keep you updated but it's a good idea for you to also regularly check the official docs stay updated follow these steps i will highlight at the end of the course in the roundup it's also important to understand that since flutter is relatively new we have already a decent set of third-party packages adding certain functionalities and making certain things easier but we'll probably see more third-party packages being added to the ecosystem as this well becomes older additionally we have some best practices and patterns and i do my best to follow them and show them in this course but obviously some new patterns might emerge in the future so here too it's a good idea to stay up to date and be prepared to switch to other patterns when they become more stable or if something becomes a best practice last but not least there will be bugs there will be bugs in this course and we will fix them together we will find workarounds and you will see that you can achieve pretty much everything with flutter sometimes you need to be creative but that's not necessarily a problem you still save so much time because you don't have to learn two different languages and these languages would have some bugs too but be prepared to meet some bugs and to fix some things which you might have expected to work out of the box which just don't yet this might always change when you're viewing this at a later point of time but it's important to understand that flutter is under active development which and that's really important is a good thing it means new features improved stability and a growing echo system with all that out of the way let's wrap up this first module and let me show you what's inside this course we're pretty much done with getting started in the next course module we'll have a look at what these widgets are how we create our own widgets how they work together and in general we'll dive into all the basics of the flutter framework and the dart language you'll learn this along the way now thereafter you will learn how to debug your flutter app how to run it on different devices on emulators on iphones on android devices how to do all that because obviously testing and debugging your app is a super important part of the whole development cycle now thereafter you will learn how to render lists of content and how to do that in a high performance way and you'll learn how to render conditional content so how to render something if some condition is met that is a common scenario and you will learn how it works in this module once we're done with that it's time to dive into navigation a flutter app or any app typically has more than one page and you'll learn how to navigate between these pages how to pass data back and forth how to add tabs how to add a site drawer all that fun stuff once done with that we'll dive into user input and how to handle it how to present a text field and react to keystrokes so when the user types something as a next step i'll dive deeper into widgets i'll explain where you find all available widgets how to layout pages and in general dive a bit deeper into this whole concept and into everything you need to know about them it's then time to go back to user input but in a more advanced way you'll learn how to add forums which is just a group of inputs basically and how to validate user input is that email address really a email address we'll find out in this module thereafter we'll have a look at some improvements for the app we're building because as i mentioned already we'll build an entire app throughout this course and here we'll reflect on it for the first time and improve some things and then we'll dive into new features and specifically into models and state management this sounds abstract but by the point we reach this you'll know what i mean and this essentially means how do we work with the data in our app we'll learn it in this module thereafter we'll not just work with data on the device we're running the app but also you will learn how to send it to servers so that you can store it in databases there or how you can fetch data so how you can communicate with some backends across the web and then it's time for some user authentication because most apps require authenticated users you will learn how to edit how to add logout how to manage the user authentication status in this module it's then time for some native device features how can we get the user location how can we render maps how can we access the device camera take pictures or get an image from the gallery all questions answered in these two modules we're nearing the end then but not before talking about animations how can you fade and slide elements how can you set up your own route transition and not use the default one that will be covered in this module thereafter we'll do some polishing and bug fixing because the app is almost done and then we'll dive into platform specific code how can you determine on which platform you're running is it ios is it android you'll learn it in this module once done with that we'll learn how to add native code so how you can implement a certain feature which might not be available in flutter and for which you also don't find a third party package how you can implement that by writing your native code on your own so writing java or swift or objective c code on your own and then connecting that to flutter you'll probably not need that that often but it's useful to have that feature and it's good to learn about it i guess and then we'll publish the app we're done you will learn how to build it for production and how to ship it to the app stores you'll be a real flutter developer thereafter lots of content to cover let's dive in and to dive in let me explain how you get the most out of the course because that is really important to me obviously watch the videos but do it at your speed pause the videos if i'm going too fast go back to a certain concept which isn't clear use the udemy playback controls to speed me up or slow me down because i try to find the right balance i don't want to bore you i don't want to do a five minute pause after every sentence but obviously i don't want to rush through it so adjust my speed to your needs and make sure that you therefore get the most out of this also code along do the exercises this is really how you learn the most because watching the videos is great practicing that writing code on your own that is very useful so this is a good addition to watching the videos and i do also provide a lot of resources attached to the last lecture of each module you will find my source code and also further links now the source code is not a project you can run already but it is all the dart and flutter code we wrote all the packages we added so that you can compare it to yours or replace yours with it temporarily to find issues fix issues because most of the issues can be fixed by simply comparing code that's why i'm providing it now if there is something you absolutely can't fix or if there is something you didn't understand logically you can post questions in the q a section i'll do my best to answer course related questions as fast as i can but i also want to encourage you to help your fellow students answer questions not because i'm lazy but because this challenges you to think about the concept you thought you understood so definitely do that help our students answer questions and don't be afraid of giving a wrong answer what could happen you get corrected and then you learn more so help other students this is a great way of learning more and using the things you learned and practicing them so great learnings are guaranteed with this approach and now with that time to leave this module and to dive into widgets flutter basics and write a lot of code welcome to this module where we will finally dive into flutter and dart and how we use flutter to build amazing mobile apps in this module i'll walk you through all the core basics you have to know about flutter and that mainly is about widgets widgets as you will learn are the core building blocks you use to build your uis your user interfaces for your flutter apps and you will learn how to use built-in widgets how these are organized and also how you create your own widgets and you'll of course not just learn that in theory but we'll use them to start building our course project already and whilst we're on that we'll also dive into some other basics also regarding the dart language so the programming language used by flutter i won't bore you with a dart only introduction i believe it's much better to learn it whilst you are also learning flutter so you will learn everything you need to know about dart whilst you also learn flutter and how to build apps with it so with that let's dive right in let's create a new flutter app our course project and let's start working on it to create a new flutter app i will again use the flatter command and that command of course is still available since i installed the flutter sdk we did that together in the first course module so make sure to definitely go through that with that installed you can run flatter however not just flutter but the create command from that flatter sdk and then simply pick any project name you want like flutter course just one important note don't use a dash here or anything like that your name should be one word or if you got multiple words separate them with an underscore now with that hit enter and it will create a new folder in that destination where you're running this command so make sure you're running it in the right destination and it will populate this folder with a lot of files that make up your android and ios project written in flutter of course so let's wait for this to finish before we then open it with an ide or editor and work on the code the creation of the project finished and now you see the commands you can run in the log it prints here however i will not run them right now instead i want to open that newly created project and that created folder therefore with an ide here i opened the project with visual studio code a free ide you can use which i also showed you in the first course module you can of course all use android studio as an alternative just make sure that in both ides you got all the flutter plugins or extensions added to get the best flutter development experience now in that ide i also opened the integrated terminal which you can open with view integrated terminal or that shortcut here and in there i can now run the flutter run command since this is already navigated into the project folder however there also is another way of running this but in order to run it we need a virtual device we need an emulated device or a real device but i will go with an emulator so let me quickly start one now to bring that emulator up i'll use android studio however not to write code but to go to the tools the avd manager there there we can manage our virtual devices you see i already got a couple of devices you can always create a new one with create new virtual device on the bottom left click through all these settings choose an image you might need to download one make sure to not use the latest one but use the latest stable one instead and then simply create a device by going through that wizard once you got a device created you can select it here and started with the play button on the right and that will be the only thing i do with android studio here now i got that virtual device up and running and now back in visual studio code i mentioned that there is another way of starting our app and that is to go to debug and then you can select start debugging or use the shortcut or start without debugging or use that shortcut this will also launch the flutter app on the connected virtual or real device and you can choose if you want to go into debugging mode something i will cover in a separate module or for now simply well start the app you might be prompted to select an environment and you should have the option of dart and flutter if you installed the extensions for these tools so select dart and flutter and now this enters the debugging view you can always go back with view explorer or that shortcut to go back into that file explorer and now it will build your flutter application and ship it to that virtual device so let's wait for this to finish on the first startup this can take a while and by the way you get this control panel here at the top where you can always restart it or quit it or pause it and later again we will learn how to use that debugging tool for now let's wait for it to start and here it is so this is the starting application we are starting with and this is the application will not work with we'll write one from scratch indeed so let's do that in the next lecture and the lectures thereafter so we got our flutter app up and running and keep that process running here for now go to the main.dart file in the lib folder and delete everything in there because i want to start with you from scratch to really teach you how this works and how such a flutter app starts now before we start writing code in there let me quickly walk you through the other folders and files we got here the idea folder is a folder for android studio with some basic config don't delete it but you also don't need to work in that no matter if you're using visual studio code or android studio the android and the ios folders are important because they hold the native code and an important part of the app building process which you need for well building an app for these platforms you rarely work in these folders though from time to time you have to and i will show you when that is but these are required since they hold source code which is used by that build process together with your flutter code to build these native apps the build folder is a folder you can ignore for now and there you find your build source code in the end this is required by the build process the lib folder is however where you write your entire flutter app so this is the folder we will work in this is the folder where we write our dart and flutter code the test folder would allow you to write automated tests but this is not something i'll focus on right now and the other files here are basically configuration files for git in case you're using this it's a version control system then a couple of configurations for the sdk for the flutter sdk you don't need to change anything there the pubspec.yaml file configures your overall project and its dependencies though and this is an important file there we will later add third-party packages we're using like for example when we add the camera that we can use the device camera and we will also revisit this from time to time to change certain configurations like for example add static assets for now leave the file as it is and let's go back to the main.dart file and in here i now want to write some basic code to start our application the main.dart file is a very important file and you should not rename it because flutter when building your project will look for that main.dart file and in that file it will look for a special function to execute to essentially start your app on the device so you can think of this as this entire dart code will be compiled and bundled with the android or ios code so it will be bundled into one application which is shipped to your native device and on this device in this app then the main.dart file or one specific function in there will be executed first and that function which it's looking for in the main.dart file is also called main now a function just in case you're relatively new to programming is essentially a block of code you define which doesn't execute immediately but which needs to be called to be executed a function in flutter is created by typing the name like main and this specific function which flutter is looking for at app startup has to be named main in general you can name functions how you want but this one has to be named main since flutter is looking for it so you type the name of that function and then parentheses and here you could specify any arguments parameters this function would receive so data that function can use inside of its body the main function however doesn't receive any now the function body is the code which should be executed and you define it by adding curly braces opening and closing the code in here will be executed whenever the main function is called and if you were to call it you would call it like this simply by typing main this would execute the main function here however for this special function we won't call it flutter will do that for us automatically which is why you have to name it main and why it should be in the main.dart file now in here you basically start your app which means you start rendering the user interface all the heavy lifting you hook it into the operating system and so on that is done with the android and ios files you could say but to bring something onto the screen you have to do something in that main function and that something is that you need to attach a widget to the screen now what is a widget flutter is all about widgets widgets are basically building blocks user interface components you could say with which you create your well user interface so what the user sees on the screen if you have a flutter app so a mobile app running on a mobile device it typically consists of multiple widgets like the app bar the navigation bar at the top maybe a header image and maybe a list with a couple of list items all these things here are separate widgets and they often contain other widgets like the list here it contains the list items as child widgets the page itself is even a widget the scaffold widget which we will also create on our own throughout this course and even the entire app is wrapped in one root widget so widgets are really just these user interface components but they're not just about the visuals they all contain logic for example a button widget would not just display the button but also you would define what should happen when that button is tapped so that is how you think about flutter you build flutter apps not by doing all the heavy lifting of hooking it into the operating system but by creating user interfaces and the logic that belongs to that user interface things like selecting items uploading things to a server fetching data from a server and rendering it to the screen that is what you do with these widgets and therefore you can think of your flutter app as a tree of these widgets you have one root widget as i just said to wrap your entire app and then you might have widgets for the different pages of your app between which you can navigate around and then you have nested sub subwidgets for list items for user input forms things like that so you really build up such a tree of widgets and you do all of that in code so with dart the programming language now that's the theory not super clear right now i guess so let's see how that works and how we create such a widget right now our flood wrap isn't doing much we have that main function and it will get called for us but we don't know what to do in that main function now i just mentioned that the entire flutter app is built up of widgets so maybe we should start using such a widget so for that we actually create our own root widget this is how you typically start and for that we will use another dart feature classes with the class keyword classes are a concept you might know from other programming languages too dart is an object-oriented programming language which means everything is an object and an object is simply just a data structure classes allow you to create blueprints for new objects so that you can say what should be inside such an object which properties so which data fields should it have what can you do with it this all goes into such a blueprint and with flutter you will work with a lot of classes which ship with the flutter framework but you also create your own ones and if you create your own ones you do that with the class keyword and then you assign a name to the class now class names typically start with a capital character and then you simply well type the name like for example my app at the conventionist you only use one word but if it actually consists of multiple words you capitalize each word in there so my app would be written like this not with a dash not with an underscore now that is a class and now you can add features to it features are two kinds of things you can add functions to classes they will then be called methods and you can also add variables to functions now i haven't covered variables yet but you probably know it from other programming languages variables are simply little data structures like for example a name if you have something like this well name would be a variable holding max as a value and if you add such a variable to a class it's named a property but that's some theory which will become clearer once we continue there is one other more important feature we need to cover right now we want to create a widget and a widget will be an object which is why we create a class to define how that object should look like however flutter of course doesn't know if a class created by us is something it can use as a widget because as you will learn it needs certain features in a class to be able to use it as a widget so to draw it to the screen and therefore our class has to extend something this is a concept called inheritance and you implement it by adding the extends keyword here this allows you to inherit from a base class so from another class and this means this class will receive all the features of the class it inherits from and it can still use or add its own features and since we then inherit from a class flutter also knows that it can safely use objects based on that class to draw something onto the screen now the thing we extend from therefore has to come from the flutter framework and that is where we implement another feature imports in this file we write our own code but we want to use code which is exposed from the flutter sdk and framework and for that you add an import statement by typing import and then the path to the file you want to import from because start is actually a modular language which means you split your code across multiple files and in this case we're using code which we didn't even write but which is stored in a third-party package in the flatter framework package we import code from such a package by typing package between the quotation marks and then a colon and then the name of the package which is flutter in our case and then flutter actually consists of multiple sub packages or files you could say and you target a file by adding a slash and then the name of the file in our case it will be material.dart this imports this package from the flutter framework and this is available because we have a flatter project here now we can extend a feature which is exposed from that package and that is the so called state less widget there also is another widget the state full widget but we will use the stateless widget for now simply type it like this and this is available because of this import now this class is based on the stateless widget and therefore we can almost use it as a widget to draw it onto the screen one important thing is missing though we'll dive into it in the next lecture so we're extending from stateless widget and therefore i have a valid widget here almost we can already see that there are some red squiggly lines under my app if we hover over my app then you should see this error message that a concrete implementation of stateless widget build is missing now that's not super clear but it's telling us that something is missing in a class something named build well to be precise it's a method named build so let's add it by typing build parentheses and then curly braces this is how you define a function and if a function is inside a class you simply call it method so now we have the build method in this class and now only the build method has red squiggly lines not the my app anymore the build method is required because if we tell flutter to use an object based on this class as a widget it can draw onto the screen it of course needs to rely on this being drawable you could say and flutter will try to draw something by calling the build method on an object where you tell it that it's a widget so if you pass an object to flutter to draw it onto the screen flutter will always call a build method on that object which is why you need to add it to your own widgets now the build method actually takes arguments data which will get passed into it by flutter because flutter will be the one calling the build method the build method takes one argument to be precise the context context is basically an object with some meta information about your app and the position where this widget is drawn in it for example will contain information about the theme through the colors used in our app for now let's simply ignore it and let's add something to the build method because this method needs to return something which you do by adding the return keyword now this is important because flutter will execute the build method and then it needs to know what to draw onto the screen and that something needs to be returned therefore just calling this will not work instead flutter waits for this method to return something so add the return statement and now the question just is what do we return here there is a very important rule a widget always needs to return another widget in the build method until you reach widgets that ship with flutter now we can use a widget that ships with flutter the material app widget this is a special widget which is used to wrap your entire app so this will actually give you abilities to set up the theming for that app it will also add a navigator which allows you to switch between different pages and so on so this is your core root widget which you use in every flutter app you create you return it in your own widget which will be the top most widget therefore and now the material app widget can be configured to do something to really draw something onto the screen because right now we just created our app but there will be nothing to be seen for that we can pass data to material app by the way please notice the parentheses here material app like this without the parentheses is a class imported from the flutter material package with the parentheses we create an object based on the class you could say we construct an object we call the so-called constructor method of a class every class has one even if you don't explicitly define it so we're executing this and therefore what this gives us is a new object based on that material app class you might also see the syntax where you add a new keyword in front of that as of dart version 2 which we use here and which is the future of dart you don't need that anymore now i mentioned that we can pass information to material app let's do that in the next lecture we already covered a lot of ground but we still don't see anything on the screen for that we need to tell material app which is the wrapper for our entire app what to do what to draw onto the screen and for that you can pass arguments to material app our build method expected an argument the constructor of material app does too it expects so-called named arguments which means you first add a name for example home is such an argument then a colon and then the value you want to pass for that argument the alternative are positional arguments something we're using here there we don't assign a name instead the first argument passed to the build method will be treated as context in this case so it will be stored in that parameter the named argument case is something we'll all use throughout the course material app uses it there we target an argument named home and we pass a value for it and home actually requires another widget this will be the widget which is drawn onto the screen when the app loads here you typically use a so-called scaffold widget another widget shipping with the material package here scaffold creates a new page in your app with a nice white background that can also be changed by the way but with a background with the ability to add a app bar and so on and scaffold therefore also needs to be configured by passing data into the constructor because this will create an empty page to pass something to that page we can target specific arguments here which we passed to scaffold one of them is app bar by writing app bar colon you can add a widget which will be rendered as the application bar the toolbar at the top of the screen and here you guessed it we again need a widget you remember everything is a widget so let's add a widget here and thankfully there already is a built in one app bar like this this creates an instance based on the app bar widget and this now again needs configuration what should go inside of that app bar there is a title argument and if you're wondering how do i know that this has a title property you can hover over app bar and you will see some documentation on which arguments it accepts and there you see the title and you also see that this also requires a widget but you can also use another approach you can put your cursor into the argument list here between the parentheses and hit control space and then your ide should give you this auto completion where it offers some well code snippets that can be used here and there you also see if you start typing that there is a title argument you can target and this as you saw when i hovered over app bar requires another widget which is rendered as a title here we'll use the last widget of this chain and that will be the text widget text is a widget which then takes a string as an argument now this is a positional argument we don't define the name instead we just pass a string and then this will be extracted inside of the text widget in the first argument in the argument list so here we pass a string which should be displayed as text like easy list because that will be the name of the app we built now that was a lot of work and it might not all be super clear yet especially knowing that these widgets exist can be confusing but throughout this course you will get a feeling for which widgets exist and of course i will also show you where to find them all for now let's take this as it is and i don't know about you but i think that code can be written in a bit of a more readable way now if you write that code like this and you have that trailing comma here at the end after each parentheses set except for the last one you can use a feature provided by all ides in visual studio code you can find it by going to code preferences keyboard shortcuts and then in there search for format document this is a command which you can rebind or use as you find it here which you can execute in your code to automatically reorganize it and make it more readable now this looks much nicer in my opinion we still wouldn't see anything on the screen though and the reason for that is that we created our widget but we're not mounting it to the screen now let's do that last step by going back to the main function here we're not executing any code in there time to change that we need to run a special function here a function provided by the material package we import it's a function called run app my ide helps me and automatically suggests it and run app takes an argument and that argument has to be a widget so let's create a widget here and we will use our my app widget which then wraps material app scaffold and so on so use your class name here and then add parentheses to construct an object based on that class because classes are blueprints you create concrete objects based on them by executing the classes just like you execute functions with that save that and now it will try to hot reload that into your running emulator and you should see something like this if it fails for some reason quit this and restart it without debugging if you make fundamental changes like this one it can break most of the time though it should automatically reload if you just save the code and then you should see this and now this is our own app with our configuration you can see the app bar you see the white background which is coming from the scaffold the page which is created and the overall app is wrapped by the material app widget now again don't worry if that is a lot of new information to digest getting started is hearted but we will practice and practice it so that this will become clearer now let's take a step back and before we continue working on that let me walk you through what we did here and actually how we can enhance this code from a dart so from the programming language we're using perspective we created our first very basic flutter app and we do this by calling run app in this important main function in the main dart file where we construct an object based on our own class which essentially calls the build or has the build method it will be called by flutter where we then return our widget tree now we use dart to write all of that so the import statement the function syntax the class this all is dart and dart actually is a typed language which means you should define the types your methods use or your variables store this helps you with development because your ide can use that information and warn you if you try to save a wrong type and it will always be picked up during the build process and also potentially yell at you if you're using something incorrectly now what do i mean with that for example the build method i mentioned that it has to return a widget and we don't see any errors here because dart is actually able to infer the type since we return material app which is a widget dart knows that the build method will eventually return a widget however we can be really clear about this by adding the widget word in front of build now widget is a class however not instantiated but instead just a class name which then acts as a type in dart which means this to be precise is a class defined by the flutter package in the material package and it means that widget is now what we expect to return and build and if for some reason we wouldn't return this year the material app let's say we comment this all out and we instead return a string here then you would see that we get an error and we see the return type string isn't a widget as defined by the method build so we would get a warning and if i save this it wouldn't even recompile because it recognizes that our code is incorrect so adding these types allows us to write cleaner code it allows us to avoid errors now we can't just define a type in front of the build method we can also be very clear about which type this argument will have again it's able to infer this because build actually is a method already defined by stateless widget but then marked as has to be overwritten but we can be very clear about that by adding the type in front of the argument and that's the general theme you add the type in front of your function your variable your parameter to define what this will hold here this is actually of type build context another class provided by the flutter material package so now we're very clear about the context being of type build context and it doesn't change our app but it ensures that we don't make dumb mistakes and it also helps us with the ide because if i now type context and then dot to access one of its methods or properties i get suggestions that belong to the build context type so i'm not getting any suggestions that wouldn't exist anyways we can also be clear about the type the main method returns now you might say it doesn't return anything and you're right and in this case you add a white in front of it to indicate this method doesn't return anything and it shouldn't if we now do add a return statement and return anything but nothing this returns nothing so this would be valid but if we return a string let's say then we again would get an error that the return type string isn't avoid and void just means empty now you don't need to return nothing like this you can't just omit this line and now the code behaves exactly as before as you can tell but it's better code using types is strongly recommended and allows you to write cleaner code it's not all i want to discuss about the dart language though types are a crucial feature and we will use them throughout this course but there are two other things i want to mention right now the first one is the way we write this function if you have a function which only contains one statement like this one does you can absolutely write it like this nothing wrong with it use this style if you like it there is a shortcut though a shorter notation and that's the fat arrow notation you use it by removing the curly braces and then you instead write it all in one line but you separate the name and argument list from the function body by using an arrow an equal sign and then a greater than sign and now this is the equivalent to the function we had before it's only valid if you have exactly one statement but this is also something you will see throughout the course this shorter function notation and last but not least there is something special about the build method which we also have for some other methods throughout this course this is actually a method for which stateless widgets requires us to overwrite it and we can therefore add a special annotation here it's not required as you can tell everything works without it but you can add an annotation by adding a add sign and then here it's the override annotation what this does is it simply tells dart and flutter that we deliberately overwrite a method which is also already the find and stateless widget now it works without that but if we're working in a team of developers this makes it very clear that this is a method that actually overrides a method defined by this widget and that makes our code easier to read with all that if we save the application it will look and feel exactly as it did before but now we got our well cleaner code back to flutter then let's add more to this app because right now you could certainly argue that it's not looking that exciting let's continue working on our app right now we only got that app bar which is nice but not that awesome remember that the scaffold widget was used to create a page and we cannot just add a app bar there we can also add other arguments and let's say again use that control space trick for example a body that is actually what's displayed well on the page itself below the app bar in all that white space here the body you guessed it also expects a widget which you can see if you hover over it here you can see the type you also get a short explanation about how it works and what it does and therefore let's add a widget here now we could again create another widget on our own and then add this here but ultimately you'll always end up with a tree of widgets built into the flutter material package your own widgets which you use a lot will also well be composed of either other which is built by you but finally somewhere at the end of the chain you will be using widgets shipping with flutter because these are actually then translated to native user interface components so that is why you always will end up with flatter built-in widgets somewhere down the road for the body here let's say we want to add a card you know this card look from material design apps well if you don't you'll see it in a second you can add it by using the card widget and as you were probably guessing this is all the shipping with the flutter material package so all is unlocked with this single import the card will give us this highlighted content look with a slight drop shadow and so on and this card again takes a couple of named arguments you can assign like for example most important the child which also is a widget which you can see here on the right so let's add child and that is essentially the content of our card so what we want to have inside of it now let's say we want to have two things in there an image and also a title below the image now to have two elements in there we use a special widget all the shipping with flutter the column widget again takes some arguments which you can see here and it accepts for example children now the difference to child should be clear child is one widget but column actually has multiple widgets which will be positioned above each other so from top to bottom let's hit enter here to enter a new line to make it a bit easier to read now here we can define all the widgets again that should go into the column now if you're wondering what this here is this strange angle brackets widget thing well that's a so-called generic type it's an additional annotation added to the array here to make it really clear that this actually will only hold widgets and i already mentioned it this thing with the square brackets here is called an array it allows us to add a list of data instead of a single data piece column card app or text scaffold these are all just single objects now we can add a list of single objects which will be stored in this children argument that is what we do here and there we can add two items now in that list separated by a comma let's use an image widget unsurprisingly also shipping with flatter material and let's leave it like this for now in the second line let's add a text image again to display some text let's name this one food paradise for now and the image will be an image that holds some food you can find the image attached to this video and let's now create a new folder here in our project which i'll name assets now the name is up to you but assets is a good convention since this will hold static assets off your app now you can find the file attached to this video the food.jpg file which you can just drag and drop into the assets folder this image here now we want to use that image and display it here inside that image widget now to unlock this file we have to inform flutter about it because just dragging it into a folder of this project isn't enough instead we now need to go to the pubspec.yaml file here and there if you scroll down a bit you should find this commented out part where you can add a special assets key which you do by just removing that hash symbol and then you can define assets of your application by removing that hash here and then inventing this leave the dash here that's important it like this and then here you point to the file you want to add in our case it's in the assets folder and there we have the food dot jpeg file with this added and saved you can now use that asset in your project and you see it already updated our project to import this basically so that this will be included in the bundle shipped to the device and now we can go back to the main.dart file and use that image and for that we'll use a special constructor of the image widget we haven't seen this type of constructor yet but there actually is a special constructor you can use by adding a dot after widget but before the parentheses and then asset this is a special type of constructor which will create an image widget that is already configured to load a asset and you now you pass that asset to simply as a string and then the name of the asset the full path to be precise so assets slash food.jpg now if you save this it should hot reload and now if you go back to your app you should see something like this an image and some text below it and this actually is all sitting on a card which takes the entire width and height right now but you can see that slight drop shadow here at the bottom now it's not the final style i want to have but it is a huge advancement and now we got some body here and hopefully you got more practice with building that widget tree you also learned about some other widgets and whilst you already learned about a lot of new widgets these are all core widgets and there are not that many our core widgets left as you will learn for now let's reformat the code with that handy shortcut again and let's see what else we can do are you wondering how i know all these widgets well there is an official flutter documentation which provides an overview on flutter.io you can click on get started or the look and feel of this page might of course change but you should always find some docs area like with the docs link up here and even if this page should change you should find a link to a widget's catalog here or on the left widget catalog if you visit it you get an overview over the widgets flutter ships with organized by categories and the most important category is the basics category but even more important the material components category if you click on that you see an overview over all the core material widgets and i'll come back to what that material thing actually is these are things like the app bar which you saw but these are also then things like the root material app widget or if you scroll down buttons inputs which we'll see dialogs which you can display information displays like tooltips the card here and then layout widgets and if you go back one step and go to the basics widget category here you see things like the column row a container widget which we'll see the text widget the image widget and you can always click on documentation to learn more about it how you can use it for example here's that image asset constructor we used and for some of them not for the image unfortunately but for some of them you also see short example snippets here and even that might look like a lot but this is a great way of getting to know these widgets to navigate around and no worries we will use plenty of them throughout the course so that this will all become much clearer now that you know where to find all these widgets let's continue working on this app thus far we're just displaying our card here it takes the full entire space and that's not too exciting i'd say so time to change this let's give the user the ability to add more and more cards and therefore products as it will be by the end of this course cue this well list of cards which we don't have yet but which we will create now for that we need a list of cards first of all and we can create such a list with the column widget here of course so let's add column like this children and then this array you can't omit this angle bracket widget thing but you can also add it but i will omit it here and also close the square brackets after the card here also add a parentheses here to close that column and then let's reformat the code and now we have a list of cards if we now reload you see the card doesn't go all the way to the bottom but it ends after its content which is the behavior we want now i want to be able to add more cards and let's say for this we add a button we add that button above our other cards here so we could add a button with a special widget the raised button widget for example this adds a raised button which is simply a button with a background color now the raised button needs to be configured so let's see how we can configure it for example and most importantly it has the child argument here there we add a widget which will simply define what's inside of the button this often is text but it could also be an icon for example here i will use the text widget again to add some text and the text i use is add product this will now add such a button however we also need to add one other important argument and we can see that we got some green squiggly lines which tells us that the parameter on pressed is required and we can add it by adding on pressed and this now actually expects a function reference so we can add an empty function here like this and this is a so-called anonymous function it has no name as you can tell it's just the argument list and then the function body both is empty which leads to this looking a bit strange we will populate it with live soon for now this is just an empty function that does nothing that will be executed when we press the button if we now save that and let it hard reload we see that button at the top here and we can click it and we actually see that ripple effect so this is working now this button is sitting at the very edges of our page here we can change this by wrapping it with another widget which you saw in the widget catalog the container widget the container widget takes a child and that child will be our button so let's grab that and add it here reform it and the container widget also allows us to add a so-called margin the margin is simply some space around that container so around the button therefore we added by using another class provided by the flutter material package the edge insets class which has a all constructor called with dot all where you then pass a number a float to be precise which is a number with a decimal place which defines how much space you want to have in all directions for example 10.0 pixels and these will be pixels automatically adjusted to the device pixel density we now saved as you see there is some space around the button obviously the button doesn't do anything so let's ensure that it does something we added this button but if we click it it's not doing anything because our function here is empty now this button should actually add new dummy products for now which we then render below the button by adding more and more cards here this of course for one raises the question how do we add more cards here but obviously another important question is how do we actually create new cards upon a button press well in this function here we want to change some data which actually then is dynamically turned into a list of such card widgets what you typically would do is you manage a normal list of data which you might also fetch from a server and which we will fetch from a server later in this course and then whenever build is called and it will be called by flutter when the app is first loaded or when some of your data changes that's the important part then we want to use the data we're handling in on pressed and recreate a list of cards here which changes therefore with every button press this can't be done in a stateless widget though a stateless widget is a very simple widget that does one important thing it's able to accept external data we're not doing this here yet but then it simply has a build method that builds some widget tree it can't work with internal data it can't change such internal data therefore and it will not recall build if some data changed because it doesn't work with internal data it will only call build if it is created for the first time or if some external data which it receives changes now since we can't handle data with stateless widget it's the wrong widget for our purposes here therefore we need a state full widget state can simply be translated as data you're working with data which you store in the widget and which you also plan on changing that is state now you already see by changing this to a state full widget we get red squiggly lines again because we're missing a concrete implementation of stateful widget create state a stateful widget is indeed constructed different to a stateless widget let's close the parentheses here to close the class definition for now of course our code is now invalid and let's add this create state function by the way my ide already helped me and automatically completed that now this is how the create state function should look like as you can tell it returns a state object and here again we get these strange angle brackets this is called a generic type it allows us to pass extra information to another type and here it tells us that the state object and the state class by the way is coming from the flutter material package that this state object will belong to this stateful widget or to a stateful widget in the end because the way you work with state in flutter is that you actually create two classes which will work together and this is kind of the connection createstate will return a new state object with a state that is configured to work with a stateful widget let's create that second class here you should call it underscore my app state now the underscore is just a convention for classes that should not be usable by other parts or other files but only from inside this file and flutter will actually respect this if you later work with multiple files you will be able to import my app into your file and use it but not underscore my app state let's ignore this for now though this is something which will become clearer later let's instead extend something again because since this should be a state object understood by flutter it's not surprising that you need to extend something offered by flutter you need to extend the built-in state class enter an opening curly brace thereafter and leave your build method here because the state class provided by flutter actually has a build method now we just need to tell flutter that this myappstate class belongs to this myapp widget and we do this by adding these angle brackets after state again and here we add the name of the class to which this state belongs and now the connection between the two classes is set up now myappstate as i said keeps the build method and my app needs to return my app state now so return underscore myapp state and instantiate it by adding the parentheses now the stateful widget creates a new state object based on our own class which extends state and has the build method and flutter internally will call that build method for that stateful widget and this is just a setup you have to memorize this is how stateful widgets work in flutter the question that remains of course still is how can we now actually work with that and change our list of products let's have a look at this in the next lecture we created a stateful widget but the question is how can we now manage and change data inside of it we do it in a very simple way we add a so-called property to the myappstate class here for that let's add something inside of the class definition let's add a property named products the name is up to you though now products will be a list of let's say strings for now so just a list of text since start is a strongly typed language let's add the type in front of it and the type is list this is a type shipping with dart it is what i called an array earlier it's called array in many other programming languages in dart it's just a list something like this column is a list here this is a list of widgets now list is a generic type so that we can define a list of what it will be and this should be a list of strings so let's add string as a type here and now products has to be such a list of strings this defines the property but it's empty right now now i actually don't want to start with an empty list instead let's create a new list by adding an equal sign and then on the right side the square brackets and in there let's add our first item now let's name this food tester a food tester obviously a bit of a more creative product i'm imagining some tool which we can point at our food to test its ingredients test if it's past its time if we should still eat it something like this simply a bit of a more fancy product we'll go back to more normal products throughout the course though but let's not worry about the product for now now we want to render that to the screen by converting it into a list of such cards down there and we can do this by going down to our widget tree here and remember that our children here that's a list of widgets still instead of using card like this i can reach out to my products now by the way products this is now a property of our class since this is a class only used in that file and this is a property only used in this class you should also add underscore at the beginning of the name that's just another convention so let's use products now like this down there by the way if you're coming from another programming language like javascript you don't use this dot product or anything like that you can directly reference it and here you can call a method on this array or on this list by adding a dot and then there for example is a map method this allows you to transform every element in that list into a new element and return it and we would return it here as a new value in this list in our column map takes a function as an argument which holds the transformation logic it will receive the element as an input and then you can use the fat arrow notation here to define what should happen with that element and here what should happen is that it should create a card based on that element so let's grab card here let's add it in here remove that comma at the end and now what this does is it takes every element in the products list and converts it to a card and now we can also output the text which is actually stored here because remember element will just be a string because our list is a list of strings so if i go down there i can type element here referring to this element and it will output it one important note though you need to wrap element between parentheses so this is the argument list for the function this is the function body it's one statement it spans across multiple lines but ultimately it's just the creation of card so it's one statement and we pass element in there and we output it as text now we still have red squiggly lines there because this actually returns a type iterable and we need a widget here now we can't convert a list into a single widget so what i will instead do is i will add another column so we already have a column with a container and now with another nested column which is absolutely fine so another column widget here which will have children and the children here that should be our list of cards so let's grab that code and replace that widget array here with that products list this still won't work though we need to convert it to a list by calling the to list method here and now with that we're done now we added a new column with its children argument and there we have our products which we map into a new so-called iterable with our product cards and then we call to list here to convert this to a list which can be used now if we save this and we go back we again see our card and now we made a huge step forward to connecting this button to adding more elements as you will see so we spent a lot of work on this strange conversion and i will already say that there is a better way of rendering such lists by the way for now let's stick to this one and let's make sure that our button now finally does something this button should now change products and i said that when this data changes build will be executed again and then it will actually again take the updated products list map it into an updated list of cards and render this to the screen so theoretically if we change products we should also get more cards so what we can do here is we can reach out to products and then there is the add method to add a new value since this is a list of strings we can add a new string for now a hard coded one so we worked with our awesome food tester certainly a creative product now let's be even more creative let's take the advanced food tester our super tool which allows us to find out even more helpful information about our food add a semi-semicolon at the end if you save this and you add product nothing happens right the reason for this is that this is not how it works it actually will change products and i can prove this to you by calling print products here this is just a debugging function which will print it to the console here at the bottom and if i now save this and i click this one time you see at the bottom there is food tester and advanced food tester yet we only see one card here the reason for this is that updating data like this will change it but flutter won't recognize it it by default doesn't watch all your data fields here and then re-render whenever some of them changes this would be very inefficient instead you have to tell flutter that you're changing the data in your stateful widget or put in other words that you're changing its state and you do this by calling a special method the set state method it's provided by the flutter package and it requires an argument which is also a function and in this function here you execute the code which should change your data and lead to a re-rendering of the app so here i called products ad don't need to print anymore and now if i save this you will actually see that automatically you see that second card and a warning that it goes beyond the scope of your page this however is just a feature of hot reload it essentially calls set state for you so let's do a full reload and you can do this with control f5 this will restart the app from scratch and now if i click add product you see the card appear with that warning and i did mention that there is a better way of rendering a list because this list by default is not scrollable which is the issue here but at least it worked at least a new card was added and whilst we can improve that list regarding the scrolling behavior this already shows us how we can work with stateful widgets now let's mix that let's create another stateless widget and let's see how these widgets can interact before we then of course later also fix that issue regarding our sub-optimal list we learned a lot about the widget basics now it's all the time to keep on practicing that and one thing you typically do in flutter apps is you don't put all your code in one root widget like in the stateful widget or its state to be precise but you split your app into granular pieces into multiple widgets and you also distribute these across multiple files so that each widget and each file stays readable and maintainable so how can we do that with this widget well we can split it up we got of course a stateful widget which we need to manage our cards our products but if we are honest this stateful widget is really just starting here where we render that column of cards the entire rest the material app the scaffold the app bar and even the button here that is just a state full widget it doesn't change yes the button is the part which triggers the state change but we probably can do something about this too but in the end the button itself does not change so let's split this up let's create a new file here in the lib folder which should be named products.dart now the file name is up to you but the convention is to write it all lowercase if you have multiple words separate them with an underscore and of course always end with dot dart because that's the programming language extension now in that products.dart file i want to render that list of products so that column here so we can essentially grab that column make sure to select the right code here and cut it not the column which also holds the button but just the column which holds our cards let's go to the product start dart page and let's create a new class and i'll name it products like this now i need to extend something which is imported from flutter again and that's important you need to add that import to every new file because every file works standalone so to say so just because you imported the flutter material package here doesn't mean that you don't have to import it here again so let's import package colon flutter slash material.dart now we want to create a widget here i simply want to outsource that column logic into this widget the question is do we extend a state full or a state last widget here you can build it in both ways however actually the more elegant ways to use a state less widget here and now this can be confusing because i just said that this column card is the only thing with changes and that's correct but the change of data actually happens somewhere else you could argue the products widget here just receives a list of products and that list might be changed but it can be changed outside of that products widget here let me show you what i mean let's first of all add that build method i'll take some ide help here type build get that auto suggestion and hit enter and it gives me the entire method and in here i will return my cut code so the column with the products and so on and obviously products doesn't exist here that is something we'll have to fix but this is the widget code i want to use here and that comma has to go at the end the question just is how do i get products into my products widget and that is what i meant this is data which we can actually receive from outside so from the place where we will eventually use our products we can do this by adding a so-called constructor here we add a constructor by repeating the class name and then adding parentheses and now you can add curly braces to define which code should run whenever this widget is created the constructor l also has some other features though and we need one feature only it should be able to accept a list of products you can name this argument whatever you want but i'll name it products and then i want to store it in a property of that products class so that we can use that property down there for that i'll use i'll add a new property here my [Music] products property which will be a list of strings again that hasn't changed and it's uninitialized initially so there is no value assigned but then i want to store products in this product's property and dart offers a convenient shortcut if i type this dot products then it will automatically take the incoming argument and store it in a property with the same name so in this product's property that's just a shortcut now we need to add a semicolon here after their constructor and now this will allow us to pass data into products through its constructor bind it to products here and then remove the underscore because it's now just called products like this so now we have a widget which theoretically is able to get products and output them but we're not using it and we also have green squiggly lines here now it tells us that everything in this class should be immutable which means not changeable because it wouldn't be able to react to these changes anyways it's a stateless widget and we specifically have to mark this property as unchangeable we do so by adding a special keyword in front of it the final keyword this is a dart feature which simply tells dart and therefore also flutter that the value of products will never change it will be initialized once with the value we get from the constructor but thereafter we will never change it it would have worked without the addition of final two but just as with types this leads to cleaner code and makes it very clear that this is a value which is only set from the outside and if new data is passed in from outside it will simply replace the old value not change it replace it and then call build again with the replaced value this is how it will work this is our products widget now in the next lectures we'll start using it we created that product widget let's now go back to the main dart file where we removed that code for rendering the cards here i now want to also strip out another part to put it into its own widget again and that will be this container with the button i will create another new file which i'll name product underscore manager.dart the name is up to you but in there i plan to well manage my products so again let's import package flutter material that is the package you work with the most as you can probably tell by now let's create a class which i'll name product manager to fit the file name but again written in the form you should write your class names capitalized words and then here i extend a state full widget because here i now plan on managing my list of products and changing it the stateful widget needs to create state method which i add with the help of my ide and therefore we need to add a second class the underscore product manager state class which extends state which is a generic type linking to product manager this has the build method again added with the help of my ide and then in here i want to return so in the build method i want to return that code i just cut out with the container here here i indeed also want to copy and paste my products list so let's remove it from my app state and add it to the product manager state here this is the list which we change with a click of the button still so this hasn't changed and remove that comma here at the end reform it this is now our product manager state now of course we should use it we should create it here so return product manager state that already is it this is the product manager stateful which it created however it's of course missing our products widget we're still not using that i want to use it here in the product manager below my button here of course so let's actually return a column here instead which has children one of them in a list marked with square brackets one of them is the container after the container we close the list and the column widget but we add another element after our container and that should be our product widget for it to be usable in this file we need to import it now it's a good practice to separate that import from package related imports so separate imports from your own files from the imports pointing at package features so here i will then import and to import something from your own file you just add dot slash if it's in the same folder or if it's in folder one level above you add dot dot slash to navigate into there in our case it's in the same folder dot slash and then products dart with the file extension like this now i'm importing product start and now this allows me down there to use products like this so now let's use products and if we have a look at products we expect to get a list of products that should be rendered here now that of course is our underscore products property here which we change with a click of a button so we pass that down to products and since we call set state when changing it it will re-render that build method here and therefore also re-render products here and pass down the updated products list which will lead to this build method in the product widget being called again too so this is our product manager with that changed let's go back to the main dart file and let's use the product manager there now we're not handling any state in the main.dart file anymore so we can turn this stateful widget back to a state less widget remove that create state method remove the state myappstate class down there and just add the overwritten build method to the my app style widget again the body is no longer a column instead here i now simply want to have my product manager for that let's import it pointing at the file like this let's import product manager create an object based on it by adding parentheses and now if we save all of that and maybe let's do a full restart with ctrl f5 to remove all old state we might have loaded we see the same app as before and it behaves as before also with that error still but now we have a cleaner structure with multiple files multiple widgets which would also be reusable which is great but which also make your code easier to manage because now each widget is relatively short and easy to understand and this is how you want to structure your flutter apps you build user interfaces with these widgets with these user interface components and you wanna split them up across multiple files you wanna work with stateless and state full widgets use as many state less widgets as possible and have a few selected state full widgets which actually manage your data and change the data like our product manager does in this case we spent a lot of work on building these widgets and we're almost done with the core basics there are two more things i want to dive into and one of them is what if our state full widget also wants to receive some data from outside let me give you a concrete example we got the food tester product we're starting with in the product manager now of course we can set it up like this it's just some dummy hard-coded code anyways but let's say we actually don't want to start with it but we want to get that starting data from outside because we want to define our initial set of products we're starting in the main.dart file maybe because we fetched it from a server here and we will do all these things throughout the course we'll reach out to a backend and so on so we want to send that data into the product manager from inside our main dart file we learned how we can pass data down we can pass it as an argument like we pass products to our product widget and we accept it in the receiving widget by adding the constructor function we can also do that with the product manager here the product manager and here it's important that you use the class that extends stateful widget not the state but this one is the class you use in your widget right here we use product manager so that you use this and there you add a constructor by repeating the class name and adding parentheses now this constructor here should now be able to receive an argument in our case the starting product let's say now i want to store that and i will store it in a property which is of type string starting product and again we can use this trick or shortcut with this starting product to assign the value now we got the green squidney lines that this should be an immutable class wait what isn't it a stateful widget stateful widgets are all about having state where the data can change right that's true but it changes in the state class not in the widget class the two are linked together but it still is a technically separated object so the widget is a technically separated object so here we actually have to add final starting product is something we receive from outside and the only way to change it is to recall build in the parent component and therefore recreate that product manager pass a new value for starting product into it and then assign that new value here that's all fine the question just is how do we use that starting product now because we got in the product manager but we needed the product manager state now you could have the idea that you pass it down to the constructor starting product and then you add the constructor for product manager state here and you store it here in another string that would work but it's very cumbersome creating that chain to pass down a data not that great instead there is a useful keyword a property which is provided by the state class which remember is provided by flutter material so a helpful property which actually gives you access to all the properties of the widget that belongs to the state because i told you they are linked together and flutter does some behind the scenes work for you that special property is named widget and it allows you to access the properties of your parent widget or of your connected widget like starting product the problem just is you can't use it here when you're initializing properties you can only use it in methods of the product manager state simply due to the way that widget property is initialized that's no problem though because that is the second thing i wanted to show you the state object or class also allows you to implement some special methods the init state method for example again i let it autocomplete by the ide and it has one interesting thing it's also overriding a built-in method of course but the interesting thing is that super thing super always refers to the base class you're extending so to the state class here and it simply calls in its state on that base class to make sure that it is called there even if you overwrite it so don't delete that and make sure to call it at the end after you executed your code init state will be called whenever this state object is created is initialized so whenever this product manager widget is drawn onto the screen for the first time you could say and here i can reach out to products and call add and the value i want to add now is using that special widget property i was referring to and there the starting product so widget is provided by the state object gives us access to the connected stateful widget and to its properties and therefore i can safely access starting product here add it to my products and init state will execute when this state is created so when build runs for the first time that code will already have been executed let's see this in action and for that we need to go back to main dart and pass that starting product to the product manager because we are expecting it as a value there so food tester and then let's do after saving let's do a full restart with ctrl f5 to flush all existing state and now if i add a product this still works but i don't even need to do that you will see that food tester is displayed here and that of course means that our logic is working we are passing this down and we are accessing it with widget starting product and if you're wondering why we are not calling set state here even though whoopset state even though we are changing our state and you are right if that is your assumption well the reason why we don't call set state here is because as i said init state runs before build runs and therefore there is no need to tell flutter that the data changed it didn't render something to the screen already so there is no need to re-render so that's important to know there is in its state some life cycle hook as it is called a method you can use to execute code when your state object is constructed and there is this widget property provided by the state which gives you access to the connected stateful widget before we now move on and also learn how we can debug flutter apps and finally then all to fix our broken list here before we do that let me quickly show you these life cycle hooks i was referring to you it's first of all important that there are state lessons and stateful widgets and that there is a difference of course stateless widgets are used to create a widget where you render something to the ui and you can pass data into them that is what we're doing with the products widget in our app thus far and that data we pass in can change externally and that's also what's happening in our app we change it in the product manager widget and the ui of that stateless widget gets re-rendered when the input data changes now a stateful widget also is all about returning a widget where we render the ui where we as you saw in the last lecture can receive input data which might also change externally we don't see that here but that would be possible and then we also additionally have that internal state which we can change from within the widget which also will lead to a re-render so both external data changes as well as internal state changes will lead to the ui being re-rendered widgets have a life cycle a stateless and a stateful widget differ in the lifecycle though and with lifecycle i mean methods you can add to your classes which will be executed for you by flutter a stateless widget has the constructor function which you can execute and then it has the build function to draw something onto the screen that is all these are the two functions which will be called in the life of a stateless widget build can be called multiple times whenever the external data changes the constructor function is always available in the state full widget but there we then call init state thereafter before we then call build for the first time we can then also call set state from inside this build function or to be precise most of the time you call it when something happened when a button was pressed but also for example when an http request finished and that would then rebuild so it would call build again but you can also have some changes to your external data in which case did update widget would execute so if you pass data to your stateful widget as we are doing it with the starting product and you would change that data then did update widget would execute and then build would run again so it's a more complex life cycle but why don't we just have a look at this in action back in our code let's start with the state less widget the products widget there we have the constructor and we're using the shortcut to assign a value to products now we can re-add a constructor body because this is a normal function in the end we have to remove the semicolon then though and now this will execute whenever this product widget is created so i will print something to the console here and i will print products widget constructor so that we can quickly see what was executed i'll copy that line and go to the build method and in that build method before we return we can of course then execute code in there here i will also leave the product widget stamp but then build so that we can see when this executed with that if we save that and we completely restart the app with ctrl f5 then we see our app here but in the terminal down there we see that the constructor gets called first and then build gets called now if i now click add product once we see the images added and here we see the error message because we go out of the boundaries let's ignore it for now if we now scroll up and you might be required to scroll up quite a bit then we see an error regarding well that we gotta go out of the boundaries and this unfortunately now hides the thing i wanted to show you so let's get rid of the error for now by removing that image to save some space so that we can fit more elements onto the screen before we get an error let's perform a full restart again we then see constructor and build now if i go back and i click add product we don't see anything here but if i click it again simply because there's a delay of one click for the print statement there always we now see constructor build is called again and that's important both is called again because it really reconstructed this entire widget when in the product manager we changed our products which led to this build method being executed again which then led to the products being recreated that's the first part but let's also see what exactly happens in the product manager so let's first of all go to the product manager constructor so off the stateful widget let's add a body and let's add our print statement product manager widget constructor let's copy that let's then maybe toss this line into create state so that we can also see when this executes and let's then go down to init state in the product manager state now and let's add this line here product manager state init state copy that line and let's go into the build method here to all the print when we build here now let's save that and again let's do a full restart and now you already see this actually executed just as before before this restarted app gets printed because it happens before we see something on the screen for the first time which is why we had that delay of one extra click before it's not actually a delay it's just that the restarting is only done once we got something onto the screen but now we can see here this is actually where we start we call the constructor of the product manager which makes sense because in the main.dart file where we start we initialize or we add the product manager before we use products because products gets in used inside of the product manager so we call the constructor of the product manager we call createstate that as you would guess creates the state and therefore init state is called then we call build in the state and since inside of build of our state we create the products here we then call the constructor and the build method of products thus far this should be clear let's now go back and click add product one time if we go back we now see something happened this is where we left now product manager state build was executed again because of set state this does not reconstruct the product manager widget which is why we don't see this constructor or create state being executed again but it did re-execute the build method of the state and since we re-executed this products was rebuilt and therefore the constructor and the build method in the products which it was called and by the way all that rebuilding happens in a very efficient way flutter takes care to not just redraw the entire app but really check what needs to be changed so even if build is executed it compares the new and updated ui it will draw to the old one and only change the parts that need to be changed to make sure that this is done in a very performance efficient way this is the life cycle you should understand now there's one extra thing i want to show you as part of that life cycle in the product manager state here you can also add the did update widget method this will be executed whenever your connected widget the product manager receives new external data now in our app right now this is not happening let me still add a print statement here did update widget and by the way please recognize that we also get old widget which is the equivalent to that widget keyword which we're all using here but now not referring to the updated widget with the updated external data received you can get that updated data on the widget keyword but instead the old widget so the data as it was in the old widget just in case you would need that maybe to compare the updated data to the old one anything like that the cool thing is if we do a hot reload we actually see that update widget being called here because a hot reload in the end just calls set state for the entire app so it fakes this starting text this food tester being changed even though it didn't it fakes that this happened because it calls set state for the entire app to re-render it and therefore we see did update widget is called before we again build in the product manager state so this can be a useful place if your state belongs to a widget which receives external data that might change if you want to do something upon such a change that was a lot about widgets now all these widgets use the material design now what is the material designed it looks something like this you might notice it's google's design system which you see in a lot of google applications both on the web and on mobile now whilst developed by google it's not just google's design for everyone instead material is a design system with a lot of guides best practices color combinations that work well in certain looks and fields of user interface components that you can use for mobile apps and web apps and desktop apps everywhere you can use it and it's of course embraced by google but it's also opened up to be less googlish and more customizable so therefore using it in ios apps is also great and flutter actually uses material design you can still adjust your look to all the look like ios cupertino styles and that is something i will also show you later in this course but we will start with that material look because it's important to understand that it's not google's style for everyone it's indeed highly customizable as you will learn and material design as i mentioned is built into flutter and therefore we will use it and we will get this nice design i like it at least for the app out of the box without us having to do any design work now i mentioned that we can adjust our theme and that we can adjust the looks now we can do it in the main dart file in our material app there we can add another argument the theme argument and we pass in a theme data object this also is imported from flutter material theme data takes a bunch of different colors and styles we can set like for example very important the primary swatch a swatch is a set of colors where we define one color and all the other colors will be inferred automatically that's very convenient we can assign a color by using colors a special object provided by the flutter package and there we can access so-called static types so basically properties we can access without instantiating colors so we don't add parentheses here we call something directly on the class and here we can for example add deep orange if we now save this you see that the app bar automatically is orange and it will not just be the app bar it'll be a bunch of other things in the application too for example if you want to give that button that look we can go to the product manager which is where we use that button and in there we can go to that button and there we'll have a color argument we can pass and there we can now use our theme by using a special object provided by flutter which is called theme which has a off method where we now pass this context because this context stores metadata information like the general theme of our app so we pass that to a theme and then we can access for example primary color here and if we now save this this button now alls is orange so that's pretty convenient let me by the way also re-add that image because i don't care about the broken list anymore just want to have that image back so that is how we can use the theme and we can add more than just the primary swatch we can set a dedicated accent color for example i will use colors deep purple throughout this course because in my opinion purple fits really well to orange you can also set the brightness of your app you don't need to because the default is alright but there you can access the brightness object and there either the dark or light static property if i choose dark which is not the default you see now we have a dark look dark background primary color also was overwritten if i choose light however then we're back to the default mode where we use the colors where we have a white background but you can use both which is really convenient and you can do more feel free to play around with the different things you can set here most of them should be pretty descriptive especially once you're done with the course so this is the material design and how you can adjust it you can always adjust it to look more like ios with less drop shadows and so on but that is something i'll come back to in a dedicated module later in the course with the themes added let me come back to dart to the language we're using because with the themes we use these static properties as i said now what is a static property a static property looks like this we can have a look at the colors object by holding command or control and clicking on it and most ides should offer such a feature this lets us look into the file which is added by the flutter package and here we actually see how such a static property is defined with the static keyword in front of the name and const is for now let's say the same as final it's a little bit different but in the end it means it's a value which won't change and this is how we define a static property named transparent and here we got all the properties we can import black and if we search for it we'll also find deep orange here it is there we got the static constant of type material color which is just an internal type deep orange so this is another feature of dart we can define static properties which are properties we can import from a class without instantiating the class so without executing the constructor now whatever feature we already used but which i also want to show you how to create it on your own are named arguments we're using it in the main.dart file here for example the arguments we pass to themedata they all have a name name colon and then the value for the name now thus far we and our constructors for example and in our methods we only use positional arguments like in the product manager the product manager constructor here this starting product is a positional argument because the first value passed to product manager so in the main.dart file this string is stored away in this starting product now if you only got one or two arguments using that makes sense but maybe you got multiple arguments and you want to target them by name to also allow you to not set values for some of them then you can wrap this in curly braces and now it already is a named argument just as easy as that now we can pass a value by targeting starting product here then a colon and then the value so now we're targeting this argument named startingproduct because we chose the name here and we passed the value to it and set it to this final string here we could also set a default value by adding an equal sign time to switch the product and let's move on to a sweets tester now the sweets tester as the name suggests is a specialized tool for testing sweets for their ingredients how healthy or unhealthy they are things like that and now this would allow us to actually omit this value before i was getting an error now this is perfectly fine because if we now do a full restart we see we start with sweets tester but we can overwrite it by reintroducing our targeted named argument and now if we do a full restart we start with food tester again so optional arguments that's also something you can do you can also set optional arguments for positional arguments like for our products here let's say if we wanted to start with an empty list here by default you can add an equal sign and then the value you want to start with if it's optional however you also need to wrap the entire argument assignment here with square brackets for named ones you use curly braces in both cases for positional one only optional ones are wrapped but then with square brackets now here i'm getting red's quickly lines that this must be a constant and that's a special dart feature again we have to add the const keyword here which means this is a list which can't be changed so now you can't call add or so on the products list here this is what we now store here and this means that now for product manager we don't actually have to pass products we can remove that do a full app restart and then of course we don't render anything and our app is broken because we don't pass the products which we're changing down to the products but it would work it doesn't make that much sense here so let me re-add this because we certainly want to pass our products to the products widget here but you can use such optional arguments and throughout the course we will build more and more methods and also use these features i just want you to know what's happening behind the scenes here so there were some additional dart features which i felt important to be mentioned at this point and whilst i do try my best to cover a lot of the dart features which we use here and explain them if you want to learn everything about dart also visit dartlang.org that's the official dart language page and there you can for example take the language tour to get a detailed overview over everything you need to know about dart how it works which keywords it has how you create var variables what this difference between final and const is how you create classes what generics are and so on so check out this page if you want to learn everything about dart but again i will reiterate and explain the core concepts we are using when we are using them in this module we learned so much about the widgets and the basics of a flood wrap it's certainly a lot of information to digest so definitely go back and forth and reiterate through the concepts here we'll also use them throughout the course so that should become clearer now it's time to practice the most important concepts though so here's your first assignment create a new flutter app you're starting with an empty project you find it attached to this video or you simply create a new project and empty the main.dart file so you start with this project and i want you to create a new flutter app so create that root widget which you learned how to create and so on so create that and make sure that you have an app bar on that page you're starting with and some text below it now in the second step you should then add a button which changes that text and simply change it to another hard-coded text no user input at this point we'll add it later but it's a bit more complex so just some hard-coded text and step number three then is to split your app which probably sits in one widget thus far into three widgets the app widget the text control widget which also contains the button and then a widget for outputting the text now this will be a very granular split which might not make that much sense because you probably will not have that many widgets in the text widget but still it's about practicing these things practicing how you can pass data around and so on so that is your task it contains only things we learned in this module so definitely go back to earlier lectures if you need to practice some things again and of course compare your solution to mine which you find in the solution part to my solution video where i will walk you through my solution so let's solve that assignment here are our tasks i'll leave them there and we start by first of all importing package flatter material because that material.dart file contains everything we typically need then we need a class my app you can name it whatever you want but often that root widget is called myapp and here whoops without parentheses here i will then extend a state less or full well let's start with a state last widget because we just need to output an app bar and some text so nothing to change right now so let's start with a state last widget here and you learned that there we need to add that build method which receives the build context as an argument and which then returns a widget and therefore it's a good practice to define that type in front of the build method and let's also mark it as overwritten so that this is really clear that we're overwriting a built-in method now here we need to return something and since it will be our root widget we return a material app first of all which does all that core wire up work allows us to define a theme things like that i will not define a theme though though you of course are free to do that i will just add the home screen so the first widget the first content which should be displayed and there i want to create a complete page with the app bar with the background and for that we use the scaffold widget which also ships with flutter now the scaffold widget should hold that app bar and that body so let's target app bar and add the built in app bar widget which has the title argument we can set and the title should be a number widget it's a text widget here and i'll just say assignment 1 here we don't just want to have the app bar though we'll also add the body to the scaffold and that will now be that text i want to have now you can't just add text like this i will actually use the container here or even use center which you haven't learned about so i don't expect you to know this center will simply just center a value horizontally and vertically it also takes a child and then the widget which should be centered so center is of course built into flutter and there i will have my text this is the first assignment maybe the text is totally up to you with that we got our first widget created again using center here is optional just using the text would be fine and now to draw it onto the screen when the app starts we have to add one important thing and that is the main method let's add main here and in there if you remember which you should otherwise it won't work you have to call run app and to run app you pass the widget you want to create so my app with parentheses to construct an object based on that class and now you should be able to see something on the screen you might need to do a full restart here after such drastic changes and in my case this is not enough because i still have that old application running so we'll just quit my debugging process and then hit ctrl 5 to start it again this will now build the project again and ship it onto the virtual device which can take a couple of seconds and once this is done then we here got our finished app or for now finished app running on the emulator with the app bar and the center text again the centering of course was optional task number two is to now add a button which allows us to change that text to add a button we first of all need to be able to render more than one widget so let me use a column for that and i will actually use a column instead of center because the two actually won't work well together anyways i will have my children then and i will wrap the text in that list now of course i don't just want to have the text i will have that button and i will use a raised button there are other buttons too but i will again reuse raise button here it will hold a child with the content of the button which in my case will be some text where i say change text because that is what will happen when you click that button and don't forget that on pressed argument where you pass the reference to a function for now a function that doesn't do anything with that it's now all up in the top well that is something we can change later if we want but we get that button which of course doesn't do anything now what do we need to do to make that button do something well we need to add code to that function here in on pressed but of course in a stateless widget we'll never be able to change our code or to change our data so let's turn this into a state full widget which we can now close that first class let's close it and let's create another class the underscore my app state whoops my app state class which extends state which is a generic object referring to my app to create that link which will then have this build method and in the my app widget we add create state autocompleted by my ide which will return a state which links to a stateful widget and there we return a new instance of my app state like this this now is a state full widget and it allows us to add a property to myappstate which we can change from inside there so here i will have my let's say main text you can name this whatever you want it's of type string and initially let's say it's an empty string or no let's say initially it's this text of course because that is the text we want to start with so let's add it here now main text is a property should be underscore main text by the way as per the dart convention main text is now a property i can use in that state class and i want to use it down there in this text i will not output a string or i will output one but not with quotation marks instead i will refer to the main text property which of course is this string and now we can change it when we click the button there we can call set state that's important otherwise the ui will not rebuild and then in there i set main text equal to this changed and now if i save that and perform a full restart with ctrl f5 this is often required after you changed something drastic like this where you turned your state last widget in the stated full one now if you click change text you see this changed and the positioning change because the button is automatically centered with the other content on the page and since that content got shorter well it's further to the left this is now our button changing the text only once or actually it will reset it to this change but we don't see that change of course and that is task number two solved already let's move on to task number three and this is a bit of a redundant task it would be perfectly fine to keep that all in one widget but to practice that we'll split it up into free the app widget which we have should then contain a text control widget which will contain the text widget so let's add two new files text underscore control dot dart and text output i'll name it text output and not text because there already is a built in text widget so to not clash with the names i'll use a different one and now let's go back to main dart and let's grab the column here in our body of that scaffold let's put it into the text control there we first of all need to import from the flutter package from the material dart file there then we create a class text control which will extend a state full widget here because i want to manage my text in there that means that i add create state of course and that we need to add a second class underscore text control state which extends state which points at text control and there we will have the build method and in the build method well there we will return what i just cut from the main dart file this column where we have the button and the text now the main text property is missing we can use that from main dart 2. so there let's copy or cut the main text move it into the text control state like this and now this is working again up there text control that is also almost looking great but of course in create state we need to create a new instance of the text control state class we created here so now we get the text control widget added with the widget itself and our state which holds our column now we also got the text output widget now i said this will be a bit redundant because it will just hold well this text widget which already is just one widget i guess but to practice passing around data let's still encapsulate it in our own widget so let's go to text output there again let's import package flutter package flutter material dart let's create a class text output again not named text to not clash with the built in text widget it extends the state less widget here because it will only receive data not change it internally to receive data we need to add a constructor text output and then we need a property to store the data we're getting this will be a final property named main text for example it will be a string and initially it's undefined but here we'll then target it with this main text this by the way is one of the few places where you use the this keyword for the shortcut and then we need that build method of course ide completes it for me and we just return text where we refer to main text like this this is our text output widget again a little bit of a redundant change but good for practicing now in text control i want to use that text output so i need to import it so let's add an import statement pointing at text output dot dart and with that we're importing everything from that file so we're importing that class and we can use it down here to pass text output and pass our main text into it so that this can get rendered now the last thing is to now also connect our text control widget here to the main dart file so in the main dart file let's import from text control let's import text control like this now we can use that text control widget here and now in the main dart file i want to use it and i will first of all convert this back to a stateless widget because i don't manage state in my root app anymore we can then get rid of create state and of that class definition down there and just add the overwritten build method to my app and in there i will then add this now imported text control widget which in this case doesn't receive any arguments because it's not configured to do so and with all of that if you save and then do a full restart you can go back to your app and it should behave as before now we got that split up and now we got these core features practiced now there's so much more you can do with flutter regarding the output on the layout of your pages so much more you can do and we will do but the basics the very basics should now be set now that we also practiced the basics about widgets and how we pass data around let's dive into an advanced example we got our product manager and there in the widget tree we obviously got our raised button now there is no specific need to move that raised button into a different component let me say that it's perfectly fine to have it in the product manager but let's assume we have this button in a more complex widget we also have a title there maybe some image so for some reason we outsource this raised button into its own widget let's quickly do that i'll cut it from the product manager and add a new widget and i'll name it product control dot dart for now now in the product control i'll first of all import a package and that package will be flutter and material.dart from that package so far that's not surprising and in there i want to create a new widget the product control widget and the obvious question is will this be a state full or a stateless widget and it will be a state last widget because all i want to do is i want to display that button it will not even receive any external data it will really just render this button statically so this is a widget where the widget tree will never change still it is a widget so we have to add this build method where we overwrite the built-in one and now in here i want to return the code i just cut from my product manager so let's paste it in the raised button and obviously i can't call set state in here now the advanced food tester that's not going to work so what can i do about that well the goal is to use that product control here that product control widget inside of the product manager so let's start and let's import it so i'll add an import at the top and import my product control.dart file and then i'll go down and in my build method here i'll use my product control like this i'll call the default constructor which we don't have to add explicitly which will give me a new instance of this class and therefore this new widget object now this would almost work but set state is still not an option here now obviously you could say let's turn the stateless widget here in the product control widget to a state full widget and then we can add this state class and start managing the state the problem just is i don't need the state in the product control i needed the product manager because there i can pass it down to products which is where i ultimately want to receive that so product manager should stay a state full widget because there i need that state because there i connect to a widget where i need to pass the information to the products widget itself can't be turned into a stateful one because even though i need the product information here i don't change it in that widget so the product manager really is the connection between the product control and the products and that's the first important thing i want you to understand this is also a concept called lifting the state up we want to manage the state in a widget which has access to all the widgets that either change it like the product control or require the widget state the data we're changing the products widget in our case so the product manager is the connecting widget which reaches out to all these widgets that do change or need the state the question now just is how can i pass the information that this button was pressed in the product control up to the product manager so that i can then set the state in the product manager well for that let's create a new method in the state object of our product manager state here i'll edit below my init state and the update widgets i'll add a new method here and this method will not return anything so i'll add white as a return type then it will start with an underscore for the same reason why products start with an underscore it's a class which i only use in that file and i don't want anyone to import this class or directly access the methods or properties on this class i don't want anyone to directly use that class except for the product manager widget here so i'll start with an underscore in the name and i'll name it update products and the name is totally up to you so update products in my case here and i expect to get an argument here and the argument should be the new product let's maybe name it add product therefore that's even clearer so here i will receive an argument the product which i do want to add and let's also define the type here to write better code let's add a string in front of the name to be clear that this method here will receive are an argument which is a string now with that i'm defining add product and now i can go to the product control and cut my set state code from there because i can't use it there anyways this is not a stateful widget and move it into add product and now here i don't want to add the advanced food tester but the product which i'm receiving as an argument so an add product i'm now calling set state and i can do that here because i am in a state object belonging to a stateful widget and i add the product which i receive as an argument the remaining problem is i want to call add product whenever this button is pressed but the button lives in a different widget how can we solve that that's the second important thing i want you to take away lifting the state up was one important concept but now to give another widget access to a method in this widget we can simply pass a reference down to the widget which should have this access so i can pass add product as an argument to the product control please note i'm not executing it i'm not adding parentheses why because i don't want to immediately execute it if i would add parentheses here it would execute the method whatever the build method runs and it would only pass the return type of that method to product control which in this case is void so i don't want to do that i don't want to pass the return type i want to pass a reference to this function so the function is not getting executed yet we're just passing the address to the function down to the product control now i can go to the product control and expect this as an argument to the constructor so i will add the constructor here and i want to receive that function reference and store it in a property of that class for that i'll create a new final property which should never change except for when this widget is recreated and i'll name it add product you can give this any name you want and you see it's not the same name as an apparent widget though that would be possible but here i don't have the underscore and i really just want to make clear this can be named how you want i can also define the type and the type will be a function here function is a separate type in dart and it's simply well is what it sounds like it means in this property we'll store the reference to a function and that means that now here i can say this add product so whichever argument i receive in this constructor will be bound to this property and now we have access to a function in this widget even though we don't define the function in this widget and this means when this gets pressed i can execute add product and then also of course pass on the argument because remember add product is a function that expects a string so i want to pass a string and let's leave the world of exotic products maybe let's just name this sweets because it's an image full of sweets if we now save that and do a full restart to clear any existing state this is our app and if i click add product we still add this new item but now we're adding it from a button or by clicking on a button which lives in a different widget and this is one advanced concept which i want you to understand that if you want to pass data up so if you have something happening in a widget and the parent widget needs to know about it and the parent widget in our case is the product manager then you do that by passing down a reference to a function which executes in the parent widget this is crucial to understand now before we finally leave this module of important basics here's one important basic about the dart language so not something exclusive to flutter but really to dart in the product manager we have our list of products here right and we change this list of products because we add new products here in set state for example now one thing we also saw in dart before is that when we receive data via the constructor we typically bind this to a property where we want to add the final annotation this is not required for the code to run but flutter itself or dart itself tells us that we should do this because we get this warning that this class is marked as immutable and that is simply happening because the stateless widget is marked as such and this simply tells us hey it's a good practice to be clear about the fact that the data you work with here is immutable which means you can't change it from inside because that wouldn't have any effect here anyways now we can go back to the product manager state and there this might surprise you i can go to my products list which we certainly do change and i can add final there too and now if i save this and do a full restart and i go back to the app it still works as before now why is that when i mark this as final why can we still add products and that's something important to understand about the dart language and how it works final indeed means this property here is final we can't assign a new value but that's the important thing when we call add on the existing list we're not assigning a new list we're editing the existing one but that's important that's a concept called reference types that only changes an existing object in memory it does not create a new one and hence it does not assign a new one to products it's a different thing for numbers by the way if i had a number 8 here and it said let's say 42 and that's not my age but let's say that is our age and now here in set state i want to set age equal to 29 which is my age well then i get a warning here that age can't be used as a setter because it is final so we can't assign a new value and it should be obvious what we're doing here we're assigning a new value because with the equal sign here you won't see an equal sign here for products and therefore of course you would fail if you say products is now an array with one string this would be a valid list it holds a string and product should be a list of strings but we get the same error as for the age we can't do that because it's final so assigning new values which requires the equal sign is not possible changing the existing value is possible because lists and objects in general are reference types which means we only store the reference to an object here in products the reference to this array and if we then use methods on that object and this array or list is also just an object everything is an object in dart even a number if we then call a method on that this is okay this changes the existing element but it doesn't create and assign a new one and that's the only thing final prevents and therefore for example if i take my age again and i call a method on that like round to round it well then you see i don't get any errors there because it has the same logic i might be doing something with the existing number though round will return a new value actually it doesn't change the old one but i can safely do that and i could do anything on the number that changes it if i don't reassign it to age now that is a concept which can be challenging to wrap your head around but it's crucial to understand final basically this allows us to use the equal sign more than once if we want to ensure that we also never can change the value with for example the add method then there is another tool we can use in dart and that is the const keyword on the right side of the equal sign this means this value is now constant and therefore if i now save this and we do a full restart you can already tell that there seems to be some error and if i go back we indeed see an error on the screen unsupported operation cannot add to an unmodifiable list and that's pretty clear our list is declared to be not modifiable because of that const keyword and therefore it already understands that calling add here will be a problem unfortunately it doesn't tell us in our ide at least not in visual studio code but we get that error once we run our code even before i clicked anywhere and we already get this because it's not just happening when we call add product it is already a problem when we try to assign a value here in its state there we call add for the first time and there we already try to change a list which is marked as unchangeable so if you want to be sure that a value can never be changed use const on the right side of the equal sign if you just want to be sure that you will never be able to assign a new value to a property then use final in front of the property name that might seem super advanced and a little bit unnecessary to understand but it is syntax you will see a lot and i want you to understand what's going on here so let me remove const here and i'll also remove final because i don't care if we assign a new value here or not i just want you to understand what final and cons to do when added on left or right sign of the equal sign that's it for this module we learned a lot about the important basics of flutter most importantly we learned that flutter is all about widgets and this is really something you have to take away and you have to get into your mind so to say flutter is all about widgets you compose the user interface which you are seeing in your app from a set of built-in widgets which you can of course also put together into your own custom widgets so that you get reusable ui components which you can then use to build your user interface so it all comes down to these widgets and you build this widget tree remember you have that root widget that material app widget which is wrapped in your root widget and then you got the scaffold widget for a page and on that page you then have the body with all the other widgets where you have a column which might have an image and a text so this is how you build flatter apps and then you have stateless widgets on the one hand these are widgets that only take data as an input optionally they don't have to and they return a new widget tree they have this build method which returns a widget or a tree of widgets and this tree of widgets can be affected by external data which you receive with the constructor but this is not a must you could also have a widget that works without any external data that just displays a static tree which never changes you also have state full widgets which can also receive external data just like the state less widgets and they also will have a build method though that lives in the state object which belongs to these widgets but they can also well work with that state object they can manage internal data which they can change with set state which will also call the build function again so which will also lead to the build method being executed and the widget tree being re-rendered because that's important changes to external or internal data in your widgets lead to a re-render cycle so the build method gets re-executed and a new tree of widgets is created and flutter will then compare this new tree to the old tree which is already rendered onto the screen and will render any differences and update your view we also used dart and it's important to understand how dart relates to flutter dart is the programming language used by flutter it's not an alternative it's just a programming language because flutter is both an sdk shipping with the tooling you need to build native mobile apps so the tooling you need to compile the dart code to native code so to say or wrap it in native code but it also is a dart framework so it's not just a tooling it's also a framework which offers a rich set of classes and widgets you can use to build your app all these widgets we have been using were exposed by flutter dart is an object-oriented programming language which means you work with classes and you instantiate these classes by calling their constructor and it also uses static typing which simply means you define which types of data get stored in a variable get returned by a function and so on and check out that dart language tour i was pointing you at in this module to learn more about dart if you want to dive really deeply into it you will learn more about it throughout this course though too now finally one important part of working with flatter widgets is that you can pass data around and that you understand the widget lifecycle now you can pass data between widgets by using their constructor methods this is how you can pass data down the widget tree you can pass data to a child widget for stateful widgets data can also be passed from the widget to the state object because remember you create stateful widgets by connecting two classes basically you can pass that with this special widget property which gives you access to the properties of the widget in your state and stateful widgets offer additional lifecycle methods where you can execute code init state and did update widget these will execute when certain things happen in its state when the widget and its state are first created did update widget whenever the widget receives new external data and you can use these to run your code up on these events all widgets stateless and stateful ones have the constructor and the build method the constructor is called when the widget is created or re-rendered so if the parent tree of which this widget is part is re-rendered and the build method is then always called when the widget is re-rendered flatter needs the build method and the widget returned by it to know what it should draw onto the screen and these are the basics about flutter you have to know right now we'll obviously dive much deeper into it but for now this is what you should be aware of you

Channel: Academind

Views: 1,524,215

Rating: 4.9049816 out of 5

Keywords: flutter, flutter dart, flutter tutorial, flutter tutorial for beginners, flutter widgets, flutter stateful, flutter stateless, flutter crash course, flutter course

Id: GLSG_Wh_YWc

Length: 202min 18sec (12138 seconds)

Published: Wed Jun 27 2018