Responsive Helpers

Responsive helpers provide programmatic access to Wind's breakpoint system, platform detection, and screen metrics directly from your Dart code.

• Context Extensions
• Helper Functions
• Breakpoint Reference
• Platform Detection

Context Extensions

Wind extends BuildContext with ergonomic getters to check the current screen state. These are the most common way to handle conditional logic in your build methods.

Breakpoint Shortcuts

Let's look at an example:

@override
Widget build(BuildContext context) {
  // Use extensions for conditional layouts
  if (context.wIsMobile) {
    return MobileView();
  }

  return DesktopView();
}

Manual Checks

If you need to check against a specific breakpoint name:

if (context.wScreenIsExt('xl')) {
  // Screen is extra large or larger
}

Helper Functions

While extensions are preferred for brevity, these global functions provide the underlying logic and can be used in any part of your widget tree.

wScreenIs(context, name)

Returns true if the current screen width is at least the pixel value defined for the given breakpoint.

if (wScreenIs(context, 'md')) {
  print('Tablet or larger');
}

wScreenCurrent(context)

Returns the name of the currently active breakpoint based on the screen width.

String current = wScreenCurrent(context); // 'base', 'sm', 'md', etc.

wScreen(context, name)

Returns the raw pixel value (int) for a specific breakpoint name from your theme.

int? mdValue = wScreen(context, 'md'); // 768

Breakpoint Reference

By default, Wind uses the standard Tailwind CSS breakpoint scale. You can override these in your WindThemeData.

[!NOTE] Breakpoint checks are inclusive (mobile-first). wScreenIs(context, 'md') is true for any width >= 768px, including lg and xl sizes.

Platform Detection

Wind provides platform-specific modifiers for utility classes (e.g., ios:p-4), but you can also access platform information programmatically via WindContext.

final wind = WindContext.build(context);

if (wind.isMobile) {
  // Physical mobile device (iOS/Android)
}

print(wind.platform); // 'ios', 'android', 'web', 'macos', etc.

For more details on responsive styling using class names, see the Responsive Design guide.