Routing in Flutter
Generally speaking, routing in Flutter is page jumping, and routing navigation is managed through the Navigator component in Flutter. And it provides a method to manage the stack, such as: Navigator.pushand Navigator.pop
Flutter provides two ways to configure routing jumps: 1. Basic routing 2. Named routing
The use of basic routing in Flutter
For example, we need to bottonjump to the page after clicking
RaisedButton(
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(context){
return SearchPage();//返回需要启动的页面
}
)
);
},
),
If we need to exit the current page
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop(); //退出当前页面
},
),
Use Navigatorthe page to pass the value
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SeachPage(),
));
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title') //因为此处向构造参数值传递，也可以通过get set去传递值
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
class FromPage extends StatelessWidget{
String title;
FromPage({this.title='默认From'});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title), //在此处，将传递的数据进行引用
),
body: ListView(
children: <Widget>[
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
],
),
);
}
}
Use of named routes in Flutter
When navigating with named routes, we need to declare the routes first. That is, we want to configure routing MaterialAppinroutes
It is worth mentioning that the value of routes is
Map<String, WidgetBuilder>of type
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
routes: {
'/form':(context)=>FromPage(),//表单页面
'/Seach':(context)=>SeachPage(),//搜索页面
},
);
}
}
When jumping, we only need to perform such operations
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.pushNamed(context, '/Seach');//这里的第二个参数就是我们的routes的Map集合中的key即可。
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
Pass-by-value for named routes
First of all, we need to create our one Roustes.dartfor routing management
final routes={
'/':(context)=>Tabs(),
'/search':(context,{arguments})=>SeachPage(arguments:arguments),
"/from":(context)=>FromPage(),
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context));
return route;
}
}
};
onGenerateRouteThis is a fixed way of writing parameters for named routes. When passing parameters in named routes, our page construction parameters need to be changed.
MaterialAppThere is an attribute in onGenerateRoute, which is what we define onGenerateRouteand pass in.
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: Tabs(),等同于 initialRoute: '/',
initialRoute: './',
onGenerateRoute: onGenerateRoute,
);
}
}
For example, our SeachPagepage needs to add an optional parameter of 'arguments'
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
}
So how should we pass parameters? Suppose we pass parameters to the page
in our page ,HomePageSeachPage
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () { //此处进行参数传递,arguments
Navigator.pushNamed("/search",arguments: {
"id":"213123"
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title',)
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
SeachPageHandle parameters on the page
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop();
},
),
appBar: AppBar(
title: Text('搜索'),
),
body: Text("搜索页面区域${arguments['id']}")//进行参数的使用
);
}
}