Flutter go_router | pub package | 路由一次就看懂

介紹

go_router | Flutter Package

go_router 是一個 Flutter 上的路由套件，可以協助開發者更方便地管理應用程式中的 router。這篇文章是為了幫助初學者能夠最快的開始使用這個方便的套件。如果有任何問題歡迎在下面留言提問！

本篇將分為三個段落說明：

1. 基礎使用
2. Router 如何傳入參數設定
3. TypedGoRoute
4. Go 和 Push 的比較
5. 結論

1. 基礎使用方法

建立一個 router.dart 的檔案，並且加入我們想要指定一個畫面(HomeScreen)。並且定義他的 path 為 “/”。

到 main.dart 找到你的 MaterialApp，將它改為 MaterialApp.router，讓你的 App 可以接受 routerConfig。再將我們在 router.dart 中的 router 放入 routerConfig。一個基礎的 router 就完成拉！是不是很簡單呢 🎊

2. Router 如何傳入參數設定

在 router 裏面，我們很常會遇到需要傳入特定參數到下一個頁面的需求，在 go_router 中，定義了三種可以傳入參數的做法。分別是：Params , queryParams, extra 下面我們依序介紹：

• Params
  Params 是 go_router 的參數對象，可以使用 Params 對象來傳遞參數。在 router 中設定 params 參數後，可以透過 context.goNamed 或 context.pushNamed 來傳遞參數。

• queryParams
  另外，還可以使用 queryParams 來傳遞參數，和上面的 params 相比，queryParams 的參數會以 key-value 的形式存取，並用 state.queryParams 的方法來取的帶入的參數

• extra
  extra 是裡面最自由的，可以帶入任何類型的參數，自由度最高。但是需要注意，因為帶入的 extra 型別預設是 dynamic 因此在取用的時候必須使用 as 來轉換成正確的型別。

3. TypedGoRoute

go_route 和 auto_route 一樣都提供了使用 build_runner 去自動產生 code 的機制，讓你可以少寫一些程式碼。要開啟這個功能首先必須安裝 build_runner 和其他依賴的套件。

安裝完成後，開始進入程式碼。首先，我們要在 router.dart 的開頭補上 part ‘router.g.dart’; 為了後續能更將自動生成的檔案寫入。然後在檔案開頭寫下 @TypedGoRoute 用來設定你 route 的路由。接下來建立一個新的 class 去繼承 GoRouteData，我們設定的部分就完成了！

要自動生成代碼我們必須先跑過 flutter pub run build_runner build，在等待結果成功後，就可以開始使用拉。

使用的方法也很簡單可以直接呼叫 HomeRoute()，讓你安心使用 router，不避擔心手殘不小心 key 錯 location。

4. Go 和 Push 的比較

在 go_route 中，可以分成兩種跳轉方式，分別是 go 和 push，例如 HomeRoute() 就可以分別使用 HomeRoute().push(context) 和 HomeRoute().go(context)，又或是 context.push() 或 context.go()不管哪種方式都可以讓頁面進行跳轉，那他們的差異在哪裡呢？

假設我們寫好了以下的 router：

當用戶開啟 App 後，首先就會進入到 ‘/’ 的路徑中，然後我們這時候可以選擇使用，context.push(’/detail’) 或是 context.push(’detail’)，此時不管使用 go 或是 push，我們的 route stack 都會是：’root/detail’，所以在這個例子裡，兩個方法是等價的。

但是接下來，當我們已經在 ‘root/detail’，的頁面裡去做 go 與 push，兩者就會產生不同的結果。

原因在於 modal 與 detail 同屬於一個級別的路徑，所以使用 context.go 時，路由會自動替換掉 detail 改為 modal，但是如果但是如果使用 context.push，結果則不相同，push 不會去替換掉原本的 detail，而是會在 detail 之上再疊加 modal 。所以兩種方式的 route stack 會是不一樣的結果。

原文及圖片參考：https://codewithandrea.com/articles/flutter-navigation-gorouter-go-vs-push/

結論

透過 go_router 套件，我們能夠更方便地管理 Flutter 應用程式中的路由，並且能夠透過 Params、queryParams 和 extra 等方式傳遞參數到下一個頁面。此外，TypedGoRoute 提供了自動生成代碼的功能，讓開發者能夠更省去一些程式碼的撰寫。

如果你的團隊打算開始使用 go_router，有一些值得一提的小缺點。

• 不支援 route 的返回值，因此你無法 await navigator 去取得值 (issue)
  （⚠️ 更新：6.0.2 已支援）
• 對 tab navigator 不如 auto_route 友善
• go_route 的 typeGoRoute 自動化不夠全面

最後，希望看完文章對你們有所幫助哦。