Get Started with Wind

Wind enables seamless styling in Flutter by interpreting class names directly in your widget trees, transforming them into optimized designs.

• Requirements
• Installation
• Usage
• Binding the Flutter Theme
• Related Documentation

Requirements

Wind is a pure Flutter package with no platform-specific setup. To use it you need:

• Flutter >=3.3.0
• Dart >=3.6.0

Installation

To get started, run the following command in your terminal:

flutter pub add fluttersdk_wind

Or add the following to your pubspec.yaml:

dependencies:
  fluttersdk_wind: ^0.0.5

Then run flutter pub get.

Usage

Below is an example of how to use Wind to style your Flutter widgets.

This example builds a card component with several text elements, each styled with Wind classes:

WCard(
  className: 'shadow-lg rounded-lg m-4 p-4 bg-black',
  child: WFlex(
    className: 'flex-col axis-min gap-2 items-start',
    children: [
      WText('12', className: 'text-4xl leading-6 font-bold text-white'),
      WText(
        'Active users on the website',
        className: 'text-white leading-4',
      ),
      WText(
        'A short summary of recent activity across the platform.',
        className: 'text-gray-300 text-xs',
      ),
    ],
  ),
)

WCard provides the surface, WFlex arranges its children along an axis, and each WText carries its own typography and color utilities.

Binding the Flutter Theme

By binding the Wind theme to your Flutter application, you can merge your app's colors and styles with Wind's theming system.

This step is optional, but recommended: it keeps your Material design and your Wind utilities consistent across the whole app.

See Binding the Flutter Theme for how to wire the Wind theme into your MaterialApp.

Related Documentation

• Binding the Flutter Theme — connect Wind's theme to your MaterialApp.
• Utility-First — the styling philosophy behind Wind.
• WCard — the card widget used above.
• WFlex — the flex layout widget used above.
• WText — the text widget used above.