Flutter add-to-appガイド：ネイティブアプリをFlutterへ移行する方法
リスクの高い全面書き直しをせずに、ネイティブアプリにFlutterを追加し、画面ごとに移行できます。本番環境で実際に移行を手がけてきたチームによる、実践的なガイド、オープンソースのツール、移行計画をまとめています。
なぜFlutter add-to-appなのか
Flutter add-to-app（既存ネイティブアプリへのFlutter組み込み）は、ネイティブアプリにFlutterを組み込むための公式にサポートされた方法です。これにより、次のことが可能になります。
- 段階的に移行する - ネイティブアプリのリリースを続けながら、画面やユーザージャーニーを1つずつ移行できます。
- 一度の実装で済ませる - 移行した画面はすべてiOSとAndroidの両方で動作します。
- まず効果を確かめる - 移行を決断する前に、実際のプロダクトの中でFlutterを試せます。
このプロジェクトを作った理由
これらのツールは、私たちがクライアント向けに行ってきたadd-to-app移行から生まれました。その中には、90以上の協同組合銀行で利用されているホワイトラベルのバンキングアプリも含まれます。どのプロジェクトからも、移行を円滑に進めるために何が必要かが見えてきました。それは、ネイティブとFlutterをつなぐよく設計された基盤と、適切な画面から始める計画です。基盤はInlayが担い、計画はConvergeが作ります。
Inlay：オープンソースのadd-to-appフレームワーク
Inlayは、エンタープライズ向けのadd-to-app案件で毎回同じ問題にぶつかった経験から私たちが作った、明確な設計方針を持つFlutter add-to-appフレームワークです。次の機能を提供します。
- ネイティブ画面とFlutter画面の間を双方向に行き来できる型安全なナビゲーション。Dart、Swift、Kotlin向けのルートクラスはコード生成されます
- すべてのFlutterエンジンとネイティブコードの間で同期されるキーバリューストレージ層によるクロスプラットフォームな状態共有
FlutterEngineGroupをベースにした自動エンジン管理。エンジンを直接生成・破棄する必要はありません- Flutterで描画し、ネイティブ画面の上に表示するダイアログとボトムシート
- 複数のルーティング統合 -
go_router、auto_route、あるいは生成されたsealedルートに対するシンプルなパターンマッチングで動作します
Inlayは、純粋なFlutterアプリで使うパターンにそのまま対応するように設計されています。そのため、ネイティブのシェルを外してスタンドアロンのFlutterアプリとしてリリースする準備が整ったときにも、フレームワークから離れるのは簡単です。
Converge：Flutterへの移行を計画する
Convergeは、AndroidとiOSのコードを読み取り、常に最新の状態に保たれるFlutter移行計画に変換します。
- すべての画面、画面間のナビゲーション、そして2つのプラットフォームで異なる箇所をマッピングします。
- 依存関係の最も少ない画面から始める移行順序を提案します。
- 各画面を見積もり、その根拠も明示します。
- スプリントごとにコードベースを再分析するため、計画と見積もりはスプレッドシートではなくコードに追従します。