今天主要要向大家分享的主題是 Navigation 以及 Routing
在瀏覽器透過輸入 URL 而跳轉頁面至對應畫面這件事情相信大家都已經耳熟能詳了
而今天在 Flutter 中是否也有相同的機制可以使用
並且可以使得 Flutter for Web 也能透過 URl 對應到特定的畫面
那一樣讓我們開始吧！

Navigator

若所開發的手機 APP 沒有 Deep Link 的需求的話
透過 Navigator 來進行實作會是一個很不錯的選擇
他透過維持 Route 的 Stack 來進行畫面上的呈現
想要一個新的頁面？ Push 上去！
想要回到上個頁面？ Pop 出來！

onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),

Named Routes

若已經有 Deep Link 的需求出現的話
可透過 Navigator 來進行畫面移轉
Named Route 來進行 Deep Link 的控管
然而官方的教材中也有提及到
這樣的做法會有一定的侷限性
且在瀏覽器中的往返頁面按鈕也沒辦法使用順遂因此不建議使用

@override
  Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

Router

在同時需要 Deep Link 及 Navigation 的應用程式中
尤其有包含了 Web 需求的那些應用程式
官方推薦使用套件： go_router
透過 go_router 可以很快速的解決 Route 及 Navigation 設定相關的事情
並且包含巢狀 Route 的功能
讓我們可以更好的去維持整個應用程式的頁面 Routes

新增 go_router 套件

mv <project_dir>
flutter pub add go_router

GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const Page1Screen(),
    ),
    GoRoute(
      path: '/page2',
      builder: (context, state) => const Page2Screen(),
    ),
  ],
);

參考資料

強而有力的官網後盾