Flutter 调用原生

weixin_53963450

已于 2025-01-03 00:35:21 修改

阅读量681

点赞数 11

分类专栏： flutter 文章标签： flutter

于 2024-08-23 22:09:33 首次发布

本文链接：https://blog.csdn.net/weixin_53963450/article/details/141475267

版权

flutter 专栏收录该内容

10 篇文章

订阅专栏

目录：

关于 Flutter 的 Channel
Flutter 调用原生代码
2.1 Android 端的实现
2.2 iOS 端的实现
2.3 Flutter 端的调用
原生代码调用 Flutter
3.1 Flutter 端的实现
3.2 Android 和 iOS 端的调用

一，flutter Channel

1. 关于 Flutter 的 Channel

Flutter 提供了 3 种 Channel 用于 Flutter 与原生代码做交互，分别是：

类型	用途
MethodChannel	用于 Flutter 与原生平台之间函数的互相调用
BasicMessageChannel	它传递的是字节数组，使用时自定义编解码器
EventChannel	用于原生平台向Flutter 事件的通信

我们可以借助 MethodChannel 实现 Flutter 与原生代码的相互调用。

2. 如何在 Flutter 中调用原生代码

2.1 使用`MethodChannel`

使用情景：主要应用于Flutter和Android原生之间函数相互调用

在 Flutter 中调用原生代码，需要在原生代码中创建一个 MethodChannel，并对这个 channel 对象设置 MethodCallHandler 即可。
每个 channel 都可以处理多个方法的调用，在 handler 对象中根据方法名做分发即可。

2.1.1 在 Android 端的实现 MethodChannel（flutter传参调用安卓方法）

Android 端需要在恰当的时机获取到 FlutterEngine 对象，例如在 FlutterActivity 的 configureFlutterEngine 方法中获取。
接着再创建 MethodChannel 通道实例，最后对通道设置 MethodCallHandler 即可：

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
 
class MainActivity: FlutterActivity() {
 
    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */
 
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
 
        val messenger = flutterEngine.dartExecutor.binaryMessenger
 
        // 新建一个 Channel 对象
        val channel = MethodChannel(messenger, "your_channel_name")
 
        // 为 channel 设置回调
        channel.setMethodCallHandler { call, res ->
            // 根据方法名，分发不同的处理
            when(call.method) {
 
                "your_method_name" -> {
                    // 获取传入的参数
                    val msg = call.argument<String>("msg")
                    Log.i("ZHP", "正在执行原生方法，传入的参数是：「$msg」")
                    // 通知执行成功
                    res.success("这是执行的结果")
                }
 
                else -> {
                    // 如果有未识别的方法名，通知执行失败
                    res.error("error_code", "error_message", null)
                }
            }
        }
    }
 
}

2.1.2 在 iOS 端的实现 MethodChannel（flutter传参调用ios方法）

iOS 端创建 MethodChannel 的方式和 Android 类似。不过在 MethodCallHandler 中获取传入的参数和 Android 有差别，并且 FlutterResult 不支持像 Android 那样标记为 success/error ：

class MainViewController: FlutterViewController {
 
 
    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */
    
    override func viewDidLoad() {
        super.viewDidLoad()
 
        // 注册渠道
        let channel = FlutterMethodChannel(name: "your_channel_name", binaryMessenger: self.binaryMessenger)
        channel.setMethodCallHandler { (call, res) in
            // 根据函数名做不同的处理
            switch(call.method) {
                case "your_method_name":
                    yourMethodName(call, res)
                default:
                    res(nil)
            }
        }
    }
    
    
    
    /* ======================================================= */
    /* Private Methods                                         */
    /* ======================================================= */
    
    private func yourMethodName(call: FlutterMethodCall, result: FlutterResult ) {
        // 获取传入的参数字典
        let params = call.arguments as? NSDictionary
        var msg = ""
        if (params != nil) {
            // 获取具体的参数值
            msg = params!["msg"] as? String ?? ""
        }
        // 打印日志
        print("正在执行原生方法，传入的参数是：" + msg)
        // 通知结束
        result(nil)
    }
}

