Flutterのroute設定

Routeについてのチュートリアルを紹介します。

named routeを使うとシンプルに書ける

named routeを使わない方法

ボタンを押すとページ遷移するアプリケーションを考えます。

以下のようにMaterialPageRouteを記述することはできますが、Viewのコードが複雑になる、コードが重複する等の不便があります。

RaisedButton(
  child: Text('Go to second'),
  onPressed: () {
    // named routeを使わずに直接routeをpushする書き方
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => SecondPage(data: 'Hello there from the first page!'),
      ),
    );
  },
)

named routeを使う方法

1、 named routeを使ってrouteを生成するクラスを作成します。これはMaterialAppのonGenerateRouteに設定するメソッドになります。

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;

    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => FirstPage());
      case '/second':
        return MaterialPageRoute(
          builder: (_) => SecondPage(data: args),
        );
    }
  }
}

2、 先程作成したコードを参考にMaterialAppにinitialRoute、onGenerateRouteを設定します。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
/// ...省略
      // Initially display FirstPage
      initialRoute: '/',
      onGenerateRoute: RouteGenerator.generateRoute,
    );
  }
}

３、Navigator.of().pushNamedの引数でnamed routeを使えるようになります。argumentsで次のページに引数を渡せます。

RaisedButton(
  child: Text('Go to second'),
  onPressed: () async {
    Navigator.of(context).pushNamed(
      '/second',
      arguments: 'Hello from the first page!',
    );
  },
),

ついでに色々遊んで見る

遷移先から戻る際に引数を受け渡す

1、SecondPageにNavigator.of.pop()するボタンを設置します。pop()に引数を渡します。

// SecondPage
RaisedButton(
  child: Text('Go to second'),
  onPressed: () {
    Navigator.of(context).pop('I\'m back from second page!');
  },
),

２、FirstPageのボタンのonPressed()を非同期にメソッドにして、Navigator.op().pushNamed()の戻り値で引数を受け取ります。
この非同期メソッドは画面遷移されるまでの、とても長いawaitをします。

// FirstPage
RaisedButton(
  child: Text('Go to second'),
  onPressed: () async {
    // 遷移先から戻る際に引数を受け取る
    var result = await Navigator.of(context).pushNamed(
      '/second',
      arguments: 'Hello from the first page!',
    );
  },
),

モーダル表示する

以下のようにfullscreenDialog: trueとなるnamed routeを追加すると、モーダル表示（下から表れる形式）ができます。

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
// ...省略
      case '/second_modal':
        // Validation of correct data type
        if (args is String) {
          return MaterialPageRoute(
            builder: (_) => SecondPage(
              data: args,
            ),
            fullscreenDialog: true,
          );
        }
// ...省略

Navigatorはよく使うので色々触っておくと良いと思います。