Flutter – Add Divider Between Each List Item

In Flutter, using the Divider widget, you can implement a divider between items or sections in a list. The Divider widget provides a horizontal line that visually separates content. In this article, we are going to use the Divider Widget to separate each item of a ListView. A sample Image is given below to get an idea about what we will do in this article.

Basic Syntax of a Divider Widget

Divider(
  height: 1, // The height of the divider
  color: Colors.grey, // The color of the divider
  thickness: 1, // The thickness of the divider line
  indent: 20, // The left padding (indent) of the divider
  endIndent: 20, // The right padding (endIndent) of the divider
)

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the app's theme
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false, // Hide the debug banner
      home: DividerApp(), // Set the home screen to PasswordTextField
    );
  }
}

Step 5: Create DividerApp Class

In this article we are going to implement the Divider widget in a ListView to separate its items.Comments are added for better understanding.

ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
            subtitle: Text('Subtitle for Item 1'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          //Divider to separate item 
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
          ListTile(
            title: Text('Item 2'),
            subtitle: Text('Subtitle for Item 2'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
          ListTile(
            title: Text('Item 3'),
            subtitle: Text('Subtitle for Item 3'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
        ],
      ),

Dart

class DividerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Divider Example'),
      ),
      // ListView with 3 items
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
            subtitle: Text('Subtitle for Item 1'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          // Divider to separate item
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
          ListTile(
            title: Text('Item 2'),
            subtitle: Text('Subtitle for Item 2'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
          ListTile(
            title: Text('Item 3'),
            subtitle: Text('Subtitle for Item 3'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
        ],
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the app's theme
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false, // Hide the debug banner
      home: DividerApp(), // Set the home screen to PasswordTextField
    );
  }
}

class DividerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Divider Example'),
      ),
      // ListView with 3 items
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
            subtitle: Text('Subtitle for Item 1'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          // Divider to separate item
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
          ListTile(
            title: Text('Item 2'),
            subtitle: Text('Subtitle for Item 2'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
          ListTile(
            title: Text('Item 3'),
            subtitle: Text('Subtitle for Item 3'),
            leading: Icon(Icons.star),
            trailing: Icon(Icons.arrow_forward),
          ),
          Divider(
            height: 1,
            thickness: 2,
            color: Colors.green,
            indent: 16,
            endIndent: 16,
          ),
        ],
      ),
    );
  }
}

Output: