Display (Visibility)

Control widget visibility with hide and show utility classes, with optional responsive breakpoint prefixes.

• Basic Usage
• Quick Reference
• How It Works
• Responsive Display
• Helper Functions
• Related Documentation

WFlexContainer(
  className: 'flex-col bg-gray-100 h-64 justify-center items-center gap-4',
  children: [
    WFlexible(
      className: 'hide lg:show',
      child: WText('Visible on large and larger screens'),
    ),
    WFlexible(
      className: 'hide md:show',
      child: WText('Visible on medium and larger screens'),
    ),
    WFlexible(
      className: 'show md:hide',
      child: WText('Visible on only small screens'),
    ),
  ],
);

Basic Usage

Apply hide to a widget's className to hide it unconditionally. Apply show to force it visible. Combine with a breakpoint prefix to make the behavior screen-size-conditional.

WContainer(
  className: 'hide',
  child: WText('This widget is hidden'),
);

WContainer(
  className: 'show',
  child: WText('This widget is visible'),
);

Quick Reference

Responsive prefix syntax: : — for example md:hide, lg:show.

How It Works

Wind's DisplayParser reads the className string. When a hide token is matched (and any breakpoint condition is satisfied), the widget is replaced with SizedBox.shrink(). The show token overrides a previous hide on the same widget.

This behavior is built into:

• WText
• WFlexible
• WContainer
• WCard

Responsive Display

Prefix any display class with a breakpoint to apply it only at that screen width and above.

// Visible only on small screens; hidden on medium and above.
WFlexible(
  className: 'show md:hide',
  child: WText('Mobile only'),
);

// Hidden by default; shown on large screens and above.
WFlexible(
  className: 'hide lg:show',
  child: WText('Desktop only'),
);

Helper Functions

Wind exposes Dart helpers for imperative visibility logic.

wScreen

Returns true if the current screen width is at or above the given breakpoint.

wScreen(context, 'md') // true on medium and larger screens

wScreenOnly

Returns true only when the screen width falls within the exact range of the given breakpoint.

wScreenOnly(context, 'sm') // true only on small screens

wAnyScreenOnly

Returns true when the screen matches any of the provided breakpoints exclusively.

wAnyScreenOnly(context, ['sm', 'md']) // true on small or medium only

Related Documentation

• Responsive Design — breakpoint system and screen-size utilities
• WContainer — container widget supporting display classes
• WFlexible — flex child widget supporting display classes
• WText — text widget supporting display classes