styled_divider

Divider widgets with different line styles: solid, dotted, dashed and dash-dotted.

Getting Started

Use the StyledDivider and StyledVerticalDivider widgets.

const divider = StyledDivider(
  color: Colors.green,
  height: 50,
  thickness: 2,
  lineStyle: DividerLineStyle.dotted,
  indent: 20,
  endIndent: 20,
);

const verticalDivider = StyledVerticalDivider(
  color: Colors.green,
  width: 50,
  thickness: 2,
  lineStyle: DividerLineStyle.dotted,
  indent: 20,
  endIndent: 20,
);

The interface is exactly like the built-in Divider (and VerticalDivider) widget except for the lineStyle parameter (there is no radius parameter). Like the built-in dividers, values that are not given come from the ambient DividerTheme / ThemeData.dividerTheme.

The defaults differ from the built-in dividers in Material 3: the default thickness is 0.0 (a one device pixel hairline, Divider uses 1.0), and the dotted, dashed and dash-dotted styles default to ThemeData.dividerColor (ColorScheme.outline; Divider uses ColorScheme.outlineVariant). Set thickness and color, or a DividerTheme, to match Divider.

Currently, only four line styles are supported:

• DividerLineStyle.solid
• DividerLineStyle.dotted
• DividerLineStyle.dashed
• DividerLineStyle.dashdotted

The dashes and gaps scale with the thickness of the line.