一统天下 flutter - 插件: flutter 使用 android 原生控件,并做数据通信

这篇具有很好参考价值的文章主要介绍了一统天下 flutter - 插件: flutter 使用 android 原生控件,并做数据通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - 插件: flutter 使用 android 原生控件,并做数据通信

示例如下:

lib\plugin\plugin2.dart

/*
 * 插件
 * 本例用于演示 flutter 使用 android/ios 原生控件,并做数据通信
 *
 * 一、android 插件开发
 * 1、主 flutter 项目要先在 android 平台中运行一下
 * 2、在 android 文件夹上,使用右键菜单,然后选择 Flutter -> Open Android module in Android Studio 即可开发插件
 * 3、参见 /android/app/src/main/kotlin/com/example/flutter_demo/MainActivity.kt
 *
 * 二、ios 插件开发
 * 1、主 flutter 项目要先在 ios 平台中运行一下
 * 2、在 android studio 或 visual studio code 中执行如下逻辑
 *    cd ios
 *    pod install
 * 3、用 xcode 中打开 /ios/Runner.xcworkspace 即可开发插件
 * 4、参见 /ios/Runner/AppDelegate.swift
 *
 *
 * 注:插件中实现的功能不支持 flutter 的 hot reload
 */

import 'dart:async';
import 'dart:io';

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

import '../helper.dart';

class Plugin2Demo extends StatefulWidget {
  const Plugin2Demo({Key? key}) : super(key: key);

  @override
  _Plugin2DemoState createState() => _Plugin2DemoState();
}

class _Plugin2DemoState extends State<Plugin2Demo> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('title'),
      ),
      body: const _MyWidget()
    );
  }
}


class _MyWidget extends StatefulWidget {
  const _MyWidget({Key? key}) : super(key: key);

  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<_MyWidget> {

  /// 用于保存从 android/ios 发送到 flutter 的数据
  String _nativeToFlutterMessage = '';
  /// 用于控制 android/ios 和 flutter 通信的 controller
  final _controller = _MyViewController();

  @override
  void initState() {

    _controller.addListener(() {
      setState(() {
        _nativeToFlutterMessage = _controller.nativeToFlutterMessage;
      });
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(
            color: Colors.red,
            child: _buildNativeView(),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.green,
            child: _buildFlutterView(),
          ),
        ),
      ],
    );
  }

  /// 嵌入到 flutter 中的 android/ios 的 view
  Widget _buildNativeView() {
    return _MyNativeView(
      controller: _controller,
    );
  }

