Responsive Master #

Responsive Master is a powerful Flutter package designed to simplify responsive UI development. It provides a modular, scalable system with intuitive units and a Bootstrap-style grid for creating layouts that adapt smoothly across screens and devices.

This is a standalone module powered by the flutter_addons framework.
It focuses exclusively on responsive layout and scaling utilities, making it easy to integrate into any Flutter project for building adaptive and consistent UIs.
📦 View on pub.flutter-io.cn »

Key Features #

• ResponsiveScope: Core wrapper that handles layout scaling, screen orientation, and error handling
• Design-aware scaling based on Figma or Adobe XD frames
• Responsive units:h ,w,r, ph, pw, sp, and more
• Breakpoint extensions: context.isXs, context.isMd, context.isLg, etc.
• Bootstrap-style grid system with rows, columns, nesting, offsets, and visibility controls
• Extension-based API for clean, readable code

Screenshots #

Desktop View
Mobile View	Error Screen

Getting Started #

Wrap your app with ResponsiveScope to enable layout scaling and adaptive behavior:

ResponsiveScope( // 👈  ResponsiveScope — VERY Important: Manages layout scaling, orientation lock, and global error handling
  enableDebugLogging: true, // Enable debug logs for responsive layout changes
  screenLock: AppOrientationLock.none, // No orientation restriction
  errorScreen: ErrorScreen.blueCrash, // Custom error screen for uncaught Flutter errors
  designFrame: const Frame(width: 390, height: 844), // Base design frame for scaling (e.g., iPhone 13)
  scaleMode: ScaleMode.design, // Use design-based scaling for consistent UI
  layoutBuilder: (ui) {
    // Handle layout changes based on screen size/orientation
    if (ui.isLandscape) {
      throw UnimplementedError(
        'Landscape layout is not implemented yet. '
        'Please handle different screen orientations.',
      );
    }
    return const MobileApp();
  },
);

Note: To enable proper scaling, make sure to provide a ScaleMode. Default is Percentange.

Recommended Responsive Units #

These units are optimized for adaptive layout and automatically adjust based on screen size or design scale mode.

ℹ️ Use .h, .w, .s, .sp, and .r for layouts that scale consistently across all devices and design sizes.

Spacing Extension Reference #

The Spacing extension provides quick, expressive syntax for margins, paddings, and spacing widgets based on integer values.

Breakpoint Utilities #

Use contextual extensions for conditional rendering based on screen width:

if (context.isXs) {
  print("Extra small screen");
} else if (context.isLg) {
  print("Large screen layout");
}

Grid Layout System [Experimental] #

⚠️ Note: Some layout features such as Dflex, Grid, and Col are currently experimental and may undergo breaking changes in future versions. All core features—like responsive units, ResponsiveScope, breakpoints, and spacing extensions—are stable and production-ready.

A responsive layout system inspired by Bootstrap:

Row(
  children: [
    Col(xs: 6, child: Container(color: Colors.red)),
    Col(xs: 6, offset: 2, child: Container(color: Colors.blue)),
  ],
)

Grid Features #

• Column offsets and nesting
• GridContainer for fixed-width centered layouts
• Visibility controls: HiddenOn, VisibleOn
• Responsive layouts for complex UIs

Installation #

Add the package to your pubspec.yaml:

dependencies:
  responsive_master: ^1.0.0

Contributing #

Contributions are welcome. Feel free to open issues or submit pull requests to help improve the package for the Flutter community.

License #

This package is distributed under the MIT License. See the LICENSE file for details.