Installation

Requirements

flutterwindcss targets Flutter ≥ 3.29 / Dart ≥ 3.7 (it uses the wide-gamut Color API and the Row/Column spacing parameter). Older toolchains won't compile. If you don't have Flutter yet, follow the official install guide.

Platforms

flutterwindcss is pure widgets-layer code — no platform channels, no dart:io, no platform-specific branches. It runs on every Flutter target:

There is nothing to configure per platform, and the result is identical on the pure path or inside a MaterialApp.

Add the dependency

flutter pub add flutterwindcss

This writes the current version constraint into your pubspec.yaml for you. There is a single import — the package barrel. Importing from package:flutterwindcss/src/... is unsupported.

import 'package:flutterwindcss/flutterwindcss.dart';

Provide a theme

Components read design tokens through context.fw, which resolves the active FwTokens. You provide them once near the root of your app — flutterwindcss works on a pure Material-free app or inside a MaterialApp.

Pure path (Material-free)

Wrap your app in FwTheme (or FwAnimatedTheme to crossfade theme changes):

import 'package:flutter/widgets.dart';
import 'package:flutterwindcss/flutterwindcss.dart';

void main() {
  runApp(
    WidgetsApp(
      color: const Color(0xFF000000),
      builder: (context, _) => const FwTheme(
        tokens: FwTokens.light,
        child: HomeScreen(),
      ),
    ),
  );
}

Inside a MaterialApp (interop)

Register the tokens as a ThemeData extension. context.fw resolves the Material-free FwTheme first and falls back to this bridge, so the same widgets work in either host.

import 'package:flutter/material.dart';
import 'package:flutterwindcss/flutterwindcss.dart';

MaterialApp(
  theme: ThemeData(
    extensions: const [FwThemeExtension(tokens: FwTokens.light)],
  ),
  darkTheme: ThemeData(
    extensions: const [FwThemeExtension(tokens: FwTokens.dark)],
  ),
  home: const HomeScreen(),
);

Style your first widget

.tw starts a style chain on any widget; context.fw reads the theme's tokens.

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final t = context.fw;
    return const Text('Hello, flutterwindcss')
        .tw
        .p(6)
        .bg(t.colors.card)
        .text(t.colors.cardForeground)
        .rounded(t.radii.lg)
        .border(1, color: t.colors.border);
  }
}

Next steps