アプリ開発・ゲーム開発のための勉強ブログ

FlutterとUnrealEngineの勉強をしています。

【Flutter】GoRouter パスパラメーターを使って画面遷移を管理

まずbuilder関数に渡されるstateについて

builder()にはstateオブジェクトが渡されます。

stateオブジェクトはGoRouterStateクラスのインスタンスで、いくつかの有用な情報を含んでいます。

そのGoRouterStateクラスのプロパティ(情報)がpathやname、pathParameters、paramsなどです。

 

↓のサイトでプロパティの詳細を確認できます。

 

pathパラメーターの実装

①定義

定義時にpathセグメントで:の後に一意の名前を付けることで指定できます。

GoRoute(
   name: 'product',
   path: 'products/:productId',
   builder: /* ... */,
 ),

1つの定義で複数のページに遷移できるため便利です。リスト化された複数の商品ページで遷移させる際等によく使います。

また、URLにもpathパラメーターの値が反映されます。

 

②呼び出し(画面遷移)

呼び出す時にpath若しくは名前付きpathに加えて、pathパラメーターの引数を渡す必要があります。

TextButton(
  onPressed: () {
    context.goNamed('product', pathParameters: {'productId': 123});
  },
  child: const Text('Go to product 123'),
),

上の例では、goNamed()に名前付きpathとpathParametersを渡して呼び出しています。

 

id等の商品情報をまとめたモデルクラスを作って管理すると楽になります。

 

pub.dev

 

 

おまけ

他のパラメーターについての参考資料

paramsの場合、パラメーターはナビゲーション時にキーと値のペアのマップとして渡します。