Layout and Spacing

Build responsive structure using Flutterwind layout utilities.

Layout utilities

Use layout utilities to define structure and alignment quickly.

PurposeUtilities
Flex containerflex, flex-row, flex-col
Alignmentitems-start, items-center, items-end
Distributionjustify-start, justify-center, justify-between
Gridgrid, grid-cols-1, grid-cols-2, grid-cols-3
Row(
  children: const [
    Text('Logo'),
    Text('Menu'),
  ],
).className('flex items-center justify-between')

Spacing utilities

Spacing utilities cover margin, padding, and gaps:

TypeExamples
Marginm-2, mt-4, mx-6
Paddingp-2, py-4, px-6
Gapgap-2, gap-4, gap-8
Container(
  child: Column(
    children: const [
      Text('First'),
      Text('Second'),
      Text('Third'),
    ],
  ).className('gap-3'),
).className('p-4 md:p-6 lg:p-8')

Responsive layout example

Container(
  child: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
).className('grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3')
Edit this page
Utility Reference
Core Flutterwind utility groups and class patterns.
Typography and Colors
Apply text, color, and visual styling utilities.