Early Access

Flutter in Production is live!

Buy today and get 40% off the regular price!

View Course

Adding top and bottom separators with ListView.separated

ListView.separated is a handy API that we can use to add separators between items inside a Flutter ListView.

According to the documentation:

Separators only appear between list items: separator 0 appears after item 0 and the last separator appears before the last item.

This means that there are no separators above the first item, and below the last item.

This is visually noticeable on iOS, where lists can over-scroll by default.

Here's some code to set things straight, and add top and bottom separators to your ListViews:

class ListViewWithAllSeparators<T> extends StatelessWidget { const ListViewWithAllSeparators({Key key, this.items, this.itemBuilder}) : super(key: key); final List<T> items; final Widget Function(BuildContext context, T item) itemBuilder; @override Widget build(BuildContext context) { return ListView.separated( itemCount: items.length + 2, separatorBuilder: (_, __) => Divider(height: 0.5), itemBuilder: (context, index) { if (index == 0 || index == items.length + 1) { return Container(); // zero height: not visible } return itemBuilder(context, items[index - 1]); }, ); } }

You're welcome. 😉

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter In Production

Flutter In Production

Learn about flavors, environments, error monitoring, analytics, release management, CI/CD, and finally ship your Flutter apps to the stores. 🚀

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Last updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.