Installation

Getting started with Wind requires a few configuration steps to ensure utility classes resolve correctly across your application.

Requirements#

Before adding Wind to your project, ensure your environment meets these minimum version requirements. We recommend staying on the latest stable versions for the best experience.

Installation#

Add fluttersdk_wind to your pubspec.yaml using the Flutter CLI:

flutter pub add fluttersdk_wind

Alternatively, add it manually to your dependencies:

dependencies:
  fluttersdk_wind: any  # or pin to latest stable from pub.dev/packages/fluttersdk_wind

Basic Setup#

To use Wind utilities, you must wrap your application with the WindTheme widget. This provides the context needed for responsive breakpoints, dark mode, and state resolution.

The Builder Pattern (Recommended)#

The builder pattern is the preferred way to initialize Wind. It provides a controller that synchronizes Wind's theme state (like dark mode) directly with your MaterialApp.

Let's look at a typical implementation:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return WindTheme(
      // Always use the 'data' parameter for configuration
      data: WindThemeData(), 
      builder: (context, controller) {
        return MaterialApp(
          title: 'Wind App',
          // Automatically syncs Material theme with Wind's state
          theme: controller.toThemeData(),
          home: const HomePage(),
        );
      },
    );
  }
}

By using the builder pattern, any theme changes triggered via context.windTheme.toggleTheme() will instantly propagate to both Wind widgets and native Material components.

Alternative Setup#

If you do not need reactive synchronization with MaterialApp or are only using Wind in a specific subtree, you can use the child pattern:

WindTheme(
  data: WindThemeData(),
  child: MaterialApp(
    home: const HomePage(),
  ),
)

While this setup works for Wind widgets like WDiv or WText, native Material widgets will not automatically react to Wind theme changes unless handled manually.

Verify Installation#

To verify that Wind is correctly configured, add a WDiv with a few utility classes to your project:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: WDiv(
          className: 'bg-blue-500 p-6 rounded-xl shadow-lg',
          child: WText(
            'Wind is working!',
            className: 'text-white font-bold text-xl',
          ),
        ),
      ),
    );
  }
}

If you see a blue card with white text, the installation is successful.