Android Flutter:手把手教你如何进行Android 与 Flutter的相互通信_flutter与android service通信-程序员宅基地

技术标签: flutter  通信  method channel  eventchannel  Android  

前言

  • Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架,正在被越来越多的开发者和组织使用,包括阿里的咸鱼、腾讯的微信等。
    示意图

  • 在日常开发中,Android Native端与Flutter端通信交互的应用场景十分常用

  • 今天,我将全面讲解Android Native端与Flutter端通信的交互的方式,旨在让你熟练掌握Android Native端与Flutter端的通信交互,包括:原理、架构、通信方式等,希望你们会喜欢。

示意图


目录

示意图


1. 通信原理

1.1 通信架构

Android 与 Flutter之间的通信消息传递媒介:平台通道(PlantformChannel)
示意图

平台通道(PlantformChannel)主要包括三种:(下面会详细介绍)

  • 基本信息通道(BasicMessageChannel)
  • 方法通道(MethodChannel)
  • 数据流通道(EventChannel)

1.2 整体设计

示意图

1.3 详细说明

  • 数据载体:ByteBuffer
  • 传递媒介:BinaryMessenger。在Android侧,BinaryMessenger是一个接口,在FlutterView中实现了该接口,通过JNI来与系统底层通信。在Flutter侧,BinaryMessenger是一个类,该类的作用 = 与类window通信,而类window才真正与系统底层沟通
  • 消息传递方式:异步
  • 线程切换:在系统底层实现,系统底层屏蔽了线程切换、数据拷贝等大量复杂操作,使得Android侧与flutter侧能方便通信

更加详细的底层原理可参考:咸鱼团队的技术文章


2. 通信交互方式

2.1 简介

Flutter定义了三种类型的通信交互传递方式,对应三种平台通道(PlantformChannel) :

  • 基本信息通道(BasicMessageChannel)
  • 方法通道(MethodChannel)
  • 数据流通道(EventChannel)

2.2 设计原理

三种通道各有用途,但设计上相近,均有三个重要成员变量:

示意图

附录:Flutter定义了两种Codec:MessageCodec、MethodCodec,介绍如下:
示意图

2.3 应用场景

针对Flutter给出的三种通道方式,我们对于Android 与 Flutter相互通信的应用场景主要包括:

  • 基本信息通道(BasicMessageChannel):用于传递字符串&半结构化的信息
  • 方法通道(MethodChannel):用于传递方法调用(method invocation)
  • 数据流通道(EventChannel): 用于数据流(event streams)的通信

下面,我将详细讲解。


3. 准备工作

在讲解上述三种通道前,我们需要将Flutter集成到当前的Android目录中

步骤1:创建 flutter module 模块

// 步骤1: cd到Android 工程目录

// 步骤2:命令行执行
flutter create -t module 模块名称
// 示例:flutter create -t module flutter_plugin

打开项目工程目录会发现,Flutter作为Module集成到Android工程中
示意图

步骤2:添加flutter module模块到当前项目

// 步骤1:在项目根目录的settings.gradle中添加:
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        "AndroidxFlutter/flutter_plugin/.android/include_flutter.groovy"
))
// 注:”工程名/flutter模块名/.android/include_flutter.groovy“

// 步骤2:在app/build.gradle文件中的dependencies添加 flutter依赖
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
 
    ......
 
    implementation project(':flutter')
}