  Widget _buildFlutterView() {
    return Stack(
      alignment: AlignmentDirectional.bottomCenter,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("native to flutter: $_nativeToFlutterMessage"),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _controller.flutterToNative("${DateTime.now().millisecondsSinceEpoch}");
              },
              child: const Text('发送数据给 Native'),
            ),
          ],
        ),
        const Padding(
          padding: EdgeInsets.only(bottom: 15),
          child: Text(
            'Flutter - View',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}


/// 嵌入到 flutter 中的 android/ios 的 view
class _MyNativeView extends StatefulWidget {
  final _MyViewController controller;

  const _MyNativeView({required this.controller, Key? key}) : super(key: key);

  @override
  _MyNativeViewState createState() => _MyNativeViewState();
}

class _MyNativeViewState extends State<_MyNativeView> {

  @override
  Widget build(BuildContext context) {

    /// 判断是否为 web 环境要用 kIsWeb
    /// 如果在 web 环境使用 Platform.xxx 的话会报错的
    if (kIsWeb) {
      return const MyText("不支持 web 环境");
    }

    if (Platform.isAndroid) {
      /// 嵌入到 flutter 中的 android 的 view(相关的插件在 android/app/src/main/kotlin/com/example/flutter_demo/MyFlutterPlugin2.kt)
      return AndroidView(
        viewType: 'com.webabcd.flutter/myview',                           /// 需要嵌入的 view 的标识(这是在插件中定义的)
        onPlatformViewCreated: _onPlatformViewCreated,                    /// 传给插件的初始参数
        creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'},  /// 传给插件的初始参数的编码方式
        creationParamsCodec: const StandardMessageCodec(),                /// 需要嵌入的 view 创建后触发的事件
      );
    }

    if (Platform.isIOS) {
      /// 嵌入到 flutter 中的 ios 的 view(相关的插件在 ios/Runner/MyFlutterPlugin2.swift)
      return UiKitView(
        viewType: 'com.webabcd.flutter/myview',                           /// 需要嵌入的 view 的标识(这是在插件中定义的)
        creationParams: const <String, dynamic>{'k1': 'p1', 'k2': 'p2'},  /// 传给插件的初始参数
        creationParamsCodec: const StandardMessageCodec(),                /// 传给插件的初始参数的编码方式
        onPlatformViewCreated: _onPlatformViewCreated,                    /// 需要嵌入的 view 创建后触发的事件
      );
    }

    return const MyText("不支持当前环境");
  }

  /// 对于 android 来说,这个 id 是插件中 PlatformViewFactory 的 create() 中生成的 viewId
  /// 对于 ios 来说,这个 id 是插件中 FlutterPlatformViewFactory 的 create() 中生成的 viewId
  void _onPlatformViewCreated(int id) {
    var methodChannel = MethodChannel('com.webabcd.flutter/channel2_view$id');
    widget.controller.setMethodChannel(methodChannel);
  }
}

/// 用于控制 android/ios 和 flutter 通信的 controller
class _MyViewController extends ChangeNotifier {

  late MethodChannel _methodChannel;

  String nativeToFlutterMessage = "";

  /// 接收从 android/ios 发送到 flutter 的数据
  void setMethodChannel(MethodChannel methodChannel) {
    _methodChannel = methodChannel;
    _methodChannel.setMethodCallHandler((call) async {
      switch (call.method) {
        case 'nativeToFlutter':
          final result = call.arguments as String;
          nativeToFlutterMessage = result;
          notifyListeners();
          break;
      }
    });
  }

  /// 从 flutter 发送数据到 android/ios
  Future<void> flutterToNative(String message) async {
    await _methodChannel.invokeMethod('flutterToNative', message);
  }
}

android\app\src\main\kotlin\com\example\flutter_demo\MainActivity.kt

/*
 * 本例用于演示 android 插件的开发
 */

package com.example.flutter_demo

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        val plugin1 = MyFlutterPlugin1()
        val plugin2 = MyFlutterPlugin2()

        // 注册自定义插件,用于演示 flutter 与 android 原生之间的数据通信
        flutterEngine.plugins.add(plugin1)

        // 注册自定义插件,用于演示 flutter 使用 android 原生控件,并做数据通信
        flutterEngine.plugins.add(plugin2)

        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

android\app\src\main\kotlin\com\example\flutter_demo\MyFlutterPlugin2.kt

/**
 * 自定义插件,用于演示 flutter 使用 android 原生控件,并做数据通信
 */

package com.example.flutter_demo

import android.content.Context
import android.view.View
import androidx.annotation.NonNull
import io.flutter.Log
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

// 自定义插件
class MyFlutterPlugin2: FlutterPlugin {

    override fun onAttachedToEngine(@NonNull flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
        flutterPluginBinding.platformViewRegistry.registerViewFactory(
            "com.webabcd.flutter/myview", // 指定 view 的标识,在 flutter 中通过此标识使用这个 view
            MyPlatformViewFactory(flutterPluginBinding.binaryMessenger) // binaryMessenger 用于后续通过 MethodChannel 传输二进制数据
        )
    }

    override fun onDetachedFromEngine(@NonNull binding: FlutterPlugin.FlutterPluginBinding) {

    }
}

// 自定义 PlatformViewFactory 用于创建一个 PlatformView
class MyPlatformViewFactory(private val binaryMessenger: BinaryMessenger)
    : PlatformViewFactory(StandardMessageCodec.INSTANCE) { // StandardMessageCodec 用于指定初始参数的编码方式,要与 AndroidView 的 creationParamsCodec 一致

    // viewId - 创建的 view 实例的 id(当这个 view 创建成功后,回调 AndroidView 的 onPlatformViewCreated 时,会把这个 viewId 传递过去)
    // args - 在 flutter 中通过 AndroidView 的 creationParams 传递过来的初始参数
    override fun create(context: Context?, viewId: Int, args: Any?): PlatformView {
        return MyPlatformView(context!!, viewId, args, binaryMessenger)
    }
}

// 自定义 PlatformView 用于将指定的 android 中的 view 嵌入到 flutter 中
class MyPlatformView(private val context: Context, viewId: Int, args: Any?, binaryMessenger: BinaryMessenger)
    : PlatformView, MethodChannel.MethodCallHandler {

    // 需要嵌入到 flutter 中的 android 的 view
    private var _myView: MyView
    // 用于 flutter 与 android 之间的通信
    private var _methodChannel: MethodChannel

    init {
        // 创建一个 MethodChannel 并指定其名称,它用于 flutter 和 android 插件之间的通信(在 flutter 中通过名称获取此 channel 后就可以通信了)
        // binaryMessenger 的意思是这个 MethodChannel 用于传输二进制数据
        _methodChannel = MethodChannel(binaryMessenger, "com.webabcd.flutter/channel2_view$viewId")
        _methodChannel.setMethodCallHandler(this)

        _myView = MyView(context, null)
        // android 中的 view 需要发数据到 flutter
        _myView.setOnAndroidToFlutterHandler(object : OnAndroidToFlutterHandler {
            override fun onAndroidToFlutter(message: String) {
                // 通过 MethodChannel 从 android 发送数据到 flutter
                _methodChannel.invokeMethod("nativeToFlutter",message)
            }
        })

        // 获取在 flutter 中通过 AndroidView 的 creationParams 传递过来的初始参数
        val dict = args as? Map<String, Any?>
        if (dict != null) {
            _myView.showMessage("flutter 创建 AndroidView 时的初始参数 k1:${dict.getValue("k1") as String}, k2:${dict.getValue("k2") as String}")
        }
    }

    // 返回需要嵌入到 flutter 中的 android 的 view
    override fun getView(): View? {
        return _myView
    }

    // flutter 调用 android 插件中的方法时,会执行到这里(更详细的说明请参见 MyFlutterPlugin1.kt)
    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when (call.method) {
            "flutterToNative" -> {
                val message = call.arguments as String
                _myView?.showMessage("flutter to android: $message")
                result.success(true)
            }
            else -> result.notImplemented()
        }
    }

    override fun dispose() {
        Log.i("MyPlatformView", "dispose")
    }
}

