What is Divider in Flutter?

What is Divider in Flutter 1

Divider in Flutter refers to a widget that creates a separation between two parts of the screen by drawing either a horizontal or vertical line. It typically appears as a slender line that measures one pixel in height or width, depending on its orientation, and can be modified using properties like color, thickness, and indent.

Divider are commonly utilized to enhance the visual appeal of a user interface by creating distinctions between various sections. They may be employed to create boundaries between different elements in a list or to separate a header from content in a layout.

Example of using a Basic Divider in Flutter

What is Divider in Flutter
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Section 1'),
              thickness: 2,
            ), // A horizontal Divider
            Text('Section 2'),

Divider Design

Divider in Flutter is a basic line that has a default height or width of 1 pixel, depending on its orientation. Nonetheless, there are numerous methods to personalize its appearance to suit your application’s style and branding.

Below are a few techniques to style the Divider in Flutter:

  • Change the thickness:

Use the thickness property to adjust the vertical and horizontal dimensions of the divider line. By choosing thickness: 2, for instance, you can make the line twice as thick as it normally is.

What is Divider in Flutter4
  thickness: 2,
  • Change the color:

The color attribute allows you to modify the line color used by the Divider. This could be one continuous color or a gradient.

What is Divider in Flutter5
  color: Colors.blue,
  • Add an indent:

you can add space before the Divider line. This is beneficial if you want to create an indentation between the line and the left or right edge of the screen.

What is Divider in Flutter6
  indent: 16,
  • Add padding:

If you’d want some breathing room on each side of your divider line, you can wrap the Divider widget with a Padding widget.

What is Divider in Flutter7
  padding: EdgeInsets.symmetric(vertical: 8),
  child: Divider(),

Vertical Divider

In addition to the horizontal Divider, the VerticalDivider widget is available in Flutter for creating vertical lines between sections of information. The VerticalDivider widget is functionally equivalent to the Divider widget, but it generates a vertical line rather than a horizontal one.

Example of using a VerticalDivider in Flutter:

  children: [
    Expanded(child: Text('Left side')),
    VerticalDivider(), // A vertical Divider
    Expanded(child: Text('Right side')),

Similar to the horizontal Divider, the VerticalDivider widget can be tailored with characteristics such as color, thickness, indent, and height. These properties can be leveraged to fine-tune the vertical line’s appearance to suit your apps layout.

Dotted line Divider

In Flutter, you may make a dashed line separator without installing a package by calling the drawLine function on a Paint object from the CustomPainter class.

What is Divider in Flutter3

Example code:

import 'package:flutter/material.dart';

class DottedLineDivider extends StatelessWidget {
  final double height;
  final Color color;
  final double thickness;
  final double dashWidth;
  final double dashSpace;

    this.height = 1,
    this.color = Colors.grey,
    this.thickness = 1,
    this.dashWidth = 5,
    this.dashSpace = 3,

  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size.infinite,
      painter: DottedLinePainter(
        color: color,
        thickness: thickness,
        dashWidth: dashWidth,
        dashSpace: dashSpace,

class DottedLinePainter extends CustomPainter {
  final Color color;
  final double thickness;
  final double dashWidth;
  final double dashSpace;

    required this.color,
    required this.thickness,
    required this.dashWidth,
    required this.dashSpace,

  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..strokeWidth = thickness
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    final double totalDashSpace = dashSpace + dashWidth;
    final double dashCount = size.width / totalDashSpace;

    for (var i = 0; i < dashCount; i++) {
      final double startX = i * totalDashSpace;
      final double endX = startX + dashWidth;
      canvas.drawLine(Offset(startX, size.height / 2), Offset(endX, size.height / 2), paint);

  bool shouldRepaint(DottedLinePainter oldDelegate) {
    return oldDelegate.color != color ||
        oldDelegate.thickness != thickness ||
        oldDelegate.dashWidth != dashWidth ||
        oldDelegate.dashSpace != dashSpace;

You can then use the DottedLineDivider widget as follows:

  height: 1,
  color: Colors.deepPurple,
  thickness: 1,
  dashWidth: 5,
  dashSpace: 3,

This will generate a vertical dotted line separator 1px in height, 1px in thickness, 5px in dash width, and 3px in dash space in deepPurple. Change these numbers to make your dotted line divider look exactly how you want it to.


Especially useful in structured views and lists, Flutter Divider makes it easy to visually distinguish between sections of material. The Divider widget lets you insert a horizontal line with modifiable attributes like size and color. Inserting a Divider widget after a list’s final item or content section’s closing brace is all that’s needed to add a divider in Flutter.

Hello, I'm Cakra. I'm currently occupied with developing an application using the Flutter framework. Additionally, I'm also working on writing some articles related to it.

You May Also Like