先盗一张图

image.png

我们需要实现的效果

Flutter 传输数据到 Android Native

Flutter 跳转到Android Native界面

Android Native 给 Flutter 传输数据

GIF 2020-7-8 15-56-45.gif

看GIF图

第一项按钮点击跳转到原生Activity 后,点击中间文字会改变测试界面的第三项按钮文字。

第二项点击后是Flutter 传递到原生界面的一个Map数据

我们来看代码实现。

首先Flutter代码

import 'dart:async';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {

runApp(MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('测试界面'),

),

body: TestWidget(),

),

));

}

class TestWidget extends StatefulWidget {

@override

State createState() {

return TestState();

}

}

class TestState extends State {

//获取插件与原生Native的交互通道

static const sendToNative = const MethodChannel('com.guoteng.native.receive/plugin');

//具体要做的功能

Future _startToNativeActivity() async {

String result = await sendToNative.invokeMethod('startToEditActivity');

print(result);

}

// 具体要做的功能

Future _sendDataToNative() async {

Map map = {"flutter": "我是flutter 传递过来的"};

String result = await sendToNative.invokeMethod('mapData', map);

print(result);

}

//接收来自本地的消息

static const receiveFromNative = const EventChannel('com.guoteng.native.send/plugin');

StreamSubscription _streamSubscription;

var _currentCount;

@override

void initState() {

super.initState();

//开启监听

if (_streamSubscription == null) {

_streamSubscription = receiveFromNative.receiveBroadcastStream().listen((Object event) {

setState(() {

_currentCount = event;

print("ChannelPage: $event");

});

}, onError: (Object error) {

setState(() {

_currentCount = "计时器异常";

print(error);

});

});

}

}

@override

void dispose() {

super.dispose();

//取消监听

if (_streamSubscription != null) {

_streamSubscription.cancel();

}

}

@override

Widget build(BuildContext context) {

return Container(

child: Column(

children: [

RaisedButton(

child: Text('跳转到原生activity'),

onPressed: () {

_startToNativeActivity();

},

),

RaisedButton(

child: Text('让原生接收到数据'),

onPressed: () {

_sendDataToNative();

},

),

RaisedButton(

child: Text('原生传递过来的值$_currentCount'),

onPressed: () {},

)

],

));

}

}

android 端 MainActivity 代码

package com.example.flutterapp

import android.os.Bundle

import io.flutter.app.FlutterActivity //这里注意,使用io.flutter.app下的FlutterActivity

class MainActivity : FlutterActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

//获取到自身的Registry

val registry = flutterView.pluginRegistry;

//注册插件

FlutterPluginFtoA.registerWith(registry.registrarFor(FlutterPluginFtoA.A_TO_F_CHANNEL));

FlutterPluginAtoF.registerWith(registry.registrarFor(FlutterPluginAtoF.F_TO_A_CHANNEL));

}

}

package com.example.flutterapp;

import android.app.Activity;

import io.flutter.plugin.common.EventChannel;

import io.flutter.plugin.common.PluginRegistry;

/**

* android 本地代码传数据到Flutter

*/

public class FlutterPluginAtoF implements EventChannel.StreamHandler {

public static final String F_TO_A_CHANNEL = "com.guoteng.native.send/plugin";

private static FlutterPluginAtoF instance;

private EventChannel.EventSink events;

public static FlutterPluginAtoF getInstance() {

return instance;

}

public static void registerWith(PluginRegistry.Registrar registrar) {

EventChannel eventChannel = new EventChannel(registrar.messenger(), F_TO_A_CHANNEL);

instance = new FlutterPluginAtoF();

eventChannel.setStreamHandler(instance);

}

@Override

public void onListen(Object arguments, EventChannel.EventSink events) {

this.events = events;

}

@Override

public void onCancel(Object arguments) {

}

public void sendEventData(Object data){

if(events != null){

events.success(data);

}

}

}

package com.example.flutterapp;

import android.app.Activity;

import android.content.Intent;

import android.widget.Toast;

import androidx.annotation.NonNull;

import io.flutter.plugin.common.MethodCall;

import io.flutter.plugin.common.MethodChannel;

import io.flutter.plugin.common.PluginRegistry;

/**

* 从Flutter传递到本地的插件类

*/

public class FlutterPluginFtoA implements MethodChannel.MethodCallHandler {

//这里要注意和Flutter使用的相同

public static final String A_TO_F_CHANNEL = "com.guoteng.native.receive/plugin";

private Activity handlerActivity;

public FlutterPluginFtoA(Activity activity) {

this.handlerActivity = activity;

}

public static void registerWith(PluginRegistry.Registrar registrar) {

//主要的方法MethodChannel

MethodChannel methodChannel = new MethodChannel(registrar.messenger(), A_TO_F_CHANNEL);

FlutterPluginFtoA instance = new FlutterPluginFtoA(registrar.activity());

methodChannel.setMethodCallHandler(instance);

}

/**

* @param call 回调过来的Flutter 的方法 和 参数

* @param result 通过result 可以返回数据给Flutter

*/

@Override

public void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {

//和原生交互返回

switch (call.method) {

case "showToast":

//接收Flutter 传递过来的参数

Object arguments = call.arguments;

Toast.makeText(handlerActivity, "收到Flutter传过来的" + arguments, Toast.LENGTH_SHORT).show();

break;

case "startToEditActivity":

//跳转到原生界面

Intent editActivityIntent = new Intent(handlerActivity, EditH5Activity.class);

handlerActivity.startActivity(editActivityIntent);

result.success("startOk");

break;

case "mapData":

//Flutter 传递过来的数据

//解析参数

String text = call.argument("flutter");

Toast.makeText(handlerActivity, "接收: " + text, Toast.LENGTH_SHORT).show();

break;

default:

break;

}

}

}