android\app\src\main\kotlin\com\example\flutter_demo\MyView.kt

/**
 * 本例的 view 用于显示在 flutter 中
 */

package com.example.flutter_demo

import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.view.View
import android.widget.Button
import android.widget.FrameLayout
import android.widget.TextView

class MyView(context: Context, attrs: AttributeSet?) : FrameLayout(context, attrs) {

    private var textView: TextView? = null
    private var onAndroidToFlutterHandler: OnAndroidToFlutterHandler? = null

    init {
        val rootView = LayoutInflater.from(context).inflate(R.layout.view_my, this, true)
        initView(rootView)
    }

    private fun initView(rootView: View) {
        textView = rootView.findViewById(R.id.textView)
        rootView.findViewById<Button>(R.id.button).setOnClickListener {
            // 用于从 android 发送数据到 flutter
            onAndroidToFlutterHandler?.onAndroidToFlutter("${System.currentTimeMillis()}")
        }
    }

    fun setOnAndroidToFlutterHandler(handler: OnAndroidToFlutterHandler?) {
        onAndroidToFlutterHandler = handler
    }

    // 用于显示 flutter 发送到 android 的数据
    fun showMessage(message: String) {
        textView?.text = message
    }
}

interface OnAndroidToFlutterHandler {
    fun onAndroidToFlutter(message: String)
}

android\app\src\main\res\layout\view_my.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="20dp"
        android:text="发送数据给 flutter" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button"
        android:layout_centerHorizontal="true"
        android:padding="20dp"
        android:textSize="14dp"
        android:text="" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:paddingBottom="15dp"
        android:text="Android - View"
        android:textSize="24dp"
        android:textStyle="bold" />

</RelativeLayout>

源码 https://github.com/webabcd/flutter_demo
作者 webabcd文章来源地址https://www.toymoban.com/news/detail-438601.html

