Flutter とNative Code の連 携について 斉藤 尚 

自己紹介 @asupara7 斉藤 尚 ( サイトウ タカシ) Flutter 歴 4 年ぐらい Web のバックエンド、フロント開発歴も ほかにもデザイン、動画、CG 制作等 

Never inc. 私たちはモバイルアプリケーションをメインに 開発、運用をおこなっております。 受託開発、技術支援、コンサルティングなど エンジニアリングにおける価値を提供します。 お客様と共により良いサービスをつくります。 https://neverjp.com/ 

目次 Flutter とNative Code の連携について Native 連携でよく使う機能 Native 連携の問題点 

Flutter とNative Code の連携について Flutter とネイティブコードを組み合わせたアプリの開発について説明します。 flutter package では対応されていない各デバイス上の機能や、 外部のネイティブSDK と連携してアプリを開発したい場合に必要です。 ※ 今回のサンプルコードは以下に置いています。 詳しくはこちらのコードを参照してください。 https://github.com/takashi11171117/flutter_native_code_sample 

Flutter とは UI フレームワーク スマホアプリのUI を作成するた めのフレームワークで、 Google によって開発されてい ます。 クロスプラットフォーム Flutter はiOS 、Android 、そ してWeb などのプラットフォ ームで動作します。 Hot Reload 機能 変更したコードをすぐに確認で きます。 

Native 連携でよく使う機能 Platform Channel : Flutter ネイティブ間のデータ通信 1. Pigeon : Platform Channel をタイプセーフに実装するためのパッケージ 2. Platform View : ネイティブのUI を表示 3. Plugin : ネイティブコードを含めたライブラリ 4. SDK import : ネイティブで開発されたサードパーティーSDK のインポート 5. 

1. Platform Channel 

Platform Channel Flutter アプリケーションとネイティブコード（Android やiOS ）との間でデータの通信を 行うための仕組みです。これらのチャンネルを使用してコミュニケーションを行うとき、 メッセージはシリアライズされて送信され、受信側でデシリアライズされます。 1 Method Channel Flutter とネイティブコード間で非同期でデータを取得、処理できる 2 Event Channel Flutter とネイティブコード間でライブデータをストリームでハンドリング 3 BasicMessageChannel Flutter とネイティブの間で継続的なデータのやり取り 

Method Channel 通信の特性: 双方向 メソッドの呼び出しは非同期であり、 結果はFuture として返される 例: ワンショットでの、デバイスデータ の値の取得やメソッドの実行 

Event Channel 通信の特性: 一方向（ネイ ティブからFlutter へ） 主な用途: 連続的なデータ のストリームをFlutter に 送信する場合に使用。ネイ ティブ側からの継続的なデ ータ更新を受信することが 主目的 例: デバイスのセンサーデ ータのように、継続的に更 新されるデータをFlutter に送信する場合など Native 側実装例 チャンネル名の設定 Handler のセット Handler の定義 Flutter 側実装 

BasicMessageChannel 通信の特性: 双方向 主な用途: Dart とネイティブコードの間でデータを継続的にやり取りする場合 動作モード: 非同期通信。メッセージを送信し、そのメッセージの返信を処理できる が、EventChannel のようなイベントのストリームは組み込まれていない。代わりに、 個別のメッセージを送信し、それらのメッセージの返信を処理。 

2. Pigeon 

Pigeon を利用して型安全に連携する スキーマを定義すると、通信するデータやメソッドの型を各Platform ごとに簡単に自動で 生成してくれるパッケージです。 生成コマンド スキーマファイル 

Pigeon で連携部分の実装 各メソッドのため、Kotlin ではインタ ーフェース、 Swift ではプロトコルを生成してくれる これを利用して、各プラットフォーム 毎に処理を書いていく ChatGPT で変換すると楽 Api.swift 内プロトコル例 AppDelegate.swift で実態の実装 AppDelegate.swift でPigeon のApi を設定 

3. PlatformView 

PlatformView ネイティブプラットフォームのビューをFlutter に埋め込むためのウィジェットや機能 を指す これによってFlutter アプリ内でネイティブのUI コンポーネントを使用できる Flutter でまだ利用できない特定のネイティブ機能をアプリに統合するときなどに非常 に役立つ 

Android でのPlatformView - VirtualDisplay 描画最終段階でFlutter とネイティブの画面を合成する。 表示するだけの場合HybridComposition より軽く表示でき る。 ただし、別々にレンダリングしているのでキーボード等の操作 はできなかったり不便。 - HybridComposition Flutter のツリーに組み込んでネイティブの画面を合成する。 そのため、キーボード等の操作がVirtualDisplay より正確に動 作する。 VirtualDisplay よりは、ツリーに組み込む分重い VirtualDIsplay(flutter 側のみ) HybridComposition(flutter 側のみ) 

iOS でのPlatformView iOS は、Android のHybridComposition と同じ仕組みのものだけです。 

PlatformView の問題点 ネイティブの画面を仮想的にFlutter の画面に合成しています。 毎フレーム合成作業をしているので、リソースを多く消費する可能性があります。 また、操作性もFlutter 純正Widget と比べると良くない可能性があります。 使い所は、本当に必要なところだけに限定してできるだけFlutter のWidget を 使いましょう。 

4. Plugin 

Flutter package とFlutter plugin ネイティブコードを含めてライブラリを作る場合は、plugin を作成しましょう。 Flutter package Dart コードで書かれた単一のライブラリ Flutter plugin Dart とネイティブコードの両方を含むライブラリ 

5. SDK import 

Native SDK のimport Swift Xcode で ios/Runner.xcworkspace を開く 1. Xcode で Swift SDK をプロジェクトに追加しま す。これは、プロジェクトナビゲータに SDK フ ァイルをドラッグするか、File -> Add Files to "Runner" を使用して行う 2. ビルド設定のいくつかの設定を構成し、Podfile にいくつかの依存関係を追加 3. Swift SDK のメソッドを呼び出し、プラットフォ ームチャンネルを介した Flutter コードとの通信 を設定するために AppDelegate.swift を編集 4. Kotlin Android Studio で android ディレクトリを開く 1. Android Studio で Kotlin SDK をプロジェクト に追加します。build.gradle ファイルに必要な依 存関係を追加 2. ビルド設定の設定を構成したり、追加の Gradle 依存関係を追加したりする必要があるかも。 3. Kotlin SDK のメソッドを呼び出し、プラットフ ォームチャンネルを介した Flutter コードとの通 信を設定するために、MainActivity.kt を編集 4. 

よくある問題 事前にどう連携していくか、よく考えて開発を始めましょう 1 開発の複雑さ Flutter とネイティブコード の統合には、追加のコード や設定が必要 2 バグ発生の可能性 Flutter とネイティブコード を組み合わせることで、互 いに影響し合ってバグが発 生する可能性がある 3 メンテナンスの負担 Flutter とネイティブコード の混在で開発したアプリの メンテナンスには、より多 くの時間と労力が必要にな ることがある 4 パフォーマンスの悪化 前述の通りPlatformView とかを使いすぎるのはよくない