The Art of Responsive Modals: Building a Multi-Page Sheet in Flutter
summary
Multi page bottom sheets are implemented as an open source package on popdev that toggles between dialog on wide screens and bottom sheet on small screens, supports scrollable pages with a sticky top bar and sticky action bar, and survives keyboard pushes by using a Scaffold. Navigation works declaratively with Navigator 2 or imperatively, pages animate with a staggered AnimatedSwitcher sequence, hero image motion scales from 1.1 to 1 with fading midpoint, layout uses a custom MultiChildLayout and Flow delegates and measures outgoing pages offstage to compute animated size changes.
AI-written summary · about
chapters (23)
- 0:00Introduction and motivation
- 2:10What is a modal sheet
- 3:57Multi-page sheet use cases
- 5:22Design checklist for sheets
- 6:48Introducing the open source package
- 7:31Responsive layout options
- 8:11Multi-page sheet features
- 9:36Navigation 2.0 support
- 10:23Motion design fundamentals
- 12:11Why motion design matters
- 13:36Scrolling motion examples
- 14:40Pagination motion examples
- 15:21Development architecture overview
- 17:05Root and overlay concepts
- 18:29Custom multi-child layout
- 19:54Layout delegate implementation
- 21:19Motion specs for developers
- 22:05Hero image animation specs
- 23:10Flow widget for painting
- 23:51Pagination animation setup
- 25:19Animated switcher implementation
- 26:46Offstage widget for size changes
- 27:31Conclusion and thanks
related talks
38mBuilding scrolling experiences in Flutter
25mCreating responsive UIs and other nuances of Flutter Web
22mArchitecture First: Foundations for Long Term Success
13mBuilding platform adaptive apps
40mCreate simple, beautiful UI with Flutter
19mA humble approach to Flutter app architecture
32mBeyond Mobile: Material Design, Adaptable UIs, and Flutter
34mBuild reactive mobile apps with Flutter