FlutterシリーズのNavigatorコンポーネントの使用

PS：何かをするのは簡単だが、実際に何かをするのは難しい。

Navigator はスタックルールを使用して Widget を管理し、Navigator はページのアクセス履歴を記録します。Navigator を使用してページ間の遷移操作を行うことができます。

Android 開発において、私たちが通常言う「遷移」は Activity の遷移を指し、ページ遷移とも呼ばれます。Flutter では Route の遷移を指し、Android のページは Flutter では Route に対応します。Navigator は Route オブジェクトのスタック管理を担当し、Navigator.push や Navigator.pop のようなスタック管理メソッドを提供します。

上記のように、Flutter は Route の入栈と出栈のメソッドを提供しています。Android の一部のデバイスには戻るキーがあり、この戻るキーは Flutter の Navigator.push および Navigator.pop メソッドと互換性があります。もし特定のデバイスに対応する戻るキーがない場合は、AppBar に戻るボタンを追加できます。Scaffold にはすでに戻るボタンが追加されており、トリガーされると Navigator.pop 操作が呼び出されます。本文の内容は以下の通りです：

基本的なルートナビゲーション
ルートパラメータの受け渡し
その他のルートナビゲーション

基本的なルートナビゲーション#

前述のように、Flutter ではスタックを使用して Widget を管理し、入栈と出栈のメソッドはそれぞれ Navigator.push と Navigator.pop です。この 2 つのメソッドを使用してページ間の遷移や戻り操作を行います。

Navigator.push#

Navigator.push は Route の入栈操作を実行するために使用され、指定された Route を介して対応するページに遷移できます。メソッドは以下の通りです：

/// パラメータ：(コンテキスト、具体的なルート)
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
}

MaterialPageRoute を使用して対応するページのルートを構築し、使用方法は以下の通りです：

// NavigatorPushPopPageに遷移
_navigateToPage(context, NavigatorPushPopPage());

/// Navigator.push
/// ページ遷移
_navigateToPage(BuildContext context, Widget widget) {
  Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  }));
}

Navigator.pop#

Navigator.pop は Route の退栈操作を実行し、ページを戻るために使用されます。オプションのパラメータ result を追加して、ページが戻るときに持ち帰るパラメータとして使用できます。メソッドは以下の通りです：

/// パラメータ：(コンテキスト、戻るときに持ち帰るパラメータ（オプションパラメータ）)
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
    return Navigator.of(context).pop<T>(result);
}

以下のように、IconButton をクリックして現在のページを退出します：

IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () => Navigator.pop(context)),

Navigator.pushNamed#

Navigator.pushNamed は、名前付き Route の入栈操作を実行するために使用され、オプションのパラメータ arguments を介してパラメータを渡すことができます。メソッドは以下の通りです：

/// パラメータ：(コンテキスト、ルート名、持ち運ぶパラメータ（オプションパラメータ）)
static Future<T> pushNamed<T extends Object>(
    BuildContext context,
    String routeName, {
    Object arguments,
   }) {
    return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}

使用する際は、まず MaterialApp 内で対応するルート名をルートテーブル routes に追加します。コードは以下の通りです：

class MyApp extends StatelessWidget {
  // このウィジェットはアプリケーションのルートです。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      routes: <String, WidgetBuilder>{
        // 対応するルート/NavigatorPushNamedPage
        NavigatorPushNamedPage.routeName: (BuildContext context) =>
            NavigatorPushNamedPage(),
      },
    );
  }
}

/// ページ
/// Navigator.pushNamed
/// 名前付きルートを使用
class NavigatorPushNamedPage extends StatelessWidget {
  static final routeName = '/NavigatorPushNamedPage';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator.pushNamed"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          "Navigator.pushNamed",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

これで Navigator.pushNamed を使用して NavigatorPushNamedPage に遷移できるようになります。以下のように：

// NavigatorPushNamedPageに遷移
_navigatePushNamedPage(context, NavigatorPushNamedPage.routeName);

/// Navigator.pushNamed
/// ページ遷移
_navigatePushNamedPage(BuildContext context, String routeName,
    [Object arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

以上が Flutter における最も基本的なページナビゲーションの方法です。Navigator.push でも Navigator.pushNamed でも、NavigatorState の push メソッドに基づいて実装されています。NavigatorState は具体的な BuildContext を介して Navigator.of (context) によって取得され、NavigatorState の push メソッドは以下の通りです：

/// NavigatorState.push
Future<T> push<T extends Object>(Route<T> route) {
    assert(!_debugLocked);
    assert(() { _debugLocked = true; return true; }());
    assert(route != null);
    assert(route._navigator == null);
    final Route<dynamic> oldRoute = _history.isNotEmpty ? _history.last : null;
    route._navigator = this;
    route.install(_currentOverlayEntry);
    _history.add(route);
    route.didPush();
    route.didChangeNext(null);
    if (oldRoute != null) {
      oldRoute.didChangeNext(route);
      route.didChangePrevious(oldRoute);
    }
    for (NavigatorObserver observer in widget.observers)
      observer.didPush(route, oldRoute);
    RouteNotificationMessages.maybeNotifyRouteChange(_routePushedMethod, route, oldRoute);
    assert(() { _debugLocked = false; return true; }());
    _afterNavigation(route);
    return route.popped;
}

次に、Flutter におけるパラメータの受け渡しについて説明します。これにはページ遷移時のパラメータの受け渡しとページ戻り時のパラメータの受け渡しが含まれます。

ルートパラメータの受け渡し#

ページ遷移プロセスにおけるパラメータの受け渡しには、ページ遷移時に持ち運ぶパラメータとページ戻り時に持ち運ぶパラメータが含まれます。

Navigator.push でのパラメータの受け渡し#

Navigator.push を使用してパラメータを持ってページ遷移を行う場合、パラメータは対応するページのコンストラクタで受け取ります。具体的な使用方法は以下の通りです：

/// NavigatorPushWithParamPageに遷移
_navigateToPage(context,
    NavigatorPushWithParamPage(
      param: "この情報は前のページから来ました！",
    ));

/// Navigator.push/pop
/// ページ遷移
_navigateToPage(BuildContext context, Widget widget) {
  Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  }));
}

