Divider in Flutter

Abhishek Thakur
1 min readFeb 8, 2022
  1. Divider 2.VerticalDivider 3.PopupMenuDivider 4.ListTile.divideTiles

Divider class

A thin horizontal line, with padding on either side.

In the material design language, this represents a divider. Dividers can be used in lists, Drawers, and elsewhere to separate content.

const Divider(
height: 20,
thickness: 5,
indent: 20,
endIndent: 0,
color: Colors.black,
),

VerticalDivider class

A thin vertical line, with padding on either side.

In the material design language, this represents a divider. Vertical dividers can be used in horizontally scrolling lists, such as a ListView with ListView.scrollDirection set to Axis.horizontal.

The box’s total width is controlled by width. The appropriate padding is automatically computed from the width.

const VerticalDivider(
width: 20,
thickness: 1,
indent: 20,
endIndent: 0,
color: Colors.grey,
),

PopupMenuDivider class

A horizontal divider in a material design popup menu.

This widget adapts the Divider for use in popup menus.

const PopupMenuDivider(
height:50,
),

ListTile.divideTiles method

Iterable<Widget> divideTiles(

  1. {BuildContext? context,
  2. required Iterable<Widget> tiles,
  3. Color? color}

)

Add a one pixel border in between each tile. If color isn’t specified the ThemeData.dividerColor of the context’s Theme is used.

--

--

Abhishek Thakur

Embracing Innovation, Crafting Code: Empowering the Future with Tech!