--- theme: cyanosis --- 系列文章 [一文聊聊Flutter多业务混合工程实践](https://juejin.cn/post/7441137135535980578) [我们封装了哪些好用的Flutter Mixin](https://juejin.cn/post/7495958127679340598) [我们使用了哪些Flutter 三方库（二）](https://juejin.cn/post/7508945084487401526) ## 一、简介在前面的文章中，介绍了项目中使用的Mixin：[我们封装了哪些好用的Flutter Mixin](https://juejin.cn/post/7495958127679340598)，本篇介绍一下项目中使用了哪些Flutter的三方库。 ## 二、Dio dio 目前是我认为在Flutter中网络库的标杆了，整体在使用过程中比较类似Android 中OkHttp。 Pub地址： - ✅ HTTP客户端：支持GET/POST/PUT/DELETE等标准方法 - ✅ 拦截器：全局/局部请求/响应拦截（日志、鉴权、错误处理） - ✅ 文件上传/下载：多文件并发、进度回调 - ✅ 请求取消：通过CancelToken主动终止请求 - ✅ 数据转换：内置JSON解析，支持自定义Transformer - ✅ 适配器机制：可替换底层HTTP实现（如使用dio\_http2\_adapter） ### DioUtil 在实践过程中，我们会在BasePlugin中封装一个DioUtils，集中处理dio的初始化，封装dio对象以及提供设置HTTP方法类型、Path、Header等函数 ### 初始化设置Host、超时（连接、读、写）时间等 ```dart BaseOptions options = BaseOptions() ..baseUrl = 'https://api.example.com' ..sendTimeout = 1000 * 20 ..connectTimeout = 1000 * 20 ..receiveTimeout = 1000 * 20 ..responseType = ResponseType.plain ..validateStatus = (status) { return true; }; final dio = Dio(options); ... ``` ### 拦截器添加拦截器，统一处理业务通用的Header、Token认证刷新等逻辑 ```dart dio.interceptors.add(DioInterceptor()); ``` ### 基础请求 DioUtil提供设置Path、method、Options等方法，在request方法中会将上述的信息添加到请求中。 ```dart Future request() async { _requestOptions ??= Options(); _requestOptions!.method = _method.value; Response response = await dio.request( _path, data: _data, queryParameters: _queryParams, cancelToken: _cancelToken, options: _requestOptions, ); var result = response.data.toString(); return result; } ``` ## 三、fluttertoast 项目中使用Toast库是fluttertoast。 Pub地址： - ✅ 显示 Toast 消息（类似 Android 的 Toast 或 iOS 的 UIAlertController） - ✅ 高度可定制：支持调整位置、背景色、字体、动画等 - ✅ 跨平台支持：Android、iOS、Web（部分功能受限） - ✅ 简单易用：一行代码即可显示 Toast ### Toast封装 ```dart static void showToast(dynamic message) { if (message == null) { return; } Fluttertoast.showToast( msg: message.toString(), gravity: ToastGravity.CENTER, backgroundColor: const Color(...), ); } ///取消所有Toast static void dismissFToast() { FToast().removeQueuedCustomToasts(); } ``` ## 四、extended\_image extended\_image是图片加载框架，支持加载网络、本地等文件，支持添加占位图、错误图等。无论是Android 还是 IOS的开发同学，对图片加载框架应该都比较熟悉了。 Pub地址： - ✅ 高级图片加载：支持 Network、Asset、File、Memory、Uint8List - ✅ 图片预览 & 手势交互：缩放、拖动、旋转、双击放大/缩小 - ✅ 图片编辑：裁剪、涂鸦、添加文字/贴纸（需配合 extended\_image\_library） - ✅ 缓存管理：支持内存 & 磁盘缓存（基于 flutter\_cache\_manager） - ✅ 占位图 & 错误图：支持自定义加载中和加载失败时的占位图 - ✅ 图片格式扩展：支持 WebP、GIF、SVG（需额外插件） - ✅ 低内存优化：大图加载时自动采样，避免 OOM（Out of Memory） ### 加载网络 ```dart ExtendedImage.network( 'url.jpg', cache: true, cacheKey: 'custom_key', // 避免重复下载 ); ``` 其他还存在如 `ExtendedImage.file`、`ExtendedImage.memory`等方法。在我们的工程中通过封装 ImageLoader，在ImageLoader中通过返回Widget的方式，将 ExtendedImage 封装在返回的Widget使用中。 ## 五、event\_bus EventBus这个Android的同学都比较熟悉了，虽然在笔者负责的Android项目中没有使用这个库，不过我们的Flutter项目中有具体使用。 Pub地址： - ✅ 事件发布/订阅：支持跨组件、跨页面的消息通信 - ✅ 松耦合设计：无需直接依赖组件树或 BuildContext - ✅ 泛型支持：可定义强类型事件（如 class UserLoggedInEvent） - ✅ 同步/异步处理：支持 sync（同步）和 async（异步）事件分发 - ✅ 线程安全：适用于 Dart/Flutter 的单线程及 Isolate 环境在我们工程中针对EventBus在工程中的封装，比较简单 class FlutterEventBus { final EventBus _bus; FlutterEventBus._() : _bus = EventBus(); static final FlutterEventBus _instance = FlutterEventBus._(); static FlutterEventBus get instance => _instance; factory FlutterEventBus() => _instance; /// 发送事件 void post(event) { _bus.fire(event); } /// 监听事件 Stream onEvent() { return _bus.on(); } } 通过封装，避免直接暴露EventBus。 ## 六、uuid UUID生成库。熟悉Java的同学应该都知道 `UUID.randomUUID()`，在Flutter工程中我们引入uuid库来应对相关的业务。 Pub地址： - ✅ 生成 UUID：支持 v1（时间戳）、v4（随机）、v5（命名空间+哈希） - ✅ 跨平台：适用于 Flutter（iOS/Android/Web）和纯 Dart 项目 - ✅ 轻量级：无额外依赖，仅提供 UUID 生成与解析 - ✅ 强类型支持：生成 String 或 UuidValue 对象 \###、生成随机 UUID（v4） import 'package:uuid/uuid.dart'; final uuid = Uuid(); String id = uuid.v4(); ### 生成时间戳 UUID（v1） String timeBasedId = uuid.v1(); uuid使用比较简单，这里不多说了 ## 七、path\_provider path\_provider 主要是提供获取平台特定目录的路径。 - ✅ 获取平台特定目录路径： - 临时目录、文档目录、下载目录、缓存目录等 - 支持 iOS、Android、macOS、Windows、Linux、Web - ✅ 文件系统交互基础：通常配合 dart\:io 或 File 类进行文件读写 - ✅ 权限处理：自动处理平台存储权限（如 Android 的 READ\_EXTERNAL\_STORAGE） ### 获取常用目录路径 import 'package:path_provider/path_provider.dart'; // 获取应用文档目录（持久化存储） final directory = await getApplicationDocumentsDirectory(); // 获取临时目录（可能被系统清理） final tempDir = await getTemporaryDirectory(); ### 平台特定路径 // Android 外部存储（需权限） final externalDir = await getExternalStorageDirectory(); // iOS/macOS 应用支持目录 final appSupportDir = await getApplicationSupportDirectory(); // 下载目录（仅部分平台支持） final downloadsDir = await getDownloadsDirectory(); ## 八、flutter\_svg flutter\_svg库主要是用来加载svg图标，目前在工程中是用来加载各个Icon的。 Pub地址： - ✅ SVG 渲染：将 SVG 文件/字符串转换为 Flutter 的 Widget - ✅ 动态颜色控制：支持运行时修改 SVG 颜色（如主题切换） - ✅ 高性能缓存：自动缓存解析后的 SVG 数据 - ✅ 跨平台支持：iOS/Android/Web/Desktop（需兼容性处理） - ✅ 复杂路径支持：渲染 <path>、<circle>、<text> 等 SVG 元素封装 SvgPicture.asset( 'assets/icons/xx.svg', width: width, height: height, ); ## 九、flutter\_easyrefresh flutter\_easyrefresh库用于支持下拉刷新、上拉加载更多的库。 Pub地址： - ✅ 下拉刷新 & 上拉加载：支持自定义动画和样式 - ✅ 多主题支持：内置经典、球型、水滴等多种刷新样式 - ✅ 嵌套滚动兼容：完美配合 CustomScrollView/NestedScrollView - ✅ 国际化：支持中英文等语言切换 - ✅ 高性能：优化列表滚动体验，避免卡顿基础用法 ```dart EasyRefresh( onRefresh: () async { // 下拉刷新逻辑 await Future.delayed(Duration(seconds: 2)); }, onLoad: () async { // 上拉加载更多逻辑 await Future.delayed(Duration(seconds: 2)); }, child: ListView.builder( itemCount: 20, itemBuilder: (context, index) => ListTile(title: Text('Item $index')), ), ) ``` ## 十、lottie lottie动画库，比较有名气了，各个平台的库都有。 - ✅ 渲染 Lottie 动画：解析并播放 JSON 格式的 Lottie 文件 - ✅ 动态控制：暂停/继续/循环/反向播放动画 - ✅ 性能优化：硬件加速渲染，60 FPS 流畅体验 - ✅ 跨平台支持：iOS/Android - ✅ 资源来源：支持 Assets/网络/内存加载基础使用 ```dart Widget _lottieAsset() { return Lottie.asset( Assets.assetsLottieAiStar, width: 20, height: 20, package: Constants.packageName, ); } ``` ## 十一、scroll_to_index - ✅ 精准滚动定位：支持滚动到列表中的任意索引项 - ✅ 动画控制：可自定义滚动动画的持续时间和曲线 - ✅ 嵌套滚动兼容：与 CustomScrollView/NestedScrollView 配合使用 - ✅ 水平/垂直支持：适用于横向和纵向列表 - ✅ 高性能：优化大列表的滚动性能基本用法 ``` final controller = AutoScrollController(); // 立即滚动（无动画） controller.scrollToIndex( index, preferPosition: AutoScrollPosition.begin, ); // 带动画滚动 controller.scrollToIndex( index, duration: Duration(seconds: 1), curve: Curves.easeInOut, ); ``` ## 十二、总结本篇简单总结了以上10条在项目中使用的Flutter三方库，简单的从描述、功能、封装使用等方面做了介绍，还有一些库没有介绍如hive等，后面有时间了考虑再更新一篇。