Responsive Framework

A ResponsiveValue<T> is used to look up a value based on the current active breakpoint. It evaluates a list of Condition objects and returns the value associated with the first condition that matches the current state.

Common conditions include:

• Condition.equals(name: 'NAME', value: T): Matches if the active breakpoint name equals the provided name.
• Condition.between(start: double, end: double, value: T): Matches if the current width is within the specified range.

In v1.0.0, the monolithic ResponsiveWrapper was replaced by ResponsiveBreakpoints. Breakpoints are now defined using explicit start and end ranges. It is recommended to create contiguous breakpoints covering the range from 0 to double.infinity.

To create a 'TAG' (a specific breakpoint trigger), set both start and end to the same value. You can then check for this tag using ResponsiveBreakpoints.of(context).largerThan('TAG_NAME').

ResponsiveBreakpoints.builder(
  child: child!,
  breakpoints: [
    const Breakpoint(start: 0, end: 450, name: MOBILE),
    const Breakpoint(start: 451, end: 800, name: TABLET),
    const Breakpoint(start: 801, end: 1920, name: DESKTOP),
    const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
  ],
)

To enable responsive behavior, wrap your MaterialApp or CupertinoApp with ResponsiveBreakpoints.builder. You must define a list of Breakpoint objects that specify the start width, end width, and a name for each breakpoint range.

import 'package:responsive_framework/responsive_framework.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveBreakpoints.builder(
        child: child!,
        breakpoints: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 800, name: TABLET),
          const Breakpoint(start: 801, end: 1920, name: DESKTOP),
          const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
        ],
      ),
      initialRoute: "/",
    );
  }
}

Add the responsive_framework package to your pubspec.yaml file to start using the library in your Flutter project.

responsive_framework: ^latest_version

The alignment property in ResponsiveGridView allows you to control how the entire grid of items is positioned within the available space when the items do not fill the full width of the container.

Supported behaviors:

• Left Alignment: (e.g., Alignment.centerLeft, Alignment.topLeft, Alignment.bottomLeft) Items are packed to the left. No extra padding is added.
• Center Alignment: (e.g., Alignment.center, Alignment.topCenter, Alignment.bottomCenter) The grid is centered. The widget calculates the remaining space and distributes it as padding on the left and right.
• Right Alignment: Any Alignment with a positive x-offset will result in the grid being pushed to the right, with all remaining space added as left padding.

By default, landscape breakpoints are only active on mobile-oriented platforms (iOS, Android, Fuchsia). You can customize this behavior using:

1. breakpointsLandscape: Provide a specific list of Breakpoint objects to be used when the device is in landscape mode.
2. landscapePlatforms: Override the default list of supported platforms to enable landscape mode detection on other platforms (e.g., Web).
3. useShortestSide: When true, the screenWidth used for breakpoint calculation will be the smaller of the two dimensions, allowing you to maintain consistent layouts regardless of orientation.

To enable responsiveness throughout your application, wrap your root widget with the ResponsiveBreakpoints widget. This widget manages breakpoint states and provides responsive data to all descendant widgets via ResponsiveBreakpoints.of(context).

Common configuration options include:

• breakpoints: A required list of Breakpoint objects defining your screen ranges.
• breakpointsLandscape: An optional list of breakpoints to use when the device is in landscape orientation.
• useShortestSide: If true, calculations are based on the shortest side of the screen instead of the actual width/height. This is useful for maintaining consistent sizing across orientation changes.
• debugLog: If true, prints breakpoint visualizations to the console.

The ResponsiveScaledBox replaces the AutoScale feature from the legacy ResponsiveWrapper. It renders its child using a FittedBox set to a specific width.

Unlike a standard FittedBox, ResponsiveScaledBox uses LayoutBuilder and MediaQuery to ensure that MediaQueryData is correctly scaled, which is essential for full-screen layouts.

To implement responsive scaling, pass a ResponsiveValue<double> to the width property. This allows you to define different target widths based on the active breakpoint using Condition objects.

ResponsiveScaledBox(
  width: ResponsiveValue<double>(context, conditionalValues: [
    Condition.equals(name: MOBILE, value: 450),
    Condition.between(start: 800, end: 1100, value: 800),
    Condition.between(start: 1000, end: 1200, value: 1000),
  ]).value,
  child: child,
)

The MaxWidthBox replaces the maxWidth property from the legacy ResponsiveWrapper. It limits the child widget to a specified maxWidth and allows you to paint an optional background behind the content. This is typically used to create gutters on the sides of the page on large desktop displays.

MaxWidthBox(
  maxWidth: 1200,
  background: Container(color: const Color(0xFFF5F5F5)),
  child: child,
)

The framework provides several specialized widgets to assist with responsive layouts:

• ResponsiveValue: Provides values that change based on the current breakpoint.
• ResponsiveVisibility: Controls widget visibility based on breakpoints.
• ResponsiveConstraints: Provides responsive constraints.
• ResponsiveRowColumn: A layout widget for rows and columns that adapts to screen size.
• ResponsiveGridView: A responsive grid implementation.
• ResponsiveScaledBox: Scales its child proportionally.
• MaxWidthBox: Constrains the maximum width of its child.