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

背景

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 欢迎大嘎的 批评 意见 留言~~~~！🐶