Flutter 从当前页面进入一个新的页面并返回

在原来的Android开发中，页面之间的导航是通过Active或者Fragmentt来实现的。而在Flutter中，秉承着一切都是widget的理念，页面当然也可以看成是一个widget，而页面切换是通过路由Route来实现的，通过Navigator路由管理器进行推入路由和退出路由实现页面切换。

项目说明：首页中间有个按钮，点击后进入一个新的页面，新页面同样有个按钮点击后返回。

下面撸码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
 
void main() => runApp(new MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Navigator Demon',
      home: new MyHomePage(
        title: '第一个页面',
      ),
    );
  }
}
 
/*
这是首页面，包含一个IOS风格的按钮，点击该按钮可以导航到第二个页面
 */
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final title;
 
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
          //这是一个IOS风格材质的按钮，需要导入cupertino文件才能引用
          child: new CupertinoButton(
              color: Colors.blue,
              child: new Text('进入第二个页面'),
              onPressed: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new SecondePage(
                              title: '第二个页面',
                         )
                     )
                  );
               }
            )
         ),
     );
  }
}
 
/*
这是第二个页面，包含一个返回的按钮
 */
class SecondePage extends StatelessWidget {
  const SecondePage({Key key, this.title}) : super(key: key);
  final title;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        //这是一个IOS风格材质的按钮，需要导入cupertino文件才能引用
        child: new CupertinoButton(
            color: Colors.blue,
            child: new Text('返回第一个页面'),
            onPressed: () {
              Navigator.pop(context);
            }
         ),
      ),
    );
  }
}

效果如下：
点击按钮进入下一个页面，点击返回回到第一个页面。

Screenshot_20180915-155337.png
Screenshot_20180915-155344.png