Quick Start

Build your first Flutterwind-styled UI in minutes.

1. Wrap your app once

import 'package:flutterwind_core/flutterwind.dart';

void main() {
  runApp(
    FlutterWind(
      child: const MyApp(),
    ),
  );
}

2. Style widgets with class names

Container(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Welcome back').className('text-2xl font-bold text-zinc-900'),
      const SizedBox(height: 8),
      Text('Utility-first styling for Flutter')
          .className('text-sm text-zinc-600'),
    ],
  ),
).className('rounded-xl border border-zinc-200 bg-white shadow-sm')

3. Add responsive behavior

Container(
  child: [
    Container(color: Colors.indigo).className('h-24 rounded'),
    Container(color: Colors.blue).className('h-24 rounded'),
    Container(color: Colors.cyan).className('h-24 rounded'),
  ],
).className('grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3')

4. Customize design tokens

Edit flutterwind.yaml to tune defaults for your app:

colors:
  brand:
    500: "#4F46E5"
spacing:
  18: 72
screens:
  md: 768
  lg: 1024

Where to go next

  • Read Configuration System for full token customization
  • Open Utilities > Utility Reference to discover class groups
  • Use Basic Usage examples as starter snippets
Edit this page
Basic Usage
Practical Flutterwind examples you can copy into your app.
Plugin SDK
Build custom Flutterwind utility handlers and preset plugins.