Visibility

Making elements invisible

Use the invisible utility to hide an element but still maintain its place in the document, affecting the layout of other elements. Flutter maps this to Visibility(visible: false, maintainSize: true).

Style('grid grid-cols-3 gap-4', children: [
  Text('01'),
  Style('invisible ...', child: Text('02')),
  Text('03'),
])

To completely remove an element from the document, use the hidden utility instead (maps to Offstage).

Collapsing elements

CSS collapse is meaningful only on <table> rows and columns. Flutter has no equivalent table-row collapse semantic, so collapse is aliased to invisible — space is reserved. If you need real row elision in a Flutter Table, omit the TableRow from the children list directly.

Style('grid grid-cols-3 gap-4', children: [
  Text('01'),
  Style('collapse ...', child: Text('02')),
  Text('03'),
])

Making elements visible

Use the visible utility to make an element visible. Most useful for undoing invisible at different screen sizes via responsive variants.

Style('grid grid-cols-3 gap-4', children: [
  Text('01'),
  Style('visible ...', child: Text('02')),
  Text('03'),
])

Class reference

Class	Flutter	Notes
visible	Visibility(visible: true, maintainSize: true)	Or no wrap when standalone
invisible	Visibility(visible: false, maintainSize: true)	Space preserved
collapse	alias of invisible	Flutter has no table-row collapse semantic