Skip to content

Divider Widgets Overview

Divider widgets improve layout clarity by adding spacing and visual boundaries.

Lucy Studio provides Spacer, Divider-H, Divider-V, and SpaceBox.

Divider Widget Types

Widget Description Usage Tip
Spacer Fills remaining space in flex layouts such as Row and Column Align groups inside toolbars
Divider-H Horizontal separator line Separate sections in a column
Divider-V Vertical separator line Separate groups in a row
SpaceBox Fixed-size empty box for explicit spacing Fixed gaps and card padding

Divider Widgets

Spacer

Spacer consumes remaining space in a flex container.

1. flex Property

  • Defines how much of the remaining space the spacer takes.
  • If multiple spacers exist, space is split by ratio.
  • flex: 0 means the spacer takes no space.

2. Example Ratios

If remaining space is 60 and there are two spacers:

flex ratio Spacer size
1 : 1 30 : 30
1 : 3 15 : 45
1 : 0 60 : 0

Spacer

Divider-H and Divider-V

Divider-H and Divider-V draw visible lines to separate content regions.

1. Difference Summary

  • Divider-H renders a horizontal line.
  • Divider-V renders a vertical line.

Divider widgets vs split layout widgets

Divider-H and Divider-V add visual lines only. VSplit and HSplit create structural area splits.

Category Divider-H / Divider-V VSplit / HSplit
Widget type Divider widget Layout widget
Core role Visual boundary Structural split
Rendering Draws a line Splits area layout

2. Property Summary

Property Type Default Description
visible bool true Excluded from layout when false
height / width double 0.0 Occupied area including spacing
thickness double 0.0 Actual line thickness (0.0 uses 1px)
indent double 0.0 Start inset
endIndent double 0.0 End inset
color Color Theme default Line color

3. Tips

  • height or width controls the full box area.
  • thickness controls only the visible line weight.
  • Use indent and endIndent for shorter, cleaner separators.

SpaceBox Properties

Use SpaceBox when you need fixed-size spacing.

Spacer fills flexible space. SpaceBox defines exact dimensions.

1. Property Summary

Property Type Default Description
visible bool true Hides space when false
size.width double or infinity infinity Space width
size.height double or infinity infinity Space height
lock icon locked Keep width and height linked

2. Tips

  • Numeric values create fixed pixel spacing.
  • infinity consumes remaining space on that axis.
  • Use locked to keep square spacing, unlocked for rectangular spacing.