Flutter开发日记-如何实现一个照片选择器plugin

Ace___
4,755 阅读2分钟

背景

im中台的聊天室需要一个类似微信的相册选择器的功能，因此我们打算实现一个相册plugin

我们使用 photo_manager ，获取相册和资源信息。

在photo_manager源代码基础上进行了业务层的封装。

flutter plugin是什么

如下官网所述，简单来说分为两种

dart package ： 纯dart实现，在flutter工程中使用

plugin package： dart实现，但是需要和原生平台通信（MethodChannel） 我们的相册选择器是后者，但photo_manager 帮我们做了原生的实现这一部分

实现plugin入门

Flutter官方

Writing a good Flutter plugin

功能

抹平ios和安卓端调用差异。eg.请求相册权限

展示相片list

切换相册

预览照片

跨相册选择图片

发送照片

接入指北 🐶

项目中提供了example的使用示例，接入时可使用同样方式，我们来康康

first step 初始化一个flutetr工程

目录结构

second step

在 pubspec.yaml 引用相册选择器 plugin

third step

在 lib/main.dart （或者你需要的入口） new一下我们的indexPage对象，即可打开相册选择器

import 'package:photo_manager/page/index.dart';
......
......
 _scanGalleryList() async {
    // await provider.refreshGalleryList();
    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
    // 控制器
      SelectedPhotosController contreoller = SelectedPhotosController（）
      // 在需要的时候实例化
      return IndexPage(controller);
    }));
  }

done!

plugin实现

plugin结构图

项目代码结构

我拉了photo_manager的代码下来改（其他同学不需要可以直接新建一个plugin工程引用线上photo_manager包），只修改了lib，这里只展示lib的结构。（未标注部分为源码原有）

1 做为一个plugin考虑不用provider做数据管理，因此我改掉了photo_manager的provider_util.dart文件，如下图所示， 使用一个controller对象，负责操作数据对象，有get 和 set方法，可以操作photoutil（所有相册实体），pathutil（当前相册的所有资源实体）对象，并在set方法中定义时使用setstate，达到视图更新的目的

数据 photoutil（所有相册实体），pathutil（当前相册的所有资源实体）对象，存储在页面(index.dart)中.

eg.通过controller切换当前相册

//gallery_list_page.dart

// index.dart

2 相册操作使用flutter package ,photo_manager,photomanager.dart是这个包所有方法的出口,有兴趣的同学可以康康photo_manager是如何实现的

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:photo_manager/src/utils/convert_utils.dart';
import 'src/plugin.dart';
export 'src/plugin.dart';
part './src/manager.dart';
part './src/type.dart';
part './src/entity.dart';
part './src/notify.dart';
part './src/editor.dart';

后续改造--TODO

1 考虑使用InheritedWidget做数据状态的管理，本文将controller放在最上层的缺点显而易见，就是不能局部刷新，并且子组件不能监听到数据的变化。

2 本项目的代码结构不够规范，有待优化，数据操作比较混乱，不易读，第一次尝试实现plugin，结构上比较糙。

总结

1 经过实践 此插件没有androidX的兼容问题

2 感谢实现过程中大家的建议！

3 欢迎大嘎的 批评 意见 留言~~~~！🐶

avatar
文章
阅读
粉丝