Flutter 很好的支持了以独立页面、甚至可以通过UI片段的方式集成到现有的应用中，即所谓的混合开发模式。

统一管理模式：
将原生工程作为Flutter工程的子工程，由Flutter进行统一管理。
image.png
分离模式：
将flutter工程作为原生工程的子模块，维持原有的原生工程管理方式不变
image.png
image.png

Flutter 工程模式

image.png

  • Flutter APP：构建一个标准的FlutterAPP 统一管理的模式，包含Dart层和平台层
  • Flutter Plugin：Flutter平台插件，包含Dart层和Native平台层的实现
  • Flutter Package：纯Dart插件工程，不依赖Flutter，仅包含Dart层的实现，通常用来定义一些公共库
  • Flutter Module：创建一个Flutter模块，以模块的形式分别嵌入原生项目
  • Flutter Skeleton：自动生成Flutter模板，提供常用框架

通过命令的方式创建：
image.png

Flutter - Native 消息通道

  • BasicMessageChannel： 用于传递字符串和半结构化的消息

Flutter 端的实现：

  1. static const _channel = BasicMessageChannel("messageChannel", StringCodec());  
  2. @override
  3. void initState() {
  4.   super.initState();
  5.   //注册一个接收回调，并且返回信息
  6.   _channel.setMessageHandler((message) async {
  7.     print("receive message:$message");
  8.     setState(() {
  9.       _message = message;
  10.     });
  11.     return "ACK from dart";
  12.   });
  13. }
  15. //向Native发送消息
  16. Future<void> _sendMessage() async {
  17.   String? message = await _channel.send("hello from dart");
  18.   print("Send Message:$message");
  19.   }

Android端的实现：

  1.         //创建channel
  2.         val channel = BasicMessageChannel(
  3.             flutterEngine.dartExecutor.binaryMessenger,
  4.             "messageChannel",
  5.             StringCodec.INSTANCE
  6.         )
  7.         //接收消息的回调,并回复
  8.         channel.setMessageHandler { message, reply ->
  9.             Log.e("TAG", "configureFlutterEngine: $message")
  10.             reply.reply("my android to flutter->")
  11.             Handler(Looper.getMainLooper())
  12.                 .postDelayed({
  13.                     //3.发送消息
  14.                     channel.send("Hello World form Android")
  15.                 },1000)
  16.         }

  • EventChannel：用于数据流Stream的通信方式

    1.   //注册EventChannel回调
    2.   _eventChannel.receiveBroadcastStream().listen((event) {
    3.     print("Receive event:$event");
    4.     setState(() {
    5.       _message = event;
    6.     });
    7.   }, onError: (error) {
    8.     print('Receive error:$error');
    9.   }, cancelOnError: true);

  • MethodChannel:用于传递方法调用 (主要的用法)

image.png