Separator

A horizontal or vertical line that separates content within a list or section.

Separators help users visually distinguish between related groups of information, making interfaces easier to scan and understand while maintaining a clean, organized layout.

• Customizable: Multiple variants, orientations, sizes, and label options
• Responsive: Works with both horizontal and vertical layouts
• Accessible: Provides visual distinction without disrupting screen readers

---

Variants

Separator variants control how strong or subtle the divider appears.

Solid

A continuous line for a clean, standard separation.

Preview

Code

Separator(
  variant: SeparatorVariant.solid,
)

---

Dashed

A broken line for lighter, less prominent division.

Preview

Code

Separator(
  variant: SeparatorVariant.dashed,
)

---

Dotted

A dotted line for minimal visual interruption.

Preview

Code

Separator(
  variant: SeparatorVariant.dotted,
)

---

Horizontal

Default orientation; divides horizontally stacked content (e.g., lists, sections or items).

Preview

Code

Separator(
  orientation: Axis.horizontal,
)

---

Vertical

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

Preview

Code

Separator(
  orientation: Axis.vertical,
)

---

Center

Label appears centered within the divider.

Preview

Code

Separator(
  label: 'LABEL - CENTER',
  labelPosition: LabelPosition.center,
)

---

Leading

Label aligned to the start (left in LTR, right in RTL) of the divider.

Preview

Code

Separator(
  label: 'LABEL - LEADING',
  labelPosition: LabelPosition.leading,
)

---

Trailing

Label aligned to the end (right in LTR, left in RTL) of the divider.

Preview

Code

Separator(
  label: 'LABEL - TRAILING',
  labelPosition: LabelPosition.trailing,
)

---

Medium

Standard width for most layouts.

Preview

Code

Separator(
  size: SeparatorSize.md,
)

---

Large

Expanded width for wider areas or content-heavy sections.

Preview

Code

Separator(
  size: SeparatorSize.lg,
  thickness: 8,
)

---

Vertical with Label

Preview

Code

Separator(
  orientation: Axis.vertical,
  label: 'Section',
  labelPosition: LabelPosition.center,
)

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.
size	SeparatorSize	Size category affecting the width/height of 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.