ResponsiveWrapper class

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 useShortestSide = false, 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. Overrides backgroundColor if a widget is set.
final
backgroundColor → Color?
First frame initialization default background color. Because layout initialization is delayed by 1 frame, a solid background color is displayed instead. Is overridden by background if set. Defaults to a white background.
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.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
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.
no setterinherited
shrinkWrap → bool
final
useShortestSide → bool
Calculate responsiveness based on the shortest side of the screen, instead of the actual landscape orientation.
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.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent 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.
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, bool useShortestSide = false, 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