Typography Helpers

• Introduction
• Global Functions
  • wFontSize
  • wFontWeight
• BuildContext Extensions
• Theme Scale Access
• Customizing Scales

Introduction

Wind provides a set of helper functions and extensions to access typography values directly from your Dart code. While utility classes are the primary way to style widgets, these helpers are essential when you need to calculate dimensions, pass styles to standard Material widgets, or build custom components that respect the design system.

Global Functions

These functions provide a safe way to resolve typography values using the current BuildContext.

wFontSize

The wFontSize function retrieves a pixel value from the theme's font size scale. It accepts the size name (e.g., 'sm', 'lg', '2xl') and returns the corresponding double.

double? size = wFontSize(context, 'lg'); // Returns 18.0 (default)

wFontWeight

The wFontWeight function resolves a named font weight into a Flutter FontWeight object.

FontWeight? weight = wFontWeight(context, 'bold'); // Returns FontWeight.w700

Supported weight names include thin, extralight, light, normal, medium, semibold, bold, extrabold, and black.

BuildContext Extensions

For a more ergonomic API, Wind extends BuildContext with shortcut methods. These are wrappers around the global functions and provide a cleaner syntax when working inside a build method.

// Font Size shortcut
final h1Size = context.wFontSizeExt('4xl');

// Font Weight shortcut
final strongWeight = context.wFontWeightExt('bold');

Theme Scale Access

If you need to iterate over the entire scale or access specific metadata, you can retrieve the WindThemeData object directly from the context.

final theme = context.windThemeData;

// Access the raw scales
Map sizes = theme.fontSizes;
Map weights = theme.fontWeights;
Map letterSpacing = theme.tracking;
Map lineHeights = theme.leading;
Map families = theme.fontFamilies;

This is particularly useful when building dynamic UI elements like font pickers or settings menus:

// Example: Listing all available font sizes
return ListView(
  children: context.windThemeData.fontSizes.keys.map((name) {
    return ListTile(
      title: Text('Size: $name'),
      trailing: Text('${context.wFontSizeExt(name)}px'),
    );
  }).toList(),
);

Customizing Scales

You can override any part of the typography system when initializing your WindTheme. This ensures that your custom values are available through all the helper functions described above.

WindTheme(
  data: WindThemeData(
    fontSizes: {
      'display': 120.0,
      'caption': 10.0,
    },
    fontWeights: {
      'heavy': FontWeight.w900,
    },
  ),
  child: MyApp(),
)

Once defined, these custom keys are accessible just like the defaults:

final displaySize = context.wFontSizeExt('display'); // 120.0