Divider in Flutter

  1. Divider 2.VerticalDivider 3.PopupMenuDivider 4.ListTile.divideTiles

Divider class

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

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

This widget adapts the Divider for use in popup menus.

const PopupMenuDivider(
height:50,
),

ListTile.divideTiles method

  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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Thakur

Software Designer & Developer | Flutter Developer | Tech Stack Explorer