Get Started with Wind

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.