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架构图

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 模块的地方。它包含两个文件:

  1. device_info_service.dart - 声明原生模块:
// device_info_service.dart
@UniNativeModule()
abstract class DeviceInfoService {
  /// 获取设备信息
  Future<DeviceInfoModel> getDeviceInfo();
}

@UniNativeModule 注解表示该模块的实现由原生侧提供。

  1. 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 将在相应目录为每个平台生成代码。

第四步:实现原生模块

我们需要为生成的原生模块接口提供具体实现:

你可以参考示例代码进行实现。

第五步:在 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

1 回复

更多关于Flutter多功能集成插件unify_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter多功能集成插件unify_flutter的使用,这里提供一个简单的代码示例来展示其基本用法。请注意,由于unify_flutter可能是一个假想的插件名称(因为Flutter社区中并没有一个广泛认可的名为unify_flutter的插件),我将基于一个假设的多功能集成插件的功能来编写代码示例。这些功能可能包括网络请求、设备信息获取、本地存储等。

假设unify_flutter插件提供了以下功能:

  1. 网络请求
  2. 获取设备信息
  3. 本地存储

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插件不存在,你可能需要寻找或创建一个类似的插件来满足你的需求。

回到顶部