WSpacer

The WSpacer is a lightweight widget designed specifically for adding consistent gaps between elements. Unlike WDiv, which supports a full range of decorations and layout properties, WSpacer renders as a simple SizedBox, making it highly efficient for layouts where you only need spacing.

• Basic Usage
• Constructor
• Props
• Responsive Spacing
• Why WSpacer?
• All Supported Classes
• Customizing Theme
• Related Documentation

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

[!NOTE] Non-sizing classes (like bg-red-500 or p-4) are parsed but ignored by WSpacer as it renders a SizedBox which does not support decoration or padding.

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