Flutter: Pageを用いた宣言的なモーダル遷移の実装

はじめに

Flutterでモーダルを表示する際、通常は関数であるshowModalBottomSheetやshowDialogを使用することが多いです。しかし、複雑なアプリでは宣言的UIの利点を活かしきれない場合があります。本記事では、モーダル遷移にPageクラスを用いる手法とそのメリットを解説します。

リポジトリ

出来上がるもの

なぜモーダルにPageを使うのか

モーダルを通常のメソッド呼び出しではなく、一つのPageとしてNavigatorのスタックに積むことには、以下の強力なメリットがあります。

• 宣言的な状態管理: モーダルの開閉をアプリの状態（State）として完全に制御できます。
• 戻る操作との統合: Androidのシステムバックや、Webブラウザの「戻る」ボタンとモーダルの振る舞いを自然に連動させることができます。
• ルーティングの一元化: 通常の画面遷移とモーダル遷移のロジックを統一し、Navigator 2.0（Router API）などとシームレスに連携できます。

実装の要点

モーダル用のカスタムPageクラスを定義し、createRouteをオーバーライドしてダイアログ用のRouteを返すのが基本です。

import 'package:flutter/material.dart';

class ModalPage<T> extends Page<T> {
  final Widget child;

  const ModalPage({required this.child, super.key});

  @override
  Route<T> createRoute(BuildContext context) {
    return DialogRoute<T>(
      context: context,
      settings: this,
      builder: (context) => child,
    );
  }
}

あとは状態管理に応じて、Navigatorのpagesリストの末尾にこのModalPageを追加するだけで、画面上にモーダルが表示されます。

まとめ

単純な通知ダイアログであれば従来の方法で十分ですが、ディープリンク対応や厳密な状態管理が求められる場面において、モーダルをPageとして扱うアプローチは非常に有効な選択肢です。