【Flutter】MethodChannelでネイティブコードを呼び出す📣

背景

Flutterでネイティブアプリ向けSDKを利用してAPI実装が必要だったので、調査した内容をまとめました。

ゴール

ネイティブコードの呼び出しができること。

• iOS：Swift（+α Objective-C）
• Android：Kotlin（+α Java）

SDKを利用できること

• iOS：framework, xcframework
• Android：AAR

検討した方法

MethodChannelを使用する

実装例

ネイティブコードの呼び出し

使用する場面が多そうなSwiftとKotlinの例を用意しました。
Objective-CとJavaについてもメモ書きしたので参考になれば🙏

Objective-C, Java

Objective-CまたはJavaを直接呼び出す

Objective-CまたはJavaを呼び出す場合の留意点

1. Flutterプロジェクトはデフォルトのネイティブ言語が設定されている
   flutter createした時のデフォルトのネイティブ言語はSwiftとKotlinです。
   VSCodeのユーザー設定から「flutter create language」で確認可能。

2. Swiftが選択されている場合、Objective-Cを呼び出すには一手間必要
   Objective-CのメソッドをMethodChannelを用いて呼び出すには「AppDelegate.m」が必要ですが、
   デフォルト言語がSwiftの場合にはこのファイルが存在しません。(Androidでも同様)
   なので直接Objective-Cを呼び出すには、作り直すか必要な作業が発生するので少々面倒です。

3. SwiftからObjective-Cを呼び出し、それをFlutterから呼び出すことは可能
   少々手間ですが、以下のように呼び出すことは可能です。
   Flutter→Swift→Objective-C

実装の参考は以下

• Objective-C：https://docs.flutter.dev/platform-integration/platform-channels?tab=type-mappings-obj-c-tab#step-4-add-an-ios-platform-specific-implementation
• Java：https://docs.flutter.dev/platform-integration/platform-channels?tab=android-channel-java-tab#step-3-add-an-android-platform-specific-implementation

---

Swift（またはKotlin）からObjective-C（またはJava）を呼び出し、それをFlutterから呼び出す

Objective-Cの例のみ用意しました
Java-Kotlinの呼び出しは以下が参考になりそう
https://developer.android.com/kotlin/interop?hl=ja

1. Objective-Cの実装

XCodeのFile>New>File..からObjective-CFile（EmptyFile）を作成

ios/Runner/hoge.m

#import <Foundation/Foundation.h>
+#import "hoge.h"
+
+@implementation Hoge
+
+　// 処理
+-(void) testMethod {
+    NSLog(@"Hello from Objective-C!");
+}
+
+@end

XCodeのFile>New>File..からHeaderFileを作成

ios/Runner/hoge.h

#ifndef hoge_h
#define hoge_h

+#import <Foundation/Foundation.h>

#endif /* hoge_h */

+// クラス定義
+@interface Hoge : NSObject
+// メソッド定義
+-(void) testMethod;
+
+@end

ブリッジファイルにimportを追加

ios/Runner/Runner-Bridging-Header.h

#import "GeneratedPluginRegistrant.h"
+#import "hoge.h"

2. Swiftの実装
   Objective-Cのメソッドを呼び出し

ios/Runner/AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)

+        let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
+        let methodChannel = FlutterMethodChannel(name: "Channel",binaryMessenger: controller as! FlutterBinaryMessenger)
+        methodChannel.setMethodCallHandler({
+            (call:FlutterMethodCall, result:FlutterResult) -> Void in
+            switch call.method {
+            case "getHello" :
+                Hoge.init().testMethod()
+                result("Hello from Objective-C!")
+            default :
+                result(nil)
+            }
+        })
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

3. Flutterの実装

main.dart

+ import 'package:flutter/services.dart';
//
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
+    // ネイティブの処理を呼び出す
+    Future<void> getHello() async {
+      const channel = MethodChannel('Channel');
+      final resultText = await channel.invokeMethod('getHello');
+      debugPrint(resultText);
+    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
+              onPressed: () async => getHello(),
              child: const Text('getHello'),
            )
          ],
        ),
      ),
    );
  }
}

4. テキストボタンを押下するとデバックコンソールにHello from Objective-C!と表示される。

1. Swiftの実装

ios/Runner/AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
+        let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
+        let methodChannel = FlutterMethodChannel(name: "Channel",binaryMessenger: controller as! FlutterBinaryMessenger)
+        methodChannel.setMethodCallHandler({
+            (call:FlutterMethodCall, result:FlutterResult) -> Void in
+            switch call.method {
+            case "getHello" :
+                result("Hello from Swift!")
+            default :
+                result(nil)
+            }
+        })
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

2. Kotlinの実装

android/app/src/main/kotlin/com/example/flutter_native_sample/MainActivity.kt

package com.example.flutter_native_sample

import io.flutter.embedding.android.FlutterActivity

class MainActivity : FlutterActivity() {
+    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
+        super.configureFlutterEngine(flutterEngine)
+        MethodChannel(
+            flutterEngine.dartExecutor.binaryMessenger,
+            "Channel"
+        ).setMethodCallHandler { call, result ->
+            when (call.method) {
+                "getHello" ->
+                    result.success("Hello from Kotlin!")
+
+                else ->
+                    result.success(null)
+            }
+        }
+
+    }
}

