Responsive Helpers

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.

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.