Hello friends, Recently when I was working on ListView widget in flutter. Then I saw that for some of us(new developers in flutter ) is facing the problem to adding Horizontal Divider line between each List Item. So I think let’s make a tutorial on it, may be it will help someone. So in today’s tutorial we would learn about Show Divider Between ListView ListTile Items in Flutter in Android iOS application.
Contents in this project Show Divider Between ListView ListTile Items in Flutter :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating our void main runApp() method, Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating a List String Array named as fruits. We would use this List to show items of ListView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
final List<String> fruits = <String>[ 'Apple', 'Apricots', 'Avocado', 'Banana', 'Blackberries', 'Blackcurrant', 'Blueberries', 'Breadfruit', 'Carambola', 'Cherries', 'Clementine', 'Coconut', ]; |
5. Creating Widget Build area -> Material App -> Scaffold Widget -> ListView.builder() widget. After ListTile widget we would call the Divider() widget. The Divider widget would automatically draw a horizontal line between each list item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Show Divider Between ListView Items')), body: ListView.builder( itemCount: fruits.length, itemBuilder: (BuildContext context, int index) { return Column( children: <Widget>[ ListTile( title: Text( fruits[index], style: const TextStyle(fontSize: 22, color: Colors.black), ), ), const Divider(), // Horizontal Divider Line ], ); }), )); } |
6. Complete source code for main.dart file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final List<String> fruits = <String>[ 'Apple', 'Apricots', 'Avocado', 'Banana', 'Blackberries', 'Blackcurrant', 'Blueberries', 'Breadfruit', 'Carambola', 'Cherries', 'Clementine', 'Coconut', ]; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Show Divider Between ListView Items')), body: ListView.builder( itemCount: fruits.length, itemBuilder: (BuildContext context, int index) { return Column( children: <Widget>[ ListTile( title: Text( fruits[index], style: const TextStyle(fontSize: 22, color: Colors.black), ), ), const Divider(), // Horizontal Divider Line ], ); }), )); } } |
Screenshot :-
