FlutterとNative Codeの連携について

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 とかを使いすぎるのはよくない

FlutterとNative Codeの連携について

FlutterとNative Codeの連携について

斉藤尚

Other Decks in Programming

Featured

Transcript