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

Window Size Class#

wWindowClassOf(context) sorts the window width into one of three WindowSizeClass values, cut at the theme's md and lg screens. Use it to choose between a bottom bar and a side rail by window width instead of by platform: Wind treats iOS as mobile, so an iPad reads as a phone by platform, and wIsTablet is only the md to lg band.

final bool useRail = wWindowClassOf(context) != WindowSizeClass.compact;

A custom screens table in WindThemeData moves the cuts. The width is the window's, so an iPad in split view is compact.

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.