deep-linking-for-flutter-web

Flutter Web のディープリンク

この記事では、アプリケーションで適切な URL ナビゲーションを実現する方法を紹介します。特定のページへのリンク、保護されたルート、カスタムトランジションを設定します。

TLDR 最終的なソースはこちらです：ここ。オンラインのデモもあります。

セットアップ

「flutter_deep_linking」という名前で新しい Flutter プロジェクトを作成します。

そのフォルダーを VSCode で開きます。

「pubspec.yaml」を次のように更新します。

ステップ 1

「lib/ui/home/screen.dart」ファイルを作成し、次の内容を追加します。

「lib/main.dart」を次のように更新します。

アプリケーションを実行すると、次のように表示されます。

ステップ 2

次に、ユーザーがアドレスバーに入力した URL を取得します。

「lib/plugins/navigator」フォルダーを作成します。

その中に「web.dart」という名前のファイルを作成し、次の内容を追加します。

その中に「unsupported.dart」という名前のファイルを作成し、次の内容を追加します。

その中に「navigator.dart」という名前のファイルを作成し、次の内容を追加します。

次に、「lib/main.dart」ファイルに戻り、ナビゲーターを追加します。

Web コンパイル用の条件付きインポートが含まれるため、上記のようにナビゲーターをインポートすることが重要です。

ここでアプリを実行しても、何も変わらないはずです。

ステップ 3

次に、適切なルーティングを追加します。

新しいファイル「lib/ui/router.dart」を作成し、次の内容を追加します。

また、「lib/main.dart」も次のように更新します。

MaterialApp の「home」フィールドを削除した点に注目してください。ルーターがすべてを処理するためです。デフォルトでは「/」にアクセスするとホームに移動します。

ステップ 4

次に、動作を確認するために複数の画面を追加しましょう。次のフォルダーとファイルを追加します。

「lib/ui/account/screen.dart」ファイルを作成し、次の内容を追加します。

「lib/ui/settings/screen.dart」ファイルを作成し、次の内容を追加します。

「lib/ui/about/screen.dart」ファイルを作成し、次の内容を追加します。

次の内容を「lib/ui/router.dart」に追加します。

これで /about、/account、/settings に移動すると、新しいページが表示されます！

ステップ 5

ブラウザーのナビゲーションボタンと連携させましょう！「lib/ui/home/screen.dart」を次のように更新します。

アプリケーションを実行して設定アイコンをクリックすると、新しい画面が期待どおりに起動します。ただし、ブラウザーの戻るボタンをクリックすると、ホーム画面に戻ります！

ステップ 6

これらの URL は便利ですが、事前にわからない ID などのデータを渡したい場合はどうすればよいでしょうか？ご心配なく！

「lib/ui/account/screen.dart」を次のように更新します。

「lib/ui/router.dart」も次のように更新しましょう。

アプリケーションを実行して「/account/40」に移動すると、次のように表示されます。

まとめ

動的ルートは Flutter Web でうまく機能します。どこを調整すればよいかを知っておくだけです！このパッケージでは、いくつかの修正を加えた fluro のフォーク版を使用していますが、PR がマージされたら通常のパッケージを使えます。以下で感想をお聞かせください。また、私が気づいていない、より良い方法があれば教えてください！

最終的なコードはこちらです：https://github.com/rodydavis/flutter_deep_linking