Dividers

The Styled Divider (Horizontal) and Styled Divider (Vertical) widgets create a thin line to visually separate content. While they are two separate widgets in the builder, they share the same styling options. This guide covers the properties for both.

Core Concept: Horizontal vs. Vertical

The primary difference between the two widgets is their orientation and how they are used in layouts.

• Styled Divider (Horizontal): Use this to separate content vertically (e.g., between items in a Column).

• Styled Divider (Vertical): Use this to separate content horizontally (e.g., between items in a Row).

Using a Horizontal Divider in a Column and a Vertical Divider in a Row.

---

Properties

The Divider's properties are grouped by function.

Layout & Sizing

Property	Description
Thickness	The thickness of the divider line in pixels.
Indent	The amount of empty space at the beginning of the divider (left for horizontal, top for vertical).
End Indent	The amount of empty space at the end of the divider (right for horizontal, bottom for vertical).
Height	The total vertical space the widget occupies. Applicable to the Horizontal Divider.
Width	The total horizontal space the widget occupies. Applicable to the Vertical Divider.

Visual explanation of the Thickness, Indent, and End Indent properties.

Line Style

Property	Description
Line Style	The pattern of the divider line. Options are Solid, Dashed, or Dotted.
Dash Pattern	A custom pattern for dashed lines, defined as an array of dash lengths and gap lengths (e.g., [4, 2] for a 4px dash followed by a 2px gap). Only available when Line Style is Dashed.
Stroke Cap	The style for the ends of the line segments. Options are Butt (flat), Round, or Square. Not applicable when Line Style is Dotted.

Examples of Solid, Dashed, and Dotted line styles.

Color & Fill

You can style the divider with either a solid color or a gradient.

Property	Description
Color	The solid color of the divider.
Gradient	The gradient configuration for the divider. Allows for multi-color effects.

Dividers can be styled with a solid Color or a Gradient.

---

Default Properties

The Divider widget supports all Default Properties.

---

Best Practices

• Use Sparingly: Overusing dividers can clutter your UI. Use them only when a clear visual separation is necessary.

• Match Padding: Use Indent and End Indent to align your dividers with the padding of the content they are separating for a clean, professional look.

• Subtle Separation: For a less intrusive separator, consider using a Dotted or Dashed line style with a light color.