---
title: Flutter の Add-to-app でナビゲーションスタックが Flutter → Native → Flutter となってしまう場合のリリース後課題と対応事例
tags:  #flutter  
author: [高田 晴彦](https://www.docswell.com/user/tfandkusu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/5EGL1VY2JL.jpg?width=480
description: potatotips #95 iOS/Android開発Tips共有会で発表したスライドです。 https://potatotips.connpass.com/event/389026/
published: May 15, 26
canonical: https://www.docswell.com/s/tfandkusu/5VJ6W2-FlutterAddToApp
---
# Page. 1

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

Flutter の Add-to-app で
ナビゲーションスタックが
Flutter → Native → Flutter
となってしまう場合の
リリース後課題と対応事例
potatotips #95 iOS/Android開発Tips共有会
1


# Page. 2

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

自己紹介
●
●
●
●
高田 晴彦
株式会社Omiai
Flutter / Android エンジニア
@tfandkusu
○
●
Qiita / Zenn / note / GitHub / X
来月、息子が産まれる
2


# Page. 3

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

Omiai（オミアイ）婚活マッチングアプリ
●
●
2012年から長年運営
古いコードベース
○ 技術的負債
○ iOS / Android 仕様差異
3


# Page. 4

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

Flutter にリプレイス
リプレイス中も新たな施策をデリバリーしたい
4


# Page. 5

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

Add-to-app
既存 iOS
Native App
既存 Android
Native App
Flutter Module
Flutter の
画面を表示
5


# Page. 6

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

ある時期の画面構成
お相手を探す
Flutter
足あと一覧
Native
お相手の詳細プロフィール
Flutter
6


# Page. 7

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

今回のテーマ
ナビゲーションスタックが
Flutter → Native → Flutter になっている
Flutter 画面
Native 画面
リリース
課題
発生
対応
学びを
共有
Flutter 画面
7


# Page. 8

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

Add-to-app の
2つの技術要素と
制約
1.
2.
FlutterEngine
FlutterViewController /
FlutterActivity
8


# Page. 9

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

FlutterEngine
●
●
ネイティブから FlutterEngine を作ることで Flutter の世界を作ることができる
FlutterEngine は複数作ることができる
○
それぞれ別の世界なので、グローバル変数等は、別の FlutterEngine に反映されない
9


# Page. 10

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

FlutterViewController
Android FlutterActivity
iOS
FlutterEngine を Attach することで
Flutter の世界をネイティブアプリの画
面に表示することができる。
FlutterEngine
FlutterView
Controller
FlutterActivity
10


# Page. 11

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

制約
ひとつの FlutterEngine は同時に1つの
FlutterViewController / FlutterActivity
に対してしか Attach できない
FlutterView
Controller
FlutterView
Controller
FlutterActivity
FlutterActivity
Attach はひとつだけ
FlutterEngine
11


# Page. 12

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

制約
つまりナビゲーションスタックが Flutter
→ Native → Flutter となる場合は、
FlutterEngine が2つ必要
複数 FlutterEngine
FlutterView
Controller
FlutterView
Controller
FlutterActivity
FlutterActivity
FlutterEngine
FlutterEngine
12


# Page. 13

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

複数 FlutterEngine を採用して
アプリをリリース
13


# Page. 14

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

Android で課題が発生
●
ANR（アプリが応答しなくなる現象）発生
○ 社内QAでは未確認
○ Android vitals / Firebase Crashlytics で一定割合で発生していることを確
認
○ Flutter のCPUネイティブな部分で発生
去年の6月のことで、当時の Firebase Crashlytics の記録やスクリーンショットは残っていなかった
14


# Page. 15

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

対応
15


# Page. 16

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

ロールバック
ビジネス上、必要な機能が Flutter で作られていたため
修正して再リリース
16


# Page. 17

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

FlutterEngine の生成方法を変更
初期リリース版
生成
Native
画面
FlutterActivity
画面遷移
(複数回)
FlutterEngine
破棄
FlutterActivity
画面遷移
(複数回)
FlutterEngine
生成
破棄
複数回
17


# Page. 18

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

FlutterEngine の生成方法を変更
修正版
生成
Native
画面
FlutterActivity
画面遷移
(複数回)
FlutterEngine
FlutterActivity
画面遷移
(複数回)
FlutterEngine
生成1回
上司の渡邊が対応
破棄
Attach
Detach
複数回
18


# Page. 19

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

ANR 解決
●
●
FlutterEngine は生成と破棄を繰り返すと ANR が発生🤔
公式情報なし😢
FlutterEngine
生成
破棄
ANR
発生
複数回
19


# Page. 20

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

学び
20


# Page. 21

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

前例の無い技術への挑戦は難しい
●
Add-to-app 事例
○
Studyplus さん
■
○
Moneyforward さん
■
●
Add-to-Appの戦い方 - DroidKaigi 2022
MEet Flutter Add-to-App: Unlocking Our Productivity - Money Forward TECH DAY’24
複数 FlutterEngine の公開された事例は見つからず😥
21


# Page. 22

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

どうするのが良かったのか🤔
22


# Page. 23

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

複数 FlutterEngine を採用しない
施策があり改修の必要な画面を
Flutter 化
Flutter 画面
Native 画面
特に施策は無いが
Flutter 画面に挟まれるので Flutter 化する
Native 画面
FlutterEngine
ひとつ
23


# Page. 24

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

リスクを共有の上
慎重に少しづつリリースする
リリース後の監視項目を事前に定義
クラッシュ
ANR
リリース割合
リプレイス
画面の KPI
5%
例：プロフィール閲覧数
10% …
1%
24


# Page. 25

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

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