Flutter Navigator 2.0で現在のページを確認する方法

フラッターのNavigator 2.0：基本概念と主要コンポーネント

フラッターのNavigator 2.0は、以前のNavigator 1.0の命令型ルーティングアプローチを、より宣言的なものに置き換える目的で開発されました。これを理解するためには、いくつかの主要なコンポーネントと概念を把握する必要があります。

フラッターのNavigator 2.0の主要コンポーネントとは何か？

Navigator 2.0には、以下の主要コンポーネントが含まれています：

1. RouteInformation：これはアプリ内のロケーションとWebブラウザのURIを関連付ける情報を表します。
2. RouteInformationParser：これはRouteInformationをアプリケーション内で使用されるデータ構造に変換するクラスです。
3. RouterDelegate：これはアプリのルーティングテーブルを管理し、ページの動的な変更に応じてそれを変更するクラスです。
4. Router：これは上記3つの要素を組み合わせてページナビゲーションを制御するコンポーネントです。

URLとページナビゲーションの統合

Navigator 1.0では、カスタム定義された名前を使用してルーティングを直接呼び出す必要がありました。しかし、Navigator 2.0では、これが不要になりました。アプリケーションの状態を、ブラウザ内のURLのようなアドレス形式で表現できます。

アプリ内でユーザーアクションに基づいて動的に変化するルーティング状態を管理するには、RouterDelegateとRouteInformationParserが必要です。

次のセクションでは、現在のページを特定するために重要なRouterDelegateとRouteInformationParserの詳細について説明します。

RouterDelegateとRouteInformationParserを使って現在のページを特定する方法

RouterDelegateとRouteInformationParserは、アプリの現在のページとルーティング状態を管理し、特定するための重要なコンポーネントです。これらのコンポーネントを効果的に活用するためには、それぞれの役割を理解し、どのように使用するかを知る必要があります。

RouterDelegateの役割と使用方法

RouterDelegateは、ルーティング状態とページの変更を管理します。このクラスを使用するには、カスタムクラスでTをアプリ状態に置き換えてRouterDelegate<T>クラスを継承する必要があります。RouterDelegateでは、以下のメソッドを実装する必要があります：

class CustomRouterDelegate<T> extends RouterDelegate<T> with ChangeNotifier, PopNavigatorRouterDelegateMixin<T> {
  // 現在の状態を返す
  @override
  T get currentConfiguration {...}

  // 新しい状態が設定されたときにナビゲーションテーブルを更新するメソッド
  @override
  Future<void> setNewRoutePath(T configuration) {...}

  // ナビゲータの現在のスタックを指すメソッド
  @override
  GlobalKey<NavigatorState> get navigatorKey {...}

  // 現在のページを返すメソッド
  @override
  Widget build(BuildContext context) {...}
}

RouteInformationParserの役割と使用方法

RouteInformationParserは、ブラウザのURLとアプリのルーティング情報を変換するために使用されます。このクラスを使用するには、カスタムクラスでTをアプリ状態に置き換えてRouteInformationParser<T>クラスを継承する必要があります：

class CustomRouteInformationParser<T> extends RouteInformationParser<T> {
  // URLをアプリ状態に変換するメソッド
  @override
  Future<T> parseRouteInformation(RouteInformation routeInformation) {...}

  // アプリ状態をURLに変換するメソッド
  @override
  RouteInformation restoreRouteInformation(T configuration) {...}
}

これで、CustomRouterDelegateとCustomRouteInformationParserを使ってアプリの現在のページを特定する準備が整いました。次の章では、現在のページを特定する具体的な例と結論を示します。

現在のページの特定例とまとめ

ここでは、CustomRouterDelegateとCustomRouteInformationParserを使用して現在のページを特定する具体的な例を示します。この例では、アプリが"ホーム"ページと"詳細"ページを持つと仮定します。

カスタムルーティングクラスの定義

enum AppPage { home, detail }

class CustomRouterDelegate extends RouterDelegate<AppPage> with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppPage> {
  GlobalKey<NavigatorState> _navigatorKey;
  AppPage _currentPage;

  CustomRouterDelegate() : _navigatorKey = GlobalKey<NavigatorState>() {
    //...
  }

  @override
  AppPage get currentConfiguration => _currentPage;

  //...

  @override
  GlobalKey<NavigatorState> get navigatorKey => _navigatorKey;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _navigatorKey,
      pages: [if (_currentPage == AppPage.home) Home(), else Detail()],
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        _currentPage = AppPage.home;
        notifyListeners();
        return true;
      },
    );
  }
}

class CustomRouteInformationParser extends RouteInformationParser<AppPage> {
  @override
  Future<AppPage> parseRouteInformation(RouteInformation routeInformation) async {
    switch (routeInformation.location) {
      case '/detail':      return AppPage.detail;
      default: return AppPage.home;
    }
  }

  @override
  RouteInformation restoreRouteInformation(AppPage configuration) {
    switch (configuration) {
      case AppPage.detail: return RouteInformation(location: '/detail');
      default: return RouteInformation(location: '/');
    }
  }
}

現在のページの特定方法

アプリ内で現在のページを特定するには、CustomRouterDelegateクラスのcurrentConfigurationプロパティを参照します。

final currentPageRoute = customRouterDelegate.currentConfiguration;

このプロパティは、現在のページ（AppPage列挙型の値）に関する情報を返し、それにより現在のページを特定することができます。

まとめ

CustomRouterDelegateとCustomRouteInformationParserを使用することで、効果的に現在のページを特定し、ページの変更を管理することができます。これにより、フラッターのNavigator 2.0が提供する宣言的なルーティングとカスタムルーティングロジックの実装が可能になります。