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.