【Flutter ルーティング】Navigator.pushNamedなどで引数を渡す方法

Flutterってハイブリッドアプリの開発効率を爆上げしてくれたよね。
今までは「アプリ作りたい。でもiPhoneか、Androidの両方作りたいけどむずい。CordovaはちょっとUX微妙だし。ReactNativeは最初がつまづきやすい」だったけど、
今では「Flutterでとりあえず作ってみるか」でいけちゃう。ありがてえ。

今回はFlutterを開発しているときによく使うルーティングについて書きます。

広告

ページ遷移の際に引数を渡す方法

Navigator.pushNamedやNavigator.pushReplacementNamedなどでページ遷移することが多いと思います。
その際に、遷移前の変数などを引き継ぎたいときがあると思います。
providerを使って状態管理するのもいいですが、argumentとして直渡ししてしまったほうが楽なときもあります。
そんなときに利用できる。

ルーティングについての書き方は過去記事をどうぞ。

flutterで開発しているといわゆる、vueRouterなどのルーティング機構が欲しくなる。 flutterでおルーティング機構はデフォルトで用意されているため、 今回はroutesパラメータを使用することでルーティングを設計す...

ルーティングページ(router.dart)と、遷移前アイテム一覧ページ(items_index_view.dart)と、遷移後アイテム詳細ページ(item_show_view.dart)を想定しています、

ルーティングの追加

まずルーティングをrouter.dartで定義する。
itemの方は、この後編集します。

遷移前のページ(items_index_view.dart)で遷移する際に引数を追加

とりあえず、例としてNavigator.pushNamedを利用します。
argumentsを使います。
itemNameを引数に追加しました。

ルーティングページ(router.dart)で遷移前ページからの引数を取得する/h3>

遷移前の変数を取得するコードを追加します。

遷移後のページ(item_show_view.dart)でルーティングページからの引数を取得する

最後に、遷移後のページで引数を取得します。
widget.itemNameで参照できるようになります。

かんたーん。
Flutter最高だね、
じゃあね〜〜。