Building an app in Flutter | Thoughts & Learnings



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.

7 Replies to “Building an app in Flutter | Thoughts & Learnings”

  1. Please do some live coding session n build an app together. My background is React n React Native but would like to move to flutter

  2. Alot of people will hate me know for sure. my honest opinion. google is just gimmickry. no software company in the world can afford to reprogram everything every six months. first a little Angular, then Flutter for mobile, then Flutter for web, etc. What's next from Google? FlutterNode for backend instead of NodeJS? React is in my opinion very stable and absolutely future-proof. That's why we put 100% on React and not on Vue, Angular, Flutter etc. Facebook has proven that they are really serious about the React and React Native community.

Leave a Reply

Your email address will not be published. Required fields are marked *