Display

Utilities for controlling the layout mode of an element.

• Basic Usage
  • Block
  • Flex
  • Grid
  • Wrap
  • Hidden
• Quick Reference
• Responsive Design
• Dark Mode
• State Variants
• Arbitrary Values
• Customizing Theme
• Related Documentation

// Flex container
WDiv(className: 'flex gap-4', children: [...])

// Grid container
WDiv(className: 'grid grid-cols-3', children: [...])

// Hidden element
WDiv(className: 'hidden', child: ...)

Basic Usage

Block

Use block to create a standard block-level element. In Wind, this is the default behavior of WDiv (rendering a Container or SizedBox).

WDiv(
  className: 'block p-4 bg-white',
  child: WText('This is a block element'),
)

Flex

Use flex to create a flex container. This enables Flexbox layout properties (like flex-row, items-center, justify-between).

[!NOTE] flex creates a Row or Column depending on flex-row (default) or flex-col.

WDiv(
  className: 'flex items-center space-x-4',
  children: [
    WDiv(className: 'w-10 h-10 bg-blue-500'),
    WText('Flex item'),
  ],
)

Grid

Use grid to create a grid container. This enables Grid layout properties (like grid-cols-3, gap-4).

WDiv(
  className: 'grid grid-cols-3 gap-4',
  children: [
    WDiv(className: 'h-20 bg-blue-100'),
    WDiv(className: 'h-20 bg-blue-200'),
    WDiv(className: 'h-20 bg-blue-300'),
  ],
)

Wrap

Use wrap to create a wrapping container. This renders a Flutter Wrap widget.

[!WARNING] Do not use flex flex-wrap. In Flutter, Row/Column cannot wrap. Always use the wrap display utility instead.

WDiv(
  className: 'wrap gap-2',
  children: [
    WChip('React'),
    WChip('Flutter'),
    WChip('Vue'),
  ],
)

Hidden

Use hidden to remove an element from the visual tree. This renders a SizedBox.shrink() (effectively 0x0 size).

WDiv(
  className: 'hidden',
  child: WText('This will not appear'),
)

Quick Reference

Responsive Design

Prefix any display utility with a breakpoint variant like md: to apply it only at specific screen sizes.

// Hidden on mobile, Flex on medium screens and up
WDiv(
  className: 'hidden md:flex gap-4',
  children: [...],
)

// Block on mobile, Hidden on large screens
WDiv(
  className: 'block lg:hidden',
  child: ...,
)

Dark Mode

Prefix any display utility with dark: to apply it only when dark mode is active.

// Visible only in dark mode
WDiv(
  className: 'hidden dark:block',
  child: WText('Dark Mode Active'),
)

State Variants

Prefix utilities with state variants like hover:, focus:, or active: to conditionally apply display modes.

// Show element on hover
WDiv(
  className: 'hidden group-hover:block',
  child: ...,
)

Arbitrary Values

The display utility does not support arbitrary values. You must use one of the predefined keywords (block, flex, grid, wrap, hidden).

Customizing Theme

Display utilities are structural and cannot be customized via WindThemeData. They map directly to Flutter widgets (Row, Column, Wrap, GridView).

Related Documentation

• Flexbox - Layout direction, alignment, and sizing for flex containers.
• Grid - Column definitions and gaps for grid containers.
• Visibility - Control visibility without changing layout (opacity).