Flutter 34 - Listview Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody's Brian welcome to the
thirty-fourth flutter tutorial alright
today we are going to cover the ListView
and I actually didn't find it out in the
widget catalog but if you go to the
sample catalogue they actually have
quite a few of them out here like I
think that's one that's definitely one
and they used something called a card
which we're also going to add in here
but we're not going to do any of their
tutorials we're going to do something
totally different if you have no idea
what a ListView is some good examples
just by doing Google Images flutter list
view you can see some really good
examples you can have you know compound
controls when I call compound I mean
there's more than one thing in there
like there's an icon there's a text and
there's a checkbox things like that you
can make some pretty interesting
combinations of things so it really is
just a list that shows things going from
top to bottom and you can add different
things in there so that's what we're
going to be working with today we're
going to do a pretty basic example let's
give you just can get very very complex
very fast so import and we're going to
say a package flutter material all right
we're just going to set up our normal
application here
alright there's that extend the state of
my up here
let's get rid of that because that was
rather annoying alright so now that we
got our my app here we're going to
override and we're going to say make a
new state for our stateful widget
alright then in the state this is where
the action is really going to happen
here and what we're going to do is we're
going to say we're gonna make a list of
boolean values
and then we are going to override the in
it state don't know where else semicolon
came from whatever I do is something
like that it really just kind of scares
me I'm like oh no what did I just screw
up alright so there we go we're just
going to set the state on this and we're
going to say for
and we're going to say we're going to
just set everything to false by default
and then we are going to my fingers are
cold is like freezing outside even with
the furnace go full blast is still cold
here
all right now we want to return that
rekt return a scaffold object gonna make
an app bar and on that we're going to
say the title and we are just going to
say this is a list would be your demo
all right so this is where things get a
little bit different here we're gonna
say a new list view and you know how
there's a couple different these there's
list view with normal this view dot
builder and let's for u dot custom we're
gonna cover ListView builder because
this is kind of like the standard of
almost everybody's gonna be working with
here custom is obviously pretty
self-explanatory or not self-explanatory
when you want to do something completely
out of the left two field there we're at
ListView itself I think you actually
handed a list of things and it just kind
of tries to figure out what you're doing
I've had nothing but problems with that
so I always use ListView builder you see
how the first thing it wants is an item
builder and this takes a little bit of
explaining but it's very simple to
understand so when you have a list of
items and let's flip back to our graphic
here you notice how they're all kind of
standard size here so what this needs to
do is it needs to know how many of them
there are and what sort of dimensions
they really have so it knows how much
the user is going to be able to scroll
and things of that nature so you can see
how this is different than say this or
even say that you know they're just
different shapes so let's go back in
here
and what we need to do is really look at
this guy and we're going to say item
count equals data dot length that way it
knows how many items are in our data now
the item builder itself we want to
actually turn that into a function here
and we want to say build context so we
can hand over the context if we needed
to I hope if I spelled get build context
right that was somewhat embarrassing
there we go and we want the index the
index is going to be the index in the
internal array that the ListView is
going to be working with here and we're
going to tie that into you guessed it
our list we should probably put that
semicolon there we're gonna have nothing
but problems later so now that we have
our item builder somewhat going here we
need to actually do something with this
so what we need to do is you guessed it
return a new widget in this case we're
gonna return a card so let's save this
let's run this and let's just see what
we got so far here I kind of want to
explain it as we go because it gets a
little bit in-depth but it's kind of
easy once you wrap your head around it a
lot of frameworks especially in the old
days would not allow you to do some of
the things that flutters allowing you to
do which is add custom compound widgets
in alright so you can see there is our
app bar and there is absolutely nothing
here so we need to figure out what's
going on here probably the first thing
you'll notice is that we did not add in
the correct data so we have a new card
and in here we're going to
ciao new container padding why not
through 2.0 because I love that number
and then child in the container we're
going to have a new column whoops
new column filled with children and the
children in there are going to be let's
just kind of move this up so you can see
it
so there's our index and then we are
going to add in a you know checklist
title and the value of this little guy
actually let's break this down so it's
easier to see what's going on here
initialize our hot reload you know so
since we did this Bank suddenly we've
got items in here because now we're
actually using that value and it knows
what we're trying to do with it here
yeah we can scroll so that's what the
ListView is really giving us here so
what we're gonna do now is we're gonna
really make these things come to life
we're going to actually drop this down
to five instead of 32 hmm we're gonna
set the control affinity and we want
this to be this tile control affinity
leading so as we do that that checkbox
should jump over a knots over on the
left and we're going to fill some of the
stuff in here
hmm I don't know what I want to put in
here how about we just say new texts
kind of going off script here
there we go so you notice how this is
grayed out that's because we don't have
this on change actually anything is just
null so once we fill that and this will
suddenly work and then we'll tie that in
using state so we can update our list in
the background so let's go ahead and do
that right now here alright so that
state
all right so we're gonna say data index
value so we're just setting the item at
that index within the list to the value
of whatever the odds here and here we're
going to say little value on change and
then there's our value and our index
save this now suddenly automatically it
works pretty simple pretty easy to use
once you understand some key features
you really have to wrap your head around
is a use the list view builder it's much
easier to work with than some of the
others you'll always have to give it a
length and when you do the builder just
understand that you can put any type of
widget out here so we have actually got
each item has a couple widgets in it you
know there's a text and here is a
checklist tile and that checklist tile
is actually made up of a check box and a
text and I'm assuming something in the
background so you can click way over
here too and it's all embedded inside of
a card so it's pretty awesome the way
this works and we can actually let's
just do this perform a hot reload on
this you see how now whoops
maybe now we have to rerun the whole
thing from start there we go so now
it'll just go and go and go we've got
all the way up to a thousand pretty
simple pretty easy to use and personally
I like it I mean compared to other
frameworks out there it is just
ridiculously simple to work with if
you've ever had to juggle like ListView
adapters and models and things like that
it's such a pain this is so much easier
so what you should really tie into is
you'll have some sort of back end data
in this case I just have a list of bulls
but you can
list of any sort of class and then have
the data inside of that class so you
could have a list of people a list of
dogs list of pets list of air blind
tickets whatever as long as you're tying
that back in through the individual
render here and the item builder you're
good to go all right so that's it for
this tutorial I hope you found this
educational entertaining be sure to
check out my website void rom-com for
the source code for this and all that
the tutorials out in github and i think
they're under flutter tutorials you so
they better be hit if you're still
watching go ahead and join the void rums
Facebook group there's seventeen hundred
plus other programmers out there we can
definitely try to help if you have any
issues in there every day and I know a
couple of the other admins are actually
looking at flutter very seriously
themselves so definitely check it out
thanks for watching