Flutter组件化

一、Flutter四种工程类型
Flutter工程中,通常有以下几种工程类型,下面分别简单概述下:

  1. Flutter Application
    标准的Flutter App工程,包含标准的Dart层与Native平台层
  2. Flutter Module
    Flutter组件工程,仅包含Dart层实现,Native平台层子工程为通过Flutter自动生成的隐藏工程
  3. Flutter Plugin
    Flutter平台插件工程,包含Dart层与Native平台层的实现
  4. Flutter Package
    Flutter纯Dart插件工程,仅包含Dart层的实现,往往定义一些公共Widget

二、Flutter 组件化实施细节
1、了解一下 Plugin 原理
Flutter Plugin 提供Android或者iOS的底层封装,在Flutter层提供组件功能,使Flutter可以较方便的调取Native的模块。
很多平台相关性或者对于Flutter实现起来比较复杂的部分,都可以封装成Plugin。其原理如下:
iOS: AppDelegate -> FlutterViewController -> iOS Platform API(及第三方依赖)
Android: Activity -> FlutterView -> Android Platform API(及第三方依赖)

Plugin 中,Flutter 和 原生的交互也是通过 Platform Method Channel 来实现的,但是这部分内容在最终使用这个Plugin的时候,是隐藏在了Plugin内部的,使用方不可见。
使用Plugin时,如果需要获取一些原生APP关于业务上需要传递的信息,比如 Token 之类的,需要通过接口传入。

  • Plugin 和原生直接通过Platform Method Channel 交互,Plugin 会定义好相关接口,所支持的平台(例如Android和iOS)都需要实现这些接口
  • dart 中调用 _channel.invokeMethod 对原生发起一次请求
  • java 在 onMethodCall 中处理请求
  • objc 在 handleMethodCall 中处理请求
  • Plugin 和Flutter App/Module 直接的交互,直接通过 Plugin 定义的接口进行

二、创建新的 Plugin

  • 1、直接通过命令行创建:
    flutter create --template=plugin --platforms=android,ios -i objc -a java flutter_remac_gateway_fourth
  • 2、在 lib/remac_connectivity_plugin.dart 文件中定义插件 API, lib/remac_connectivity_plugin_platform_interface.dart 中定义插件内和原生交互的 API
  • 3、在android/src/main/java/com.remac.remac_connectivity_plugin/RemacConnectivityPlugin.java 文件中添加 Android 平台代码
  • 4、在ios/Classes/RemacConnectivity.h/.m 文件中添加 iOS 平台代码
  • 5、README.md 文件用来对 package 进行介绍
  • 6、CHANGELOG.md 文件用来记录每个版本的更改
  • 7、LICENSE 文件用来阐述 package 的许可条款
    -8、为配网 Plugin 引入第三方Package
  • 直接在 pubspec.yaml文件中添加就行,例如:
name: flutter_remac_gateway_fourth
description: A new Flutter plugin project.
version: 0.0.1
homepage:

environment:
  sdk: '>=2.19.2 <3.0.0'
  flutter: ">=2.5.0"

dependencies:
  flutter:
    sdk: flutter
  plugin_platform_interface: ^2.0.2

  flutter_picker: ^2.1.0
  flutter_remac_foundation:
    path: ../flutter_remac_foundation/

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

三、Flutter中间件引入子组件
在yaml文件中添加依赖:
flutter_remac_gateway_fourth:
path: ../flutter_plugins/flutter_remac_gateway_fourth/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容