Breakpoint #

Calculates the responsive layout grid properties (columns, gutters, and margins) based on the current screen size, following Material Design Guidelines.

Features #

• Standardized Breakpoints: Implements the Material Design responsive layout grid system.
• Adaptive Properties: providing the correct columns count, glutters spacing, and margin width for any screen width.
• Device Classification: Identifies device types (Handset, Tablet, Desktop) and window sizes (xsmall to xlarge).
• Flexible Usage: Works with both BoxConstraints (via LayoutBuilder) and MediaQuery.

Installation #

flutter pub add breakpoint

Usage #

Using BreakpointBuilder #

The easiest way to use this package is with BreakpointBuilder. It automatically handles the LayoutBuilder for you and provides the current Breakpoint data.

BreakpointBuilder(
  builder: (context, breakpoint) {
    // The breakpoint passed here provides the standardized margins,
    // columns, and gutters for the current screen size.

    return Container(
      // Access the margin, commonly 16.0 or 24.0
      padding: EdgeInsets.all(breakpoint.margin), 
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: breakpoint.columns, // 4, 8, or 12 columns
          crossAxisSpacing: breakpoint.gutters, // 16.0 or 24.0 spacing
          mainAxisSpacing: breakpoint.gutters,
        ),
        // ...
      ),
    );
  },
)

Manual Calculation #

If you are already inside a LayoutBuilder or want to use MediaQuery:

From Constraints (Recommended for sub-views):

LayoutBuilder(builder: (context, constraints) {
  // Calculate the breakpoint based on the current widget's constraints
  final breakpoint = Breakpoint.fromConstraints(constraints);
  
  return Padding(
    padding: EdgeInsets.symmetric(horizontal: breakpoint.margin),
    child: Row(
      children: [
        // Your adaptive layout here
      ],
    ),
  );
});

From MediaQuery (App-wide layout):

// Calculate based on the full screen size
final breakpoint = Breakpoint.fromMediaQuery(context);

// Example: accessing device type
if (breakpoint.device == LayoutClass.desktop) {
  return DesktopLayout();
} else if (breakpoint.device == LayoutClass.tablet) {
  return TabletLayout();
} else {
  return MobileLayout();
}

Breakpoint System #

This package maps screen widths to the standard Material Design responsive grid:

Note: In Landscape orientation, the effective width calculation includes a buffer (+120dp) to better align with landscape layout expectations.

Example #

Check out the example directory for a full Material 3 adaptive dashboard application.