Flutter ListView Tutorial – WeightTracker 1
In this post, we are going to create a basic ListView in Flutter with dynamically added values. Let’s get to it! 🙂
Simple ListView
This code results in simplest list you could imagine.
ListView widget is our main list container (surprising!). It contains many properties but for now we will focus on only one: children.
ListView.children is where we provide our list of Widgets to be displayed. In order to do it we simply map previously initialized list of Strings to list of Rows containing only Text with our value.
In that way we end up with the list view presented on the right.
Now let’s try to make some non-hello-world look.
Preparing model
Simple model for entry used to weight tracking.
Preparing layout
The layout root is a padding which is basically a wrapper for our layout to make it not touching each other.
A padding’s child is a Row containing 3 children. Rows allow us to stack Widgets horizontally.
To make every child of a Row cover exactly one-third of whole space, every element is wrapped into Expanded.
The left column is actually a Column widget. Columns are also tools for stacking multiple widgets but they do it vertically. In Column.children there are two Texts representing exact date and a day of the week of our entry.
Middle and right columns are simple Texts. The middle one is designed to represent saved weight value while the right one provides us the difference from the previous entry.
Wrapping it up
To use our new layout we simply replace previous Row with WeightListItem instance (remember to add an import).
And that’s it!
I hope you liked that post and I encourage you to leave a comment with feedback!
You can find the whole project here.
Cheers 🙂
Marcin Szałek
Founder of Fidev
Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.
Join the newsletter!
Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!
Check out other posts!
Stripe Checkout in Flutter Web
Flutter Web is getting more mature every day. If you want to accept payments using Stripe Checkout in your Flutter web application, this article is just for you!
Stripe Checkout in mobile Flutter app
Have you ever struggled to integrate card payments into your mobile Flutter app? If so, today is your lucky day! In this post, I present how to use Stripe Checkout in the Flutter app without any hassle!
Interacting with Widgets using Framy
Have you ever developed a widget or a page and you wanted to make sure it works correctly in different scenarios but then it turned out that you can’t just reproduce all the cases you want to cover? Framy may solve such problems!
Looks like a good thing to start with and it was explained really well. I would suggest replacing the mapping you used with ListView.builder, like this:
new ListView.builder(
itemCount: weightSaves.length,
itemBuilder: (BuildContext ctx, int index) {
var save = weightSaves[index];
var difference = …
return new WeightListItem(weightSave, difference);
}
)
It might seem like a small difference, but using a builder can increase your app’s performance as the ListView will then figure out what items need to be rebuilt based on whats going to be visible on the screen. For instance, if there are only 6 out of 20 entries visible, the itemBuilder function will only be called 6 times and only 6 WeightListItems are created. However, when using children, all 20 entries will be added as an WeightListItem. Of course, for a simple layout with few children, the difference isn’t noticeable but it is when using many children with complex layouts.
Thanks! Didn’t know about it!
I found this in the docs: “This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.”
So as you said, in this scenario it won’t be much a difference but if the list grows to much bigger sizes it is something good to know about.
Thanks again! I will try it soon 🙂
Looks like a good thing to start with and it was explained really well. I would suggest replacing the mapping you used with ListView.builder, like this:
new ListView.builder(
itemCount: weightSaves.length,
itemBuilder: (BuildContext ctx, int index) {
var save = weightSaves[index];
var difference = …
return new WeightListItem(weightSave, difference);
}
)
It might seem like a small difference, but using a builder can increase your app’s performance as the ListView will then figure out what items need to be rebuilt based on whats going to be visible on the screen. For instance, if there are only 6 out of 20 entries visible, the itemBuilder function will only be called 6 times and only 6 WeightListItems are created. However, when using children, all 20 entries will be added as an WeightListItem. Of course, for a simple layout with few children, the difference isn’t noticeable but it is when using many children with complex layouts.
Thanks! Didn’t know about it!
I found this in the docs: “This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.”
So as you said, in this scenario it won’t be much a difference but if the list grows to much bigger sizes it is something good to know about.
Thanks again! I will try it soon 🙂
Hi Marcin,
I am trying this tutorial but it is showing empty app. What am I doing wrong? The code snippet 1. Simple ListView is not working.
Works for me… Have you clicked floating action button to add items?
I did but it’s doing nothing. The first code is so basic and that is not working.
Hi Marcin,
I am trying this tutorial but it is showing empty app. What am I doing wrong? The code snippet 1. Simple ListView is not working.
Works for me… Have you clicked floating action button to add items?
I did but it’s doing nothing. The first code is so basic and that is not working.
You can post a link to Gist or GitHub so I can see it, because believe me, it’s working 🙂
Here is the gist https://gist.github.com/raunakhajela/af008f8c065c49c03ed0fa2fc722ca1a
onPressed: () => _addWeightSave,
This is where you did wrong
You have to either specify a method << onPressed: _addWeightSave >> or create an anonymous method << onPressed: () => _addWeightSave() >>,
Thanks, Marcin for helping me out. This is one of the best flutter blogs. Highly recommend 🙂
Thanks, Marcin for helping me out. This is one of the best flutter blogs. Highly recommend 🙂
good tutorial keep it up
🙂
good tutorial keep it up
🙂