A scaffold that responds to different screen sizes by moving the drawer, navigation bar, and side sheet.
The design differs on various screen sizes, following Material Design breakpoints.
This package implements responsive design with the following components:
- Primary navigation items (usually placed in
BottomAppBar
) - Secondary navigation components in a navigation menu (usually a
Drawer
) - A side sheet (usually a
Drawer
)
How the layout look...
- On phones:
- The primary navigation items are in a Bottom Navigation Bar (
BottomAppBar
) - The secondary navigation items are in a modal Navigation Drawer (
Scaffold.drawer
) - The side sheet is modal (placed in
Scaffold.endDrawer
)
- The primary navigation items are in a Bottom Navigation Bar (
- On tablets in portrait mode:
- The primary navigation items are in a Navigation Rail (
NavigationRail
) - The secondary navigation items are in a modal Navigation Drawer (
Scaffold.drawer
) - The side sheet is modal (placed in
Scaffold.endDrawer
)
- The primary navigation items are in a Navigation Rail (
- On tablets in landscape mode:
- The primary navigation items are in a Navigation Rail (
NavigationRail
) - The secondary navigation items are in a modal Navigation Drawer (
Scaffold.drawer
) - The side sheet is a standard (persistent) side sheet
- The primary navigation items are in a Navigation Rail (
- On desktop:
- All navigation items are combined in a standard (persistent) Navigation Drawer
- The side sheet is a standard (persistent) side sheet
Check out the example for a runnable usage