Flutter 20 - MaterialApp Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian and welcome to
the what are we on 20 what the heck
we're on the 20th tutorial but um I've
literally just published 1819 not too
long ago and there's already like 50
views on each I have a feeling there's a
small group of you out there like
watching these as soon as they come out
anyways um so what we're gonna do today
is we're going to do the obligatory
hello world application if you don't
know anybody plugin terry every time you
start a new language or framework it's
kind of like the traditional thing to do
to make a hello world application
literally just displays hello world on
the screen we're going to take it a step
further because I think those are pretty
elementary and we're gonna see what it
takes to build a basic application I
mean we're talking real bare-bones here
if in case you're wondering where we're
at we've installed flutter we've created
our first app we set up an IDE and we've
learned Dart so we're in the tour of the
framework and we're actually on this
second bullet point hello world so we've
taken this code hello world right here
and we put this into a new flutter
application and we've got our emulator
up tada
and we're just going to run this thing
now I have kind of a bone to pick with
the flutter developers because this is a
little misleading and I'm going to
explain in depth in this to detail in
this tutorial why it's misleading you
can see how its hello world so it
literally just displays something bang
our job is done
not quite let's say we wanted to put a
button here well you can see let's just
pick this apart the import package
flutter material that Dart
we're going to talk about material a lot
main we have our run app which is kind
of the starting point of any flutter
application and in there we're going to
say it's going to return a new Center
which is just going to Center everything
the child of that is a new text in that
text is hello world with a text
Direction of left to right now for that
to work uses material design true must
be in the flutter section of the pub
spec Tamil remember burn it into your
mind we are going to talk about material
a lot so looking at this I thought well
it'd be cool if we could just see what's
out there so I clicked on widget catalog
went to you the basics and so no these
are kind of neat hey they have a button
buttons are always fun so let's just
view the documentation on this so yeah
let's just throw a button out here and
see what it takes to get a button on
here so it seems like it's pretty simple
we could just take this do a raise
button notice how it's nice enough to
put the on press decal null for us so we
can actually link that to a method and
initializing hot reload and notice how
nothing happened hmmm so we're gonna
kill this typically when hot reload
doesn't work it means there was a
problem and so some elements were
changed during reload but did not run
when viewed is assembled you may need to
restart the ad for the changes to take
effect so let's run this let it rebuild
and I have to apologize if my voice
cracks a little bit I feel like I'm
coming down with a cold or something
it's like first snow of the year it's
pouring snow outside I live in Michigan
so I'm sure I'm coming down with
something so as you can see mistakes
were made all right so this is the same
error message over and over again
separated by this line so we're just
gonna start reading here so you actually
see it says no material widget found
material button widgets require a
material widget ancestor in material
design most widgets are conceptually
quote-unquote printed on a sheet of
material in flutters material library
that material is represented by the
material widget it is a material widget
that renders ink splashes for instance
because of this many material library
which is require there'd be a material
blah blah blah blah blah blah blah
really what's that saying is your route
widget here needs to be a material
widget it needs to inherit material
design now what do I mean by material
design this is where you kind of have to
take a little bit of a leap of faith
because it doesn't really transition
smoothly into this you can see how
there's basic widgets and then using
material design so they kind of think
material design should be up above but
there is a whole material design
guideline here and you can see how
there's a material app really what it
means is conceptually think of your
application as a desk and on that desk
you're gonna put a piece of paper and on
that piece of paper you're start drawing
your widgets and scaffolds and app bars
and all those neat little things so
click on material app and you can see
how overall satisfied with flutter hmm
I'm gonna put somewhat because we've had
a boo-boo no sorry Google I'm they're
gonna fill that out all right so maybe
if I wasn't doing a tutorial when you
popped up I'd fill that out but you can
see material app is an application that
uses material design all right so we're
headed in the right direction here and
it's a convenience widget that wraps a
number of the widgets that are commonly
required for material design
applications it builds upon widget app
as adding material - design specific
functionality such as animated theme and
grid paper alright and you can see it's
also so scaffold navigator and things
like that so it sounds like a lot of
what we need so what we're going to do
here is we're going to get rid of this
I want to say new material actually
let's not do that let's break this out
we're going to extend the stateless
widget we're not gonna worry about state
in this application and what we're doing
here is kind of just the bread and
butter of almost all flutter
applications here I'll send you my app
and of course hot reload won't work
because we have a boo-boo here because
we're not returning something so in here
what we're going to do is we're going to
return a new material app
alright so notice how the little red
squigglies went away so the code thinks
it's correct we still got that error
message up so we're gonna kill the app
and we're gonna rebuild it and send it
out to the device see what happens here
alright so pushed it out oh we have a
boo-boo it says and remember the same
error message over and over again it's
just in these lines package blah blah
blah flutter source material app Dart
failed assertion line at home equal no
hmm home equal no our home not equal no
basically it's saying the home is null
so we need to give some sort of home we
need to figure out what's going on here
right it's part of material design here
and it's not really well spelled out at
least I didn't find it right away
following the flutter docs so there's
home it's actually part of the material
app and basically it was in assert call
that said hey this is null so we need to
figure out what to put here hmm
so let's make a new scaffold let's just
save this notice how it says
initializing hot reload and then
reloaded meaning we go back here and
tada
it suddenly put something out on the
screen we have a big white box so what
is this thing and notice how it says
slow mode you may not be able to see it
over that clock but it says slow mode
okay so my app is a stateless widget
which is just you know a widget and then
the build is going to return or render
whenever you see return and build
basically we're rendering a material app
so this giant white box is the material
app the slow mode basically means that
we have not compiled this for production
yet this is like a debug version if you
will so it's not really meant for the
real world we're just doing this because
we're goofing around on a computer if we
were to send this to like the Apple
Store or the Google Play Store we would
want to compile this for production and
actually
make it so that's not in slow mode which
we may cover in future tutorial
thankfully we'll probably cover in
future tutorials so you will see slow
mode a lot don't be alarmed
so this is a pretty plain application
what does the scaffold really do for us
why are we messing with that think of a
scaffold well like a scaffold you see
these around buildings when people are
washing windows or painting they're just
you know structures that you put up so
that you can get to different parts of
the application or different parts of
the building in that analogy so what
we're going to do here is at bar equal
new app bar let's actually say flutter
hello flutter and you can see hot reload
works so suddenly we have a app bar so
the app bar is this top blue section and
really all this does is it lets the user
know what you're working with the name
of the application or what page in the
application and you can put buttons and
things of that nature up here think of
it like a giant toolbar now this extra
white area down here is called the body
and that's what we're gonna work with
next body would be the body or the
working area that the end user would
actually work with here so when I say
new Center and then in Center we're
gonna say child new text
save that hari little pick it up and
then bang centered is our hello world so
remember the whole goal of this is we
just wanted to put a button on the
screen so let's figure that out let's
get rid of this it's gonna put our new
raised button and save this and notice
how I reload at that time so this little
gray thing is actually our button we
want to put some text in there so we
kind of see what's going on here that's
actually my button and we'll break this
on to a new line so it's easier to read
what's going on here whoops there we go
so very faintly it grayed out it says my
button it's grayed out because we don't
have an on press in here so we have our
app bar we have our body and in our body
is centered we have our button so why
didn't this work before and why is it
working now that's the million dollar
question remember at the very beginning
of this when we tried adding the button
it said it needed an ancestor of
material widget and needed material
design you're gonna hear material over
and over and over again while you don't
have to use material widgets and
material design you would be fighting a
massive uphill battle kind of the
de-facto way of doing things and flutter
is to use material design that's why I
wanted to start this with the material
app because the bread and butter of what
you're going to be working with in the
future
so that's why it's working now because
as you can see the button is actually
part of this widget tree and the root of
that tree is a material app that has all
the material goodness that we need so
that is a lot of talking I hope you
found this educational entertaining and
we're gonna work with this a bit more I
think the next video we're gonna
actually do some basic layouts and just
kind of figure out how things
lay it out but I wanted to show you just
the bare-bones flutter application like
a real quote-unquote application not the
little hello world they had on their
website if you found this education
entertaining be sure to visit my website
void Rome's comm we have the source code
for this and all other tutorials out in
github and if you go to contact there is
a void roms Facebook group completely
open anybody can join we have like 1700
programmers all walks of life all
language is out there that can help you
with any questions you have