---
title: Flutter の Add-to-app でナビゲーションスタックが Flutter → ネイティブ → Flutter になってしまう場合の技術選定事例
tags:  #android #flutter  
author: [高田 晴彦](https://convert.docswell.com/user/tfandkusu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8EDLGZQ2JG.jpg?width=480
description: potatotips #90 iOS/Android開発Tips共有会で発表したスライドです。 https://potatotips.connpass.com/event/341264/
published: January 28, 25
canonical: https://convert.docswell.com/s/tfandkusu/Z4V98D-MultipleFlutterEngine
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/8EDLGZQ2JG.jpg)

Flutter の Add-to-app で
ナビゲーションスタックが
Flutter → ネイティブ → Flutter
になってしまう場合の
技術選定事例
potatotips #90 iOS/Android開発Tips共有会
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V7P23DLL78.jpg)

自己紹介
●
●
高田 晴彦
@tfandkusu
○
●
●
Qiita/Zenn/note/GitHub/X
Flutter / Android エンジニア
スプラトゥーンが好き
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/2JVD41Q6JQ.jpg)

今月から株式会社Omiaiで働いている
●
●
●
Omiai(オミアイ) 恋活・婚活のため
のマッチングアプリ
2012年から長年運営
古いコードベースが抱える多くの技
術的負債や仕様差異
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5EGY12W2EL.jpg)

Flutter リプレイスが進行中
リプレイス中も機能追加を続けたい
Add-to-app
詳細は FlutterKaigi 2024「マッチングアプリ『Omiai 』のFlutterへのリプレイスの挑戦」
参照
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JQMDP397P.jpg)

Flutter の Add-to-app とは
ネイティブの iOS / Android アプリの一部を Flutter で実装
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/K74VZYNRJ1.jpg)

Omiai における Add-to-app
お相手を探す画面は
Flutter
マイページもネ
イティブ
ボトムナビゲーションは
ネイティブ
発表時点では Add-to-app を使用したアプリは未リリース
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LJ13R65V7G.jpg)

Add-to-app の
3つの概念
1.
2.
3.
FlutterEngine
FlutterFragment
MethodChannel
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJWP1W5372.jpg)

FlutterEngine
●
●
ネイティブから FlutterEngine を作ることで Flutter の世界を作ることができる
FlutterEngine は複数作ることができる
○
●
それぞれ別の世界なので、グローバル変数等は、別の FlutterEngine に反映されない
ネイティブの FlutterEngineGroup クラスを使うことで、短時間かつ少ないメモリ
消費で FlutterEngine を複数作ることができる
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EZKP5NGE3.jpg)

FlutterFragment
FlutterEngine が持つ Flutter の世界を
ネイティブに表示することができる
FlutterEngine
FlutterFragment は Android のクラス名で、 iOS では
FlutterViewController になる。
Flutter
Fragment
私が Android エンジニアというのもあり、説明を簡単にするために、
この発表では FlutterFragment のみで解説。
Android は FlutterActivity もある
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/Y76QM98Q7V.jpg)

MethodChannel
Flutter の世界と
ネイティブの世界で
ネイティブの
ログイン画面
認証情報
情報の受け渡しができる
Flutter
の世界
MethodChannel
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/G75RZN92E4.jpg)

Omiai の Add-to-app で発生した課題
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/9J2DR521JR.jpg)

実装内容
お相手を探す
Flutter
表示タブ
切り替え
マイページ
プロフィール設定
ネイティブ
Flutter
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/DEY2DKY4EM.jpg)

ネイティブから Flutter の画面を呼び出すときに
以前に表示していた画面の内容が一瞬見える
FlutterEngine は
1つだけ使用
アニメーションを調整すれば
なんとかなるかも🤔
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VJN86RP678.jpg)

1つの FlutterEngine で2つの FlutterFragment
を設置すると、古い方が真っ白になる
Flutter
Fragment
戻る
戻る
ネイティブ
Flutter
Fragment
😭
サンプルコードで問題を発見したため、上記スクリーンショットは合成です。
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/YE9KLM3RE3.jpg)

解決方法2つ
同時に2つの FlutterFragment が存
在しないように、1つの
FlutterFragment を付けたり剥がし
たりする。
FlutterFragment は2個なので、
FlutterEngine も2個使う。
アニメーションの調整
アニメーションの調整
必要
不要
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GE8RXLMGJD.jpg)

複数の FlutterEngine の連携方法
プロフィール用
FlutterEngine
Flutter
Fragment
お相手を探す用
FlutterEngine
MethodChannel
Flutter
Fragment
ネイティブ実装
数が増えると実装が大変そう🤔
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LELK8L3XJR.jpg)

FlutterEngine は1つなのか複数なのか
社歴2週間で決断しないといけない😲
もちろん先輩方から助言を頂けます😌
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4JM26MD3JW.jpg)

結論「複数の FlutterEngine を使う」
FlutterFragment を付けたり剥がしたりす
る処理の品質確保に不安があった。
どの OS バージョンでも
大丈夫だろうか 😟
Flutter
Fragment
ネイティブ
Flutter
Fragment
ユーザが素早く操作して
も大丈夫だろうか 😨
剥がして付ける
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PJRMPV4RE9.jpg)

結論「複数の FlutterEngine を使う」
プロフィール用
FlutterEngine
自分のことを扱う
Flutter
Fragment
探す用
FlutterEngine
お相手のことを扱う
Flutter
Fragment
そんなに連携すること無いの
では🤔
自分の趣味などを変えると、お相手の
オススメ順が変わるので、リロードを要
求するぐらいでよさそう
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PEXV3Z2Y7X.jpg)

まとめ
●
Flutter Add-to-app の3つの概念
○
○
○
●
●
FlutterEngine
FlutterFragment
MethodChannel
ナビゲーションスタックが Flutter → ネイティブ → Flutter になる場合は決断が
必要
FlutterEngine を複数使うことは品質面の不安は少ない選択肢だが、アプリ仕様
によっては MethodChannel の開発工数が膨れる可能性がある
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/3EKQY8M4ED.jpg)

ありがとうございました
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/L73P92YDE5.jpg)

【補足】Add-to-app を活用した
Flutter リプレイスの望ましい考え方
この画面に機能を追加したいので
Flutter リプレイスすることになったら
Flutter
ネイティブ
ネイティブ
ここも Flutter リプレイス
22


