Flutter : How can I add divider between each List Item in my code? Flutter : How can I add divider between each List Item in my code? ios ios

Flutter : How can I add divider between each List Item in my code?


There are a number of ways to do the same thing. Let me compare them here.

For a short static list

Use ListTile.divideTiles

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(),)

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.

Using Divider

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

Using BoxDecoration

final items = ['Horse', 'Cow', 'Camel', 'Sheep', 'Goat'];@overrideWidget 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]),        ),      );    },  );}

Both Divider and BoxDecoration are customizable as far as the line height and color go. Divider also has an indent option, but you could get a BoxDecoration to do the same thing with some padding.

For more style

Use a Card

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


The most correct way is to use ListView.separated

ListView.separated(     itemCount: 25,     separatorBuilder: (BuildContext context, int index) => Divider(height: 1),     itemBuilder: (BuildContext context, int index) {       return ListTile(         title: Text('item $index'),       );     },);


Put your widget inside container with BoxDecoration as

Container(   child: YourWidgetHere(),   decoration: BoxDecoration(      border: Border(bottom: BorderSide(color: Colors.black26))),);