既存アプリへのFlutterの導入

2019/08/04

以前どこかでFlutterを既存のアプリに組み込めるようになると聞いて、今どうなってるのかなあと思って確認してみた。この情報は2019年8月時点で、まだ正式にはリリースされていない時のものなので、未来に読む人は注意してもらいたい。

ステータス

今のところ、最も不安定なrelease channelであるmaster channelでのみ利用可能になっていた。

ごく簡単にしか試せていないが、自分が試した範囲では思ったよりちゃんと動いてるという印象だった。iOSでもAndroidでもhot reloadが使えるので、導入箇所の開発体験はFlutter本来のものに近いものと思われる。

2019年の年初に発表されたロードマップでは、2019年の重要なトピックとしてこの機能が挙げられていて、GitHubのマイルストーンにも”December 2019 (Add-to-App)“がつくられている。なので、stable channelで使えるようになる時はそう遠くはないと思われる。

ネイティブアプリからの見え方

FlutterアプリはiOSでは1つのUIViewController、Androidでは1つのViewもしくはFragmentとなる。UIViewControllerやFragmentとして扱えるので、画面の一部だけFlutterアプリを表示するのもOK。

次の画像は実際に動かしてみた様子のスクリーンショットで、左がiOSシミュレーター、右がAndroidエミュレーターとなっている。iOSのUITabBar、AndroidのBottomNavigationViewがネイティブで組まれていて、残りの部分はFlutterで組まれている。

感想

少なくとも、簡単なページには十分に使えそうな印象を受けた。アプリの根幹でない箇所であれば、現段階でも導入を検討しても良いのかもしれない。より高度な画面については、もう少しマジメに検証する必要があると思う。

サンプルコード