Divider

A thin horizontal rule for separating content. Use vertical_divider for a vertical rule inside a row.

Example

column(
  children: [
    text("Account"),
    divider(),
    text("Notifications")
  ]
)

Common properties

• color
• thickness
• height — the total space the divider occupies (the line sits in the middle)
• leading_indent / trailing_indent
• radius

Usage

A divider takes its own vertical space via height while the visible line uses thickness:

divider(thickness: 1, height: 24, color: "#e5e7eb")

For columns laid out in a row, use vertical_divider with the same properties.

Complete API

Helpers

• divider(**props)

Accepted properties

• badge — Badge drawn on the corner of the control.
• col — Responsive column span (1-12) per breakpoint.
• color — Foreground color.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• height — Fixed height in logical pixels.
• key — Stable identity used to preserve state across rebuilds.
• leading_indent — Sets the leading indent property.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• radius — Sets the radius property.
• rtl — Renders right-to-left when true.
• thickness — Sets the thickness property.
• tooltip — Text shown on hover/long-press.
• trailing_indent — Sets the trailing indent property.
• visible — Hides the control when false.

Wire reference

• Family: materials
• Widget type: divider