2.1.3 Dart 端的调用

最后我们在 Dart 中调用原生代码中的函数，通过建立一个名称相同的 channel，调用 channel 的 invokeMethod 即可：

// 创建渠道
const channel = const MethodChannel("your_channel_name");
 
void callNativeMethod(String msg) {
    try {
      // 通过渠道，调用原生代码代码的方法
      Future future = channel.invokeMethod("your_method_name", {"msg": msg} );
      // 打印执行的结果
      print(future.toString());
    } on PlatformException catch(e) {
      print(e.toString());
    }
}

2.2 使用EventChannel（插件写法）

使用场景：主要应用于原生端向 Flutter 单向通信

2.2.1 在安卓端实现

1.AdHuijingEventPlugin封装（插件写法）

这里的 AdHuijingViewConfig.adevent = "com.liang.huijing.ad.ad_huijing/adevent"，我把所有静态参数都封装了一下，就不展示AdHuijingViewConfig这个文件了

package com.liang.huijing.ad.ad_huijing

import android.content.Context
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.EventChannel

class AdHuijingEventPlugin: FlutterPlugin, EventChannel.StreamHandler {
    companion object {
        private var eventChannel: EventChannel? = null

        private var eventSink: EventChannel.EventSink? = null

        private var context: Context? = null

        fun sendContent(content: MutableMap<String, Any?>) {
            eventSink?.success(content)
        }

        fun sendError(errorCode: String, errorMessage: String, content: MutableMap<String, Any?>) {
            eventSink?.error(errorCode, errorMessage, content)
        }
    }
    override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
        eventSink = events
    }

    override fun onCancel(arguments: Any?) {
        eventSink = null
    }

    override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        eventChannel = EventChannel(binding.binaryMessenger, AdHuijingViewConfig.adevent)
        eventChannel!!.setStreamHandler(this)
        context = binding.applicationContext
    }

    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        eventChannel = null
        eventChannel!!.setStreamHandler(null)
    }
}

2.MainActivity.kt中注册


class MainActivity : FlutterActivity() {
 
   override fun onAttachedToEngine(flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
       AdHuijingEventPlugin().onAttachedToEngine(flutterPluginBinding)
    }
 
}

3.在具体安卓业务中使用（这里相当于向Flutter发送了map这个参数）

 val map: MutableMap<String, Any?> = mutableMapOf("adType" to "rewardAd", "onAdMethod" to "onClick")

AdHuijingEventPlugin.sendContent(map)

2.2.2在ios实现（暂无，后续补充）

2.2.3在dart端实现

const EventChannel adEventEvent =
    EventChannel("com.liang.huijing.ad.ad_huijing/adevent");

streamSubscription = adEventEvent 
        .receiveBroadcastStream()
        .listen(onData, onError: onError, onDone: onDone)

String adType = "发过来的数据"; 
String onAdMethod= "发过来的数据"; 

onData(dynamic data) {
//这是前面安卓发过来的数据
//mutableMapOf("adType" to "rewardAd", "onAdMethod" to "onClick") 
    adType = data.adType;
    onAdMethod= data.onAdMethod;
  }
 
  /// 发生异常
  onError(dynamic error) {
  }
 
  /// 流被关闭
  onDone() {
  }

2.3 使用EventChannel（直接安卓原生写法）

使用场景：flutter监听安卓端的事件，安卓负责主动传递数据给Flutter。

2.3.1 安卓端写法

//继承 EventChannel.StreamHandler 接口，实现 onListen 和 onCancel 方法
// SensorEventListener是传感器监听需要实现的
class GyroscopeEventChannelHandler(private val context: Context) : EventChannel.StreamHandler, SensorEventListener {
    private var sensorManager: SensorManager? = null
    private var gyroscope: Sensor? = null
    private var eventSink: EventChannel.EventSink? = null // 事件通道

