Route jump and data transfer in the flutter learning tutorial

preface

We know that mobile application page Jump is a very important part. Almost all our programs deal with users is the page, or view. Our Android is basically activity and fragment. And the flutter is called route, which is the page dealing with users. This article explores in detail how pages interact in fluent.

text

Page Jump

Now let's look at how pages interact in fluent, that is, the jump between pages.

There are two ways to jump from the previous page a to the next page B:

Return to the previous page: navigator. Pop();

Tip: if you jump through navigator. Pushnamed(), remember to register routename!!!

Tip: if you jump through navigator. Pushnamed(), remember to register routename!!!

Tip: if you jump through navigator. Pushnamed(), remember to register routename!!!

Important things are to be repeated for 3 times 😏😏😏！！！

The code is as follows:

//第一种：通过Navigator.push()跳转，类似Android中的startActivity(),指定Activity类名这种方式;
  Navigator.push(context,MaterialPageRoute(builder: (context) {
         return ThirdRoute();
        }));

//第二种方式：通过Navigator.pushName()，类似Android中的startActivity(),指定class全路径这种方式；
//先在MaterialApp里面注册Route
routes: { SecondRoute.routeName: (context) => SecondRoute(),}

Navigator.pushNamed(context,SecondRoute.routeName);

//返回上一个页面，类似Activity的finish()；
Navigator.pop(context);

Page Jump and carry data

Based on the above two jump methods, there are two corresponding jump methods

1. Jump through navigator. Push() and transfer the parameters to the construction method of page B. the code is as follows:

//A页面跳转,直接将参数传到B页面的构造方法里面
  Navigator.push(context,MaterialPageRoute(
         builder:(context) => BRouter(string)
))
//BRouter构造方法
 class BRouter extends StatelessWidget{
  final String str;
  BRouter(this.str);
 }

2. Jump through navigator. Pushnamed() and use modal route. Of() or ongeneraterouter() in materialapp (cupertinoapp) constructor to obtain parameters. It is recommended to use modal route. Of(). The code is as follows:

//A页面跳转,arguments就是需要传递的数据，这里的arguments是一个可需参数
Navigator.pushName(context,routerName,arguments);
//B页面提取参数,传的是什么类型，就用什么类型接值，这里用String演示
//第一种用ModalRouter接值
String arg = ModalRouter.of(context).setting.arguments;

//第二种在onGenerateRouter里面接值
MaterialApp(
 onGenerateRoute: (settings) {
  // 先根据setting里面的name判断是哪个Router
  if (settings.name == PassArgumentsScreen.routeName) {
   // 然后取出setting里面的arguments
   final ScreenArguments args = settings.arguments;
   // 然后再通过具体Router的构造方法穿过，类似上面的第一种方式接值方式
   return MaterialPageRoute(
    builder: (context) {
     return PassArgumentsScreen(
      title: args.title,);
    },);
  }
 },);

Return to the previous page and return data

Return the data from the current page B to the previous page A:

//当前页面B中的按钮
RaisedButton(
 onPressed: () {
  // 点击button，关闭页面，回到上一个页面，回传数据
  Navigator.pop(context,'回传的数据');
  // 这个方法通过方法名也能看出来，关闭当前页面，跳转到具体的页面，也可以回传数据。
  // tips：参数加[]说明是非必传参数
  Navigator.popAndPushNamed(context,routeName，[T result])
 },child: Text('返回'),);

//回到上一个页面A，需要接值的话，在点击去下一个页面的需要使用到async延迟接收
//当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。所以这里通过Builder Widget来解决
Builder(builder: (context){
       return RaisedButton(
        onPressed: () async {
         //2: 通过Navigator.push方式携带跳转
         String str = "我是第一个页面的数据";
         //疑问为什么只能用var接值，不能用String？
         var result = await Navigator.pushNamed(context,SecondRoute.routeName,arguments: str);
         if (result != null) {
          //通过snackBar将接收到的数据show出来。
          Scaffold.of(context).showSnackBar(SnackBar(
           content: Text(result),backgroundColor: Colors.blue,duration: Duration(milliseconds: 500),));
         }
        },child: Text("携带数据跳转"),);
      }),

Let's take a look at the final demonstration effect:

summary

In this way, we have explained the most basic page Jump and data interaction between pages in fluent. Little partners can happily do all kinds of page interaction 😊😊😊。

Well, the above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. Thank you for your support.

Instance source code address