Flutter Navigation
📅 2026-06-23 | 📂 Flutter
This section will introduce the navigation and routing mechanism in Flutter, including page navigation, parameter passing, and named routes.
* * *
## Navigator Basics
Flutter uses Navigator for page management, implementing page navigation based on a stack structure.
## Example: Basic Page Navigation
// Navigate to new page
Navigator.of(context).push(
MaterialPageRoute(
builder:(context)=>const DetailPage(),
),
);
// Go back to previous page
Navigator.of(context).pop();
// withReturn Result
Navigator.of(context).pop('Returned data');
// Replace current page (cannot go back)
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder:(context)=>const HomePage(),
),
);
// Go back to root page
Navigator.of(context).popUntil((route)=> route.isFirst);
* * *
## MaterialPageRoute vs CupertinoPageRoute
## Example: Page Transition Animations for Different Platforms
// Android Style - Slide up from bottom
Navigator.of(context).push(
MaterialPageRoute(
builder:(context)=>const DetailPage(),
),
);
// iOS Style - Slide in from right
Navigator.of(context).push(
CupertinoPageRoute(
builder:(context)=>const DetailPage(),
),
);
// Custom transition effect
Navigator.of(context).push(
PageRouteBuilder(
pageBuilder:(context, animation, secondaryAnimation){
return const DetailPage();
},
transitionsBuilder:(context, animation, secondaryAnimation, child){
// Fade in/out effect
return FadeTransition(
opacity: animation,
child: child,
);
},
transitionDuration:const Duration(milliseconds:300),
),
);
* * *
## Page Parameter Passing
Example: Passing Parameters to New Page
// Navigate to Detail Page and pass parameters
Navigator.of(context).push(
MaterialPageRoute(
builder:(context)=> ProductDetailPage(productId:123),
),
);
// Detail PageReceive parameter
class ProductDetailPage extends StatelessWidget {
final int productId;
const ProductDetailPage({
super.key,
required this.productId,
});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: Text('Product $productId')),
body: Center(child: Text('Product ID: $productId')),
);
}
}
// Pass multiple parameters
class UserProfilePage extends StatelessWidget {
final String name;
final int age;
const UserProfilePage({
super.key,
required this.name,
required this.age,
});
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: Text('$name 's home page')),
body: Center(child: Text('Age: $age')),
);
}
}
// Navigate
Navigator.of(context).push(
MaterialPageRoute(
builder:(context)=>const UserProfilePage(
name:'Zhang San',
age:25,
),
),
);
* * *
## Named Routes
Using named routes can simplify page navigation configuration.
## Example: Named Route Configuration
void main(){
runApp(
MaterialApp(
// Define route table
initialRoute:'/',
routes:{
'/':(context)=>const HomePage(),
'/detail':(context)=>const DetailPage(),
'/user':(context)=>const UserPage(),
'/settings':(context)=>const SettingsPage(),
},
),
);
}
// Navigate
Navigator.pushNamed(context,'/detail');
// withParameterNavigate
Navigator.pushNamed(context,'/user', arguments:{'name':'Zhang San','age':25});
// Get parameter on target page
class DetailPage extends StatelessWidget {
const DetailPage({super.key});
@override
Widget build(BuildContext context){
// Get passed parameter
final args = ModalRoute.of(context)?.settings.arguments as Map?;
return Scaffold(
appBar: AppBar(title:const Text('Detail Page')),
body: Center(
child: Text('Parameter: $args'),
),
);
}
}
* * *
## Another Way to Pass Route Values
## Example: onGenerateRoute
MaterialApp(
onGenerateRoute:(settings){
// Navigate to different pages based on route name
switch(settings.name){
case'/':
return MaterialPageRoute(
builder:(_)=>const HomePage(),
);
case'/detail':
// From arguments Get Parameter
final args = settings.arguments as Map?;
return MaterialPageRoute(
builder:(_)=> DetailPage(
id: args?['id']??0,
title: args?['title']??'',
),
);
case'/product':
final productId = settings.name?.split('/').last;
return MaterialPageRoute(
builder:(_)=> ProductPage(id: productId ??''),
);
default:
return MaterialPageRoute(
builder:(_)=>const NotFoundPage(),
);
}
},
)
> For simple applications, basic Navigator.push is sufficient; for medium to large applications, it is recommended to use named routes or routing management libraries to uniformly manage pages.
YouTip