Spacing Helpers

View raw .md

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.

On this page

Preview utilities/spacing_helpers_basic A live demo of this example follows. spacing_helpers_basic.dart View source Open demo

The wSpacing Function#

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

dart

import 'package:wind_kit/wind_kit.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#

dart

double wSpacing(BuildContext context, num multiplier)

Parameter	Type	Description
`context`	`BuildContext`	Required to look up the active `WindTheme`.
`multiplier`	`num`	The scale factor (e.g., 4 in `p-4`).

Context Extensions#

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

dart

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.

dart

// 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).

dart

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.