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 歡迎大嘎的 批評 意見 留言~~~~！🐶