How to Add Divider Between Each Line with Different Methods in Flutter
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.