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 初始化一个 flutter 工程

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

原文连接