Basic Usage

Practical Flutterwind examples you can copy into your app.

How styling works

Flutterwind applies utility classes from a class string to a widget:

Text('Hello Flutterwind').className('text-lg font-bold text-blue-500')

You can chain multiple utilities to compose spacing, layout, typography, colors, and effects in one place.

Example: Profile card

Container(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Yash Kumar').className('text-xl font-bold text-zinc-900'),
      const SizedBox(height: 8),
      Text('Building fast Flutter apps with utility-first styling')
          .className('text-sm text-zinc-600'),
      const SizedBox(height: 12),
      Row(
        children: [
          Chip(label: const Text('Flutter')).className('bg-blue-100 text-blue-700'),
          const SizedBox(width: 8),
          Chip(label: const Text('Dart')).className('bg-cyan-100 text-cyan-700'),
        ],
      ),
    ],
  ),
).className('rounded-xl border border-zinc-200 bg-white shadow-sm')

Example: Responsive layout

Container(
  child: [
    Container(color: Colors.red).className('h-20'),
    Container(color: Colors.blue).className('h-20'),
    Container(color: Colors.green).className('h-20'),
  ],
).className('grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3')

Example: Interaction states

ElevatedButton(
  onPressed: () {},
  child: const Text('Save changes'),
).className('bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-300')

Next steps

  • Explore the full utility reference in /components/utility-reference
  • Customize design tokens in flutterwind.yaml
  • Combine responsive utilities with typography and spacing for production layouts
Edit this page
Filter & Effects
A filter and effects system similar to Tailwind CSS, allowing you to apply various visual effects to your components.
Quick Start
Build your first Flutterwind-styled UI in minutes.