Flutterでネイティブコードを呼び出してみよう
2023.06.12
iOS、Androidの両方に対応できて便利なFlutterですが、Flutterの仕様、OSの仕様でさまざまな問題が起こることがあります。
そんな時に役立つ解決策の一つがネイティブコードを呼び出しiOS、Androidそれぞれで解決してしまう作戦です。この記事ではコードの呼び出し方を実際の使用例を交えて解説します。
Flutter側での実装
Flutter側はMethodChannelクラスを使用して呼び出しを行います。
1 2 3 4 5 | Future<String> _getHelloWorld() async { const MethodChannel channel = MethodChannel("Channel"); String? resultText = await channel.invokeMethod("getHelloWorld"); return resultText ?? "null"; } |
MethodChannelのインスタンスを作成し、invokeMethod処理を呼び出します。それぞれの引数としてString型を要求されます。後ほどネイティブコード側での識別に使うため分かりやすい値を入れておくといいでしょう。
invokeMethodの返却値はここではStringを指定しています。ネイティブコード側で返却できるのはStringの他Boolean、Int、Doubleなど特定の型に限られています。
また、List型を返すinvokeListMethod、Map型を返すinvokeMapMethodも用意されています。必要に応じて使いましょう。
Swift側の実装
Flutterプロジェクト内の「ios/Runner」フォルダ内、「AppDelegate.swift」ファイルを編集します。Xcodeで行うとやりやすいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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 "getHelloWorld" : result("Hello from Swift!") default : result(nil) } }) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } |
FlutterMethodChannelには先ほどFlutter側で定義したチャンネル名（ここでは"Channel"）を指定します。
また、setMethodCallHandlerのcall.methodにはFlutter側のinvokeMethodに指定した値（ここでは"getHelloWorld"）が入っています。ここでは複数のメソッドを呼び出すことを想定しswitch文で分岐しています。
Flutter側に値を返すにはresult()を使用します。ここでは"Hello from Swift!"の文字列を返しています。先述の通り返却できる型に制限があるので気をつけましょう。
iOS Simuratorで起動すると、Swiftで実装したコードが呼び出されているのがわかります。
Kotlin側の実装
Android側での呼び出しを行うには、「MainActivity.kt」を編集します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class MainActivity: FlutterActivity() { @OptIn(ExperimentalCoroutinesApi::class) override fun configureFlutterEngine(flutterEngine: FlutterEngine) { super.configureFlutterEngine(flutterEngine) MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "Channel").setMethodCallHandler { call, result -> when (call.method) { "getHelloWorld" -> result.success("Hello from Kotlin!") else -> result.success(null) } } } } |
Swiftと同じくチャンネル名、invokeMethodの値を指定しresultを使用して値を返却します。Kotlinの場合はsuccsess,errorを指定しますがそれ以外はSwiftと同一です。ちなみに、Swiftでエラーを返したい場合はresult()の引数でFlutterError型を使用します。
Android Emuratorで起動すると、Kotlinで実装したコードが呼び出されているのがわかります。
使用例：端末内ストレージのネイティブ呼び出し
ネイティブコードの使用例を紹介します。
Flutterで値を保存したい場合、SharedPreferencesを使うことがよくあります。このクラスを使用すると指定したキーに紐付くデータの読み書きができますが、実はこのキー、内部で自動的に「flutter.」の接頭辞が付けられています。普通に使う分には何の問題もない仕様ですが、例えばネイティブアプリからFlutterへ移行する際に、ネイティブアプリで既に保存している内容をFlutter側で読み取れない、という問題があります。
この画像はFlutter、ネイティブコードでそれぞれキー名「key」で値を保存した際のUserDefaultです。Flutterでは保存時に「flutter.key」という形式で保存されています。読み込み時も同じく「flutter.key」をキー名として探すためネイティブコードで保存した「key」の値が読み込めなくなります。
そこでネイティブコードを使用し、保存した値の読み出しを行います。まずはSwift側です。
1 2 3 4 5 6 7 8 9 10 11 12 | methodChannel.setMethodCallHandler({ (call:FlutterMethodCall, result:FlutterResult) -> Void in switch call.method { case "getHelloWorld" : result("Hello from Swift!") case "getPreference": let value = UserDefaults.standard.string(forKey: call.arguments as! String) result(value) default : result(nil) } }) |
先ほどのコードにgetPreferenceが呼ばれた際の処理を追加しました。call.argumentsにはFlutter側で呼び出し時に渡した値が格納されています。
1 2 3 4 5 6 7 8 9 10 11 12 | MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "Channel").setMethodCallHandler { call, result -> when (call.method) { "getHelloWorld" -> result.success("Hello from Kotlin!") "getPreference" -> { val value = PreferenceManager.getDefaultSharedPreferences(context).getString(call.arguments as String, null) result.success(value) } else -> result.success(null) } } |
Kotlin側も同様にgetPreferenceが呼ばれた際の処理を追加します。
1 2 3 4 5 | Future<String> _getPreference(String key) async { const MethodChannel channel = MethodChannel("Channel"); String? resultText = await channel.invokeMethod("getPreference", key); return resultText ?? "null"; } |
Flutter側の呼び出し処理は先ほどのgetHelloWorldとほぼ同じです。invokeMethodの第二引数に指定した値がネイティブアプリ側のcall.argumentsで取得できます。
これで、ネイティブアプリで指定したキーを読み込むことができました。
まとめ
ネイティブコードを呼び出すことができれば問題解決の選択肢が増えます。
クロスプラットフォームだからと食わず嫌いせずに、ぜひネイティブコードを利用してみましょう・
書いた人はこんな人
- スーパーユーザーと間違われることが多いです。
IT技術11月 1, 2023Flutterでネイティブ画面を呼び出してみよう- IT技術6月 5, 2023Flutterでネイティブコードを呼び出してみよう
- ライトコードの日常2月 28, 2023YOUは何しにライトコードへ？〜すどたく編〜
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
