AdaptiveLayout class

Layout an app that adapts to different screens using predefined slots.

This widget separates the app window into predefined sections called "slots". It lays out the app using the following kinds of slots (in order):

• topNavigation, full width at the top. Must have defined size.
• bottomNavigation, full width at the bottom. Must have defined size.
• primaryNavigation, displayed on the beginning side of the app window from the bottom of topNavigation to the top of bottomNavigation. Must have defined size.
• secondaryNavigation, displayed on the end side of the app window from the bottom of topNavigation to the top of bottomNavigation. Must have defined size.
• body, first panel; fills the remaining space from the beginning side. The main view should have flexible size (like a container).
• secondaryBody, second panel; fills the remaining space from the end side. The use of this property is common in apps that have a main view and a detail view. The main view should have flexible size (like a Container). This provides some automatic functionality with foldable screens.

Slots can display differently under different screen conditions (such as different widths), and each slot is defined with a SlotLayout, which maps Breakpoints to SlotLayoutConfig, where SlotLayoutConfig defines the content and transition.

AdaptiveLayout handles the placement of the slots on the app window and animations regarding their macromovements.

AdaptiveLayout(
  primaryNavigation: SlotLayout(
    config: {
      Breakpoints.small: SlotLayout.from(
        key: const Key('Primary Navigation Small'),
        builder: (_) => const SizedBox.shrink(),
      ),
      Breakpoints.medium: SlotLayout.from(
        inAnimation: leftOutIn,
        key: const Key('Primary Navigation Medium'),
        builder: (_) => AdaptiveScaffold.toNavigationRail(destinations: destinations),
      ),
      Breakpoints.mediumLarge: SlotLayout.from(
        key: const Key('Primary Navigation MediumLarge'),
        inAnimation: leftOutIn,
        builder: (_) => AdaptiveScaffold.toNavigationRail(extended: true, destinations: destinations),
      ),
    },
  ),
  body: SlotLayout(
    config: {
      Breakpoints.small: SlotLayout.from(
        key: const Key('Body Small'),
        builder: (_) => ListView.builder(
          itemCount: children.length,
          itemBuilder: (_, idx) => children[idx]
        ),
      ),
      Breakpoints.medium: SlotLayout.from(
        key: const Key('Body Medium'),
        builder: (_) => GridView.count(
          crossAxisCount: 2,
          children: children
        ),
      ),
    },
  ),
  bottomNavigation: SlotLayout(
    config: {
      Breakpoints.small: SlotLayout.from(
        key: const Key('Bottom Navigation Small'),
        inAnimation: bottomToTop,
        builder: (_) => AdaptiveScaffold.toBottomNavigationBar(destinations: destinations),
      ),
    },
  ),
)

See also:

• SlotLayout, which handles the actual switching and animations between elements based on Breakpoints.
• SlotLayout.from, which holds information regarding the actual Widgets and the desired way to animate between switches. Often used within SlotLayout.
• AdaptiveScaffold, which provides a more friendly API with less customizability. and holds a preset of animations and helper builders.
• Design Doc.
• Material Design 3 Specifications.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• AdaptiveLayout

Constructors

AdaptiveLayout.new({Key? key, SlotLayout? topNavigation, SlotLayout? primaryNavigation, SlotLayout? secondaryNavigation, SlotLayout? bottomNavigation, SlotLayout? body, SlotLayout? secondaryBody, double? bodyRatio, Duration transitionDuration = const Duration(seconds: 1), bool internalAnimations = true, Axis bodyOrientation = Axis.horizontal})

Creates a const AdaptiveLayout widget.

const

Properties

body → SlotLayout?

The slot that fills the rest of the space in the center.

final

bodyOrientation → Axis

The orientation of the body and secondaryBody. Either horizontal (side by side) or vertical (top to bottom).

final

bodyRatio → double?

Defines the fractional ratio of body to the secondaryBody.

final

bottomNavigation → SlotLayout?

The slot placed on the bottom part of the app window.

final

hashCode → int

The hash code for this object.

no setter, inherited

internalAnimations → bool

Whether or not the developer wants the smooth entering slide transition on secondaryBody.

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

primaryNavigation → SlotLayout?

The slot placed on the beginning side of the app window.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

secondaryBody → SlotLayout?

A supporting slot for body.

final

secondaryNavigation → SlotLayout?

The slot placed on the end side of the app window.

final

topNavigation → SlotLayout?

The slot placed on the top part of the app window.

final

transitionDuration → Duration

Defines the duration of transition between layouts.

final

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<AdaptiveLayout>

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, int wrapWidth = 65}) → 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