// 步骤3:在app/build.gradle文件中的android添加如下代码
android{
....
compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

{

至此,Flutter已经集成到当前Android工程项目中


4. 详解讲解(含Demo)

下面,我将手把手带你们详细分析上述三个通道,并结合示例Demo

通道1:基本信息通道(BasicMessageChannel)

作用:传递字符串 & 半结构化的信息

步骤1:自定义BasicMessageChannel工具类

(Native端)BasicMessageChannelPlugin.java

  • 创建BasicMessageChannel对象(需传入FlutterView、channel name和codec)
  • 注册Channel对象处理的Handler
  • 定义要发送到Flutter的消息的函数
  • 接受到Flutter消息时进行回应接受的函数
// 此处以发送的数据类型是String为例
public class BasicMessageChannelPlugin implements BasicMessageChannel.MessageHandler<String> {

    private Activity activity;
    private BasicMessageChannel<String> messageChannel;

    // 步骤1:创建BasicMessageChannelPlugin实例
    static BasicMessageChannelPlugin registerWith(FlutterView flutterView) {
        return new BasicMessageChannelPlugin(flutterView); 
    }

    private BasicMessageChannelPlugin(FlutterView flutterView) {
        this.activity = (Activity) flutterView.getContext();
        // 创建BasicMessageChannel对象(需传入FlutterView、channel name和codec)
        this.messageChannel = new BasicMessageChannel<String>(flutterView, "BasicMessageChannelPlugin", StringCodec.INSTANCE);
        // 注册处理的Handler
        messageChannel.setMessageHandler(this);
    }

    // 步骤2:向Flutter发送消息
    // 传入参数:需发送的消息 & 回调处理
    void send(String str, BasicMessageChannel.Reply<String> reply) {
        messageChannel.send(str, reply);
    }

    // 步骤3:复写回调函数:接受到Flutter消息时进行回应
    @Override
    public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
        // s即为Flutter发送过来的消息
        System.out.println("Native:收到了"+s);
        // 接受到Flutter信息后,采用reply实例将返回值返回到Flutter层
        reply.reply("Native确认了" + s);
    }
}

步骤2:定义Flutter要发送到Native端的消息 & 接受消息的函数方法,及其对应消息内容

(Flutter端)main.dart

/**
 *  导入库
 **/
import 'package:flutter/material.dart'; // Material UI组件库
import 'dart:ui';

import 'package:flutter/services.dart'; // 引入后可以使用window对象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native传来的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

/// 该方法用于判断原生界面传递过来的路由值,加载不同的页面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 当route值为flutterView时显示
      return FlutterContactPage();

    default:  // 默认的路由值为 '/',所以在default情况也需返回页面,否则dart会报错
      return Container(
        child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.red,
      );
  }
}

class FlutterContactPage extends StatelessWidget {
  // 注册对应的channel,即自定义的BasicMessageChannel
  // 注:要保证channel name、codec与原生层一致
  BasicMessageChannel<String> _messageChannel =
  BasicMessageChannel("BasicMessageChannelPlugin", StringCodec());

  @override
  Widget build(BuildContext context) {

    // 向Native发送消息
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: RaisedButton(// 为了展示使用按钮,通过channel传输消息出去,同时将原生层返回的消息打印出来
        onPressed: () {
          _messageChannel
              .send('Flutter发起第二次握手') // 发送的消息
              .then((str) { // Native针对该消息返回的消息
            print('Flutter:收到了 $str');
          });
        },
        child: Text('Send Message to Native'),
      ),
    );

    // 接受Native发送过来的消息
    _messageChannel.setMessageHandler((message) => Future<String>(() {
      print("Flutter:接受到了:" + message); // message即为Native发送过来的消息
      return "Flutter确认的"+ message; // Flutter针对Native发送的消息进行返回
    }));
  }
}

步骤3:(Native端)连接Native和Flutter的中间层

MainActivity.java

  • 创建FlutterView组件
  • 创建 & 注册MethodChannel
  • 发送到Flutter的消息 & 接受消息的消息内容
  • 发起要调用Flutter端的请求
public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;
    private BasicMessageChannelPlugin mBasicMessageChannelPlugin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 通过Flutter.createView()创建FlutterView组件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");

        // 将Flutter视图添加到原生布局中的Fragment中(为了方便显示,此处采用按钮触发形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 将flutter添加到布局中
                mBasicMessageChannelPlugin = BasicMessageChannelPlugin.registerWith(flutterView); // 关联通道
                // 向Flutter发送消息
                mBasicMessageChannelPlugin.send("Native发起第一次握手",new BasicMessageChannel.Reply<String>(){
                    @Override
                    public void reply(String s){
                        System.out.println("Native:收到了" + s);
                    }
                });
            }
        });
    }
}

示意图

示意图


通道2:方法通道(MethodChannel)

作用:传递方法调用(method invocation),即Native与Flutter相互调用对方的方法(具备返回值)

步骤1:自定义MethodChannel工具类(Native端)

MethodChannelPlugin.java

  • 创建MethodChannel实例(传入channel name)
  • 注册需处理的对应Handler
  • 定义要通知Flutter端调用的方法
  • 接受Flutter端要调用的方法
public class MethodChannelPlugin implements MethodChannel.MethodCallHandler {

    private Activity activity;
    private MethodChannel channel;

