CustomAdaptiveScaffold typedef

CustomAdaptiveScaffold = AdaptiveScaffold

Implements the basic visual layout structure for Material Design 3 that adapts to a variety of screens.

"Example of a display made with AdaptiveScaffold"

AdaptiveScaffold provides a preset of layout, including positions and animations, by handling macro changes in navigational elements and bodies based on the current features of the screen, namely screen width and platform. For example, the navigational elements would be a BottomNavigationBar on a small mobile device or a Drawer on a small desktop device and a NavigationRail on larger devices. When the app's size changes, for example because its window is resized, the corresponding layout transition is animated. The layout and navigation changes are dictated by "breakpoints" which can be customized or overridden.

Also provides a variety of helper methods for navigational elements, animations, and more.

AdaptiveScaffold is based on AdaptiveLayout but is easier to use at the cost of being less customizable. Apps that would like more refined layout and/or animation should use AdaptiveLayout.

AdaptiveScaffold(
 destinations: const [
   NavigationDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
   NavigationDestination(icon: Icon(Icons.article), label: 'Articles'),
   NavigationDestination(icon: Icon(Icons.chat), label: 'Chat'),
   NavigationDestination(icon: Icon(Icons.video_call), label: 'Video'),
 ],
 smallBody: (_) => ListView.builder(
   itemCount: children.length,
   itemBuilder: (_, idx) => children[idx]
 ),
 body: (_) => GridView.count(crossAxisCount: 2, children: children),
),

See also:

Implementation

typedef CustomAdaptiveScaffold = AdaptiveScaffold;