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

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

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

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

String itemName = "ほげほげ"
Navigator.pushNamed(
  context,
  '/item',
  arguments: itemName
);

String itemName = "ほげほげ"

Navigator.pushNamed(

context,

'/item',

arguments: itemName

);

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

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

Flutter routes ルーティングの使い方

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

omohikane.com

2020-01-03 09:37

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

ルーティングの追加

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

import 'package:flutter/material.dart';

const String initialRoute = "items";

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final Map args = settings.arguments; // これを後々使うよ
    switch (settings.name) {
      case 'items': // <= 遷移前のページ
        return MaterialPageRoute(builder: (_) => ItemsIndexView()); 
      case 'item': // <= 遷移後のページ
        return MaterialPageRoute(builder: (_) => ItemShowView());
      default:
        return MaterialPageRoute(
            builder: (_) => Scaffold(
                  body: Center(
                    child: Text('No route defined for ${settings.name}'),
                  ),
                ));
    }
  }
}

import 'package:flutter/material.dart';

const String initialRoute = "items";

class Router {

static Route<dynamic> generateRoute(RouteSettings settings) {

final Map args = settings.arguments; // これを後々使うよ

switch (settings.name) {

case 'items': // <= 遷移前のページ

return MaterialPageRoute(builder: (_) => ItemsIndexView());

case 'item': // <= 遷移後のページ

return MaterialPageRoute(builder: (_) => ItemShowView());

default:

return MaterialPageRoute(

builder: (_) => Scaffold(

body: Center(

child: Text('No route defined for ${settings.name}'),

));

}

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

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

// ⇑
// 色々widgetとか書いてある

onTap: (){
  String itemName = "ふがふが";
  Navigator.pushNamed(
      context, "item",
      arguments: {
        "itemName": itemName,
      }
  );
},

// ⇑

// 色々widgetとか書いてある

onTap: (){

String itemName = "ふがふが";

Navigator.pushNamed(

context, "item",

arguments: {

"itemName": itemName,

}

);

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

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

const String initialRoute = "items"; class Router { static Route<dynamic> generateRoute(RouteSettings settings) { final Map args = settings.arguments; switch (settings.name) { case 'items':// <= 遷移前のページ return MaterialPageRoute(builder: (_) => ItemsIndexView()); case 'item':// <= 遷移後のページ return MaterialPageRoute(builder: (_) => ItemShowView(name: args["itemName"])); // ここで引数を受け渡す default: return MaterialPageRoute( builder: (_) => Scaffold( body: Center( child: Text('No route defined for ${settings.name}'), ), )); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const String initialRoute = "items";

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final Map args = settings.arguments;
    switch (settings.name) {
      case 'items':// <= 遷移前のページ
        return MaterialPageRoute(builder: (_) => ItemsIndexView());
      case 'item':// <= 遷移後のページ
        return MaterialPageRoute(builder: (_) => ItemShowView(name: args["itemName"])); // ここで引数を受け渡す
      default:
        return MaterialPageRoute(
            builder: (_) => Scaffold(
                  body: Center(
                    child: Text('No route defined for ${settings.name}'),
                  ),
                ));
    }
  }
}

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

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

class ItemView extends StatefulWidget {
  final String itemName;

  ItemView({key: Key, this.itemName});
  @override
  _ItemViewState createState() => _ItemViewState();
}

class _ItemViewState extends State<ItemView> {
 /*
  色々書いて widget.itemNameで参照できるようになります。
 */
}

class ItemView extends StatefulWidget {

final String itemName;

ItemView({key: Key, this.itemName});

@override

_ItemViewState createState() => _ItemViewState();

}

class _ItemViewState extends State<ItemView> {

色々書いて widget.itemNameで参照できるようになります。

}

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