🧭
Navigation Basics
Screen Navigation with push/pop and Named Routes
Flutter navigation is based on the Stack data structure. Navigator.push() stacks new screens, pop() returns to previous screen.
With Named Routes, manage paths in MaterialApp's routes map and navigate with strings like Navigator.pushNamed('/detail').
For complex apps, declarative routing packages like go_router are recommended.
Implementation Steps
1
Navigate to new screen with Navigator.push() + return with pop()
2
Set up Named Routes with MaterialApp routes property
3
Pass data between screens: constructor parameters or arguments
4
Intercept back navigation with WillPopScope (unsaved changes check, etc.)
Pros
- ✓ Intuitive stack-based model
- ✓ No extra packages needed for basic use
Cons
- ✗ Named Routes are not type-safe (string-based)
- ✗ Limited deep link and web URL support
Use Cases
Master-detail pattern (list → detail page)
Login/signup flow