Flutter 19 - First Flutter Application Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian and welcome to
the 19th flutter tutorial today we're
gonna actually start working with
flutter I'm so excited
alright so just for reference you need
to know dart which is a programming
language you can find that at
dartlang.org in case you skip to the
other tutorials flutters main page is
flutter dot io now there is a lot of
information here I mean tons this is
very heavily documented even for being
an alpha I was very surprised we did
actually already install flutter but if
you haven't already if you haven't been
following along go ahead and install it
for your OS it's just dead simple and
how to do it really you just go to your
operating system follow the directions
and boom now before we do any of that
what we should do is do what's called
flutter update and flutter dr. hmm maybe
it's not update maybe it's upgrade there
we go
so to flutter upgrade and then it will
actually make sure that everything is
up-to-date everything's the way it
should be and I think it actually runs
flutter doctor for us but we're going to
run it separately just so I can show you
what it does we've been working with
this for a while and because it's in
alpha it's going to change very rapidly
so we want to make sure that we have
everything update before we really start
diving into this all right now some
prerequisites here and I'm going to
actually run flutter doctor just so you
can see the prerequisites Wow can't not
spell doctor when you read flutter
doctor it will make this nice list for
you showing you hey if you try to work
with flutter this is where you are and
you see how mine is nice and beautiful
it's got little check boxes next to
everything it's saying we have flutter
on and then I have it on my virtual
machine and we have the Android tool
chain what this means is I already have
the Android SDK I have Android studio I
have the Android NDK and all that stuff
actually on there and configured I know
it says on my screen I do not have an
indicated I actually do
I just haven't pointed it anywhere and
that I have Android studio installed
I have IntelliJ Community Edition I have
no connected devices but that is easily
solvable once you install the Android
tool chain especially Android studio you
get what are called virtual phones or
virtual devices we will be working with
virtual devices in this tutorial so
before you go ahead with any of this
whether you are on Mac Linux or Windows
I would highly recommend that you stop
what are you doing actually pause this
video and go out and download either
Android studio or iOS with Xcode I'm
going to be working with Android studio
I may later work with iOS video
recording works a lot better on my Linux
virtual machine that it doesn't my Mac
for some reason everything that you do
in flutter should work on both iOS and
Android so have no fear which one you're
working on they may look a little
different but under the hood they should
work now once you have those installed
and configured come back to this point
in the video I'm not going to cover how
to do that because it's going to vary
drastically on your operating system in
your configuration and there are
literally thousands of videos out there
so go to google you know go to youtube
look on how to install android studio
actually go out and do it all right once
you've got that come back run flutter
doctor again and once you have all these
checkmarks saying hey you're good you
could probably go ahead and work with it
now on my Mac I can work with it but
it's saying that I'm missing some
dependency on Xcode which is just
blasphemous because I work with Xcode
almost every day on personal projects so
without further ado let's actually
create a new project now this time
instead of Dart we're gonna click on
flutter you know so we have a lot less
options and if you don't have the SDK
pointed it's going to say install SDK
makes it very nice and simple for you
now this is where things get really
super interesting with flutter notice
how we have this nice beautiful list of
options and I was blown away when I
first saw this or say first flutter not
fist flutter cheese fisting flutter toy
I'm sure somebody out there is laughing
pretty hard about that one of the
demands is like hey Brian's gonna flip
this flutter anyways
so we've got our name we've got our
location we can give it a description
you can give it a type we want to do an
application organization calm your
company this is pretty standard naming
convention it's backwards from your DNS
name of whatever website you have so in
my case it would become void realms it's
actually do that I am NOT good on the
typing today all right then notice how
there's an Android and an ios language
that's because it builds an application
for android and iOS and you can choose
which language because you can do it in
java or Paulton you can do an
objective-c or Swift I'm just going to
leave those as defaults and then I'm
going to hit finish and this may take
just a second as it builds our project
in the background for us alright so
first thing we get is this big beautiful
project a lot of code and it's pretty
well-documented you can see there's huge
chunks of documentation in there whoops
and it's got all of the packages that we
need already in there it's got the dart
SDK
it's got flutter for Android you notice
how that says flutter dot jar because we
are working with Java for Android even
though we are actually working with dart
and flutter the project structure is a
little bit different than what we're
used to
you notice how we have an idea folder we
have Android floater which is actually
our Android project and we have all our
Gradle settings and all that you would
expect from an android project we also
have an iOS folder we have a test folder
and then we have all the things that you
would expect including our pop spec yamo
now one thing to know is this has the
uses material design and we'll get into
material design in future tutorials but
just understand that that is a necessity
for this to work and it should be under
the flutter section now there is one
folder called Lib and in there is main
dart which is this beautiful file that
we're looking at now let's actually
minimize that so we can see this code
we're going to just go through this code
there's no sense in retyping all this it
did it for us
and you can see how we have our main and
that is just calling run app and we're
making a new my app my app is a class
that extends what's called a stateless
widget they're stateful and stateless
widgets stateless widgets have no
concept of what a state is state full
widgets hold a state so what is a state
a state is won't think of it as a
variable I don't know why they didn't
call it like variable widget or
something but state is kind of like the
de-facto language in the mobile world
you have to have a certain state so if
you are let's say on your phone and you
type something that is part of the state
because if you minimize that application
some operating systems will actually
either suspend it memory or a doubt just
flat-out the delete it in memory and
then when you bring it back up you have
to restore that state you have to put it
back the way it was so think of a state
kind of like if you're married and like
your wife's attitude you say hey you
want to go get tacos and she's like no I
hate tacos well now she's mad at you
because you want tacos that's her state
but then you say hey let's go get a
pizza and then suddenly she's happy oh
that's what state is so we have two
different things we have stateless and
state full whoops state full so we're
running an instance of my app this is
where things get a little weird we have
a stateless widget that is called our
root widget meaning everything else is a
child of this of some type you can see
how in there
it has a build method which is returning
a widget everything is a widget widget
is just if you're not from the United
States which is just a generic term
meaning it's a thing every widget will
return a build function or will have a
build function which returns a widget
what the build function does is it marks
things in memory based on their state
meaning what has changed and you can see
we've got some properties here we're
gonna return a new material app now we
mentioned material before in our pub
spec
annele uses material design now we have
a material app we're gonna get a little
more in-depth in this but really just
think of this as like a blank piece of
paper in front of you and on that piece
of paper you're going to draw out all
your little widgets and everything that
you need for this to function properly
and on that paper the first thing we're
doing is saying the primary color is
blue and you can see in the directions
that says you know basically change it
from like blue to green we'll do that
here in a minute and then the home
property is a new my home page with a
title my home page extends a stateful
widget meaning it knows there's a state
it knows something's going to change and
then we have our little constructors
here and then there is our actual state
right here this string notice how it's
sync create state underscore my home
page state which means it's a private
class because that is how dart denotes
scope between public and private is that
little underscore and it extends my home
page
well my home page is here so we have my
home page creating underscore my home
page state my own page state is
extending my home page so you have a bit
of a circular reference here and this
gets very very confusing very early on
because you're like I don't understand
why my home page just can't have
everything that I need why are we doing
this twice there was a very long article
and I wish I had remembered it but
basically it said that the stateful
widget is just a container if you will
and containers actually not the right
word they used a different term but it
basically holds the state where the
state itself is what's going to change
see how this is underscore my home page
extends state meaning we know it's going
to change and the type of state it's
going to change is a my home page BAM
this guy so that's what we got now I'm
gonna say that's what we got that's just
a property of my home page the actual
state is this underscore my home page if
that sounds confusing it's because it is
very very very confusing so flutter
developer
if you are watching this please make
that simpler make it more easy to
understand because I spent about an
evening with a cup of hot chocolate just
cursing at my laptop screen trying to
figure out what you were doing but once
you think of it as you know you're going
to create state at the state you're
going to create is just simply this my
home page and just drink the kool-aid
accept it as is then it makes a little
bit of sense so the my home page state
because that's what that is it's just
simply going to increment a counter and
then there's the counter we're going to
increment notice how in this increment
counter there is a set state function I
should say stead state method and it
literally says this call to set state
tells flutter framework that something
has changed in the state which will
rerun the build method remember every
budget has a build method so in here
we're going to build based on that set
stage changing the counter and then in
there don't worry if all of this sounds
like ancient Egyptian algebra we're
going to cover this in depth in future
tutorials I'm just giving you a
high-level overview but in there you
have what's called a scaffold so the
build method of the my home page state
is just returning a scaffold think of a
scaffold as well it's pretty
self-explanatory a scaffold outside of a
building it helps you put things in a
certain structure in that scaffold we
have an app bar we have a body and that
body has children if that sounds like a
lot to digest don't worry it is it's
just the basic structure of a flutter
application now we want to run this to
conclude this application so you see how
it says no devices we have the Android
studio installed and we have an emulator
in there so first thing it's going to do
is open up our emulator for us
if we're just going to wait for this to
run
well that's a little slow so while
that's loading I'm gonna actually just
add in some notes here all right so
we've got our little Android device up
and running and what we want to do next
is actually run this and put it on the
device so we're going to and just click
this little run guy so you can see how
we're running it on this device and this
is what we're running and we're just
gonna BAM run that and you'll see it'll
actually go out and it'll start building
it it's initializing Gradle because
cradle is part of the Android tool chain
I shouldn't say it's a part of the
Android tool chain it's used by the
Android tool chain and then it's going
to take just a minute to really build
this thing and throw it out there once
it does you have something called hot
reloading meaning you don't have to do
this every single time you can just
leave the element emulator up and
running and as you make changes in your
code in the background it's going to
push those changes out to the device all
right so real quickly here is our app
bar if you're looking at the code here's
our home it's actually highlight it here
down in our scaffold app bar is this
blue thing the body is a new center
notice how that's a new center not just
Center so Center itself is a widget so
we're centering things and in there we
have children we have a texts as you
have pushed the button this many times
which is the new text counter and it
just works there's a state and you can
see the state changing the background
now notice how this is blue we're gonna
go in here and we're gonna say color
green
still blue let me go in here and save it
and as soon as I save it notice how it
actually changes it we didn't have to
reach anything out we didn't have to
rebuild anything it did what's called a
hot reload so that's it for this
tutorial I know it's been very
informative and a lot of this is
probably still very fuzzy in your mind
and that's to be expected we're gonna
start diving into this thing in the
future tutorials thank you for watching
I hope you found this educational
entertaining and all the source code for
this and the stories are out in the
tutorial section of my website boy drums
calm and actually I don't get hub but
this just links right to the actual
tutorials on top of that feel free to
join the void rums Facebook group where
there is seventeen hundred plus other
developers out there all different
languages all different walks of life
and we can definitely help out thanks
for watching