    // 💡 Flutter 端开始监听EventChannel 时调用
    override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
        eventSink = events
        // 获得传感器管理器
        sensorManager = context.getSystemService(Context.SENSOR_SERVICE) as SensorManager
        // 获得陀螺仪传感器
        gyroscope = sensorManager?.getDefaultSensor(Sensor.TYPE_GYROSCOPE)
        // 注册监听器
        sensorManager?.registerListener(this, gyroscope, SensorManager.SENSOR_DELAY_NORMAL)
    }

    // 💡 Flutter 端停止监听EventChannel 时调用
    override fun onCancel(arguments: Any?) {
        // 取消监听器
        sensorManager?.unregisterListener(this)
        // 释放资源
        eventSink = null
    }

    // 传感器数据变化时调用
    override fun onSensorChanged(event: SensorEvent?) {
        event?.let {
            val gyroscopeData = mapOf(
                "x" to it.values[0],
                "y" to it.values[1],
                "z" to it.values[2]
            )
            eventSink?.success(gyroscopeData)
        }
    }

    override fun onAccuracyChanged(sensor: Sensor?, accuracy: Int) {}
}


class MainActivity : FlutterActivity() {
    companion object {
        // 💡 通道名称
        const val GYROSCOPE_CHANNEL = "your_event_name"
    }

    // 💡 FlutterEngine 配置
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        EventChannel(
            flutterEngine.dartExecutor.binaryMessenger,
            GYROSCOPE_CHANNEL
        ).setStreamHandler(GyroscopeEventChannelHandler(this))
    }

2.3.2 flutter写法

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// 💡 初始化监听Channel + 监听原生端传过来的数据
class GyroscopeStreamHandler {
  // 💡 初始化监听陀螺仪的MethodChannel
  static const EventChannel _eventChannel =
      EventChannel('com.liang.huijing.ad.ad_huijing/adevent');
  static Stream<dynamic> eventStream = _eventChannel.receiveBroadcastStream();
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: GyroscopePage(),
    );
  }
}

class GyroscopePage extends StatefulWidget {
  const GyroscopePage({super.key});

  @override
  State createState() => _GyroscopePageState();
}

class _GyroscopePageState extends State<GyroscopePage> {
  Map<String, dynamic>? _gyroscopeData;
  late final StreamSubscription<dynamic> subscription;
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    //取消监听
    subscription.cancel();
  }

  @override
  void initState() {
    super.initState();
    // 💡 监听陀螺仪数据
    subscription = GyroscopeStreamHandler.eventStream.listen(
      (data) {
        setState(() {
          _gyroscopeData = data;
        });
      },
      onDone: () {
        // 流关闭时回调
      },
      onError: (error) {},
      // 流中发生错误时回调
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('陀螺仪数据'),
      ),
      body: Center(
        // 💡 显示陀螺仪数据
        child: _gyroscopeData == null
            ? const Text('无数据')
            : Text(
                'X: ${_gyroscopeData!['x']}\nY: ${_gyroscopeData!['y']}\nZ: ${_gyroscopeData!['z']}'),
      ),
    );
  }
}

3. 如何在原生代码中调用 Flutter 中的方法（MethodCallHandler）

有些时候，例如原生组件需要回调到 Flutter 中，需要在原生代码中调用 Flutter 的函数。方法还是通过建立 Channel 对象，为 channel 设置 MethodCallHandler，再在原生代码中通过同名 channel 的 invokeMethod 调用即可。

3.1 在 Flutter 中创建 channel 并实现 MethodCallHandler

void _initChannel() {
    var channel = MethodChannel("your_channel_name");
    channel.setMethodCallHandler((call) {
        // 同样也是根据方法名分发不同的函数
        switch(call.method) {
          case "your_method_name": {
            String msg = call.arguments["msg"];
            print("Native 调用 Flutter 成功，参数是：$msg");
            return "成功";
          }
        }
        return null;
    });
}

3.2 在 Android 和 iOS 端调用 Flutter 的方法