    // 1. 创建MethodChannel实例(传入channel name)
    public static MethodChannelPlugin registerWith(FlutterView flutterView) {
        MethodChannel channel = new MethodChannel(flutterView, "MethodChannelPlugin");
        MethodChannelPlugin methodChannelPlugin = new MethodChannelPlugin((Activity) flutterView.getContext(), channel);
        channel.setMethodCallHandler(methodChannelPlugin);// 2. 注册处理的Handler
        return methodChannelPlugin;
    }

    private MethodChannelPlugin(Activity activity, MethodChannel channel) {
        this.activity = activity;
        this.channel = channel;

    }
    // 2. 用于调用Flutter端方法,无返回值
    // method为需调用的方法名
    public void invokeMethod(String method, Object o) {
        channel.invokeMethod(method, o);
    }

    // 3. 用于调用Flutter端方法,有返回值
    // method为需调用的方法名、返回值在result内
    public void invokeMethod(String method, Object o, MethodChannel.Result result) {
        channel.invokeMethod(method, o, result);
    }

    // 4. 复写onMethodCall():根据Flutter的要求,调用Native方法
    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        switch (methodCall.method) {
            case "FlutterInvokeFlutter":// Flutter要求Native调用的方法是FlutterInvokeFlutter

                System.out.println("Native收到了Flutter的请求方式是:"+methodCall.method);
                System.out.println("Native收到了Flutter的请求参数是:"+methodCall.arguments);
                result.success("Native收到了Flutter的请求方法:" + methodCall.method);// 给flutter端的返回值
                break;
            default:
                result.notImplemented(); // 若无找到对应的方法名,则通过该方法返回异常
                break;
        }
    }
}

步骤2:(Flutter端)定义要通知Native调用的方法 & 接受Native端要调用的方法

main.dart

/**
 *  导入库
 **/
import 'package:flutter/material.dart'; // Material UI组件库
import 'dart:ui';

import 'package:flutter/services.dart'; // 引入后可以使用window对象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),
      // Native传来的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 该方法用于判断原生界面传递过来的路由值,加载不同的页面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 当route值为flutterView时显示
      return FlutterContactPage();

    default: // 默认的路由值为 '/',所以在default情况也需返回页面,否则dart会报错
      return Container(
        child: Center(
            child: Text(
          '路由值 = deafult',
          style: TextStyle(fontSize: 20.0, color: Colors.black),
        )),
        color: Colors.red,
      );
  }
}

class FlutterContactPage extends StatelessWidget {
  // 注册对应的MethodChannel
  // 注:要保证channel name、codec与原生层一致
  MethodChannel _methodChannel = MethodChannel("MethodChannelPlugin");

  @override
  Widget build(BuildContext context) {
    // 1. 根据Native端的要求,调用对应方法
    _methodChannel.setMethodCallHandler((handler) => Future<String>(() {
          print("Native端要调用的方法和参数是:${handler}");
          // 监听native发送的方法名及参数
          switch (handler.method) {
            case "AndroidInvokeFlutter": // Native要求Flutter调用的方法是send()
              _send(handler.method, handler.arguments); //handler.arguments表示native传递的方法参数
              break;
          }
          return "Flutter确认消息";
        }));

    // 2. 通知Native端要调用哪个方法
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: RaisedButton(
        // 为了展示所以使用按钮,通过channel告诉Native要调用哪个方法
        onPressed: () {
          _methodChannel
              .invokeMethod("FlutterInvokeFlutter", "carsonho") // 参数1=告诉Native要调用的方法名,参数2 = 传递的参数
              .then((result) { // invokeMethod().then() 来处理正常结束的逻辑(获得返回值)
            print('$result'); 
                 // 成功:通过result.success 返回值
                // 异常:通过 result.error 返回异常信息,可通过catchError 处理异常
          });
        },
        child: Text('Send Message to Native'),
      ),
    );
  }

  // 需发送的方法
  void _send(method, arg) {
    print('Flutter根据Native端的要求调用了方法$method');
    print('该方法的参数是:$arg');
  }
}

步骤3:(Native端)连接Native和Flutter的中间层

MainActivity.java

  • 创建FlutterView组件
  • 创建 & 注册MethodChannel
  • Native端定义要求Flutter端调用的方法
  • 发起要调用Flutter端的请求
