Spacing Helpers

Wind provides programmatic access to your theme's spacing scale through helper functions and extensions. This allows you to maintain consistency when building custom widgets or manual layouts that aren't using className strings.

[!NOTE] This page covers the Dart API for spacing. For CSS-like utility classes such as p-4, m-2, or gap-6, see the Spacing Layout documentation.

• The wSpacing Function
• Context Extensions
• Programmatic Access
• Theme Configuration

The wSpacing Function

The wSpacing helper is the primary way to calculate pixel values based on your theme's baseSpacingUnit (defaulting to 4px).

import 'package:fluttersdk_wind/fluttersdk_wind.dart';

// Calculates: multiplier * baseSpacingUnit
double padding = wSpacing(context, 4);    // 16.0
double gap = wSpacing(context, 2.5);      // 10.0
double tight = wSpacing(context, 0.5);    // 2.0

Signature

double wSpacing(BuildContext context, num multiplier)

Context Extensions

For more ergonomic access, Wind adds the wSpacingExt shortcut to BuildContext.

Container(
  padding: EdgeInsets.all(context.wSpacingExt(4)), // 16.0
  child: MyWidget(),
)

Programmatic Access

If you need to access the raw spacing unit or the entire theme configuration, you can use the windThemeData extension.

// Access the base unit directly
final unit = context.windThemeData.baseSpacingUnit; // 4.0

// Use it in complex calculations
double customCalc = (unit * 4) + 2.0;

Theme Configuration

The spacing scale is controlled by the baseSpacingUnit property in your WindThemeData. Changing this value will globally update both your programmatic spacing and all CSS utility classes (like p-4).

WindTheme(
  data: WindThemeData(
    baseSpacingUnit: 5.0, // 1 unit = 5px
  ),
  child: MyApp(),
)

With the above configuration:

• wSpacing(context, 4) returns 20.0
• WDiv(className: 'p-4') applies 20.0px padding.

Related Documentation:

• Spacing Layout Utilities
• Theming Guide
• Context Extensions