How to Add Divider Between Items In Flutter??

· 4 min read
How to Add Divider Between Items In Flutter
How to Add Divider Between Items In Flutter

Generally, when a user receives a large amount of data through ListView Widget each item needs to be arranged and separated so it looks cool. To Separate, each item we can add a divider between them. So In this article, We will go through How to Add Divider Between Items In Flutter.

How to Add Divider Between Items In Flutter??

There are multiple ways to add Divider in ListView Widget.

  • For a short static list

Use ListTile.divideTiles like a below:

ListView(
  children: ListTile.divideTiles( //          <-- ListTile.divideTiles
      context: context,
      tiles: [
        ListTile(
          title: Text('Horse'),
        ),
        ListTile(
          title: Text('Cow'),
        ),
        ListTile(
          title: Text('Camel'),
        ),
        ListTile(
          title: Text('Sheep'),
        ),
        ListTile(
          title: Text('Goat'),
        ),
      ]
  ).toList(),
)

We will get output like below:

How to add divider in items in Flutter
How to add divider in items in Flutter
  • For a long dynamic list Use ListView.separated
    ListView.separated(
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('$index sheep'),
        );
      },
      separatorBuilder: (context, index) {
        return Divider();
      },
    )

    This returns two widgets for every item, except for the last item. The separatorBuilder is used to add the divider.

  • For adding a divider after the last item

Create a custom item widget that uses a Divider or BoxDecoration.

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Column(
        children: <Widget>[
          ListTile(
            title: Text(items[index]),
          ),
          Divider(), //                           <-- Divider
        ],
      );
    },
  );
}

We will get output like below:

Add divider between items in Flutter
Add divider between items in Flutter

Using BoxDecoration
final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
@override
Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return Container(
        decoration: BoxDecoration( //                    <-- BoxDecoration
          border: Border(bottom: BorderSide()),
        ),
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
  );
}

We will get output like below:

Using Box Decoration
Using Box Decoration
  • Use a Card
    final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];
    @override
    Widget build(BuildContext context) {
      return ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Card( //                           <-- Card
            child: ListTile(
              title: Text(items[index]),
            ),
          );
        },
      );
    }

    So we will get output like the below:

    Using Card - add dividerbetween items in Flutter
    Using Card

Conclusion:

So in this article, We discussed How to Add Divider Between Items In Flutter.

Thanks for being with us.
Kindly share valuable feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply