ResponsiveWrapper class Null safety

A wrapper that helps child widgets resize/scale to different screen dimensions.

This class automatically resizes/scales child widgets on ResponsiveBreakpoints. Computed MediaQueryData and ResponsiveWrapperData with correct dimensions are passed to child widgets.

The default Flutter behavior for layout changes is resizing. To easily adapt to a wide variety of screen sizes, ResponsiveWrapper can proportionally scale a layout. This eliminates the need to manually adapt layouts to MOBILE, TABLET, and DESKTOP.

To understand the difference between resizing and scaling, take the following example. An AppBar looks correct on a phone. When viewed on a desktop however, the AppBar is too short and the title looks too small. This is because Flutter does not scale widgets by default. Here is what happens with each behavior:

  1. Resizing (default) - the AppBar's width is double.infinity so it stretches to fill the available width. The kToolbarHeight is fixed and stays 56dp.
  2. Scaling - the AppBar's width stretches to fill the available width. The height scales proportionally using an aspect ratio automatically calculated from the nearest ResponsiveBreakpoint. As the width increases, the height increases proportionally.

An arbitrary number of breakpoints can be set. Resizing/scaling behavior can be mixed and matched as below. 1400+: scale on extra large 4K displays so text is still legible and widgets are not spaced too far apart. 1400-800: resize on desktops to use available space. 800-600: scale on tablets to avoid elements appearing too small. 600-350: resize on phones for native widget sizes. below 350: resize on small screens to avoid cramp and overflow errors.

Inheritance

Constructors

ResponsiveWrapper({Key? key, required Widget? child, List<ResponsiveBreakpoint>? breakpoints, List<ResponsiveBreakpoint>? breakpointsLandscape, List<ResponsiveTargetPlatform>? landscapePlatforms, double minWidth = 450, double? maxWidth, String? defaultName, bool defaultScale = false, double defaultScaleFactor = 1, double? minWidthLandscape, double? maxWidthLandscape, String? defaultNameLandscape, bool? defaultScaleLandscape, double? defaultScaleFactorLandscape, Widget? background, Color? backgroundColor, MediaQueryData? mediaQueryData, bool shrinkWrap = true, Alignment alignment = Alignment.topCenter, bool debugLog = false})
A wrapper widget that makes child widgets responsive.
const

Properties

alignment Alignment
Control the internal Stack alignment. The ResponsiveWrapper uses a Stack to enable child widgets to resize. Defaults to Alignment.topCenter because app content is usually top aligned.
final
background Widget?
An optional background widget to insert behind the responsive content. The background widget expands to fill the entire space of the wrapper and is not resized. Can be used to set a background image, pattern, or solid fill.
final
backgroundColor Color?
First frame initialization default background color. Because layout initialization is delayed by 1 frame, a solid background color is displayed instead. Default white.
final
breakpoints List<ResponsiveBreakpoint>?
final
breakpointsLandscape List<ResponsiveBreakpoint>?
A list of breakpoints that are active when the device is in landscape orientation. [...]
final
child Widget?
final
debugLog bool
final
defaultName String?
final
defaultNameLandscape String?
Landscape defaultName value. Defaults to defaultName if not set.
final
defaultScale bool
final
defaultScaleFactor double
final
defaultScaleFactorLandscape double?
Landscape defaultScaleFactor value. Defaults to defaultScaleFactor if not set.
final
defaultScaleLandscape bool?
Landscape defaultScale value. Defaults to defaultScale if not set.
final
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
landscapePlatforms List<ResponsiveTargetPlatform>?
Override list of platforms to enable landscape mode on. By default, only mobile platforms support landscape mode. This override exists primarily to enable custom landscape vs portrait behavior and future compatibility with Fuschia.
final
maxWidth double?
final
maxWidthLandscape double?
Landscape maxWidth value. Defaults to maxWidth if not set.
final
mediaQueryData MediaQueryData?
final
minWidth double
final
minWidthLandscape double?
Landscape minWidth value. Defaults to minWidth if not set.
final
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
shrinkWrap bool
final

Methods

createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited
createState() → _ResponsiveWrapperState
Creates the mutable state for this widget at a given location in the tree. [...]
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object. [...]
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited

Static Methods

builder(Widget? child, {List<ResponsiveBreakpoint>? breakpoints, List<ResponsiveBreakpoint>? breakpointsLandscape, List<ResponsiveTargetPlatform>? landscapePlatforms, double minWidth = 450, double? maxWidth, String? defaultName, bool defaultScale = false, double defaultScaleFactor = 1, double? minWidthLandscape, double? maxWidthLandscape, String? defaultNameLandscape, bool? defaultScaleLandscape, double? defaultScaleFactorLandscape, Widget? background, Color? backgroundColor, MediaQueryData? mediaQueryData, Alignment alignment = Alignment.topCenter, bool debugLog = false}) Widget
of(BuildContext context) ResponsiveWrapperData