Display
Use display utilities to control how an element is rendered. The hidden
utility removes an element from layout entirely — its enclosing slot
collapses to zero size, and any siblings flow as if it weren’t there.
Style('flex ...', children: [ Style('hidden ...', child: Text('01')), Text('02'), Text('03'),])Class reference
Section titled “Class reference”| Class | Behaviour |
|---|---|
block | Block element — fills available width, stacks vertically. |
inline-block | Shrink-wraps to its content width. |
inline-flex | Inline-sized flex container. |
inline-grid | Inline-sized grid container. |
hidden | Remove from layout entirely (SizedBox.shrink). |
sr-only | Visually hidden but exposed to screen readers. |
not-sr-only | Reverses sr-only on responsive variants. |
The following Tailwind v4 display tokens are not yet supported:
inline, flow-root, contents, table, inline-table,
table-caption, table-cell, table-column, table-column-group,
table-footer-group, table-header-group, table-row-group,
table-row, list-item. Most have no clean Flutter equivalent —
see the PLAYGROUND_PARITY.md Library prerequisites for the full
list and rationale.