public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;
    private MethodChannelPlugin mMethodChannelPlugin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 通过Flutter.createView()创建FlutterView组件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");

        // 将Flutter视图添加到原生布局中的Fragment中(为了方便显示,此处采用按钮触发形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 将flutter添加到布局中
                mMethodChannelPlugin = MethodChannelPlugin.registerWith(flutterView); // 关联通道
                // Native告诉Flutter要调用的方法是send()
                mMethodChannelPlugin.invokeMethod("AndroidInvokeFlutter","carsonho");
            }
        });
    }
}

示意图

示意图


通道3:数据流通道(EventChannel)

作用:用于数据流(event streams)的通信,即:

  • 原生层:通过 sink 不断添加数据 & 发送多个信息到 Flutter 层
  • Flutter层:接收到数据的变化就会作出新相应的处理,表现为一个stream

步骤1:自定义EventChannel工具类(Native端)

EventChannelPlugin.java

  • 创建EventChannel实例(传入channel name)
  • 定义Native发送数据、停止发送 & 发送失败函数
  • 复写Flutter端开始监听时的回调函数onListen()
  • 复写Flutter端不再接受监听时的回调函数onCancel()
public class EventChannelPlugin implements EventChannel.StreamHandler {

    private EventChannel.EventSink eventSink;
    private Activity activity;

    // 1. 创建 & 注册EventChannel
    static EventChannelPlugin registerWith(FlutterView flutterView) {
        EventChannel channel = new EventChannel(flutterView, "EventChannelPlugin");
        EventChannelPlugin plugin = new EventChannelPlugin(flutterView);
        channel.setStreamHandler(plugin);//设置对应Handler
        return plugin;
    }

    private EventChannelPlugin(FlutterView flutterView) {
        this.activity = (Activity) flutterView.getContext();
    }

    // Native端开始发送数据
    void send(Object params) {
        if (eventSink != null) {
            eventSink.success(params);
            System.out.println("sink success");
        }
    }
    // Native端停止发送数据
    void cancel() {
        if (eventSink != null) {
            eventSink.endOfStream();
        }
    }

    // Native端发送数据失败
    void sendError(String str1, String str2, Object params) {
        if (eventSink != null) {
            eventSink.error(str1, str2, params);
        }
    }

    // 回调时机:Flutter端开始监听该channel时
    // 说明通道已经建立好,Native可以开始发送数据了
    // 参数1 = Flutter端初始化EventChannel时返回的值,仅此一次
    // 参数2 = 传数据的载体
    @Override
    public void onListen(Object o, EventChannel.EventSink eventSink) {
        this.eventSink = eventSink; //此处注意时序,必须得该方法回调后,Native端才允许发送数据
        System.out.println( "onListen():eventSink = " + eventSink);
    }

    // Flutter端不再接收数据时回调
    @Override
    public void onCancel(Object o) {
        System.out.println("onCancel()");
        this.eventSink = null;
    }
}

步骤2:Flutter要展示的布局(Flutter)

main.dart

  • 设置展示的布局
  • 监听Native什么时候发送数据
  • 设置正常接受数据、错误接受数据等方法回调
/**
 *  导入库
 **/
import 'package:flutter/material.dart'; // Material UI组件库
import 'dart:ui';
import 'dart:async';
import 'package:flutter/services.dart'; // 引入后可以使用window对象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),
      // Native传来的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 该方法用于判断原生界面传递过来的路由值,加载不同的页面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 当route值为flutterView时显示
      return FlutterContactPage();

    default: // 默认的路由值为 '/',所以在default情况也需返回页面,否则dart会报错
      return Container(
        child: Center(
            child: Text(
          '路由值 = deafult',
          style: TextStyle(fontSize: 20.0, color: Colors.black),
        )),
        color: Colors.red,
      );
  }
}

class FlutterContactPage extends StatefulWidget {
  @override
  _FlutterContactPageState createState() => _FlutterContactPageState();
}

class _FlutterContactPageState extends State<FlutterContactPage> {
  // 注册对应的MethodChannel
  // 注:要保证channel name、codec与原生层一致
  EventChannel _eventChannelPlugin = EventChannel("EventChannelPlugin");
  StreamSubscription _streamSubscription;

  // 在initState状态下设置监听Native端发送
  @override
  void initState() {
    _streamSubscription = _eventChannelPlugin
        .receiveBroadcastStream() // 对应Native端onListen()的第一个参数,可不传
        .listen(_onToDart, onError: _onToDartError, onDone: _onDone);
    // 开启监听,并分别传入:
    // _onToDart方法:正常接收到Native数据时调用
    // _onToDartError方法:接收Native数据异常时调用
    // _onDone方法:发送数据完成时调用
    super.initState();
  }

