Flutter開發日記-如何實現一個照片選擇器plugin

YYDev發表於2019-12-16
FlutterPlugin

背景

im 中臺的聊天室需要一個類似微信的相簿選擇器的功能，因此我們打算實現一個相簿 plugin

我們使用 photo_manager ，獲取相簿和資源資訊。

在 photo_manager 原始碼基礎上進行了業務層的封裝。

flutter plugin 是什麼

如下官網所述，簡單來說分為兩種

dart package ： 純 dart 實現，在 flutter 工程中使用

plugin package： dart 實現，但是需要和原生平臺通訊（MethodChannel） 我們的相簿選擇器是後者，但 photo_manager 幫我們做了原生的實現這一部分

Flutter開發日記-如何實現一個照片選擇器plugin

實現 plugin 入門

Flutter 官方

Writing a good Flutter plugin

功能

抹平 ios 和安卓端呼叫差異。eg.請求相簿許可權

展示相片 list

切換相簿

預覽照片

跨相簿選擇圖片

傳送照片

接入指北 ?

專案中提供了 example 的使用示例，接入時可使用同樣方式，我們來康康

first step 初始化一個 flutter 工程

目錄結構

second step

在 pubspec.yaml 引用相簿選擇器 plugin

Flutter開發日記-如何實現一個照片選擇器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 結構圖

Flutter開發日記-如何實現一個照片選擇器plugin

專案程式碼結構

我拉了 photo_manager 的程式碼下來改（其他同學不需要可以直接新建一個 plugin 工程引用線上 photo_manager 包），只修改了 lib，這裡只展示 lib 的結構。（未標註部分為原始碼原有）

Flutter開發日記-如何實現一個照片選擇器plugin

1 做為一個 plugin 考慮不用 provider 做資料管理，因此我改掉了 photo_manager 的 provider_util.dart 檔案，如下圖所示， 使用一個 controller 物件，負責運算元據物件，有 get 和 set 方法，可以操作 photoutil（所有相簿實體），pathutil（當前相簿的所有資源實體）物件，並在 set 方法中定義時使用 setstate，達到檢視更新的目的

資料 photoutil（所有相簿實體），pathutil（當前相簿的所有資源實體）物件，儲存在頁面(index.dart)中.

Flutter開發日記-如何實現一個照片選擇器plugin

Flutter開發日記-如何實現一個照片選擇器plugin
eg.通過 controller 切換當前相簿

//gallery_list_page.dart

Flutter開發日記-如何實現一個照片選擇器plugin

Flutter開發日記-如何實現一個照片選擇器plugin

// index.dart

Flutter開發日記-如何實現一個照片選擇器plugin

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

原文連結

相關文章