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! 🙂
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.
Simple model for entry used to weight tracking.
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.
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!
Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.
Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂
As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!