3. Flutterの実装

main.dart

+ import 'package:flutter/services.dart';
//
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
+    // ネイティブの処理を呼び出す
+    Future<void> getHello() async {
+      const channel = MethodChannel('Channel');
+      final resultText = await channel.invokeMethod('getHello');
+      debugPrint(resultText);
+    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
+              onPressed: () async => getHello(),
              child: const Text('getHello'),
            )
          ],
        ),
      ),
    );
  }
}

4. テキストボタンを押下するとデバックコンソールにHello from Swift!またはHello from Kotlin!と表示される。

SDKの利用

1. iOSの実装

framework(xcframework)の取り込み
iosフォルダをXcodeで開き、「Target > Runner > General > Frameworks,Libraries...」にframeworkをドラックアンドドロップ
※xcframeworkの場合でも同様

frameworkとxcframeworkの違い
https://qiita.com/Arime/items/b7ceac307601d984e532

ライブラリは作成された言語によって違いがある

• Swift：.swiftmodule
• Objective-C：.modulemap

ブリッジファイルにimportを追加
Objective-Cライブラリの場合のみ必要な手順で、Swiftライブラリの場合は不要かも

ios/Runner/Runner-Bridging-Header.h

#ifndef Generated_Plugin_Registrant_h
#define Generated_Plugin_Registrant_h
#import "GeneratedPluginRegistrant.h"
+// .modulemapの`framework module {モジュール名}`を参照し定義
+#import <{モジュール名}/{モジュール名}.h>
#endif

frameworkの呼び出し

ios/Runner/AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
+        let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
+        let methodChannel = FlutterMethodChannel(name: "Channel",binaryMessenger: controller as! FlutterBinaryMessenger)
+        methodChannel.setMethodCallHandler({
+            (call:FlutterMethodCall, result:FlutterResult) -> Void in
+            switch call.method {
+            case "hoge" :
+                self.hoge()
+                result("hoge")
+            default :
+                result(nil)
+            }
+        })
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

+    private func hoge() -> Void {
+        // 追加したライブラリのメソッドを呼び出し
+        Hoge.fuga()
+    }
}

2. Androidの実装

AARの取り込み
android/app配下にlibsフォルダを作成
.aarを格納し依存関係を記述

android/app/build.gradle

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation files('libs/{ファイル名}.aar')
}

android/build.gradle

allprojects {
    repositories {
	 ~
+        flatDir {
+            dirs 'libs'
+        }
    }
}

AARの呼び出し

android/app/src/main/kotlin/~/MainActivity.kt

+import {必要なパッケージのインポート（「more actions...」で入れれる）}
~~~
class MainActivity : FlutterActivity() {
+    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
+        super.configureFlutterEngine(flutterEngine)
+        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "Channel").setMethodCallHandler { call, result ->
+            when (call.method) {
+                "hoge" -> {
+                    Hoge().huga()
+                    result.success("hoge")
+                }
+
+                else ->
+                    result.success(null)
+            }
+        }
+
+    }
}

SDK利用時に必要な依存関係が足りていない、OSの許可設定が足りてないなどでビルドエラーになることがある
AndroidStudioでビルドしてみて、エラーログから必要な対応を確認する

必要だった対応をメモ

android/app/src/main/AndroidManifest.xml

+<uses-permission android:name="android.permission.INTERNET" />

android/app/build.gradle

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation files('libs/{ファイル名}.aar')
+    implementation ("com.squareup.okhttp3:okhttp:4.3.1")
+    implementation ("com.google.code.gson:gson:2.8.6")
+    implementation ("com.fasterxml.jackson.core:jackson-databind:2.3.2")
}

3. Flutterの実装

main.dart

+ import 'package:flutter/services.dart';
//
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
+    // ネイティブ（ライブラリ）の処理を呼び出す
+    Future<void> hoge() async {
+      const channel = MethodChannel('Channel');
+      final resultText = await channel.invokeMethod('hoge');
+      debugPrint(resultText);
+    }

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
+              onPressed: () async => hoge(),
              child: const Text('hoge'),
            )
          ],
        ),
      ),
    );
  }
}

4. 正常にビルド、ライブラリのメソッド呼び出しができればOK！

まとめ

MethodChannelを使うことでネイティブの呼び出しができるのは便利ですが、
要件によっては複雑さが増して対応が難しいケースもあると思うのでその都度ネイティブ知識のキャッチアップが欠かせなそうです。

一例）ネイティブのメソッドの引数にUIViewController型が必要なケース
AppDelegate.swiftでUIViewControllerを継承したクラスを渡しても処理が実行されず。。
対象のメソッドを呼び出すためにSwiftで画面を作成しないといけないかもでハマった。
結論、let controller: FlutterViewController = window?.rootViewController as! FlutterViewControllerのcontrollerを渡すことで正常に作動。

参考

https://rightcode.co.jp/blog/information-technology/flutter-native-code-syain
https://qiita.com/ko2ic/items/ed87dbdb515b03f4dbd3
https://note.com/mizutory/n/ne69dacbe34de