background

Im chat rooms need a function similar to wechat’s album selector, so we are going to implement an album plugin

We use photo_manager to get photo albums and resource information.

The business layer is encapsulated on the basis of photo_manager source code.

What is the Flutter Plugin

As described on the official website below, there are two types

Dart Package: Pure DART implementation, used in the FLUTTER project

Plugin package: Dart implementation, but needs to communicate with native platform (MethodChannel) our album selector is the latter, but photo_manager does the native implementation part for us

Introduction to implementing plugin

Flutter official

Writing a good Flutter plugin

function

Smooth out the differences between ios and Android calls. Eg. Request permission for album

Show photo list

Switch the album

Preview the photos

Select images across albums

Send photos

Access refers to north 🐶

Example is provided in the project. The same method can be used when accessing. Let’s come to Kangkang

First step initializes a Flutetr project

second step

Refer to the album selector plugin in pubspec.yaml

third step

Dart (or whatever you need) opens the album selector by new our indexPage object

import 'package:photo_manager/page/index.dart'; . . _scanGalleryList() async { // await provider.refreshGalleryList(); Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext Context) {// SelectedPhotosController Contreoller = SelectedPhotosController () // instantiate as neededreturn IndexPage(controller);
    }));
  }
Copy the code

done!

The plugin implementation

The plugin structure

Project code structure

I pulled the code of photo_manager to change it (other students can directly create a plugin project reference online photo_manager package), and only changed lib, here only shows the structure of lib. (Unmarked part is original source code)

1. As a plugin, I consider not using provider for data management, so I change the provider_util.dart file of photo_manager, as shown in the figure below, to use a controller object, which is responsible for manipulating data objects, including get and set methods. You can manipulate photoutil (all album entities), PathUtil (all resource entities of the current album) objects, and use setState when defining the set method to update the view

Data Photoutil (all album entities), PathUtil (all resource entities of the current album) objects, stored in the page (index.dart).

//gallery_list_page.dart

// index.dart

2 albums operation flutter package, photo_manager photomanager. The dart is the package of all the methods of exports, interested students can kangkang photo_manager is how to implement

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

Copy the code

Subsequent modification –TODO

1 Consider using InheritedWidget to manage data state. The disadvantages of placing controller at the top in this article are obvious: it cannot be refreshed locally, and child components cannot listen to data changes.

2. The code structure of this project is not standard enough and needs to be optimized. The data operation is chaotic and not easy to read.

conclusion

1 after practice, this plug-in has no compatibility problems with androidX

2 Thank you for your suggestions in the implementation process!

3 Welcome comments from Daega at ~~~~! 🐶