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