通过创建同名 channel，并执行 invokeMethod 方法，即可在原生代码中调用 Flutter 的方法了：

Android:

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
 
class MainActivity: FlutterActivity() {
 
    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */
 
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
 
        val messenger = flutterEngine.dartExecutor.binaryMessenger
 
        // 新建一个 Channel 对象
        val channel = MethodChannel(messenger, "your_channel_name")
 
        // 调用 Flutter 中的方法
        val params = mapOf(
            "msg" to "这是来自 Android 端的参数"
        )
        channel.invokeMethod("your_method_name", params)
    }
 
}

iOS:

class MainViewController: FlutterViewController {
 
 
    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */
    
    override func viewDidLoad() {
        super.viewDidLoad()
 
        // 创建渠道
        let channel = FlutterMethodChannel(name: "your_channel_name", binaryMessenger: self.binaryMessenger)
        
        // 通过渠道调用 Flutter 的方法
        var params: Dictionary<String, String> = ["msg": "这是来自 iOS 端的参数"]
        channel.invokeMethod("your_method_name", arguments: params)
    }
}

4.获取电量来源于flutter官方教程

flutter端

  static const platform = MethodChannel('samples.flutter.dev/battery');
  var model = CollectFollowViewModel();
  String _batteryLevel = 'Unknown battery level.';

  Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final result = await platform.invokeMethod<int>('getBatteryLevel');
      batteryLevel = ' $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

android端

package com.example.flutterpro.liang_flutter

import android.os.Bundle
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import org.devio.flutter.splashscreen.SplashScreen
import android.content.Context
import android.content.ContextWrapper
import android.content.Intent
import android.content.IntentFilter
import android.os.BatteryManager
import android.os.Build.VERSION
import android.os.Build.VERSION_CODES

class MainActivity: FlutterActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        // SplashScreen.show(this)
        // or enable full screen
        SplashScreen.show(this, true)
        super.onCreate(savedInstanceState)
    }
    private val CHANNEL = "samples.flutter.dev/battery"
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
                call, result ->
            if (call.method == "getBatteryLevel") {
                val batteryLevel = getBatteryLevel()

                if (batteryLevel != -1) {
                    result.success(batteryLevel)
                } else {
                    result.error("UNAVAILABLE", "Battery level not available.", null)
                }
            } else {
                result.notImplemented()
            }
        }
    }
    private fun getBatteryLevel(): Int {
        val batteryLevel: Int
        if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
            val batteryManager = getSystemService(Context.BATTERY_SERVICE) as BatteryManager
            batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
        } else {
            val intent = ContextWrapper(applicationContext).registerReceiver(null, IntentFilter(Intent.ACTION_BATTERY_CHANGED))
            batteryLevel = intent!!.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100 / intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1)
        }

        return batteryLevel
    }
}

二，使用pigeon

以下代码均来自官网

添加pigeon依赖

在根文件下面，同lib目录同级别新建文件夹pigeons，并新建文件messages.dart，如下图

并在文件中写入如下，生成路径要看自己的具体路径

import 'package:pigeon/pigeon.dart';

//运行   flutter pub run pigeon --input pigeons/messages.dart
// flutter gen-l10n
@ConfigurePigeon(PigeonOptions(
  dartOut: 'lib/pigeons/messages.dart',
  dartOptions: DartOptions(),
  // cppOptions: CppOptions(namespace: 'pigeon_example'),
  // cppHeaderOut: 'windows/runner/messages.g.h',
  // cppSourceOut: 'windows/runner/messages.g.cpp',
  // gobjectHeaderOut: 'linux/messages.g.h',
  // gobjectSourceOut: 'linux/messages.g.cc',
  // gobjectOptions: GObjectOptions(),
  kotlinOut:
      'android/app/src/main/kotlin/com/example/flutterpro/liang_flutter/Messages.g.kt',
  kotlinOptions: KotlinOptions(),
  // javaOut: 'android/app/src/main/java/io/flutter/plugins/Messages.java',
  // javaOptions: JavaOptions(),
  swiftOut: 'ios/Runner/Messages.g.swift',
  swiftOptions: SwiftOptions(),
  // objcHeaderOut: 'macos/Runner/messages.g.h',
  // objcSourceOut: 'macos/Runner/messages.g.m',
  // Set this to a unique prefix for your plugin or application, per Objective-C naming conventions.
  // objcOptions: ObjcOptions(prefix: 'PGN'),
  // copyrightHeader: 'pigeons/copyright.txt',
  // dartPackageName: 'pigeon_example_package',
))