到了这里,关于一统天下 flutter - 插件: flutter 使用 android 原生控件,并做数据通信的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter实现调用原生安卓的高德地图导航功能(插件化)

    查看了高德地图flutter插件的文档,都没有能支持导航的功能,并且flutter的高德插件支持的功能特别少,没办法,只能使用安卓原生的导航,flutter去调用了,具体实现方式如下: 创建 Flutter 插件 使用--template=plugin 声明创建的是同时包含了 iOS 和 Android 代码的 plugin; 使用--o

    2024年02月16日
    浏览(51)
  • 【flutter和android原生的异步】

    java android 中,是多线程的 1.flutter中不要以为异步就是多线程  2.flutter的线程隔离理论? UI 线程 : 在 Flutter 中,UI 线程负责处理用户界面的构建和渲染。所有与用户界面相关的操作,例如布局计算、绘制和处理用户输入等,都在 UI 线程中执行。 UI 线程是单线程的,也称为主

    2024年04月15日
    浏览(48)
  • Flutter 与原生交互(Android,iOS)

    本质上 Flutter 和 原生通信是通过 Channel 来完成的:Flutter中消息的传递是完全异步的; 消息使用 Channel(平台通道) 在客户端(UI) 和主机(p平台) Flutter 与 native端交互三种方式 1.BasicMessageChannel (用于传递字符串和半结构化信息,持续通信使用,例如dart端将服务器的数据陆续传入到

    2024年02月17日
    浏览(52)
  • Flutter 页面嵌入 Android原生 View

    文章主要讲解Flutter页面如何使用Android原生View,但用到了Flutter 和 Android原生 相互通信知识,建议先看完这篇讲解 通信的文章 Flutter 与 Android原生 相互通信:BasicMessageChannel、MethodChannel、EventChannel-CSDN博客 数据观察监听,Flutter使用ValueNotifier,Android原生使用LiveData,在实体数据

    2024年01月21日
    浏览(62)
  • flutter开发实战-MethodChannel实现flutter与原生Android双向通信

    flutter开发实战-MethodChannel实现flutter与原生Android双向通信 最近开发中需要原生Android与flutter实现通信,这里使用的MethodChannel MethodChannel:用于传递方法调用(method invocation)。 通道的客户端和宿主端通过传递给通道构造函数的通道名称进行连接 一个应用中所使用的所有通道名称

    2024年02月13日
    浏览(40)
  • 在Android原生项目中 创建 Flutter模块

    应用场景: 在已有的 Android原生项目中,引入Flutter模块,摸索了两天,终于给整出来了; 如果是新项目 ,最好直接创建Flutter项目,然后在Fluter的 android / ios目录中,写原生代码; 本文除了讲解 Android原生如何创建Flutter模块外,还会演示在使用 Gradle 高版本 和 低版本  时可

    2024年01月19日
    浏览(43)
  • Flutter 调用原生(Android)方法以及数据传输

    flutter是一个UI框架,有许多方法和功能只能靠原生自己来调用,但是我们怎么通过flutter去间接调用呢?官方给出了两种方法 在平台通道之间进行消息传递: 注:消息和响应以异步的形式进行传递,以确保用户界面能够保持响应。 flutter端: 然后找到android工程,打开MainActi

    2024年02月10日
    浏览(53)
  • flutter产物以aar形式嵌入android原生工程

    以前做的项目中,flutter都是作为module嵌入原生工程中,新公司项目却是以aar形式嵌入android工程,这种优点是原生工程不必配置flutter环境也能跑了,这里记录一下简单步骤。 通过android studio创建一个flutter module,注意不要创建成flutter工程了,因为工程没法打包成aar。 创建完成

    2024年02月07日
    浏览(36)
  • Flutter 和 Android原生(Activity、Fragment)相互跳转、传参

    本文主要讲解 Flutter 和 Android原生之间,页面相互跳转、传参, 但其中用到了 两端相互通信 的知识, 非常建议 先看完这篇 讲解通信的文章 : Flutter 与 Android原生 相互通信:BasicMessageChannel、MethodChannel、EventChannel_flutter eventchannel methodchannel basemessagechan-CSDN博客 当前案例 Flu

    2024年02月22日
    浏览(46)
  • Flutter 与 原生交互(Android),靠着这份900多页的PDF面试整理

    private static final String TAG = “FlutterPluginBasicTest”; public static String CHANNEL = “com.mmd.flutterapp/plugin”; static BasicMessageChannel messageChannel; public static void registerWith(PluginRegistry.Registrar registrar) { messageChannel = new BasicMessageChannel(registrar.messenger(),CHANNEL,StandardMessageCodec.INSTANCE); FlutterPluginBas

    2024年04月14日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包