ResponsiveConstraintsExtensions extension

Extensions on BoxConstraints for Tailwind-style responsive checks.

Provides boolean getters for each breakpoint (sm, md, lg, xl, xxl) to make responsive layouts easier inside LayoutBuilder or similar widgets.

Example usage:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.sm) {
      print("Small screen or larger");
    }

    if (constraints.lg) {
      print("Large screen or larger");
    }

    // Conditional widget example
    return Container(
      width: constraints.md ? 500 : 300,
      child: Text(
        constraints.xl ? "Extra Large Screen" : "Smaller Screen",
      ),
    );
  },
);
on

Properties

deviceType → DeviceType

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

The layout's DeviceType (mobile / tablet / desktop), based on maxWidth.
no setter
isDesktop → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if deviceType is DeviceType.desktop.
no setter
isLandscape → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxWidth exceeds maxHeight.
no setter
isMobile → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if deviceType is DeviceType.mobile.
no setter
isPortrait → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxHeight is at least maxWidth.
no setter
isTablet → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if deviceType is DeviceType.tablet.
no setter
lg → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxWidth ≥ large breakpoint
no setter
md → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxWidth ≥ medium breakpoint
no setter
sm → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxWidth ≥ small breakpoint
no setter
xl → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxWidth ≥ extra large breakpoint
no setter
xxl → bool

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Returns true if maxWidth ≥ XXL breakpoint
no setter

Methods

responsive<T>({required T base, T? sm, T? md, T? lg, T? xl, T? xxl}) → T

Available on BoxConstraints, provided by the ResponsiveConstraintsExtensions extension

Picks the highest-matching value for maxWidth, falling back to base.