在成功登入後會需要進入到應用的主畫面，這時我們就會需要 Navigator 跟 Route 來幫忙轉換頁面與傳遞資料。

Route

被 Navigator 管理的一個抽象類別，是一個路線的抽象。
在網頁中也會到 Route 的概念，在進入下一頁後網址會跟著改變，透過定義 Route 來決定顯示哪個頁面。
需要跟 Navigator.pushNamed 一起使用

Navigator

利用 stack 的方式來管理 route ， 包含 push , pop 的方法，我們可以透過它來實現頁面轉跳

Navigator.push / Navigator.pop 使用

開啟一個新檔案>編輯頁面

// HomePage.dart


class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Center(
        child: FlatButton(
           child: Text("POP"),
           onPressed: () {Navigator.pop(context);},
        ),
      ),
    );
  }

}

在需要跳轉的地方將 Navigator 方法加入

Navigator.push(context,
    MaterialPageRoute<void>(builder:(BuildContext context) {
        return HomePage() ;
    })
);

傳遞參數

class HomePage extends StatelessWidget {
  String data ; //增加一個參數跟建構子提供我們傳遞資料
  HomePage({this.data});
 .
 .
 .
 }

返回時傳值

// Navigator push return Future<T>
//我們可以定義一個resultData 來接收
String resultData = await Navigator.push(context,
    MaterialPageRoute(builder:(BuildContext context) {
        return HomePage() ;
    })
);
if(resultData!=null)
    print(resultData) ;
    
// Pop 第二個參數就是要回傳的資料
Navigator.pop(context,"result data") ;

Navigator.pushNamed

定義 route

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: { //routes型態是 Map<String,Function(BuildContext)>
        "/" : (context)=>LoginPage(title:"LOGIN"),
        "/home":(context)=>HomePage(),
      },
    );
  }
}

pushNamed 使用

Navigator.pushNamed(context, '/home');

傳遞參數

//先定義一個類別
class User{
  String id ;
  User(this.id);
}

Navigator.pushNamed(context, "/home",arguments: User("id123"));

接收參數使用 ModalRoute

//接收的頁面
User user = ModalRoute.of(context).settings.arguments ;
print(user.id) ;