Flutter多功能集成插件unify_flutter的使用
Flutter多功能集成插件unify_flutter的使用
Unify: Flutter-Native Hybrid Communication Framework
Unify 是一个高效、灵活且易于使用的 Flutter 混合开发框架,旨在解决 Flutter 和原生模块之间的通信问题。它支持平台无关的模块抽象、灵活的实现注入、自动代码生成等特性,显著提高了混合开发的效率并降低了维护成本。
Unify 由滴滴出行国际团队开发,并已在滴滴出行的国际送餐和国际旅行业务中广泛应用,有效支持了基于 Flutter 的开发流程。
关键特性:
- 平台无关的模块抽象:允许开发者使用 Dart 语言声明平台无关的模块接口和实体。
- 灵活的实现注入:开发者可以选择注入原生实现(Android/iOS)或 Flutter 实现。
- 自动代码生成:通过强大的代码生成引擎,Unify 可以自动生成跨 Flutter、Android 和 iOS 平台的 SDK。
示例:使用 Unify 声明原生模块
// device_info_service.dart
@UniNativeModule()
abstract class DeviceInfoService {
/// 获取设备信息
Future<DeviceInfoModel> getDeviceInfo();
}
通过 Unify,上述 Dart 接口可以自动映射到 Android 和 iOS 平台上,开发者只需关注每个平台上具体的实现。在 Flutter 中使用时,调用方法简单直观,如同调用普通的 Flutter 模块一样:
DeviceInfoService.getDeviceInfo().then((deviceInfoModel) {
print("${deviceInfoModel.encode()}");
});
Unify 的总体原理
Unify 可以有效地解决 Flutter 混合开发中的一些常见问题,例如:
- 高效地将大量原生模块导入 Flutter
- 高效地将大量 Flutter 模块导入原生代码
- 解决大量通道的维护问题
- 原生和 Flutter 共存的混合架构分层
开始使用 Unify 使混合开发更加高效!
安装
Unify 是使用 Dart 开发的命令行工具。
在 Flutter 项目的 pubspec.yaml
文件中添加 dev_dependencies
:
dev_dependencies:
unify_flutter: ^3.0.0
注意:pub.dev
Git 依赖:
dev_dependencies:
unify_flutter:
git: git@github.com:maxiee/Unify.git
运行 flutter pub get
来拉取依赖。然后你可以运行 Unify:
flutter pub run unify_flutter api
注意:运行 Unify 命令通常需要一系列参数。具体使用请参阅快速开始指南。
快速开始
按照以下步骤快速开始使用 Unify 统一封装一个原生 SDK(包括 Android 和 iOS 版本)并将其导入 Flutter。
前提条件
在开始之前,请确保你的开发环境满足以下条件:
- 已安装 Flutter 3 或以上版本
- 对于 Android 开发,配置了 Android 开发环境
- 对于 iOS 开发,配置了 iOS 开发环境
第一步:克隆示例项目
首先,克隆 Unify 项目并进入示例目录:
git clone git@github.com:didi/Unify.git
cd ./Unify/01_uninativemodule_demo
01_uninativemodule_demo
是一个标准的 Flutter 应用项目。它的特点包括:
- 原生侧(Android/iOS)分别实现了系统信息模块
- 使用 Unify 统一封装原生模块并导入 Flutter
- 在 Flutter 一侧进行统一调用
第二步:声明 Unify 模块
注意,项目根目录有一个 interface
目录,这是声明 Unify 模块的地方。它包含两个文件:
device_info_service.dart
- 声明原生模块:
// device_info_service.dart
@UniNativeModule()
abstract class DeviceInfoService {
/// 获取设备信息
Future<DeviceInfoModel> getDeviceInfo();
}
@UniNativeModule
注解表示该模块的实现由原生侧提供。
device_info_model.dart
- 声明返回值模型:
// device_info_model.dart
@UniModel()
class DeviceInfoModel {
/// 操作系统版本
String? osVersion;
/// 内存信息
String? memory;
/// 设备型号
String? platform;
}
@UniModel
注解表示这是一个跨平台的数据模型。
第三步:生成跨平台代码
完成接口声明后,执行以下命令生成跨平台代码:
flutter pub run unify_flutter api\
--input=`pwd`/interface \
--dart_out=`pwd`/lib \
--java_out=`pwd`/android/src/main/java/com/example/uninativemodule_demo \
--java_package=com.example.uninativemodule_demo \
--oc_out=`pwd`/ios/Classes \
--dart_null_safety=true \
--uniapi_prefix=UD
命令选项描述:
参数 | 描述 | 必须 |
---|---|---|
input |
指定 Unify 接口声明目录 | Y |
dart_out |
指定 Dart 代码输出目录 | Y |
java_out |
指定 Java 代码输出目录 | Android |
java_package |
指定生成的 Java 代码包名 | Android |
oc_out |
指定 Objective-C 代码输出目录 | iOS |
dart_null_safety |
是否生成 null-safe Dart 代码 | Y |
uniapi_prefix |
生成代码前缀以避免库冲突 | N |
执行后,Unify 将在相应目录为每个平台生成代码。
第四步:实现原生模块
我们需要为生成的原生模块接口提供具体实现:
- Android 平台实现类:DeviceInfoServiceImpl.java
- Android 平台实现注册:MainActivity.java
- iOS 平台实现类:DeviceInfoServiceVendor.h,DeviceInfoServiceVendor.m
- iOS 平台实现注册:AppDelegate.m
你可以参考示例代码进行实现。
第五步:在 Flutter 中调用
一切准备就绪!你可以在 Flutter 代码中直接调用由 Unify 封装的原生模块:
OutlinedButton(
child: const Text("获取设备信息"),
onPressed: () {
DeviceInfoService.getDeviceInfo().then((deviceInfoModel) {
setState(() {
_platformVersion = "\n${deviceInfoModel.encode()}";
});
});
},
),
更多关于Flutter多功能集成插件unify_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter多功能集成插件unify_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,关于Flutter多功能集成插件unify_flutter
的使用,这里提供一个简单的代码示例来展示其基本用法。请注意,由于unify_flutter
可能是一个假想的插件名称(因为Flutter社区中并没有一个广泛认可的名为unify_flutter
的插件),我将基于一个假设的多功能集成插件的功能来编写代码示例。这些功能可能包括网络请求、设备信息获取、本地存储等。
假设unify_flutter
插件提供了以下功能:
- 网络请求
- 获取设备信息
- 本地存储
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加unify_flutter
依赖(假设它存在):
dependencies:
flutter:
sdk: flutter
unify_flutter: ^x.y.z # 替换为实际版本号
然后运行flutter pub get
来安装依赖。
2. 导入插件
在你的Dart文件中导入插件:
import 'package:unify_flutter/unify_flutter.dart';
3. 使用插件功能
网络请求
void makeNetworkRequest() async {
try {
var response = await UnifyFlutter.network.get('https://api.example.com/data');
print('Network Response: ${response.body}');
} catch (e) {
print('Network Error: $e');
}
}
获取设备信息
void getDeviceInfo() async {
try {
var deviceInfo = await UnifyFlutter.device.getInfo();
print('Device Model: ${deviceInfo.model}');
print('Device OS Version: ${deviceInfo.osVersion}');
} catch (e) {
print('Device Info Error: $e');
}
}
本地存储
void storeData() async {
try {
await UnifyFlutter.storage.setString('key', 'value');
print('Data Stored Successfully');
} catch (e) {
print('Storage Error: $e');
}
}
void retrieveData() async {
try {
var value = await UnifyFlutter.storage.getString('key');
print('Retrieved Data: $value');
} catch (e) {
print('Storage Error: $e');
}
}
4. 完整示例
将上述功能整合到一个完整的Flutter应用中:
import 'package:flutter/material.dart';
import 'package:unify_flutter/unify_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Unify Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Unify Flutter Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: makeNetworkRequest,
child: Text('Make Network Request'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: getDeviceInfo,
child: Text('Get Device Info'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: storeData,
child: Text('Store Data'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: retrieveData,
child: Text('Retrieve Data'),
),
],
),
),
);
}
}
请注意,上述代码中的UnifyFlutter.network
, UnifyFlutter.device
, 和 UnifyFlutter.storage
是假设的方法调用,实际使用时需要根据unify_flutter
插件提供的API文档进行调整。如果unify_flutter
插件不存在,你可能需要寻找或创建一个类似的插件来满足你的需求。