/// ページ
/// Navigator.pushでのパラメータの受け渡し
class NavigatorPushWithParamPage extends StatelessWidget {
  // パラメータ
  final String param;

  NavigatorPushWithParamPage({
    this.param,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigator.pushでのパラメータの受け渡し"),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          "arguments:${this.param}",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

Navigator.pushNamed でのパラメータの受け渡し#

上記のように、Navigator.pushNamed (context, routeName, {arguments}) メソッドのオプションパラメータ arguments は、遷移時に持ち運ぶパラメータです。まず、MaterialApp の onGenerateRoute で arguments を受け取ります。以下のように：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      // パラメータの受け取り
      onGenerateRoute: (RouteSettings settings) {
        if (settings.name == NavigatorPushNamedWithParamPage.routeName) {
          return MaterialPageRoute<String>(builder: (BuildContext context) {
            return NavigatorPushNamedWithParamPage(settings.arguments);
          });
        } else {
          return null;
        }
      },
    );
  }
}

その後、Navigator.pushNamed を使用してページ遷移を行い、パラメータは対応するページのコンストラクタで受け取ります。以下のように：

/// NavigatorPushNamedWithParamPageに遷移
_navigatePushNamedPage(
    context,
    NavigatorPushNamedWithParamPage.routeName,
    "この情報は前のページから来ました！");
    
/// Navigator.pushNamedでのパラメータの受け渡し
_navigatePushNamedPage(BuildContext context, String routeName,
    [Object arguments]) {
  Navigator.pushNamed(context, routeName, arguments: arguments);
}

/// ページ
/// Navigator.pushNamedでのパラメータの受け渡し
/// 名前付きルートを使用
class NavigatorPushNamedWithParamPage extends StatelessWidget {
  static final String routeName = '/NavigatorPushNamedWithParamPage';
  final String info;

  NavigatorPushNamedWithParamPage(this.info);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Navigator.pushNamedでのパラメータの受け渡し"),
          centerTitle: true,
        ),
        body: Center(
          child: Text(
            "arguments:${this.info}",
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

ページ戻り時のパラメータの受け渡し#

上記のように、Navigator.pop (context, [result]) メソッドのオプションパラメータ result は、ページ戻り時に持ち運ぶパラメータです。Navigator.push は Future を返し、then 文でページ戻りの結果を処理します。具体的な使用方法は以下の通りです：

/// NavigatorPopWithParamPageに遷移
_navigatePopWithParamPage(context, NavigatorPopWithParamPage());

/// Navigator.popで戻るときのパラメータの受け渡し
_navigatePopWithParamPage(BuildContext context, Widget widget) {
  Navigator.push<String>(context,
      MaterialPageRoute(builder: (BuildContext context) {
    return widget;
  })).then((result) {
    // 戻るときのパラメータ処理
    Toast.show("Navigator.popで戻るときのパラメータ：" + result, context);
  });
}

/// ページ
/// Navigator.popで戻るときのパラメータの受け渡し
class NavigatorPopWithParamPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
          appBar: AppBar(
            title: Text("Navigator.popで戻るときのパラメータ"),
            centerTitle: true,
          ),
          body: Center(
            child: Text(
              "Navigator.popで戻るときのパラメータ",
              style: TextStyle(fontSize: 18),
            ),
          ),
        ),
        onWillPop: () => _popBack(context));
  }

  /// ページ戻りと戻りパラメータの設定、AndroidのsetResultメソッドに似ています
  _setResult(BuildContext context) {
    Navigator.pop(context, "これはNavigatorPopWithParamPageからのメッセージです！");
  }

  /// 戻るキーの統一処理
  Future<bool> _popBack(BuildContext context) {
    _setResult(context);
    return Future.value(false);
  }
}

その他のルートナビゲーション#

その他の一般的なルートナビゲーション方法は以下の通りです：

// 現在のルートをNavigatorから削除して新しいルートに遷移します。finishしてstartActivityするのと同じです。
Navigator.popAndPushNamed
// 指定されたRouteに直接戻り、以前のルートはクリアされます。
Navigator.popUntil
// 新しいRouteに遷移し、指定されたRoute以前のRouteをクリアします。pushNamedAndRemoveUntilと似ています。
Navigator.pushAndRemoveUntil
// ページの置き換え、pushReplacementNamedと似ています。
Navigator.pushReplacement

その他のルートに関連する操作メソッドはすべて列挙することはできませんので、関連 API を参照してください。