Flutter中路由替换和返回到根路由

一、用到的方法
路由替换：Navigator.of(context).pop();
返回到根路由：

Navigator.of(context).pushAndRemoveUntil(
          new MaterialPageRoute(builder: (context) => new Tabs()),
           (route) => route == null);

二、我们用一个案例来详细讲解以上两个方法
实现的效果：从首页点击注册-注册第二步-注册成功
我们需要准备至少5个页面
首页home.dart
注册页面：Register.dart
RegisterFirst.dart
RegisterSecond.dart
路由配置页面：Routes.dart

三、效果实现
Tab.dart文件的代码参考以前的博客，一样。
首页的代码参考上一篇博客的代码，
只是需要在原有的代码里添加一个按钮，

 RaisedButton(
            child: Text("registerfirst页面"),
            onPressed: () {
              //路由跳转
              Navigator.pushNamed(context, '/registerfirst');
            },
            )

然后是路由文件的配置

import 'package:flutter/material.dart';
import 'package:test1/pages/TabBarController.dart';
import 'package:test1/pages/user/RegisterSecond.dart';
import '../pages/Tabs.dart';
import '../pages/user/RegisterFirst.dart';
import '../pages/user/RegisterSecond.dart';
import '../pages/user/RegisterThird.dart';
//导包的路径参考自己的文件路径
//配置路由
final routes = {
  '/': (context) => Tabs(), //配置全局目录
  '/tabBarController':(context)=> TabBarControllerpage(),

  '/registerfirst': (context) => Registerfirstpage(),
  '/registersecond': (context) => Registersecondpage(),
  '/registerthird': (context) => Registerthirdpage(),
};

//固定写法
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;
    }
  }
};

然后是RegisterFirst.dart文件的代码

import 'package:flutter/material.dart';

class Registerfirstpage extends StatefulWidget {
  @override
  _RegisterfirstpageState createState() => _RegisterfirstpageState();
}

class _RegisterfirstpageState extends State<Registerfirstpage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("注册页面-第一步")),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "第一步，开始注册",
              style: TextStyle(fontSize: 28.0),
            ),
            RaisedButton(
              child: Text("下一步"),
              onPressed: () {
                Navigator.pushNamed(context, '/registersecond');//这句代码，你要跳转到那个页面就写那个页面，记得配置路由

                //替换路由在这里
                //Navigator.of(context).pushReplacementNamed('/registersecond');//这个代码的意思就是替换掉第二个页面直接返回到首页
 //Navigator.of(context).pushReplacementNamed('/registerthird');//这个代码的意思就是替换掉第三个页面直接返回到注册的第一个页面
              },
            )
          ],
        ));
  }
}

后面的RegisterSecond.dart和RegisterThird.dart文件的代码，参考以上的代码
只是需要修改跳转的代码

现在，我们想在注册的第三个页面就直接返回到首页或者注册的第一页。那么怎么做呢？

//返回根
                  // Navigator.of(context).pushAndRemoveUntil(
                  //     new MaterialPageRoute(builder: (context) => new Tabs()),
                  //     (route) => route == null);

我们这里的根是指首页。这个得看你的路由配置里面，根文件是什么。

（四）总结
以上三步就结束了，可以去试一试，很简单。
那么我们也可以从中总结出，返回到根文件，
（1）可以将Navigator.pushNamed(context, ‘/xxx’);和Navigator.of(context).pop();结合
（2）Navigator.pushNamed(context, ‘/’);
（3）就是本文的方法
快去试试吧。