Flutter 41 - Pizza Ordering App Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian and welcome to
the 41st flutter tutorial today we're
going to do something a little bit
different I've been getting a lot of
feedback and some people kind of want to
see a quote unquote real-world
application so we're going to make a
quote unquote
real world application I don't edit my
videos so you see all the successes
challenges and complete and utter
failures and spelling mistakes so there
may be parts of this you're gonna want
to fast forward through I try to wade
through it pretty quickly but you know
being what it is usually is filled with
errors so we're going to make a pizza
ordering app now while this won't
actually order a pizza it will be the
skeleton from which you could order a
pizza if you like had your own pizza
company so from here we're going to
create a directory we call the screens
and we want to create another directory
here called images now you notice how
images is actually at the root it's not
down in the libs here and we want to
create another directory here called
code I'm just kind of showing how I
break things up a little bit here all
right so what we're gonna do here is we
are going to build an application that
allows the user to order a pizza and
select toppings and size and things like
that I'm going to start the emulator up
and kick that off in the background
mom's in here talking alright now first
thing we want to do is create a dart
file here we'll just call it pizza and
we're making this in the code folder and
this is going to be the actual the
actual state of what we're saving here
so class pizza and in the past what
we've done is we've had the state per
page and what we're going to actually do
in this is we're going to make this
class on one page and then hand it off
to another
and we're just going to make the list of
Pizza sizes that are available and we're
making this static because we want to be
able to access this from outside of a
instance of the class you'll see what I
mean here in a little bit all right now
we want to say string size the initial
size that we're going to let them choose
equal sizes dot element and we want 0
that has to be static or we won't be
able to use that as an initializer and
then we want the map I'm going to call
this toppings yeah cap key didn't work
there
I've been asked a lot of questions like
how many of flutter apps have I built
what have they been used for things like
that really they've been a lot of
internal prototyping zuv future projects
that I'm working on I've actually been
looking at getting a I want to say a
prototype up and built for a big project
and I've been looking at different make
sure I spells pepperoni right or they'll
never live that of them all right there
we go
yeah you guys will never let me live it
down if I spell it although I always
misspell everything just like a curse
but anyways I I want to find just like
the perfect mobile framework to work
with and it's got to be cross-platform
it's got to be a few things and it's got
to work with firebase and Facebook
integration and it can't cost money as
to be open-source there's a few
requirements for this project and that's
what really led me to flutter so we're
gonna add just some toppings here
pineapple usually I'm like a pepperoni
sausage extra cheese kind of guy I don't
really like pineapple and sardines and
I'm just adding a bunch of weird stuff
onions I guess those are alright I
usually just pick them off throw them in
the trash mushrooms
see peppers I don't know I gotta think
of some crazy stuff here like got
pickles called the pregnant pizza maybe
chocolate not sure jeez I misspelled
chocolate that's embarrassing alright
I'm just what else could you throw on a
pizza I'm just trying to think of some
really off-the-wall wack bananas why not
a banana pizza
banan
there we go and one more why not
what could we throw in a pizza mm just
olives there we go all right so really
what this class is going to allow us to
do is hold the state in memory as we
pass it from one page to the next and
we've got the size I should say these
sizes that are allowed for the user to
pick the default size which is going to
be the first one when this class is
first created and then we've got a map
of toppings and they are all false
initially all right so that is in our
code file here now we got to create some
screens mmm dirt file here we go call
this home home is kind of like always my
de facto what I'm doing next is going to
just build out the rest of them we want
order this would be where they actually
order the pizza and I've got to kind of
slide my notes here a little bit and
then one more which we would call review
this will be actually after they've
they've selected the pizza in their
toppings and then they want to review
their order before submitting it that's
kind of like the typical way of doing
something so we're just going to because
these depend on each other we're going
to work backwards here so what we're
going to say is import and we're going
to import the package flitter material
and then we're going to import the
package Pizza demo and we want to be in
code and we want to import the pizza art
file that is our code file that has all
these state goodness here they were say
class review extends so I'm gonna want
the state list widget because we're not
going to hold any state here and we want
the pizza pizza order
and that's just gonna be null initially
and then we want a list with string this
is what we're going to just kind of
convert our pizza order to and we could
have wrapped this functionality directly
into the the pizza class but I just kind
of wanted to separate it so you could
really see all right so we've got that
and that now what we need to do is let's
just get rid of this complaint here
override widget build the context
context all right that is going to put
the body here so we need to return a
scaffold there and that'll stop
complaining for a minute all right so a
couple things need to happen on the
review page and this is the final page
right before they submit their order is
we need to actually take the existing
order and render it out for them to view
and then you know basically have a
button for them to do something with so
to render that out we need to actually
create a list and then we're going to
present a list view to the end user so
what we're gonna say here is review this
is the constructor of the class in case
you were still fairly new
so to use this class you're going to
have to hand us an existing order
basically without that you just can't
create it I'm gonna say pizza order
equal order and then from here we're
just going to say we're going to add the
value of the size so we'll say size
equals and then we want thee
there we go then we're just going to say
lest I add and we're just going to add a
blank line here and then we're gonna do
we're gonna save a little bit of time
here and we are going to say it's an
ordered map actually toppings map this
is why I put it in a not map this is why
I put it in a map so we could do the for
each and then we're just gonna say
bangbang and then do that create our
nonnamous function here then we got the
name and the value and we're gonna say
if value of then kind of add the name
there so pretty easy to understand when
we create an instance of this reviewed
at dart we are going to take the
existing order out of the constructor
we're going to add it into our pizza
order variable and then we're going to
generate a list which we're going to
present to the user in the form of a
list view which we've done before so
down here in the scaffold we are going
to say a bar and you app bar
why are you messing up on me here well
title okay say review pizza order and
then in the body we're gonna say new
container gonna do 32 padding and let me
get rid of this little bottom think so
we can see what we're doing here now
child we want a new column and in the
column we have these children and then
we have our array of widgets so we're
gonna say new text and let's actually
break this down a little bit here
and we want the font weight to be the
font-weight:bold so we're just going to
boldface that review your order and now
that we got that I think I'm just going
to collapse that back down into one long
one just to keep it nice and neat
sometimes I get overly picky about the
sort of stuff alright so we have our
text now this is something that you know
if you're kind of zoning out on me
you're gonna have to kind of pay
attention to a little bit here what we
want to do is add a ListView like we've
done in the past the problem is if your
ListView goes outside of the bounds or
the visible area of the material that
you're working with it will display this
ugly yellow and black bar and you'll
probably see that later on tutorial but
I'm gonna add this just to get rid of it
it's a new expanded and what expanded
does is it well expands as far as you
need it to go really without getting
overly technical and from this we're
going to say new list view that builder
and then of course we do our item
builders from that so what we need to do
now is let's break this down we've got
our item builder null and let's do
shrink wrap is true that way we don't
run at any bounding issues item count is
equal to the littlest that count
oops let's that link that count and then
for item builder this is where we want
to say
the context context Oh what is this
thing complaining about no can't be
assigned to the parameter type we're not
giving it no oh I know what were you
missed there we go that should make it
happy so in here what we need to do now
is break this item builder out and
actually have it build the items we've
done this before but you know just so we
understand what's going on here we're
going to just simply return a new text
pretty simple what we're building here
let's get rid of that and we're going to
return the element at index so really
we're just saying hey the list length is
the item count for the item builder
we're going to go through each item and
then print out each line of that list
pretty simple pretty easy to understand
there is our review page and now working
backwards we're going to go to our order
page actually I think we're going to
fast forward we're going to go to the
home page because I want to actually run
this and display something here so when
I say import and we'll say package and
we'll do the floater material package
class home extends and want a stateless
widget because we're not holding a state
at this point and we want to override
maybe override the build function I've
had a couple people ask me not just with
these fluttered storms but other
tutorials how hard it is to actually
make it a turtle and it's pretty
challenging trying to think type and
talk all at the same time is not really
my forte as you can see I'm making some
very gnarly little mistakes here so the
home page is going to be very simple but
there's gonna be key element that I
don't think we've gone over yet we're
gonna just you know how to display an
asset image so what we're going to talk
about is getting that in there so we'll
say app bar equal new app bar title
equal 0 text Pizza demo why not and then
from here we're gonna say body just get
a padding in there and then we're going
to say oh do I want to Center this I
want to just column it I think I want to
just you know I want to back this out a
little bit
I do want to Center that there we go see
there we go there so we're just going to
Center this container then in the
container am I going to column and our
children's we're just going to have
simply two widgets in here we're going
to have the image asset and the raised
button now before we do the image asset
this is going to be key we have to
actually add the image in so we're going
to go to I have this little Pizza image
if I just blow this up that's what it
looks like so I'm just gonna copy this
literally copy it and then go over to my
images folder and paste it in and make
sure that it's in there now I do want to
check one thing real quick I think it's
this pup spec he thought yeah mole file
and yeah you see how it didn't add the
acid and so we're gonna have to add that
in so let's and it says literally to add
assets to your application like this so
we're just going to go a bang-bang and
we're say images and we're gonna say
pizza PNG pretty sure that's what it's
named and that's the full path to it
from the base or from the root so it's
in slash images slash pizza dot PNG just
make sure that is in there alright
pop-specs been edited Pub failed that's
not good
what did we screw up here let's go back
and look at that oh that's why
let's try pounding that out like that
that should work okay so if you're
wondering what the heck that was all
about it's got to be tab indented
there's a certain parser that runs in
the background and it wasn't tabbed so
putting that tab in there suddenly it
magically knew what I was talking about
all right so what from here we're gonna
say new and we're gonna say image dot
asset whoops I screwed that one up say
new image dot asset there we go and then
it wants the fully qualified name here
so I'm gonna say image
and then from there we are going to say
you raised button and then expand this
out
and we don't have the Navigator in there
yet so let's work on our main real quick
here and we want to import a material
app
we want screens and we want home dot
darts right now I'm on a mission just to
get that home page showing so we're
going to do a run app my app doesn't
exist yet we're going to build that
super quick and then we're set class my
app and we're going to extend a
stateless widget now from here I need to
override you guessed it in the build and
then we're just going to simply do
navigation like we've done before we're
saying return you know material app and
then from inside the material app we're
going to do our navigation what does
this thing gripe I didn't complaining
about I build a bit doesn't subtype blah
blah blah hmm why is that complaining
widgets bill bill context did i misspell
something see this is the part that
drives me nuts about not editing my
videos because you'll see her for about
20 minutes watching me trying to figure
this out hmm
invalid override field contacts it isn't
a subtype it of course it is oh I see
what it is it's not widgets widget derp
I feel stupid all right so there's our
material app and then we're gonna say
title I want to say navigation and then
of course our routes
and we want the widget builder now that
we've got our string widget builder we
are going to simply say bang bang and
then create our routes and we're just
going to copy and paste this bad boy
because why not save some time and from
there we can just copy and paste this
whole thing and make our three routes
home order and review boom and we're
just going to let's flush out this order
page real quick we're just going to do
the bare minimum on the order page all
right import package material and then
we're going to say
extends the stateful widget and then
we're going to override the state which
doesn't exist yet cuz we're going to
build it here in just a second always
makes me nervous when I type things out
before I've actually created them
because then you know intellisense isn't
helping me and I have a nasty habit of
typing faster or slower than I think
sometimes or faster than I think so we
are just going to make the state of the
order and then we're going to you
guessed it override the build
and from here we're just going to return
a new scaffold and I kind of want to
mess with this one lashes because this
is going to be the kind of the meat of
the application and I really want to
make sure we get this right here so
we're just gonna say new Center and then
in there we're gonna say child giggles
new container a child equal new what do
I want to do here a new column and we'll
just leave that blank for now I'm going
to add the padding in there that gensets
all 32.0 because it's kind of my
favorite here all right so now it's time
for us to actually try to give this
thing a build and make sure it actually
runs we've got kind of the bare bones of
our application and so the main dart
file we are going to actually we need to
import some things so this is going to
complain order and then review
all right now it should kind of somewhat
run so our main dart file we just have
our material app and in there we have
our routes the goal of this is to bring
up the home and we're gonna see if we
can get that to work real quick here we
are actually missing a piece here let me
go new home otherwise it won't do
anything there we go so we're gonna have
our initial route in there alright let's
give it a whirl and see what breaks and
what works pull up our Android emulator
here I've had a few questions about why
I use the ammolite Android emulator
instead of the iOS emulator it's very
simple it's just because I'm programming
on my Linux machine if I was programming
on my Mac I would have a choice of both
which you could probably just do both
the same time I haven't really gotten
into that so because I have my
microphone plugged into my Android box
and Reeboks has been kind of my main
development box alright so there is our
home page and the order button is grayed
out because we haven't put that in there
yet we're going to do that navigator
next we can see there's our beautiful
pizza icon and we're gonna just start
flushing this thing out so let's switch
over to home and there's our aunt
presses now we're going to say unpressed
bang bang and then we're going to say
whoops the navigator dot of context and
then we're going to just do a push name
and we're just going to push over to the
orders page hot reload should grab that
yeah now we can actually click our
button and nothing happened oh I think I
think we're missing something here
import package whoops
I wanted Pizza demo screens order I bet
we just forgot the import here let's try
that again hot reload and nothing
happened hmm
this should work let me rerun the whole
thing maybe just didn't pick it up if it
doesn't run this time I'll actually read
the error message not a fan of modern
day error messages come on all right
what's going on here
blah blah blah blah blah blah blah blah
exemption caught by gesture the
following assertion could not find
generator of route orders what we have
it right here oh that's why order it's
spelling error all right let's try that
again now suddenly it goes to our order
page all right so we have basic
navigation we have an image and we are
going to start actually just doing the
order the review page should be done so
we just got to really focus on this
order page once we hammer this out we
should be pretty well done here so let's
flip into order and we got some work to
do here
so we want to import a package screens
review want to import the package from
the pizza demo code pizza cuz we're
gonna work with that class we're gonna
make a simple order here and from here
we need to actually go into this and
actually build our state out say pizza
its order able make a pizza know and
tell us sense why have you betrayed me
all right there we go so we're gonna
have a couple things in here we're gonna
have a let me pull this up so you
actually see what the heck I'm talking
about here the way I want it is we're
gonna have a drop-down box here so we
can select the size and we're gonna have
a list of toppings in a ListView and
then a button at the bottom so that we
can actually review the order it's
pretty simple but it's a little bit of a
learning curve to get this to work just
right so let's actually just start
working on it and we are going to say
new drop-down button drop-down button
where you add that you are then we have
items and no so what we want to do here
is we want to actually give it our
template which is gonna be a string
which I'm not sure if that's really
needed or not but we're going to add it
in anyways so our items we're gonna
actually be the pizza class that sizes
yep and then we want to map that I don't
think we really want the on change do we
yeah we do hold on a second let's do
this let's go we want our value what the
initial value to be the to order dot
size there we go that's what I was
getting hung up on what is this thing
griping about too many positional
arguments we mean there's too many
positional arguments
why are there two and even zero expected
but one phone what are you crapping
about here you know I'm not liking this
something's going on let's just start
over on that you know drop down button
bang I have no Oh duh
I feel really stupid here children bang
okay that makes more sense why it was
griping I was hung up on that button
anyways
new drop-down button that looks a little
cleaner okay like I said sometimes
typing thinking and talking all at the
same time really don't mix well so Pizza
order dot sighs so we want the initial
size and then the odd change we're going
to actually make a function here so
let's just mess with that first we want
to do the set size and let me just look
at my notes make sure I'm actually doing
this right yep all right from the set
size we are going to just simply do a
set state and in this set state you
might have already guessed what we're
going to do here we're going to say
pizza saw pizza order size equals the
size and we should actually say value
that we were not really confusing
anybody here all right now in here we
can actually say our
have to scroll down make sure I'm in the
right spot with my notes here it gets
really confusing if I get kind of off
here and then we want our string value
there we go now comes the really
confusing part I really don't like the
way that the drop-down button is handled
but it's just is what it is so for the
items we have to do the pizza order
actually no we don't sorry sorry sorry
we need to do the pizza that size is
that and then from here we do the map
and this is where it gets kind of really
confusing for people so we're going to
say string value and then we're going to
map this accordingly and then in the map
we're going to return a new it's a drop
down menu item and then there's our
child null so let's break this out a
little bit so we see what we're doing
here all right so the initial value of
this or I should say the initial D value
of this is value and then the child
itself we're just going to make a new
row and then we're gonna have children
in here and in the children were going
to say new icon icons was it local pizza
or something like that I found this
really cool icon there we go local
pizzas and icon I was really surprised
when I found a pizza icon I was like yay
it's little things in life that really
make us happy you know and then here
we're going to say simply size equals
and then the value
at that in case we decide to mess with
any more properties hot reload we're
gonna actually just start this whole
thing over again did a lot of typing I
wasn't really trusting hot reload and
boom we are presented with a big big fat
error and we are gonna have to figure
out whoops
nailed my microphone alright let's see
here type map list interval string blah
blah blah is not a sub type of list
drop-down menu
say what mapped list interval alright so
basically what it's arguing about is in
here I bet I know what the problem is
meaning it was type
nope let's just stop this thing again
see what it's griping about here map
Lissa triple string dynamic is not a
type of list dropped in menu item string
okay well what is the problem with this
so we got drop-down button string people
are sized oh oh oh I see what's going on
here
okay I think I see what's going on here
we're missing a list here yeah two lists
that's what's going on if this is right
I'll explain with a voodoo magic that
just occurred tick tock tick tock
check our order and okay yeah it's what
I thought it was so now we've got a
drop-down list and we've got the on
select so or on the on change that's
tracking in the state so the thing that
I was missing here was this dot two
lists of this whole thing and if you
take that right there should highlight
it yeah it's on the pizza map it's in
the items because the items is expecting
a list and I was just giving it a mapped
so I was just giving a whole wad of data
rather than an actual list and that's
why I was complaining some of these
error messages all right anyway so we've
got this this is a major hurdle right
there the rest of this should be quota
fingers should be fairly straightforward
all right
so now that we've got that we're going
to you know expanded and I had to
actually go into the the flutter live
chat they have on their site because I
didn't know what the heck was going on
with us I tried just adding a list
directly and it wit out of bounds and
I'll actually demonstrate that in here
in a little bit and it showed that ugly
bar that you guys may have actually
encountered by now
alright now let's call it continued
alright so in our expanded we want to
put in your list view in here modulus V
builder and as you can see our item
builder is going to be null initially
let's just get rid of that blank line
that way it doesn't get all confusing
all right and we can just say should I
grab true probably don't really even
need that but I like putting it in there
and then item count and the item count
here is going to be the the length of
the toppings because remember that's a
map under the hood and then the item
builder we want to actually do a an odd
function here
and in this oh yeah I keep forgetting
that it conducts I always forget that
that's my only really gripe about this
otherwise it's a very beautiful way that
works now we're gonna turn a new
checklist title which we've covered in
previous tutorials let's put two semi
colon up here and we want to add a few
things to this first thing we want to do
is the control oops
control affinity the control affinity we
want the list title control affinity to
be leading that puts the check box on
the Left instead of on the right and
then we want the title and we want this
to be the oh gosh what was it the pizza
order toppings keys element at and then
the index remember the key is the string
so we want the string portion not the
bowling portion and then from there we
want our value and this is going to be
and we can just actually grab this whole
thing
what come on now don't be difficult
all right so let's Hawtree let us see if
it works
yep as you can see there is now our
toppings and there's our button they're
grayed out because we don't have the on
change handler so let's go ahead and
wrap that in now and let's do this
so topping and in the set top and we of
course need a int index and a whoops
full value because we want to know the
index and the value of that and we are
going to our set state and in our set
state we are just going to very simply
say string key equal get the actual key
here and then we're just going to say
oops
so the value of that key now we need to
wrap this guy into this so where is it
right here unchanged and unchanged is
going to simply be the
now it has the index and the value let's
flip back over suddenly they're enabled
and we can actually click and unclick
things and it's tracking that in state
as we do that so every time we select or
unselect that's calling this set topping
and it's going through this little
function right here and we can actually
scroll through the list and we can set
the size last but not least let's
actually set the I press to this raised
button and we're just going to say
bang-bang and this is going to be a
little bit different what we want to do
is we want to do a push and notice how
it will has a context and that wants a
route so we actually have to build the
route manually here so on our route
we're going to say new material page
route and we need a builder here and I'm
going to kind of break this down a
little bit that way we can see what's
going on here the builder of course is
going to be the build context and we
want a new review because this is where
we're sending it to now review of course
you can see how it just popped up and
Ryan to me order is null well we don't
want a null order we want our pizza
order in there why is it not doing that
come on now
there we go I know what's doing all
right so we are sending our pizza order
to it let's get that semicolon or it's
going to describe complain so really if
you're following along what we're doing
here is we are taking that and let me
rerun the whole app here we're taking
the class we're creating it the class
being this pizza dot dart file and then
we're manipulating it so no longer do we
have variables locally that we're doing
while we kind of do but now we're going
to push this off to the review page and
you can see here's a review your order
and it just has your toppings in there
and we can go back and the state is
still perfectly there so let's say we
only want pepperoni and sausage because
that's my favorite and I'm too skinny to
eat a large by myself so I want a medium
so we have a medium with pepperoni and
sausage so that in a nutshell is kind of
how that works now some caveats to this
is a it's not backed up in the cloud
that's the problem so we will be doing
hopefully in the near future firebase
tutorials also there should be a button
down here that you would do a HTTP push
to Pizza Hut or Little Caesars or
Domino's or whatever you order your
pizza from Bob's pizzas or whatever some
other things is the problem with
programming you ever hear the expression
there's more than one way to skin a cat
kind of a gruesome expression but
there's more than one way to solve a
problem so this may not be necessarily
the solution you're looking for this is
just something that I do for simple apps
where I just make a class that holds all
the settings I need and I manipulate
that as the state and then push that
class over in the where is it the
material page route I just take that
variable that instance and just shove it
straight over into the other other file
as part of the constructor here that way
I just get the state I don't have to
worry about rebuilding it loading it
from a database or anything it's all in
memory it's all good to go pretty simple
pretty easy to use now one thing I did
want to go over here
what director tuna where is it order
expand it this is what I was looking for
here I'm going to come of that whoops
that didn't work out the way I planned
it please hold all right so we're just
gonna take this whole chunk here and
we're gonna comment that out but we are
gonna grab this ListView and put this in
here just so you see what happens you
see already this thing right here that
was a first indicator that something
went boom and when you look at it now
this is why you need that expanded
because the ListView goes down lower and
it puts this ugly thing here and I for
the life of me could not figure out how
to get rid of that that's simply why you
put it in and expanded so we're gonna
just get rid of that I'll come at this
and come at that put everything right
back the way it was and suddenly
magically it works again and we can
scroll down and life is good so some key
concepts that we've covered in this that
I don't think we've covered in other
tutorials is how to put an image up here
how to make an expanded meaning if you
try to take that ListView and just put
it into like a column or something you
need to have and expand it in there
otherwise it shows that ugly bar and how
to manipulate the state in another class
basically or use another class as your
state I should say and then you know
just passing that class between them
using the material page route so this is
kind of I would say not a super really
difficult tutorial but this is
definitely not on the beginner side so
you guys have been wanting kind of a
real-world example and I'm hoping this
fits the bill I'm hoping this answers a
lot of like organizational questions and
how you structured things and I get
images in and how you pass variables
back and forth that was a lot of talking
and I'm pretty well spent
so for the source code for this and all
of the tutorials visit my website boy
drums comm it's on github and join the
void roms Facebook group there is 1800
we just breached the 1800 mark 1800
other programmers out there all other
languages and frameworks definitely help
you with your problems and if you're
feeling so inclined like if you're
running a business
this site is 100% funded off donations
that's why I do not include
advertisements on YouTube so I'll feel
free to donate
that's it thank you for watching