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:
- Resizing (default) - the AppBar's width is double.infinity so it stretches to fill the available width. The kToolbarHeight is fixed and stays 56dp.
- 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
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- ResponsiveWrapper
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