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 2-d apps and that's
important if you're planning to do a
free D app some game Flattr 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 your going to use is actually
called dart and you don't need to know
it you'll learn it in this course but
Flattr 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 Flattr 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 Flattr framework
add your own code add your own logic
enhance the code or the features are
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 flatter 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 built 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 compile
your dart code to the native code that's
what it also does so flatters both the
framework and a lot of useful tools and
to make just really clear flutter builds
up on dart dart is the programming
language flatter then offers this
framework which is well connected to
dart or which is build upon dart which
offers a lot of utility features and all
these widgets and then flutter has this
second part the SDK the tools and zon
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
flatter together with dart to build
native mobile apps and ship them to the
App Store's
obviously we now wanna dive in and get
started and we will will install flatter
and write our first flatter app in a few
seconds but first I want to highlight
how a flutter app looks like what its
core architecture is what is core
concepts are it's important to
understand that flatter works with
so-called widgets and dad will become
clear once we work with them in the next
module we'll dive deeply into them but
in the end of flatter app an app build
with flatter 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 can tea
visible which it's 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 Flattr 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 flutter 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 then 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 flood ramp 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 we you can never
gate 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 dadoes how this works
do you office question is how is it then
compiled to native code because we write
dart code we do that with the help of
the flatter 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
Flattr helps us with debt 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
at the Flattr SDK will do the
compilation that's pretty useful now
that is what Flattr does for you and
this is how it compiles Ted 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
insulation 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
setup 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 Flattr dot 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
falling 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 overlooked
in the video which you can and simply
read about in this article so let's
continue
first of all let's check these 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
get might not be so it's a good idea to
download it before you get started
you can simply search for get 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 get which is
a version management system on your
machine
now you don't need to use that version
management system but flattery uses it
behind the scenes this is why you need
to have this available once you got get
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.32 beta chances are that
when you're watching is 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 Robert big file once
it is unzipped you have this flatter
folder and now you should copy this
somewhere where you want to store this
now this flatter finger is entire
toolset 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 package a 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 flatter
a data to that folder we can proceed
with well the installation were 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 poff is basically a global variable
which ensures that the flutter program
or which interests that any program can
be accessed through the command line and
we want to configure the flutter program
to be found there
now do you found there we could axe
cute dis command in the command line if
we navigated into the newly created flat
or 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
settings to see hidden files you should
then see that bash profile fault
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 fall and
this basically configures poff 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 then
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 path there where you dragged that
flatter 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
username development tools with that
simply save that file and thereafter
open your normal terminal app on Mac or
Linux whence you did help 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 40 days old we can
ignore that here because we know we just
downloaded the latest version
for two 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 dr.
too
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 OS 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 absolutely
require 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 it got
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 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 Xcode by the way but I will
simply start it with this command open -
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
i OS 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 install 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 own 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 will be one word
only hit enter and this will now set up
a new flatter project in that specified
location and use 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 belt 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 ctrl 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
Rick with that first flutter app but
obviously we all want to build for
Android right so let's go back to these
installation Docs we're done with the
iOS
set up 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 or 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 let me all
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 we'll pick a couple
of seconds since it also unpacked that
folder and once you are done with that
let's go back to the Flattr 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 stood you was plucked
because it was from an 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 you want to
do I have two lighter 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 dark
EULA here but that is totally up to you
now on the next screen make sure to also
check Android virtual device here under
the insulation 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 open 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 suggests
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 all just
shows you something about the dart files
we ignore this for now so now it's use
that flutter plug-in and click OK
and thereafter click yes to all's
install that dart plugin for which it's
asking up there
thereafter simply restart now once you
restarted you may get a message at the
bottom here regarding ite 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 flatter project now I will
open this in a different idea where it's
a little 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 dead 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
has created whiffed 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
when they use let's say the pixel to
continuum 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 average 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 q
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 it flatter
to run it on our Android emulator one
sted emulator did boot up and it will
build the project with the help of the
Android SDK that was installed together
with the 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 Flattr 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 these 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 IDE
without problems I'll quit it though
because I have an a variety which I like
more
and that's visuals to you code you
install it from code visual studio comm
and it's a free IDE just like Androids
to whom 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
flatter project so that is what I'll do
open that first app folder and this will
now open Flattr 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 flatter a bit more pleasant
and dead 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 and Hans decoding
experience and there you should simply
search for flutter to find your official
flatter 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 and there's one extra
extension I will use throughout the
course which is totally optional and
that's the material I
can 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 blessing to counter equals
counter plus tune this should now
increase the counter by 2 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 flat or run
and simply hit R with that flatter run
proces running so don't quit it hit our
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 our 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 2 and that's already
showing how cool it is to work with
flatter and how easy it is to develop
with it with that hot reloading and this
all's is to set up 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 I have 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 dot 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 also going
through these step by step along with
the video because for one they can
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 these 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 get
for Windows now get this a versioning
system and even if you don't use it
actively
Flattr does use it so here I'll install
get for Windows by clicking on that link
then we have the chance to download that
get tool from that get 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 get 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
get on your machine and with that you're
fine you can now close this and continue
in these setup instructions
the next step is to actually install the
flatter SDK which you can get from this
download link here now important the
worship flattered of course will change
in the future right now at 0.32 dot beta
its production ready already and the
code you'll learn in this course will
still be or 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
also 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 enter it the place where you
want to install that flatter tool now
important the flatter tool is not your
project for your mobile app it's an 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 Schlatter
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 the flutter
folder
and then you can execute that flower
console that bat-file here now this will
open up a command prompt which already
uses flutter and you could stop here and
continue with the flutter commands and
with bringing up your Android emulator
and so on and always open dev tool here
to run the flower 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
flattered console here and let's move on
and make sure that we can use the
flatter 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 too 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 queue dead 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 and the blank space which opens
up and thereafter hitting ok now you're
prepared to run flutter commands from
the normal command prompt click OK and
make sure to close any command from so
you might have opened already restart
windows if you're facing issues
thereafter and once you did all the
you can bring up the normal command
prompt and simply enter flatter there
now this might show you a warning
regarding the installation being a bit
older you can't ignore that because we
actually did just install the latest
version so that will be alright 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 for
our 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 built tools
Flattr will need to so simply go to
developer.android.com slash studio 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 also 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
take 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
next episode you can choose your UI
theme now that's most important if you
want to use Android studio to build your
flatter 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 ticks
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 app
yet so our next step actually is to
create such 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 and
abled 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
Flattr project to continue so back to
the command prompt there you should now
navigate into the folder where you
want to create your new flower project
you can navigate around and 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
flatter create and then the name of your
project now important that name must not
contain a dash or something like that
also know the whitespace 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 stood your
project and there you should navigate to
that folder you just create it and open
it there in the flutter 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 to 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 that 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 the drumming we can't run our
flood wrap 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 plug-ins here at the top where
it tells you about the missing dart
plugin you could by the way all those
skip this if you already installed a
flutter plugin but here I do it in two
separate steps so install that dart
plugin
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 flatter
plugin simply accept this by clicking ok
and now it will install the flatter
plugin to and that would have installed
the dart plugin with it so you can't
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 flatter 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 these 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 you 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 flatter'd 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 dad simply is a puff
pointing to the Android SDK you can
click browse directory here to choose
the Android SDK location and there
simply choose the location you select
during the wizard or in the wizard which
opened or which
and when you opened Android studio in my
case it's the Android folder it should
be dis folder which has a platforms
emulator and so on subfolder simply hit
OK with the root folder is 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
sell that variable name you just created
written exactly in the same way and then
another percentage sign backslash tools
and then you need to add one our 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 OK
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 flood wrap 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 flood wrap
running on that emulator and you can hit
the plus button here to increment the
counter pretty awesome our flatter app
finally running on an emulator and of
course will change the say 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 this folder where you
have your first day app or into this
project folio 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
any rights to do you can use either
approach however using flood 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 Visual Studio comm 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
flood rap 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 dad 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 the new theme you can see your
flutter code in the lip folder of the
project you opened and there in the main
dot dart file you see the code which is
responsible for the app which is
currently running on the
later their 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 control C but as long as
you are developing you should keep it
running because then you can hit R with
that process running too hot reload your
app which means the changes you edit are
pushed into the app without the need for
it to rebuild now sometimes this fails
then you can press shift or to do a full
reload and a full rebuild and you can
quit that process of 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 2 instead of 1 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 Flattr app now
before we dive way deeper into that in
the next module and the modules
thereafter let me briefly talk about
some alternatives
Flattr is of course not the only way of
creating native mobile apps there are
free 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 also 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 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 Store's 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 a pictures well then
you might need a mobile app now the firt
alternative gives you a native mobile
app just as Flattr 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 that that look really
great but of course the performance is a
bit worse then when building real native
apps or when having real native apps at
the end as you do a flutter because here
obviously everything runs in a browser
still so you have this extra layer with
flatter you get real native apps because
everything is compiled to native code
and therefore performance is better so
flattered
it's 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
flattery 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 flatter 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
decide 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 for
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 the course
obviously so material design is built
into flattered 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
flutter team so we shouldn't expect huge
breaking 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 talks stay updated
follow these steps
I will highlight at the end of the
course in the roundup it's all important
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 if
some new patterns might emerge in the
future so here's you it's a good idea to
stay up to date and be prepared to
switch to our patterns when they become
more stable or if something becomes a
best practice last but not least there
will be bugs there will be backs in this
course and we will fix them together we
will find workarounds and you will see
that you can't 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 ecosystem
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 Flattr 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 flatter 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 side
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 type 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 dead 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 or
building because as I mentioned already
we'll build an entire app Fratus course
and here we'll reflect well 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
learn it in this module thereafter will
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 log out 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 the questions answered in
these two modules we're nearing the end
end 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 you 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 time
with dead will learn how to add native
code so how you can implement a certain
feature which might not be available in
Flattr
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 a
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
Store's you'll be a real flattered
developer there after lots of content to
cover let's dive in
and to Devin 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 constant 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 5 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 dare forget 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
dad 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 flattery 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'll learn
more so help our 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 if 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 flat 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 it in theory but will 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 flatter I
won't bore you with 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 flatter app or a
course project and let's start working
on it
you create a new flood rap I will again
use the flatter command and that command
of course is still available since I
installed the flatter 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 to create
command from that flatter SDK and then
simply pick any project name you want
like flatter 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
treat 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 and
flattered 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 open the
project with visual studio code free IDE
you can use which I all showed you in
the first course module you can of
course all use Android studio as an
alternative just make sure that in both
IDs you got all the flatter plugins or
extensions added to get the best flatter
development experience now in that IDE I
also opened the integrated terminal
which you can open with the integrated
terminal or that shortcut here and in
there I can now run the flatter 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 do you bring that
emulate
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 get 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 install the extensions for these
tools so select dart and flutter and now
it is enters the debugging view you can
always go back with view Explorer or
that shortcut to go back into the file
explorer and now it will build your
flutter application and ship it to dead
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 will write one from scratch indeed
so let's do that in the next lecture and
the lectures thereafter
so we got our flutter wrap up and
running and keep that process running
here for now go to the main dot dart
file in the lip 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
flatter up starts now before we start
writing code in there
let me quickly walk you through the
error 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 flatterer code to
build these native apps the build folder
is a folder you can ignore for now and
there you find your built source code in
the end this is required by the build
process the lip 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 flattery 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 it get
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 pup Specter yellow
file configures your overall project and
its dependencies though and this is an
important file there we will later add
firt 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 dot dart file and in here I now
want to write some
basic code to start our application
the main retard file is a very important
file and you should not rename it
because flatter when building your
project we'll look for that main dot
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
dot dart file or one specific function
in there will be executed first and that
function which it's looking for in the
main dot 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 and flutter is created by
typing the name like main and this
specific function which flatter 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 Flattr 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
Flattr will do that for us automatically
which is why we have to name it main and
why it should be in the main dot 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 end
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
Flattr 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 flood rap 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
also contain logic for example a button
widget would not just display the button
but also you were to find what should
happen when that button is tapped so dad
is how you think about flatter you build
flatter 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 the 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 Flattr 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 40
different pages of your app between
which you can navigate around and then
you have nested sub widgets 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'd guess so let's see
how that works and how we create such a
widget
right now our flat rep 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 flood rap 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 a new object 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 it 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 and the
convention is to 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
there 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 witch
and a widget will be an object which is
why we create a class to define how that
object should look like
however flattered 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 an average 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
Flattr 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 flatter 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 flatter 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 but higher-paying package
between the quotation marks and then a
colon and then the name of the package
which is flatter in our case and then
flatter 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
that will be material dart this imports
this package from the flatter 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 which
the state full widget but we will use to
state less 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 built
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 to build
method in this class and now only the
build method has red squiggly lines not
to my app anymore the build method is
required because if we tell flatter to
use an object based on this class as a
widget it can draw on to the screen it
of course needs to rely on this being
drawable you could say and flatter we'll
try to draw something by calling the
built method on an object where you tell
it that it's a widget so if you pass an
object to flatter to draw it on to the
screen
flatter 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 flatter
because flatter 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 flatter 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 flat
awaits for this method to
turn something so add the return
statement and now the question justice
what do we return here there is a very
important rule a widget always needs to
return and never widget in the build
method until you reach widgets that ship
with flatter 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 route widget which
you use in every Flattr app you create
you return it in your own widget which
will be the topmost 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 create an 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
flatter 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 tarde
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't pass
arguments to material app our build Maps
that 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 all to the screen
when the app loads here you typically
use a so called scaffold which it never
which it shipping with the material
package your 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 an 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
pass to scaffold one of them is app bar
by writing app bar : 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 air bar there is
at idle 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 but 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 an
average it 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 build 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 all just 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 parenthesis set except for the last
one you can use a feature provided by
all IDs in Visual Studio code you can
find it by going to code preferences
keyboard shortcuts and then in their
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
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 Flattr
amp 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 to build or has to 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 flatterer package
and 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 built 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 and
Navarrete class provided by the flatter
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
void 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
a void and why it just means empty now
you don't need to return nothing like
this you can 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 a notation here it's not
required as you can tell everything
works without it but you can add an
annotation by adding an @ sign and then
here it's the overwrite a notation what
this does is it simply tells dart and
flattered that we deliberately override
a method which is also already defined
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 to find 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 a bar which is nice
but not that awesome remember that the
scaffold which it was used to create a
page and we cannot just add an app bar
there we can also add other arguments
and let's say again use that controlled
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 an
average it on our own and then add this
year but ultimately you'll always end up
with a tree of widgets built into you
the flatter material package your own
widgets which you use a lot will also
well be composed of ever ever which is
built by you but finally somewhere at
the end of the chain you will be using
widgets shipping with flatter because
these are actually then translated to
native user interface components so that
is why you always will end up with
flatter built in which it's somewhere
down the road for the body here let's
say we want to add a cart you know this
card look from material design apps well
if you don't you'll see the second you
can add it by using the card widget and
as you were probably guessing this is
all shipping with the flatter 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 always 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
all the shipping with flatter 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
unless it's 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 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 our text scaffold these are all
just single objects now we can't 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
JPEG 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 dead image widget
now to unlock this file we have to
inform Flattr
out it because just dragging it into a
folder of this project isn't enough
instead we now need to go to the pub
spec dot yeah mol 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 off your
application by removing that hash here
and then indenting this leave the dash
here that's important indented 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 dot dart file and use
that image and for that we'll use a
special constructor off 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 passed that
asset to simply as a string and then the
name of the asset the full path to be
precise so assets slash food JPEG 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 of one 1/2 but it is a huge
advancement and now we got some party
here and hopefully you get more practice
with building that widget tree you also
learned about some other widgets and
whilst you already learn about a lot of
new widgets these are all core widgets
and there are not that many
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
flatter'd documentation which provides
an overview on flatter dot 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 Doc's
area like with the docs link up here and
even if this page should change you
should find a link to a widgets catalog
here or on the left widget catalog if
you visit it you get an overview over
the widgets
Flattr 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 the
material thing actually is these are
things like the app bar which you saw
but these are all than things like the
root material app widget or if you
scroll down buttons inputs which will
see dialogues 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
which here which will 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 you 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 Cudas
well lists 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 all the close to square
brackets after the card here also add a
parenthesis 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 saved it 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
buttons let's grab that and add it here
reformat and the container widget alt
allows us to add a so-called margin the
margin is simply some space around that
container so around the button therefore
we add it by using a never class
provided by the flatter material package
the edge in zetz 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 day that changes that's the
important part then we want to use the
data we're handling in unpressed 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 built 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 of 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 school
lines again because we're missing a
concrete implementation of stateful
widget create state a stateful widget is
indeed constructed different to a state
less 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 they create state function should
look like as you can tell it returns a
state object and here again we get these
strange angled 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 flatter material package
that this state object will belong to
this state for widget or to a stateful
which at 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 create state 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
flodder 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 or 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 built method
here because the state class provided by
flutter actually has a build method now
we just need to tell flutter that this
my app state class belongs to this my
app
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 my app state as I said keeps
the built method and my app needs to
return my F state now so return
underscore my Upstate 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 to build method
and flatter internally we'll call that
build method for that stateful widget
and this is just a setup you have to
memorize this is how stateful which it's
working 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 my appstate 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 these 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 use 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 are coming from another programming
language like JavaScript you don't use
this dot products 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
alter 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 the number nested
column which is absolutely fine so now a
column which it here which will have
children and the children here that
should be our list of car
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 two lists
here to convert this to a list which can
be used now if we save this and we go
back we again see our cart 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 it 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 day
that 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 product 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
assembly a 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's food tester an
advanced food tester yet we only see one
card here the reason for this is that
updating data like this will change it
but Flattr 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 rear ending off
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
ctrl 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 their list
regarding the scrolling behavior this
already shows us how we can oberek with
stateful widgets now let's mix that
let's create an average 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 flatterer apps is you
don't put all your code in one root
widget like in a stateful widget or it's
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 when
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 stateful 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 we 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 product start 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 start 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 flatter
material package here doesn't mean that
you don't have to import it here again
so let's import package : flatter 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 stateful or a
stateless widget here you can build it
in both ways
however actually the more elegant way is
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 which 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 your type build gets 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 parenthesis and now
you can add curly braces to define which
coach it 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
limit products and then I want to store
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 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 products
property and dart offers a convenient
shortcut if I type this dot products
that it will automatically take the
incoming argument and store it in a
property with the same name so in this
products 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 products widget let's
now go back to the main dart file where
we removed that code for rendering the
cards here
I now want you also strip out another
part to put it into its own widget again
and that will be this container with the
button I will treat an average new file
which I'll name product underscore
manager the dart the name is up to you
but in there I plan to you well manage
my products so again let's import
package
Flattr material dad is the package you
work with the most as you can probably
tell by now let's create a class which
will 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 of widget because here I
now plan on managing my list of products
and changing it the state for which it
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
to 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
1'q copy and paste my products list so
let's remove it from my app state and
add it to the product managers 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 reformat this is now our
product manager state now of course we
should use it we should create it here
sell return product managers state that
already is it this is the product
managers stateful which it created
however it's of course missing our
products which it 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
as 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
passed that down to products and since
we call set State when changing it
it will re render that build method here
and therefore also rerender products
here and pass down the updated products
list which will lead to disk build
method in the products which are being
called again - so this is our product
manager with that change 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 dot dart
file anymore so we can turn this
stateful widget back to a state less
widget remove that create state method
remove the state my app state class down
there and just add the overwritten build
method to do my app step
again the body is no longer a column
instead here I now simply want to have
my product manager for data 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 all the 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
want to split them up across multiple
files you want to work with stateless
and stateful widgets use as many state
less which--it's 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 stayed 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 your hard coded
code anyways but let's say we actually
don't want to start with it but we want
to get dead starting data from outside
because we want to define our initial
set of products we're starting in the
main dot 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 back end 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 products
widget and we accept it in the receiving
widget by adding the constructor
function and we can all 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 a shortcut with this
starting product to assign the value now
we got the green squiggly 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 that you are linked
together but that still is 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
built 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 and 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 in 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
managers state here and you store it
here in an average 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 flatter 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 flattered
as some behind-the-scenes work for you
that special property is named widget
and it allows you to access the
properties off 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
auto complete 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 in its
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
of wanna add now is using that special
which at property I was referring to and
they're 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 in its 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 widgets starting
product and if you're wondering why we
are not calling set state here even
though web set 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 in its state runs
before build runs and therefore there is
no need to tell flatter 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 lifecycle 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 all to learn
how we can be back flood wraps and
finally then all to fix our broken list
here before we do that let me quickly
show you these lifecycle hooks that was
referring to you it's first of all
important that there are stateless and
stateful widgets and that there is a
difference of course stateless widgets
are used to create a widget where you
render something to DUI 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 UI of that
stateless which it gets rear-ended when
the input data changes now in stateful
widget also is all about returning
widget where we render the UI where we
as you saw in the last lecture can
receive input data which might all
change externally we don't see that here
but that would be possible and then we
also ditional II have that internal
state which we can change from within
the widget which also will lead to
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 life cycle
though and with life cycle I mean
methods you can add to your classes
which will be executed for you by Flattr
a stateless which it has the constructor
function which you can execute and then
it has to build function to draw
something on to the screen that is all
these are 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 functions all is available
in the state full widget but there we
then call in its state thereafter before
we then call built for the first time we
can then all D call set state from
inside this bill 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
passed a that 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 this
shortcut to assign a value to products
now we can re add a constructor body
because this is a normal function the
end we have to remove the semicolon
vendo and now this will execute whenever
this products which it is created so I
will print something to the console here
now we'll 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 all leave the products 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
control 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
go out of the boundaries and this
unfortunately now hides the thing I want
to show you so let's get rid of this
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 didn't see a 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 and simply because
there's a delay of
one click for the print statement there
always we now see constructor a built 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 disk build method
being executed again which then led to
the products being recreated that's the
first part but let's say 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
there's actually executed just as before
before this restarted app gets printed
because it helps 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 dot 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 create state that as you would
guess creates the state and therefore in
its state is called then we call built
in the state and since inside of build
of our state we create the products here
we then call the code
structure 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 stayed built 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 reacts acute
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 flatter takes care to not just
redraw the entire app but really check
what needs to be changed so even if
built 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 lifecycle you should
understand now there's one extra thing I
want to show you as part of that
lifecycle in the product managers state
here you can also add the date update
widget method this will be executed
whenever you're 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 were also 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 he 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 seeded update which it being
called here because a heart 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
built in the product managers 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 design
then 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 and 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
Google ish and more customizable so
therefore using it in iOS apps is also
great and flatter actually uses material
design you can still adjust your look to
all to 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 flatter 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
flatter material theme data takes a
bunch of different colors and styles we
can set like for example very important
the primary swatch swatches 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 flatter
package and there we can
so-called aesthetic 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 we 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 will have a color
argument we can pass and there we can
now use our theme by using a special
object provided by flower 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 theme and then we can
access for example primary color here
and if we now save this this but now all
this orange so that's pretty convenient
let me by the way also we add that image
because I don't care about the broken
list anymore just once you 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 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 avert 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
done with the course so this is the
material design and how you can adjust
it you can also 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
ideas should offer such a feature this
lets us look into the file which is
added by the flatter 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 will also
find deep orange here it is there we get
the static constant of type material
color which is just an internal type
deep orange so this is a narrow feature
of Dart we can find static properties
which are properties we can import from
a class without instantiating the class
so without executing the constructor now
when our feature we already use but
which I also want to show you how to
create it on your own ara named
arguments we're using it in the main
dart file here for example the arguments
we pass to theme data they all have a
name name colon and then the value for
the name now that's far we in 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 of dart file this
string is stored away in this starting
product now if you only get one or two
arguments using that makes sense but
maybe you get 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
named argument just as easy as debt now
we can pass a value by targeting
starting product here then I : and then
the value so now we're targeting this
argument named starting product 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 override 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 squiggly 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 react 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 for 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
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 fruity concepts here we'll
all Z 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 flood wrap 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
dot start foul so you start with this
project and I want you to create a new
flood wrap so create that root widget
which you learn 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 an 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 free widgets the app widget the
text control widget which also contains
a 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
Flattr 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 route which it is called
my app and here
what's without parentheses here I will
then extend a state less or full well
let's start with a state less widget
because we just need to output an app
bar and some text so nothing to change
right now so let's start with the 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 all the market as
overwritten so that this is really clear
that we're over writing 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 app
work allows us to define of 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 homescreen
so the first widget the first content
which should be displayed and there I
want you create a complete page with the
app bar with the background and for that
we use these scaffold widget which all
the ships with flatter
now these 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 another widget it's a text
widget here and I'll just say assignment
one here we don't just want to have the
app bar though we'll also add the body
to the scaffold and dad 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 do
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
flatter and there 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 on
to 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 then 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 control v to start it again
this will now build the project again
and ship it on to 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 it 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 rice
button here it will hold a child with
the content of the
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 a now a function that
doesn't do anything with that it's not
all up in the top well that is something
we can change later if you 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 unpressed
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 a number 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 order
completed 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 by app state which we can it
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 property you can use in that
state class and I want to use it down
there in this text I will not output a
string or a 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
GUI will not rebuild and then in there
I said main text equal to dis 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 les widget in a state full one now
if you click change text you see this
changed and the positioning changed
because the button is automatically
centered with the average 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 will
split it up into three 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 start 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 flatter 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 to 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 too 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 controlled 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 get 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
Flattr package Flattr material Dart
let's create a class text output again
not named text to not clash with the
built-in text widget it extends to 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 peer final
property named main text for example it
will be a string and initially it's
undefined but here will then target it
with this main text this by the way is
one of the few places where you use the
this keyword for this 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
start 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 route app anymore
we can then get rid of create state and
of that class definition down there and
just add the overridden 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 get these
core features practiced now there's so
much more you can do with flatter
regarding the output or 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 did we also practice the basics
about widgets now we passed it around
let's dive into you 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 may be 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 the dart for now
now in the product control all first of
all import a package and that package
will be flutter and material to 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 stateful or a stateless widget and it
will be a stateless 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
override 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 race 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
instead of the product manager so let's
start and let's import it so add an
import at the top and import my product
control the 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 said
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
justice I don't need to state in a
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 as state full widget because
there I need that state because there I
connect to a widget where they need to
pass the information to you the products
widget itself can't be turned into a
state full one because even though I
need the products 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 ever change it like the
product control or require the widget
state the data were changing the
products which 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 justice 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 managers state
here I'll add it below my unit
statemented 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 the
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 it'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 if
that I'm defining add product and now I
can go to the product control and cap 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 on one should take away
lifting the state app was one important
concept but now you give and never
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 ad 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 whenever 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 you 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 to
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 will 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 which is in
our case is the product manager then you
do that by passing down a reference to a
function which executes in the parrot
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'll 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 wire 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
flatter itself for dart itself tells us
that we should do this because we get
this warning that this Clause is marked
as immutable and that assembly 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 day that 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
managers state and there this might
surprise you I can go to my products
list which we certainly do change and I
can add final thereto 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 and that's
important that's some 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 product it's a
different thing for numbers by the way
if I had a number eight here and it said
that say 42 and that's not my age but
let's say that is our age and now here
in set state I want
set H equal to 29 which is my age well
then I get a warning here that H can't
be used as a center 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 we
have 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 an 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 it 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
Const
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 cons
keyword and therefore it already
understands that calling adhere 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
dad 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 cons 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 Flattr is all about widgets you
compose the user interface which you're
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
built 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 then
have the body with all the other widgets
where you have a column which might have
an image and the text
so this is how you build slider 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 you 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 stateless widgets and
they also will have a build method no
dead lifts 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 TD 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 rear end
recycle so the built method gets reacts
acute it and a new tree of widgets is
created and flatter 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 flatter 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 all says 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 which is
we have been using we're exposed by
flatter 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
wanna dive really deeply into it you
will learn more about it throughout this
course though - 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 to
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 in
its 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 upon
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 which is part is rear-ended
and the build method is then always
called when the widget is rear-ended
flatterer needs to build method and the
Whichard returned by it to know what it
should draw onto the screen and these
are the basics about floral 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