search
LoginSignup
0

More than 1 year has passed since last update.

posted at

Flutterのroute設定 その2

Flutterのroute設定について補足説明をします。

前回はroute設定にonGenerateRouteを使いましたが、これを使わない方法もあります。
MaterialApponGenerateRouteまたはroutesプロパティを持っていればroute設定ができるようです。
またhomeプロパティだけ持っていればアプリケーションを起動できますので、ページ遷移がない場合はonGenerateRouteroutesは不要です。

参考資料

routesonGenerateRouteの違い

似たような働きをするプロパティですが、挙動は少しだけ異なります。また、それぞれの特徴を使って併用することも可能です。
アプリケーションからnaemd routeがpushされた際、まずroutesテーブルが参照されます。このテーブルで解決できなかった際にonGenerateRouteに割り当てられたメソッドが呼ばれます。

また、routesによる定義ではモーダル表示が使えません。モーダル表示を使う場合はonGenerateRouteを設定することになります。このやり方を下に実際のコードの例で示しています。

特徴
routes const Map<String, WidgetBuilder> 先に呼ばれる
onGenerateRoute Route<dynamic> Function(RouteSettings settings) 動的、モーダル表示が可能等

実際のコードの例

MaterialApp(
  title: "Routing Demonstration",
  routes: {
    '/': (context) => HomePage(),
    '/second_page': (context) => SecondPage(),
  onGenerateRoute: (settings) {
    if (settings.name == '/third_page') {
      return MaterialPageRoute(
        builder: (context) => ThirdPage(),
        // モーダル表示
        fullscreenDialog: true,
      );
    }
  }
),

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0