  // Native端发送正常数据回调方法,每一次发送都会调用
  void _onToDart(message) {
    print('正常接收:$message');
  }
  // Native出错时回调方法
  void _onToDartError(error) {
    print('错误接收:$error');
  }
  // 当native发送数据完成时调用的方法
  void _onDone() {
    print("消息传递完毕");
  }

  @override
  Widget build(BuildContext context) {
    // 2. 通知Native端要调用哪个方法
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Page'),
      ),
      body: RaisedButton(
        child: Text('begin counting'),
      ),
    );
  }
}

步骤3:连接Native和Flutter的中间层

MainActivity.java

  • 创建FlutterView组件
  • 创建 & 注册EventChannel
  • Native端定义要求Flutter端调用的方法
  • 发起要调用Flutter端的请求
public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;
    private EventChannelPlugin mEventChannelPlugin;
    private int count;
    private Timer mTimer;
    private TimerTask mTimertask;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 1. 通过Flutter.createView()创建FlutterView组件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
        // 2. 关联通道
        mEventChannelPlugin = EventChannelPlugin.registerWith(flutterView);

        // 3. 将Flutter视图添加到原生布局中的Fragment中(为了方便显示,此处采用按钮触发形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 将flutter添加到布局中

                // 4. 为了方便展示,采用计时器Timer发送一系列数据到Flutter
                count = 0;
                mTimer = new Timer(true);
                mTimertask = new TimerTask() {
                    public void run() {

                        // 回到主线程后Native发送数据
                        Handler mainHandler1 = new Handler(Looper.getMainLooper());
                        mainHandler1.post(new Runnable() {
                            @Override
                            public void run() {
                                mEventChannelPlugin.send(count++);
                            }
                        });

                        // 数到5时停止
                        while (count == 5) {

                            // 回到主线程后Native停止发送数据
                            Handler mainHandler2 = new Handler(Looper.getMainLooper());
                            mainHandler2.post(new Runnable() {
                                @Override
                                public void run() {
                                    mEventChannelPlugin.cancel();
                                }
                            });
                            // 关闭计时器
                            mTimer.cancel();
                            mTimer = null;
                            mTimertask.cancel();
                            mTimertask = null;
                        }
                    }
                };
                // 开启计时器(发送数据)
                mTimer.schedule(mTimertask, 1, 1000);
            }
        });
    }
}

示意图

示意图

  • 至此,关于Android通过三种通道与Flutter通信讲解完毕。
  • 下面,我再用讲解一个较为基础的场景:在Android中显示Flutter界面

5. 基础场景:在Android中显示Flutter界面

此处分两种方式:

  1. Flutter界面显示在Activity :Flutter.createView()
  2. Flutter界面显示在Fragment:使用Flutter.createFragment()

方式1:显示在Activity

使用Flutter.createView(),步骤如下:

步骤1:Android端设置好跳转 & 显示逻辑

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 1. 通过Flutter.createView()创建FlutterView组件方式
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
        // 参数说明:
        // 参数1:Activity activity,Activity实例
        // 参数2:final Lifecycle lifecycle:,定义具有Android生命周期的对象
        // 参数3:final String initialRoute:,初始化的视图路由名称,后续会根据该路由进行显示Flutter视图

        // 2. 将Flutter视图添加到原生布局中(为了方便显示,此处采用按钮触发形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                addContentView(flutterView, layoutParams); // 将flutter添加到布局中
            }
        });
    }
}

步骤2:在Flutter端中设置好要显示的布局

flutter_plugin / lib / main.dart

/**
 *  导入库
 **/
import 'package:flutter/material.dart'; // Material UI组件库
import 'dart:ui'; // 引入后可以使用window对象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native传来的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 该方法用于判断原生界面传递过来的路由值,加载不同的页面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 当route值为flutterView时显示
      return Container(
        child: Center(child: Text('路由值 = flutterView',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.green,
      );

    default:  // 默认的路由值为 '/',所以在default情况也需返回页面,否则dart会报错
      return Container(
        child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.red,
      );
  }
}

效果图

示意图

方式2:显示在Fragment

使用Flutter.createFragment(),步骤如下