Flutter 跳转到Native的界面代码

package com.example.flutterapp

import android.app.Activity

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.view.View

import android.widget.TextView

class EditH5Activity : Activity() {

private var currentCount = 0;

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_edit_h5)

val tvIntentTxt = findViewById(R.id.tvIntentTxt)

tvIntentTxt.setOnClickListener(View.OnClickListener {

FlutterPluginAtoF.getInstance().sendEventData(""+ currentCount++); //通过这个发送消息到Flutter

})

}

}

php和dart交互,Flutter 之和原生交互相关推荐

  1. 阿衰java免费版_flutter plugin之路:flutter与原生交互传值OC/java版(一)

    说在前头:flutter虽然很牛掰,但是目前很多功能或者插件的实现其实还是需要通过原生来实现,然后通过flutter和原生的交互传值实现数据的交换. -本篇是flutter调用原生方法,然后原生执行完 ...

  2. flutter和原生交互

    一.Flutter中使用Android Studio打开原生文件 选中Android目录--右键--选中flutter---Open for Editing in Android Studio 问题1 ...

  3. Flutter 与 原生交互(Android),关于Android开发的面试经验总结

    接收 */ void receiveMessage(){ messageChannel.setMessageHandler((message) async{ print(message); retur ...

  4. 包红b2c模块 flutter与原生交互

    一.flutter提供的FlutterMethodChanel与原生(ios&android)进行交换 flutter与原生交互图: ios注册flutter调用通道 //oc 注册flutt ...

  5. Flutter 与 原生交互(Android),安卓移动开发背景换色

    */ public static String CHANNEL = "com.mmd.flutterapp/plugin"; private static String ACTIO ...

  6. Flutter开发Flutter与原生OC、Java的交互通信-2(48)

    我们上一篇主要讲了Flutter与原生OC.Java的交互通信的机制:平台通道 只实现了Flutter 主动调用OC.Java的方向的通信.并没有实现OC.Java端主动调用Flutter的实现.这里 ...

  7. Flutter开发Flutter与原生OC、Java的交互通信-1(47)

    我的文章讲过:(0085)iOS开发之OC与JS交互高级用法(JavaScriptCore) 前言:我们知道OC 在UIWebView 加载 H5中,常常需要OC 与 H5 之间进行交互调用.采取的方 ...

  8. Flutter与Android原生交互

    记录一下小白的学习之路,图片都是走过的坑 文末附demo地址 文章目录 创建project Android端(native) Flutter端 Android调用flutter 创建project 首 ...

  9. android WebView通过js方法与原生交互

    根据WebView里面的链接字符串跳转Activity activityBaseWebAddWebView.setWebViewClient(new WebViewClient() {@Overrid ...

  10. h5 做app时和原生交互的小常识。

    距离上次随笔或许有半年了吧,最近在用hybrid模式开发移动app,所以就简单的说说用h5技术开发app时候,做原生交互的几个小常识: 一.拨打电话或者发送短信: <a href="t ...

最新文章

  1. AI 场景的价值体现——视觉 AI 技术落地实践
  2. JAVA并发编程学习笔记------FutureTask
  3. Java反射最佳实践
  4. 【数据竞赛】ICCV 2021 竞赛汇总
  5. 计算机面试数据库基本知识,面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)...
  6. php的create_function、function_exists判断函数是否存在
  7. html5 web storage攻击,HTML5安全风险详析之二:Web Storage攻击
  8. 学习Scala:使用try-catch表达式处理异常
  9. SentinelResource注解配置中_客户自定义限流处理_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0046
  10. split(v1,v2)用于把一个字符串分割成字符串数组
  11. java 留言板_java web实现简单留言板功能
  12. ContextCaptureMaster/Smart3D 集群简单配置
  13. SMARTS决策引擎技术白皮书
  14. InstallShield打包程序
  15. electron开发客户端注意事项(兼开源个人知识管理工具“想学吗”)
  16. Linux究竟值多少钱?
  17. vscode Android调试
  18. 《软件方法》第8章 分析 之 分析类图(2)
  19. VSCode用Run code插件配置python环境(win10)
  20. 9张思维导图学懂Javascript

热门文章

  1. 图像增强处理之:同态滤波与Retinex算法(一)同态滤波
  2. leetcode之回文链表
  3. 简单Java类和数据库操作及javafx的结合小项目(二)
  4. Ubuntu urllib2.URLError:urlopen error unknown url type:https
  5. 2017/2/25 学习笔记
  6. 在mysql中修改表名的sql语句
  7. zend studio结合xdebug、xdebug-help(chrome插件)调试PHP程序
  8. easyui小清新俺也晒晒 视频管理软件bs项目
  9. 【Tensorflow、Keras】关于Reshape层小结(部分问题未解决)
  10. 【LeetCode】【字符串】题号:*58. 最后一个单词的长度