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 plugi

功能

抹平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';

複製程式碼

總結

1 經過實踐 此外掛沒有androidX的相容問題

2 感謝實現過程中大家的寶貴意見

3 歡迎建議&指正