步骤1:Android端设置好跳转 & 显示逻辑

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ViewGroup.LayoutParams layoutParams;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 将Flutter视图添加到原生布局中的Fragment中(为了方便显示,此处采用按钮触发形式)
        btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                getSupportFragmentManager().beginTransaction()
                        .add(R.id.fragment_container, Flutter.createFragment("flutterView"))
                        .commit();
                
                btn.setVisibility(View.GONE);
            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn"
        android:text="start"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 用于加载 fragment -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

步骤2:在Flutter端设置好布局显示

flutter_plugin / lib / main.dart

/**
 *  导入库
 **/
import 'package:flutter/material.dart'; // Material UI组件库
import 'dart:ui'; // 引入后可以使用window对象

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native传来的route = window.defaultRouteName
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

// 该方法用于判断原生界面传递过来的路由值,加载不同的页面
Widget _buildWidgetForNativeRoute(String route) {
  switch (route) {
    case 'flutterView': // 当route值为flutterView时显示
      return Container(
        child: Center(child: Text('路由值 = flutterView',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.green,
      );

    default:  // 默认的路由值为 '/',所以在default情况也需返回页面,否则dart会报错
      return Container(
        child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
        color: Colors.red,
      );
  }
}

至此,关于Android 与 Flutter的相互通信讲解完毕。


6. 总结

  • 本文全面介绍了Android Native端与Flutter端的通信方式。
  • 接下来推出的文章,我将继续讲解Flutter的相关知识,包括使用语法、实战等,感兴趣的读者可以继续关注我的博客哦:Carson_Ho的Android博客

请帮顶 / 评论点赞!因为你们的赞同/鼓励是我写作的最大动力!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/carson_ho/article/details/110914891

智能推荐

WITH Clause : Subquery Factoring_subquery_factoring_clause-程序员宅基地

文章浏览阅读729次。转自:http://www.oracle-base.com/articles/misc/with-clause.php#TopWITH Clause : Subquery FactoringSubquery FactoringMATERIALIZE HintPL/SQL Declaration SectionRelated articles.WITH Cla_subquery_factoring_clause

实验:防火墙 USG V6000 的配置_华为ugs6000 配置交换机-程序员宅基地

文章浏览阅读846次。实验:防火墙 USG V6000 的配置一、ensp命令行状态下的配置(1)配置云:设置物理机VMnet1网卡ip地址为:192.168.0.2/24对云进行配置:相关配置:[USG6000V1]int g0/0/0[USG6000V1-GigabitEthernet0/0/0]service-manage http permit[USG6000V1-GigabitEthernet0/0/0]service-manage https permit(2)启动所有设备。(3)设备_华为ugs6000 配置交换机

云+X案例展 | 传播类:九州云 SD-WAN 携手上海电信,助力政企客户网络重构换新颜...-程序员宅基地

文章浏览阅读861次。戳蓝字“CSDN云计算”关注我们哦!本案例由九州云投递并参与评选,CSDN云计算独家全网首发;更多关于【云+X 案例征集】的相关信息,点击阅读原文丨挖掘展现更多优秀案例,为不同行业领域带..._sd-wan云网络 应用案例

开源啦!基于RT-Thread的百度语音识别——录音功能的实现(三)-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏7次。本期分享来自RT-Thread的社区小伙伴霹雳大乌龙,如果你也有文章愿意分享/希望获得官方的写作指导,可以发送文章/联系方式邮件至邮箱:[email protected]..._rtthread audio驱动 pipe

Twitter的用户推荐算法_twitter推荐-程序员宅基地

文章浏览阅读1w次。关于Twitter的用户推荐算法,Quora上的文章有一个说明。算法基本分4步:First and foremost, we looked at who your friends follow, who they talk to, who they RT as gauges of your interest.Then we applied either positive/negative_twitter推荐

sso saml_使用签名的SAML断言实现身份提供者发起的SSO-程序员宅基地

文章浏览阅读2.4k次。随着越来越多的机构和组织在线提供服务和协作,员工需要访问内部部署和基于云的应用程序来进行日常工作。 这就要求实现单一登录(SSO)基础结构,使用户可以登录一次即可访问所有授权的内部和外部资源及应用程序。 具有大量Salesforce用户群的组织可以利用其现有的SSO基础结构将其实施到Force.com平台,该平台支持由外部SSO身份提供商提供的联合身份管理。 Force.com平台支持SSO的..._缺少 saml 持有者断言提供者签名证书

随便推点

[软件工具][原创]使用软件实现labelme批量json_to_dataset最简单方法_修改labelme_json_to_dataset转换的颜色-程序员宅基地

文章浏览阅读978次。lableme批量转换工具可以很轻松实现将labelme标注的json文件转化为5个文件,即img.png、label.png、info.yaml、labels_name.txt以及label_viz.png。其中软件不需要安装python环境也不需要安装labelme这个软件,因为软件已经剥离labelme核心代码,全部嵌入软件功能中。大家都知道labelme的labelme_json_to_dataset都是针对单个文件转化,但是细心读代码会发现这个对于批量转化有个问题就是不同json转化的同一个目标颜_修改labelme_json_to_dataset转换的颜色

[C#][转载]如何在Ubuntu 18.04上安装Mono Mono develop_mono-dev ubuntu-程序员宅基地

文章浏览阅读578次。如何在Ubuntu 18.04上安装MonoMono是一个基于ECMA / ISO标准开发和运行跨平台应用程序的平台。它是Microsoft .NET框架的免费开源实现。本教程介绍了如何在Ubuntu 18.04上安装Mono。先决条件这些说明假定您以root用户或具有sudo特权的用户身份登录。在Ubuntu上安装Mono在Ubuntu 18.04上安装Mono的最简单和建议的方法是从Mono的存储库中安装它。这是一个相对简单的过程,只需几分钟。 首先安装必要的软件包:._mono-dev ubuntu

最快60秒完成新冠病毒核酸对比 阿里云向社会免费开放基因计算服务_新冠蛋白质序列比对-程序员宅基地

文章浏览阅读1.4k次。全球疫情肆虐,各大科技公司都在竭尽全力抗击疫情。3月13日,阿里云对外宣布,将向医疗科研机构、疾控中心等一线病毒研究机构免费开放基因计算服务,可大幅提升宏基因组测序、疫苗研发相关的处理效率,最快只需60秒即可完成新冠病毒的核酸对比工作。实时荧光定量PCR(RT-PCR)和宏基因组测序(mNGS)是目前用于确诊新型冠状病毒感染的常见方法,PCR操作流程简单、成本低,但准确率较低,mNGS虽然操作..._新冠蛋白质序列比对

cmake 链接 纯C编写的 *.a 静态库_cmake 链接.a-程序员宅基地

文章浏览阅读3.7k次。#cmake 配置if(CMAKE_SIZEOF_VOID_P EQUAL 8) set(_lib_suffix 64)else() set(_lib_suffix 32)endif()include_directories(${CMAKE_SOURCE_DIR}/lib) find_library(XXX_LIB xxxx${_lib_suffix}.a ${C..._cmake 链接.a

沃丰科技全方位赋能智能化体验交流会武汉站:基于AI技术,助力企业数字化转型_施耐德胡慧-程序员宅基地

文章浏览阅读160次。2021年4月23日,由沃丰科技主办的“2021 沃丰科技全方位赋能智能化体验交流会”在武汉成功举行。现场座无虚席,有近百名观众参会,沃丰科技副总裁傅亮、施耐德电气质量与客户满意中心卓越运营部门经理胡慧、统信软件交付中心总监韩辉、沃丰科技产品总监方晓东、沃丰科技产品总监姚广、沃丰科技客户体验咨询专家赵庐山就如何全方位赋能企业智能化做了分享。交流会现场随着新时代新技术不断发展,越来越多的企业将数字化转型作为公司的重要战略方向,积极探索数智化赋能企业新发展的有效路径。沃丰科技多年深耕智能客户体验领域,在数_施耐德胡慧

【超详细讲解】linux安装anaconda和pytorch及常见报错_anaconda3-2021.11-linux-x86_64.sh: 516: syntax err-程序员宅基地

文章浏览阅读5.6k次,点赞12次,收藏22次。一.首先连接服务器在powershell,gitbash或者vscode的命令行中输入命令:ssh 用户名@服务器IP地址二.安装conda//获取安装包wget https://repo.continuum.io/archive/Anaconda3-5.0.1-Linux-x86_64.sh//安装anaconda base命令bash Anaconda3-5.0.1-Linux-x86_64.sh//添加环境变量echo 'export PATH="~/anacond._anaconda3-2021.11-linux-x86_64.sh: 516: syntax error: "(" unexpected (expect

推荐文章

热门文章

相关标签