How to Add Divider Between Each Line with Different Methods in Flutter

Nur Özkaya
1 min readMar 14, 2021

1. ListTile.divideTiles : You can use it with a short static list.

ListView(
children: ListTile.divideTiles( //divideTiles!!
context: context,
tiles: [
ListTile(
title: Text('One'),
),
ListTile(
title: Text('Two'),
),
ListTile(
title: Text('Three'),
),
]
).toList(),
)

2.ListView.separated : You can use it with a long dynamic list.

ListView.separated(
itemCount: 200,
itemBuilder: (context, index) {
return ListTile(
title: Text('$index number'),
);
},
separatorBuilder: (context, index) {
return Divider();
},
)

3. You can use this for adding a divider after each item:

With using Divider() :

final items = ['One', 'Two', 'Three', 'Four', 'Five'];

@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
],
);
},
);
}

With using BoxDecoration:

final items = ['One', 'Two', 'Three', 'Four', 'Five']; @override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration( //BoxDecoration
border: Border(bottom: BorderSide( //Add border as a divider
height:2.0,color:Colors.grey)),
),
child: ListTile(
title: Text(items[index]),
),
);
},
);
}

You can also use Divider() with Card widget too:

final items = ['One', 'Two', 'Three', 'Four', 'Five'];

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Card( //Card
child: ListTile(
title: Text(items[index]),
),
);
},
);
}

Thank you for reading. Follow for more.

--

--