日本語アーカイブ · ナビゲーション

ナビゲーション

ページ間を遷移するには GoRouter.go メソッドを使用します。

// GoRouter を使って遷移
onTap: () => GoRouter.of(context).go('/page2')

また go_router は Dart の拡張メソッドを利用して上記メソッドの簡易バージョンも用意しています。

// より簡単に GoRouter を使って遷移
onTap: () => context.go('/page2')

簡易バージョンにはフルバージョンのものがそのまま割り当てられるため、どちらを使用していただいても構いません。 余談ですが、context.go(...) を実行するだけで魔法のようにページ間を遷移できる... というのが go_router の名前の由来です。

また、url_launcher の Link ウィジェットを使用して遷移することも可能です。

Link(
  uri: Uri.parse('/page2'),
  builder: (context, followLink) => TextButton(
    onPressed: followLink,
    child: const Text('Go to page 2'),
  ),
),

Link ウィジェットがスキーム付きで URL を渡された場合（例: https://flutter.dev）、そのリンクはブラウザで開きます。 スキームなしの場合は、アプリのナビゲーションシステムによりアプリ内リンクに遷移します。

名前付きルートに遷移することも可能です。

ページを「プッシュ」する

go_router には go メソッドに加えて、push メソッドがあります。 go と push はいずれもページのスタックを生成してくれる点では同じですが、その方法が異なります。 go メソッドはロケーション名からマッチした通しルートの全てのサブルートからページを生成し、それらを順番にページのスタックに追加します。

一方の push メソッドは既存のページスタックに、1ページのみ追加（プッシュ）します。 このページはロケーション名とマッチした通しルートの、最も末端のサブルートに紐づくページです。 go が宣言的にページのスタックを生成するのに対して、 push は命令的にスタックを生成するという違いもあります。

また、「プッシュ」は名前付きルートに対して行うことも可能です。

ページを「ポップ」する

スタックからページを取り出す（ポップ）には、pop メソッドを使用してください。

初期ロケーション名

ルーティング（Routing）の初期ロケーション名は、GoRouter コンストラクタの initialLocation で設定可能です。

final _router = GoRouter(
  routes: ...,
  initialLocation: '/page2',
);

ディープリンクを使用してアプリを立ち上げた場合は initialLocation の値は無視されます。

現在のロケーション名

現在のロケーション名を取得するには GoRouter.location プロパティを使用します。

手動のナビゲーションにより、あるいはディープリンクにより、あるいはユーザーが戻るボタンを押してポップしたことにより、現在のロケーション名は変化します。 その変化に応じて何かアクションを起こしたい場合は GoRouter にリスナーを追加します。 GoRouter は ChangeNotifier でもあるため、 addListener を呼び出してコールバックを登録することができます。 あるいは、その名称が直感的とは言い難いことで有名な AnimatedBuilder に GoRouter を設定しましょう。

class RouterLocationView extends StatelessWidget {
  const RouterLocationView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final router = GoRouter.of(context);
    return AnimatedBuilder(
      animation: router,
      builder: (context, child) => Text(router.location),
    );
  }
}

もしくは、Provider パッケージを使えば、 ChangeNotifier からの通知を受け取って Widget を再構築する仕組みを利用することができます。 その型の名称は AnimatedBuilder より目的がはっきりしているはずです。