How to create stacked ListViews in Flutter with 3 easy steps
If you prefer to follow along with the tutorial in a video format, please check out this video
In this bite-sized UI tutorial we are going to learn how to manipulate the items inside a ListView to achieve a clean stacked effect, like this:
In the image above, notice the second ListView element (profile named “Dhers”), that is where you should be able to see a visible overlap between the two items. This is the effect that we will achieve today.
Before we begin
If you would like to code along, please consider cloning the project from my GitHub, here: https://github.com/Coffiie/personal_projects/tree/develop/code_along/listview_ui_tutorial_gh
Please comment down below if you would like the full source code, and I will provide it to you.
Once cloned, make sure to run “flutter pub get”
This project is compatible with Flutter v3.10.5
Project Overview:
After opening the project, you’re going to see 3 files:
- main.dart: Responsible for initializing the app and calling HomePage
- mock_data.dart: It has the dummy data required to build the ListView.
- home_page.dart: Responsible for building the ListView.builder() and individual items inside the list.
App Overview:
Now that we know the project we can run the app and see the User Interface.
It is a list of things we would like to accomplish during the day.
The ListView.builder constructor is responsible for building out this view.
Now that we have understood the app, it is time to implement the stacked layout.
Step 1 — Wrap ListView item with Align
There should be no visual change in the app after you have wrapped the ListView item with Align widget.
Step 2— Assign it a heightFactor of 0.8
After this change, your app should look like this.
And there you have it, your ListView items are now stacked on top of each other!
Step 3— Make them look like folders (for fun)
With this change, your app will look like this:
Crazy right? It looks like folders are stacked on top of each other.
And there you have it! You can now create amazing ListView designs. Experiment with this property and send me a DM on LinkedIn if you need any help. I would also love to see your apps using this simple hack.
If you liked the tutorial..
Please follow me here and on my socials!
Youtube: https://www.youtube.com/channel/UCD2BEqL0wC7leFKm4i9_aRg
LinkedIn: https://www.linkedin.com/in/rawahamuhammad/
Github: https://github.com/coffiie
Medium: @RawahaMuhammad
