Skip to main content

Divider-H

The Divider-H widget is a divider that splits content with a single horizontal line.
Use it to mark the boundary between list items, sections, and groups.

Definition and role

The Divider-H widget draws one thin horizontal line to separate the content above it from the content below. Set the line's thickness, color, and left and right indents, plus the total height of the divider area that contains the line.

  • Category: Dividers (dividers and spacing)
  • Direction: horizontal
  • On drop: the horizontal divider is drawn inside a 100 × 100 SizedBox (which appears as a part in the Styles panel). Leave the divider properties unset and the line itself uses your app theme's default divider style.

Features

FeatureDescription
Horizontal dividerDraws a single horizontal line between the content above and below to split the area.
Line thicknessAdjusts the thickness of the drawn line (thickness).
Line colorSets the color of the line (color).
Left and right indentsSets the empty space to the left (indent) and right (endIndent) of the line.
Total heightSets the vertical height of the divider area including the line (height).

How to use

  1. Open the Dividers category in the left widget palette.
  2. Drag the Divider-H item onto the canvas.
  3. In the properties panel on the right, set the thickness (thickness), color (color), and left and right indents to the values you want.

Properties

PropertyDescriptionDefaultValue / Type
heightTotal vertical height of the divider area, including the lineNot setNumber (px)
thicknessThickness of the drawn line itselfNot setNumber (px)
indentEmpty space at the left (start) of the lineNot setNumber (px)
endIndentEmpty space at the right (end) of the lineNot setNumber (px)
colorColor of the lineNot setColor

Notes and tips

tip

Every property is unset by default. Leave a value empty and your app theme's default divider style — color and thickness — applies as is.

warning

height is not the thickness of the line itself. It's the total vertical height of the whole divider area, including the line. To draw a thicker line, adjust thickness.

Learn more

tip

For the full set of Widget Controls (Property, Method, and Event) that drive this widget from a script, visit Divider-H Widget Control.