WSpacer

WDiv(
  className: 'flex flex-col',
  children: [
    WText('Label', className: 'font-bold'),
    WSpacer(className: 'h-2'), // 8px vertical gap
    WInput(placeholder: 'Enter text...'),
  ],
)

Basic Usage#

The WSpacer widget extracts width and height values from your utility classes and applies them to a SizedBox. It supports the standard Wind spacing scale (based on a 4px unit by default).

Vertical Spacing#

Use the h-{n} classes to add vertical gaps in columns:

WSpacer(className: 'h-4') // 16px height

Horizontal Spacing#

Use the w-{n} classes to add horizontal gaps in rows:

WSpacer(className: 'w-2') // 8px width

Constructor#

const WSpacer({
  Key? key,
  String? className,
})

Props#

Responsive Spacing#

You can adjust spacing based on screen size using responsive prefixes. This is particularly useful for increasing margins on tablet or desktop layouts.

WSpacer(className: 'h-4 md:h-8')

Why WSpacer?#

While you could use WDiv with padding or margin, WSpacer is preferred for explicit gaps for several reasons:

1. Performance: It bypasses complex composition and renders as a single SizedBox.
2. Semantics: It clearly communicates "this widget exists only for spacing" to other developers.
3. Convenience: It replaces the verbose SizedBox(height: 16) with the more maintainable WSpacer(className: 'h-4').

All Supported Classes#

Customizing Theme#

The pixel values for h-{n} and w-{n} are derived from the baseSpacingUnit in your theme.

WindThemeData(
  baseSpacingUnit: 4.0, // Default: h-1 = 4px
)

Related Documentation#

• WDiv
• Sizing Utilities
• Spacing Utilities
• Responsive Design