Flutter - Add Divider Between Each List Item
Last Updated :
24 Apr, 2025
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.
-768.jpg)
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:
-768.jpg)
Similar Reads
Flutter - Difference Between ListView and List
Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter everything is towards Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with
4 min read
Flutter - Divider Widget with Example
Divider widget is used when you have multiple child and want to separate by the line or divider. A sample image is given below to get an idea about what we are going to do in this article. How to Use?Divider( height: 100, color: Colors.green, thickness: 1, indent : 10, endIndent : 10, ),Step By Step
3 min read
How to Add Space Between Widgets in Flutter?
In this article, we'll learn how to add space between widgets. There are many options available in flutter which you can use to provide space and make UI attractive. If you use Row and Column for arranging widgets, then by default limited options are available for alignment. There are many options a
4 min read
Flutter - Dynamic Image List
Dynamic Image List is the list of Images when we add images Dynamically, In this article, we will see how to add images dynamically to the List of Images. It is something like that we are adding some items to the list. There is no need to add dependency to our project. A sample video is given below
5 min read
Listview.builder in Flutter
ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView.builder is used instead of ListView. ListView.builder creates a scrollable, linear array of widgets. ListView.b
3 min read
Flutter - Add Gradient Effect to ListTile
In Flutter, a gradient effect is a visual effect that smoothly transitions between two or more colours, creating a gradual blend or progression of colours. To add a gradient background to a ListTile in Flutter, you can wrap the ListTile with a Container or another widget that supports gradients, suc
3 min read
Difference Between Rows and Columns vs Container in Flutter
In this article, we'll learn about the key differences between Container and Row/Column widgets. Row and Column widgets both belong to a similar category and have identical uses. These are the basic widgets that you would use in almost every Flutter app. We will discuss them briefly. ContainerThis i
3 min read
Flutter - Create an Excel Sheet and Save the File in Device
A spreadsheet is a computer program that captures, displays, and manipulates data arranged in rows and columns. Sometimes we have data but that is either in json or in the list and we have to convert data to an excel sheet and store it in the user's device. So that he/she can easily access it, you m
3 min read
Flutter - AnimatedBuilder Widget
The AnimatedBuilder widget in Flutter is a powerful utility widget that is used for creating complex animations by rebuilding a part of the widget tree in response to changes in an animation's value. It is especially useful when you want to animate properties of child widgets that cannot be directly
4 min read
Flutter - Convert Date and Time with Different Timezones
We all know every country has different time zones depending upon its location on Earth. So, We will discuss how to change the date time into that time zone by simply passing two arguments. We will convert the date time into PST time. Step-by-Step ImplementationStep 1: We will simply create 1 flutte
4 min read