Plugin SDK

Build custom Flutterwind utility handlers and preset plugins.

Flutterwind supports plugins for extending runtime utilities and component presets.

What plugins can do

  • Register custom utility handlers
  • Add or override component presets
  • Control execution precedence using handler order

Public APIs

Import:

import 'package:flutterwind_core/flutterwind.dart';

Core APIs:

  • registerFlutterWindUtilityHandler(FlutterWindClassHandler handler)
  • ComponentPresetRegistry.registerPreset(String token, String expansion)
  • ComponentPresetRegistry.unregisterPreset(String token)

Example: custom utility plugin

import 'package:flutter/material.dart';
import 'package:flutterwind_core/flutterwind.dart';

class DebugOutlinePlugin {
  static void install() {
    registerFlutterWindUtilityHandler(
      FlutterWindClassHandler(
        name: 'debug_outline_plugin',
        order: 999,
        apply: (cls, style) {
          final flutterStyle = style as FlutterWindStyle;
          if (cls == 'debug-outline') {
            flutterStyle.boxShadows = <BoxShadow>[
              const BoxShadow(
                color: Color(0xFFFF0000),
                spreadRadius: 0,
                blurRadius: 0,
              ),
            ];
          }
        },
      ),
    );
  }
}

Install once at startup:

void main() {
  DebugOutlinePlugin.install();
  runApp(const MyApp());
}

Use it:

Container().className('p-4 debug-outline');

Example: preset plugin

import 'package:flutterwind_core/flutterwind.dart';
import 'package:flutterwind_core/src/presets/component_presets.dart';

class TeamPresetPlugin {
  static void install() {
    ComponentPresetRegistry.registerPreset(
      'btn-brand',
      'btn bg-primary text-primary-foreground rounded-lg px-6 py-3',
    );
    ComponentPresetRegistry.registerPreset(
      'card-elevated',
      'card shadow-lg border p-6',
    );
  }
}

Precedence rules

  • Class string order is last-write-wins for conflicting fields.
  • Handler order controls when your plugin runs relative to core handlers.
  • Larger order values are useful for overrides.

Recommended plugin structure

  • lib/my_flutterwind_plugin.dart (exports + install API)
  • lib/src/<feature>_plugin.dart (utility handlers)
  • lib/src/<preset>_plugin.dart (preset registration)

Diagnostics

Use FlutterWindDiagnosticsCollector to inspect unsupported utilities/variants:

final collector = FlutterWindDiagnosticsCollector();
Text('Hello').className(
  'my-unknown-utility',
  diagnosticsCollector: collector,
);
Edit this page
Quick Start
Build your first Flutterwind-styled UI in minutes.
CLI Tools
Validate classes, generate support docs, and run benchmarks.