Flutter ListView Tutorial – WeightTracker 1

by Jul 22, 2017Flutter, Weight Tracker19 comments

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!

SY Travel UI Challenge

SY Travel UI Challenge

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.

Thanos Snap Effect in Flutter

Thanos Snap Effect 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 🙂

Advanced transitions – UI Tickets Challenge

Advanced transitions – UI Tickets Challenge

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!

Share This

Share This

Share this post with your friends!