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

Question

How could I add divider to list? I use Flutter for Android. I want to add a divider between each List item and I want to colorize the divider and add styles.

I tried to add new divider(); but I got errors. I also tried return new divider();.

Here is the screen shot of my app:

And here is my code:

import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart';  void main() => runApp(const MyApp());  class MyApp extends StatelessWidget {   const MyApp();    @override   Widget build(BuildContext context) {     return MaterialApp(       theme: ThemeData(           primarySwatch: Colors.purple,            buttonTheme: const ButtonThemeData(             textTheme: ButtonTextTheme.primary,           )       ),       home: const MyHomePage(),     );   } }  class Kitten {   const Kitten({this.name, this.description, this.age, this.imageurl});    final String name;   final String description;   final int age;   final String imageurl; }  final List<Kitten> _kittens = <Kitten>[   Kitten(       name: "kitchen",       description: "mehraboon",       age: 2,       imageurl:       "https://images.pexels.com/photos/104827/cat-pet-animal-domestic-        104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350",   ),   Kitten(       name: "garage",       description: "khashen",       age: 1,       imageurl:       "https://images.pexels.com/photos/4602/jumping-cute-playing-animals.jpg?        auto=compress&cs=tinysrgb&dpr=2&h=350",   ),   Kitten(       name: "bedroom",       description: "khar zoor",       age: 5,       imageurl:       "https://images.pexels.com/photos/978555/pexels-photo-978555.jpeg?        auto=compress&cs=tinysrgb&dpr=2&h=350",   ),   Kitten(       name: "living room",       description: "chorto",       age: 3,       imageurl:       "https://images.pexels.com/photos/209037/pexels-photo-209037.jpeg?        auto=compress&cs=tinysrgb&dpr=2&h=350",   ), ];  class MyHomePage extends StatelessWidget {   const MyHomePage({Key key}) : super(key: key);    Widget _dialogBuilder(BuildContext context, Kitten kitten) {     return SimpleDialog(contentPadding: EdgeInsets.zero, children: [       Image.network(kitten.imageurl, fit: BoxFit.fill),       Padding(           padding: const EdgeInsets.all(16.0),           child:           Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [             Text(kitten.name),             Text('${kitten.age}'),             SizedBox(               height: 16.0,             ),             Text(kitten.description),             Align(               alignment: Alignment.centerRight,               child: Wrap(                 children: [                   FlatButton(onPressed: () {}, child: const                   Text("noooo!"),color: Colors.red,),                   Padding(padding: const EdgeInsets.all(2.0),),                   RaisedButton(onPressed: () {}, child: const                   Text("yesss!"),color: Colors.green)                 ],               ),             )           ]))     ]);   }    Widget _listItemBuilder(BuildContext context, int index) {     return new GestureDetector(        onTap: () => showDialog(           context: context,           builder: (context) => _dialogBuilder(context, _kittens[index])),       child:       Container(          padding: EdgeInsets.all( 16.0),         alignment: Alignment.centerLeft,         child: Text(_kittens[index].name,             style: Theme.of(context).textTheme.headline),        ),       ) ;    }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Keys"),         centerTitle: true,         ),       body: ListView.builder(         itemCount: _kittens.length,         itemExtent: 60.0,         itemBuilder: _listItemBuilder,        ),     );   } }   

Answer 1

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

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

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'];  @override Widget build(BuildContext context) {   return ListView.builder(     itemCount: items.length,     itemBuilder: (context, index) {       return Card( //                           <-- Card         child: ListTile(           title: Text(items[index]),         ),       );     },   ); } 

Answer 2

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