Flutter: Adding Separator in ListView
There are lots of applications pushed to the app store and play store which is using a list to showcase scrollable items to the users.
Often designers require you to incorporate a line beneath or at the top of each item of your list. Maybe it's to focus user’s attention on particular item or simply following best UX guidelines.
In this article, I would like to show you a way of achieving this using Flutter’s ListView.
Implementation of ListView
In the Fluter, creating a ListView is really easy and pretty straightforward.
Using the above code, you will get a ListView that shows the index of each item on the center for the list.
How you can add the divider in the ListView???
Implementation of ListView With Separated
Since Flutter provides almost everything a normal application would need, it also provides a helper constructor for creating a list view with dividers. This constructor is ListView.separated.
ListView.separated creates a fixed-length, scrollable, linear array of list “items” separated by list item “separators”.
The itemBuilder callback is called whenever there are indices ≥ 0 and< itemCount.
The separatorBuilder callback will be called with indices greater than or equal to zero and less than itemCount - 1.
Bonus: Your separator can be any widget, Yes It can be Text, Image, Container, FlutterLogo or any other widgets. 😄 😉 🍷
Hope this Quick Tip helps you.
If you Like this article the Click 👏 to help others find this article.
Hold the clap button to leave more claps.
If you have any query/queries you can reach me at my twitter account.
