How to Remove Space in Flutter Divider

Photo by Karin Kim on Unsplash

TLDR; By default, the Divider has a default height 16.0, which includes both the dividing line and the padding above and below it. The actual line itself is only 1.0 thick, and the remaining space is padding. Set height equal to the thickness

How to use Flutter Divider Widget

The Divider widget in Flutter is a horizontal line that’s commonly used to visually separate sections or elements on a screen or list. By adding a Divider, you can improve the structure and readability of your app’s layout, making it more user-friendly.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final colors = [Colors.amber, Colors.blue];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ListView.separated(
            itemCount: 2,
            separatorBuilder: (_, __) => Divider(
              color: Colors.black,

              thickness: 10,
              indent: 24,
            ),
            itemBuilder: (_, index) {
              return Container(
                height: 200,
                width: 200,
                color: colors[index],
              );
            },
          ),
        ),
      ),
    );
  }
}

The unintended space between the Divider and surrounding elements occurs because the default height of 16.0 includes both the line thickness (1.0 by default) and additional padding, with the remaining space evenly distributed above and below the line.

To fix the unintended space..

First, let’s break down each parameter of the Divider class in Flutter:

1. height [double] — The total height of the space above and below, including the line. Default is 16.0
2. thickness [double] — The thickness of the line. Default is 1.0
3. indent [double] — The padding on left of the divider.
4. endIndent [double] — The padding on right of the divider.

separatorBuilder: (_, __) => Divider(
  color: Colors.black,
  height: 1,
  thickness: 1,
  indent: 24,
),

What if the thickness value is more than height?

separatorBuilder: (_, __) => Divider(
  color: Colors.black,
  height: 1,
  thickness: 10,
  indent: 24,
),

If the thickness of the Divider is greater than its height, it will still occupy the specified height, but the appearance may result in it consuming space the above elements. It’s best to ensure that the height is at least equal to the thickness.

Bonus

In Flutter, you can define a custom Divider across your entire app by setting it within the app’s ThemeData using the dividerTheme property. This allows you to standardize the appearance of dividers across the app.

Here’s how you can create a custom Divider in the app theme:

MaterialApp(
  theme: ThemeData(
    dividerTheme: DividerThemeData(
      color: Colors.black,   
      thickness: 1.0,        // Same as height property
      space: 1.0,            
      indent: 24.0,
      endIndent: 24.0,
    ),
  ),
);