Building scrolling experiences in Flutter
summary
Hands-on Codelab that uses DartPad Codelab to build a seven‑day mock weather app and shows exactly which widgets and APIs to change: replace SingleChildScrollView with a lazy SliverList, add a SliverAppBar + FlexibleSpaceBar with images, gradients and parallax, and enable pin/float/snap/expanded/stretch behaviors. The demo uses a mock server of 7 items, shows onStretchTrigger firing after ~100px (prints to console), and demonstrates that the UI builds on demand and the effects (zoom, blur, fade) actually work.
AI-written summary · about
chapters (18)
- 0:00Start
- 2:55Starter Code
- 3:44Custom Scroll Behavior
- 12:20Padding
- 12:31Expanded Widget
- 16:20Radial Gradient
- 18:13Add a Custom Scroll View
- 19:06Converting this to a Sliver List
- 22:30Sliver App Bar
- 23:35Behaviors of the Sliver App Bar
- 25:13Expanded Height
- 26:33The Flexible Space Bar
- 27:16Background Image
- 28:44Collapse Modes
- 32:03Stretch
- 32:53On Stretch Trigger
- 34:15Flexible Space Bar
- 36:06Step 8
related talks
01h 23mAdvanced animations in Flutter
01h 03mThat's how we scroll in Flutter
50mFlutter: The Wizards of Widgets
01h 13mFlutter — live coding declarative UI
50mFlutter in Action: How to build cross-platform app with Dart
35mUnder the Hood of ScrollViews
35mDeep Dive into Flutter Animations: Crafting Dynamic and Engaging UIs
47mAnimations in Flutter