ブログ

FlutterとGo Routerのドキュメンテーションについて

Go Routerの概要

Go Routerは、FlutterのRouter API（Navigator 2.0）を簡単に扱えるようにしたパッケージです. このパッケージは、複雑なルート処理を簡単に扱えるように設計されています.

Go Routerは、プラットフォーム（モバイル、ウェブ、デスクトップ）に関係なく、宣言的なルートを使用して複雑さを減らすことを目指しています. また、Android、iOS、ウェブからの深いリンクや動的リンク、その他のナビゲーション関連のシナリオを処理することができます.

Go Routerの主な機能は、「パスと画面の組み合わせを決める」ことです. これにより、開発者はルートを定義し、自動生成されたコードを使用して画面遷移を設定することができます.

Go Routerの作者は、Flutterの公式リリースをMediumで書いているクリスさんです. そのため、Go RouterはFlutterとの親和性が高く、Flutter開発者にとって使いやすいパッケージとなっています.

Go Routerの公式ドキュメンテーション

Go Routerの公式ドキュメンテーションは、開発者がFlutterのルーティングとナビゲーションをより簡単に扱えるようにするための詳細なガイドを提供しています.

ナビゲーション

Go Routerでは、ページ間のナビゲーションは GoRouter.go メソッドを使用して行います. また、Dartの拡張メソッドを使用した簡易的なナビゲーションも提供しています. これにより、開発者は context.go('/page2') のように簡単に画面遷移を行うことができます.

ページのプッシュとポップ

Go Routerでは、go メソッドと push メソッドを使用してページスタックを構築することができます. go メソッドは、単一のロケーションを任意の数のページスタックに変換することができます. 一方、push メソッドは、既存のページスタックに単一のページをプッシュするために使用されます. ページをポップするには、pop メソッドを使用します.

現在のロケーション

現在のロケーションを知りたい場合は、GoRouter.location プロパティを使用します. ロケーションが変更されたときに通知を受け取りたい場合は、addListener を呼び出すか、ChangeNotifier オブジェクトのためのFlutterのビルダーウィジェットである AnimatedBuilder を使用することができます.

以上がGo Routerの公式ドキュメンテーションの概要です。詳細な情報や使用例については、公式ドキュメンテーションを参照してください.

Go Routerの使用例

Go Routerを使用すると、Flutterアプリケーションのルーティングとナビゲーションを簡単に扱うことができます. 以下に、Go Routerの基本的な使用例を示します。

ルーティングの設定

まず、GoRouter オブジェクトを作成し、ルートを定義します.

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/settings',
      builder: (context, state) => const SettingsPage(),
    )
  ],
);

この設定では、/ パスにアクセスしたときに HomePage ウィジェットが表示され、/settings パスにアクセスしたときに SettingsPage ウィジェットが表示されます.

ナビゲーション

ページ間のナビゲーションは、GoRouter.of(context).go() メソッドまたは context.go() メソッドを使用して行います. 以下に、HomePage ウィジェットの ElevatedButton で /settings ルートにナビゲートする例を示します.

ElevatedButton(
  onPressed: () => context.go('/settings'),
  child: Text('Go to Settings'),
)

以上がGo Routerの基本的な使用例です。詳細な情報や他の使用例については、公式ドキュメンテーションを参照してください.

Go RouterとFlutterの統合

Go Routerは、Flutterのルーティングとナビゲーションを簡単に扱うことができるパッケージです. 以下に、Go RouterとFlutterを統合する基本的な手順を示します。

環境の準備

まず、Flutterプロジェクトを作成し、go_routerとgo_router_builderをpubspec.yamlに追加します.

dependencies:
  go_router: ^13.0.0

dev_dependencies:
  build_runner: ^2.4.7
  go_router_builder: ^2.4.0

次に、flutter pub getを実行してパッケージを取得します.

ルーティングの設定

GoRouterオブジェクトを作成し、ルートを定義します.

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/settings',
      builder: (context, state) => const SettingsPage(),
    )
  ],
);

この設定では、/ パスにアクセスしたときに HomePage ウィジェットが表示され、/settings パスにアクセスしたときに SettingsPage ウィジェットが表示されます.

ナビゲーション

ページ間のナビゲーションは、GoRouter.of(context).go() メソッドまたは context.go() メソッドを使用して行います. 以下に、HomePage ウィジェットの ElevatedButton で /settings ルートにナビゲートする例を示します.

ElevatedButton(
  onPressed: () => context.go('/settings'),
  child: Text('Go to Settings'),
)

以上がGo RouterとFlutterの統合の基本的な手順です。詳細な情報や他の使用例については、公式ドキュメンテーションを参照してください..

コメントを残す