//This is the Pigeon file that describes the interface that will be used to call from //Flutter to the host-platform.
enum Code { one, two }

class MessageData {
  MessageData({required this.code, required this.data});
  String? name;
  String? description;
  Code code;
  Map<String?, String?> data;
}

@HostApi()
abstract class ExampleHostApi {
  String getHostLanguage();

  // These annotations create more idiomatic naming of methods in Objc and Swift.
  @ObjCSelector('addNumber:toNumber:')
  @SwiftFunction('add(_:to:)')
  int add(int a, int b);

  @async
  bool sendMessage(MessageData message);
}

然后执行

flutter pub run pigeon --input pigeons/messages.dart

坑点：因为我的代码做了国际化，所以执行后会影响国际化，我重新pub get，再执行

flutter gen-l10n就好了

dart页面的代码

final ExampleHostApi _api = ExampleHostApi();

/// Calls host method `add` with provided arguments.
Future<int> add(int a, int b) async {
  try {
    return await _api.add(a, b);
  } catch (e) {
    // handle error.
    return 0;
  }
}

/// Sends message through host api using `MessageData` class
/// and api `sendMessage` method.
Future<bool> sendMessage(String messageText) {
  final MessageData message = MessageData(
    code: Code.one,
    data: <String?, String?>{'header': 'this is a header'},
    description: 'uri text',
  );
  try {
    return _api.sendMessage(message);
  } catch (e) {
    // handle error.
    return Future<bool>(() => true);
  }
}

安卓页面（kotlin） MainActivity是我们要编写的页面，下面的Messages.g.kt是生成的，无须动他


import android.os.Bundle
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import org.devio.flutter.splashscreen.SplashScreen
import android.content.Context
import android.content.ContextWrapper
import android.content.Intent
import android.content.IntentFilter
import android.os.BatteryManager
import android.os.Build.VERSION
import android.os.Build.VERSION_CODES
import ExampleHostApi
import FlutterError
import MessageData
import MessageFlutterApi
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugins.pathprovider.Messages
// #docregion kotlin-class
private class PigeonApiImplementation : ExampleHostApi {
    override fun getHostLanguage(): String {
        return "Kotlin"
    }

    override fun add(a: Long, b: Long): Long {
        if (a < 0L || b < 0L) {
            throw FlutterError("code", "message", "details")
        }
        return a + b
    }

    override fun sendMessage(message: MessageData, callback: (Result<Boolean>) -> Unit) {
        if (message.code == Code.ONE) {
            callback(Result.failure(FlutterError("code", "message", "details")))
            return
        }
        callback(Result.success(true))
    }
}
// #enddocregion kotlin-class

// #docregion kotlin-class-flutter
private class PigeonFlutterApi {

    var flutterApi: MessageFlutterApi? = null

    constructor(binding: FlutterPlugin.FlutterPluginBinding) {
        flutterApi = MessageFlutterApi(binding.getBinaryMessenger())
    }

    fun callFlutterMethod(aString: String, callback: (Result<String>) -> Unit) {
        flutterApi!!.flutterMethod(aString) { echo -> callback(echo) }
    }
}
// #enddocregion kotlin-class-flutter

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
                // SplashScreen.show(this)
        // or enable full screen
        SplashScreen.show(this, true)
        super.onCreate(savedInstanceState)
    }
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        val api = PigeonApiImplementation()
        ExampleHostApi.setUp(flutterEngine.dartExecutor.binaryMessenger, api)
    }
}