Separator

A Separator is a visual element that divides content into distinct sections. Use Separators to group related information, define boundaries, and improve readability, making interfaces easier to scan and navigate.

Common alternative names:
Divider, line, border

---

Variants

Separator variants control how strong or subtle the divider appears.

Cell Divider

Used to separate closely related items, such as list entries or form fields.

Preview

Code

Separator(
  variant: SeparatorVariant.solid,
)

---

Module Divider

Used to separate larger groups of content, such as sections on a page.

Preview

Code

Separator(
  thickness: 8
)

---

Dashed

A broken line for lighter, less prominent division.

Preview

Code

Separator(
  variant: SeparatorVariant.dashed,
)

---

Dotted

A subtle dotted line for minimal visual interruption.

Preview

Code

Separator(
  variant: SeparatorVariant.dotted,
)

---

Center

Label is centered within the divider.

Preview

Code

Separator(
  label: 'Label',
  labelPosition: LabelPosition.center,
)

---

Leading

Label appears at the start of the divider.

Preview

Code

Separator(
  label: 'Label',
  labelPosition: LabelPosition.leading,
)

---

Trailing

Label appears at the end of the divider.

Preview

Code

Separator(
  label: 'Label',
  labelPosition: LabelPosition.trailing,
)

---

Vertical

Divides vertically stacked content (e.g., sidebars, columns).

Preview

Code

Separator(
  orientation: Axis.vertical,
)

Custom Colors

Preview

Code

Separator(
  variant: SeparatorVariant.dashed,
  color: Colors.purple,
)

Preview

Code

Separator(
  variant: SeparatorVariant.dotted,
  color: Colors.teal,
  dotSpacing: 12,
  dotRadius: 2,
)

---

Properties

Property	Type	Description
variant	SeparatorVariant	The visual style of the separator.
orientation	Axis	The directional layout of the separator.
label	String?	Optional text label to display with the separator.
labelPosition	LabelPosition	Position of the label along the separator.
color	Color?	Custom color for the separator line.
thickness	double?	Custom thickness for the separator line.
labelStyle	TextStyle?	Custom text style for the label.
dashPattern	List<double>	Pattern for dashed variant [dashLength, gapLength].
dotSpacing	double	Spacing between dots for dotted variant.
dotRadius	double	Radius of dots for dotted variant.
padding	EdgeInsetsGeometry?	Padding around the entire separator.