NavigationIntermediate30 XP3 min read
How do you handle the Android back button and iOS swipe-back gesture in Flutter?
TL;DR: Use PopScope (Flutter 3.12+, replaces WillPopScope) to intercept back navigation. Set canPop: false and handle the onPopInvoked callback to show confirmation dialogs or perform cleanup.
Full Answer
WillPopScope was deprecated in Flutter 3.12 and replaced by PopScope. PopScope works correctly with predictive back gestures on Android 14+ and the Navigator 2.0 API.
- ▸PopScope(canPop: false) — prevents default back navigation
- ▸PopScope(onPopInvoked: (bool didPop) {...}) — called after pop attempt
- ▸For go_router: pop is handled by Navigator.of(context); PopScope still works
- ▸Android 14 predictive back: requires canPop: true and custom animation handling
🎯
canPop: true + onPopInvoked lets the back gesture proceed while still running side effects (save draft, log analytics). Use canPop: false only when you need to block navigation entirely.
Code Examples
dartPopScope for unsaved changes dialog
Output
Back button shows 'Discard changes?' dialog; Cancel stays on screen; Discard pops the route
Common Mistakes
- ✗Using deprecated WillPopScope in new code — causes issues with predictive back on Android 14
- ✗Not checking context.mounted before Navigator.pop() after an async gap
Interview Tip
💡
Mentioning Android 14 predictive back gesture and the WillPopScope deprecation shows you're tracking platform changes.
#back-button#PopScope#WillPopScope#Android#gesture