<i></i> What's up guys! My name is Andrew and I'm an
application developer here at Crema. Today we're going to take a
deeper dive into Flutter. Now, you may have seen a video
we put out a few months back and it was kind of a high level
overview of Flutter versus React and our initial thoughts on the
two. I've been in Flutter for now the
last eight months or so maybe a little bit longer and still
really loving it, but wanted to run through some of my learns
and just kind of high level thoughts around some of its
capabilities. So let's jump in here. Now the first thing that I've
learned and you may have heard it said but it's very very much
true is in Flutter, everything is a widget. When they say everything, they
mean everything. Now this could include anything
from containers to rows to columns stacks. You've got all that base stuff
for layouts, but then it gets into some more interesting
things you got list tiles you've got list builders and you've got
things like slivers which are really, really amazing. It may not seem like much, but
let's take a look at it for a second. So list tile, I'm sure if you're
familiar with Flutter at all, you absolutely know what this
is. You've got a place for leading
probably an icon, a little avatar. You have a title and the
other subtitle and you have some kind of trailing here. And if
you're thinking about how we would build this without a list
tile, we'd have a row, we'd have a column, we'd have some kind of
container here. We'd have another container here. This would have to be an
expanded. There's a lot that goes into this and it's cool
because you get this just right out of the box. That's a pretty simple example. But if we look at what's going
on here with this interaction on the header, this is where it
starts to get pretty interesting with some of the things like
slivers which Flutter gives you. So this, we've got a header up
here at the top. Inside that header we have an expandable
flexible space that's expandable to whatever height you want to
give it. You can set a lot of different
properties on that. Is it floating? Is it pinned? Is that what's the. The animation is Parallax. And then there's this down here. This little tab bar and as you
can see, it sticks to the header and then everything just goes
below it really, really nice. It's a super slick animation,
super slick interaction in general, and was kind of a
nightmare to figure out when I was trying to do it initially. But the cool thing is that
that's actually just all a widget. So you've got your sliver set up
here on a sliver bar and it goes down into some flexible space
bar. And then I have a background and
background greeting because I want those to be parallax
against each other. And then there's the sliver
persistent header. Now that's really doing a lot of
the meat of the work with keeping that tab bar stuck to
the top there and then use to find the tab bar tabs and you're
good to go. So that's some of the things
like when if you find yourself getting into Flutter. And one of
the big complaints that you hear from people is, "Man, you just
have all these nested widgets. Like widgets on widgets on
widgets. And it's like getting into prop hell if you were in
React or something like that." I found if I ever start getting
into that place there's probably a widget made for it already and
I probably just need a little bit more research and figure out
best practice for it. And that's where a lot of that
gets into you helping you out. Now there are some downsides to
this that I've found too. I would say 90 percent of all
these widgets they're really, really well thought out. They're all to material spec
which can be good or bad for your app but some of the things
are hard coded tab bars really want to behave as tab bars. Tabs within a tab bar really
want to behave as a material tab. And so, trying to build
something as seemingly simple as this little pillbox here,
instead of just having a typical title with an indicator and
maybe even an icon the tab bar does not want to do that. Tabs
definitely don't want to do that. And so there's some for dangling
that goes into that. Since it's all right here, you can, if
you're in VSCode like I am and on Mac, you can command click
and that will actually open up the source code so you can jump
into it and look through everything right there to
understand kind of a little bit more of what's going on. Which
can be really super helpful if you are having trouble styling
something or just wanting to know actually what's happening
behind the scenes there. I found that's been super, super
useful. Some other widgets that I've
found have been really cool -- There's daytime pickers that
average standard. So if I click on this and get
this really cool date picker and then I've also got a time
picker. This one, like it looks really nice. It functions a little bit
strangely at times, and it's really a difficult to style, but
it's there for free which I really like. Again material
design, so everything is laid out really beautifully. But to style it like some of
these things are hardcoded which is not optimal. I'm not exactly sure why that is
and so you have to kind of finesse your way through getting
into that stuff. But on the whole you get so much
out of the box with Flutter and so many base interactions that
it is totally worth it. And for me it's sped up my
development time so, so much. The other thing that people talk
about a lot with Flutter is state management and how to do
state management. Well there's a few different
options. I start out with the block
pattern which is really, really consistent. It's really nice. Then I've moved on now to
Provider but you can use Redux. There's a bunch more. There's a
bunch more ways to accomplish that and they all have their
benefits. I'm sure they all have their
cons, too. But we're going to take a look
at Provider and just see kind of what that offers you, and what
the problems are that it's solving. If you jump into Flutter and
just do Flutter Create, you get this very standard little app
where it counts the numbers. Hooray. That's very fun. What we're gonna do is build
something similar but we're going to just use that base and
try Provider. So let's get rid of all this
code because we don't need it. Boom you're gone. And what we're going to do is
we're going to set up an app that lets you invite your
friends to a party maybe. You've got friends? You wanna have a
party? So we're gonna set up two
screens where it lets you have a list of your friends and you can
opt into a party and see the list of people come to your
party. So what I've done. Just real, real high level here. We've got a list of friends and
friend is just a class with a name and an email. Both are strings. We've got a scaffold with a list
and that list is just the friends. And on top we'll get to this. And that's pretty fun. And so what we're going to do,
another great thing that Flutter has and I think we touched on in
the other video too, is its navigation is native which is
huge. I've got the my app stateless
widget here in the build method. You've got the serial app. And then within that you can
just declare routes. And so I've already set up a
invited screen. So it's a separate screen here
and I just declare that as one of my roots. This is gonna be how I call it
and I'm passing at the context of the rest of the app and then
I'm serving up this invited screen. So what that looks like then to
actually navigate to, I'm going to have this floating button
here. Let's reload the app and I'll
show you what that looks like. Got my list of people, and I've
got this navigation here to the separate screen. And all I'm
having to do is on press I'm calling navigator.of passing the
context, doing push name, and then passing that invited. Super
simple, didn't have to do hardly any setup whatsoever and it came
for free. Now, the next thing we want to
set up is state management. Now what we could do, and what is
actually happening, what was happening before, is this used
to be a staple widget and it was keeping track of the numbers
counted just within the widget itself. Now, that's fine, like if you
don't need to pass that information back and forth to
really any other widgets. But if you need to pass it down to a
separate widget or it needs to be more of a global variable
that can you'll be passing widgets or passing props all day
and will be a terrible, terrible place to be. So we've gotten rid of the
staple widget and just have a stateless one now. And what we need to do is set up
our Provider. Now, Provider is a package. Provider is the third
party but it's really just gonna be syntactic sugar for inherited
widgets. It's really not doing a whole
lot of magic but it's just giving you some hooks to be able
to do things a little bit faster. So what we're gonna do is we're
going to in our main (and yes, usually this would be separate)
but in Maine, under run out, just do change notifier,
provider, and we're going to declare builder, pass the
context, and then this little guy here, we've got a folder
with providers and this provider is gonna look like this. It's going to extend change
notify which is native to Flutter. And it's going to set
up the streams that we need to to get a hold of. So we can have
a list of invited people here. We'll go down, we create an
unmodifiable list. That's how we're going to list out our
people that we invited. If we want to know the number of
people we've invited we can set up a function for that and then
of course we want to add and remove people from the invited
list. Now, to do this we're just going to add it to that string
but then we're also going to pop this little function and notify
listeners and that's going to tell any of the functions that
are consuming this list that an update has occurred. Kind of
like set state or anything that lets everybody else know what's
going on. So we've got that set. we will
load that in there. So now this is at the root of
our app and everything below that and the tree has access to
whatever actually gets put into the invited. This works for this app because
we only have one piece of state we're trying to keep track of
but there is multi provider which you probably are going to
want to use if you have anymore state you're keeping track of. But this is a very simple app so
we don't need it. So it looks like this. So down below here and now what
I can do is I can grab that provider here with provider dot
of I'm passing an invites passing the context and I have
this essentially is that whole provider. So my call invites dot add and
add whatever this on tap. Essentially, if I click on Mary
here that just added her to the list, and I know that because in
my separate screen my invited screen I've imported I'm using
Consumer and that's another thing that Provider gives you
I'm consuming the invites and that gives me the context of the
whole route. And then that gives me invites
again. And then if I wanted to a child
on that for the list I can. But then I can just call invites
dot invited that list that we've created from anybody we've added
and just list them out the same way we did on our home screen
there. And if we look, boom there it
is. It's so exciting. Well we have another person on
that list. And over here we wanted to see
maybe the total number since we can update in both places. We're just going to call invites
number of friends invited and then I'll just return the length
of that. Just giving us how many people
have been invited. So that may seem really trivial
in a way but this is a really really simple way to get all of
this state passed around with very little code and it's update
in both places it's super seamless. I've been using this now for a
few months. It's super fast and can handle a
lot of data all at once. Which is really nice. The other thing that's really
cool, list view builder. I know we don't have that many things
in this but I'll just touch on this. It's not to do with state,
but it is lazy loading. So you can have hundreds and thousands
of records that are passing it through but this will actually
be lazy loaded automatically for you. Another huge, huge benefit of
that is Provider and that is the way it works. Now how does this differ from
the block pattern? It honestly is essentially very
almost the same thing. There's a little bit more boiler
code that goes into the block pattern, and you have to kind of
initiate your Provider a little bit differently. So, if we look at Provider if
you're using the block pattern you set up and declare your own
Provider here and then you go in later and set it up or you set
it up very similarly within your app. I've got all these routes too.
But you pass a Provider if that's the context. It's it's a little bit more
boilerplate code too within the block itself. But all in all
they're very, very similar. The way that things are consumed is
a little bit differently to you'd set up a stream builder
with the block and consume it that way instead of just having
your consumer at invites or whatever you whatever you're
doing. But if you wanna invite people
to your party this latest so those are kind of the cool
things that I've been finding. I mean there's so much to
Flutter. Everything's a widget, state
management. It's all a little bit
differently object oriented program isn't what I was like
totally into before. But I really, really enjoy it
now. Coming from a React and React
Native background you know did the video on "Will Flutter kill
React Native?" I don't think. I don't think anything is gonna
kill React Native necessarily. It's used so much within the
industry. But for me, I do prefer using
Flutter. Just speed of development. What you get out of the box, 90
percent of its custom-ability is just really, really good there. But I mean React Native has a
strong community around it, too. But really into a lot of things
working with Flutter. And as far as support goes, I've seen a lot of the community
start to build back up. It is run by Google which that I
mean good or bad. Like we can. We'll see. We'll see if it continues. Google likes to kill things so
I'm hoping they won't because I'm writing apps in it. So
please don't. Please don't google. Yeah, that's about it. There's so much more with
Flutter. You've got isolates something I'm going to be
working on next is probably Flair and that kind of
integration. We just heard this morning that
there's something new coming out called Interact in 120 hours. You didn't hear about that you
just did. But we'll see what that is. Maybe it's player integration
interactions. Maybe it's something else I can
say. That's about all I've got for
you. Let us know what you guys think. I mean who do you want to see in
another Flutter video. Would it be helpful to see more
live coding. We love doing stuff like that
build an app altogether senatorial. Let us know what you think about
Flutter. What are your favorite things?
What are your least favorite things? What do you what are the things
that you're excited for the future? Put it down in the comments. Make sure to like, subscribe,
and we'll see you next time.
