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

原文連接