【文章翻譯】Handling 404: Page not found error in Flutter

【文章內容使用 Gemini 1.5 Pro 自動產生】

Flutter 釋出了網頁支援，允許您建立動態網站。Flutter 支援處理任何可能來自網頁使用的錯誤，例如 404 錯誤。但是，如何為您的 Flutter 應用程式製作自訂 404 頁面呢？

本文將說明如何建立在使用者導航到不存在的頁面時顯示的自訂頁面。

如何在 Flutter 中將客戶端重新導向到自訂 404 頁面

在瀏覽網際網路時，每個人都遇到過「404：頁面未找到錯誤」。Flutter 透過自動將您重新導向到初始路徑來處理此問題。這通常是您應用程式的首頁。但是，如果您想要像 [AirBnb](https://36bvmt283fg61unuud3h7qua-wpengine.netdna-ssl.com/wp-content/uploads/2013/03/airbnb-404.gif)、[GitHub](https://mamchenkov.net/wordpress/wp-content/uploads/2013/11/github-404.png) 甚至 [Flutter 網站](https://flutter.dev/foo) 那樣擁有華麗的 404 頁面該怎麼辦？您可以使用 Flutter 很輕鬆地做到這一點。

若要建立自訂 404 頁面，您的應用程式需要使用 MaterialApp、CupertinoApp 或 WidgetsApp Widget。大多數應用程式使用這三個 Widget 之一；它是在建立 Flutter 應用程式時呼叫的第一個 Widget。

MaterialApp 會將頂層 Navigator 組態設定為按以下順序搜尋路徑：

對於 `/` 路徑，如果非空，則使用 [home](https://api.flutter.dev/flutter/material/MaterialApp/home.html) 屬性。
否則，如果它包含該路徑的條目，則使用 [routes](https://api.flutter.dev/flutter/material/MaterialApp/routes.html) 表格。
否則，如果提供，則呼叫 [onGenerateRoute](https://api.flutter.dev/flutter/material/MaterialApp/onGenerateRoute.html)。它應該為任何有效的路徑返回一個非空值，這些路徑未由 [home](https://api.flutter.dev/flutter/material/MaterialApp/home.html) 和 [routes](https://api.flutter.dev/flutter/material/MaterialApp/routes.html) 處理。
最後，如果所有其他方法都失敗了，則呼叫 [onUnknownRoute](https://api.flutter.dev/flutter/material/MaterialApp/onUnknownRoute.html)。

如果您的路徑在這些表格中都沒有處理，則它使用 [onUnknownRoute](https://api.flutter.dev/flutter/material/MaterialApp/onUnknownRoute.html) 屬性來處理您的導航。此回呼通常用於錯誤處理。例如，此函數可能會始終產生一個「未找到」頁面，描述未找到的路徑。位置不明的路徑可能是由於應用程式中的錯誤或從 Android 意圖等外部請求推送路徑造成的。

以下範例程式碼演示如何為 onUnknownRoute 屬性定義一個匿名函數，該函數使用 RouteFactory，RouteFactory 是一個工廠方法，它以 RouteSettings 函數作為輸入，並返回一個 Route。以下程式碼片段顯示定義 onUnknownRoute 屬性可以多麼簡單：

1
2
3

onUnknownRoute: (settings) {
  return MaterialPageRoute(builder: (_) => PageNotFound());
},

PageNotFound 是一個自訂 Widget，用於建立 404 頁面。此頁面可能會說明發生了什麼情況，並將使用者重新導向到首頁，但在建立 404 頁面時，您可以隨心所欲。

結束語

在建立 Flutter 應用程式時，重要的是要處理任何可能發生的問題。在 MaterialApp、CupertinoApp 或 WidgetApp 中使用 onUnknownRoute 屬性，可以讓您處理網站中不可避免的「頁面未找到」錯誤。

若要進一步了解 Flutter 中的路徑，請參閱 Medium 文章 [「使用命名路徑導航 URL 」](https://medium.com/flutter/flutter-web-navigating-urls-using-named-routes-307e1b1e2050)。

關於作者：Jose 最近從大學畢業，現在在 [Material](https://material.io) 工作，Material 是一個設計系統，幫助團隊建立高品質的數位體驗。Jose 的團隊維護 Flutter 的 [material 函式庫](https://api.flutter.dev/flutter/material/material-library.html)。若要進一步了解，請訪問 Jose 在 [GitHub](https://github.com/JoseAlba)、[LinkedIn](https://www.linkedin.com/in/josealba1996/)、[YouTube](https://www.youtube.com/channel/UCOdKA_On0oPe1tz02z1QfxA?view_as=subscriber) 和 [Instagram](https://www.instagram.com/jose.alba/) 上的頁面。

處理 Flutter 中的 404：頁面未找到錯誤最初發佈在 Flutter 上的 Medium，人們在那裡透過突出顯示和回應這個故事來繼續討論。