Flutter WeChat Assets Picker

Language: English | 中文简体

An assets picker which looks like the one in WeChat, based on photo_manager for asset implementation, extended_image for image preview, provider to help controlling the state of the picker.

Category 🗂

• Features
• Screenshots
• TODO
• Preparing for use
  • Flutter
  • Android
  • iOS
• Usage
  • Simple usage
  • Complete param usage

Features ✨

• 💚 99% simillar to WeChat style.
• 🌠 Support multi assets pick.
• 🔍 Support asset preview. (Image / Video)

TODO 📅

• Image asset support
  • Image editing (Cut/Rotate/Draw)
• Video asset support
  • Video editing support
• Audio asset support
• Single asset mode
• i18n support
• Custom text delegate support
• Flutter For the Web support

Screenshots 📸

READ THIS FIRST

Althought the package provide selection for assets, it sill require users build their own methods to handle display/upload, etc. If you have any question about how to build it, please run the example or refer to photo_manager for API usage.

Preparing for use 🍭

Flutter

Add wechat_assets_picker to pubspec.yaml dependencies.

dependencies:
  wechat_assets_picker: $latest_version

Then import the package in your code:

import 'package:wechat_assets_picker/wechat_assets_picker.dart';

Android

You need at lease three permissions: INTERNET READ_EXTERNAL_STORAGE WRITE_EXTERNAL_STORAGE.

iOS

Add following content to info.plist.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>Replace with your permission description.</string>

Usage 📖

Name	Type	Description	Default
context	BuildContext	Context for navigator push.	null
maxAssets	int	Maximum asset that the picker can pick.	9
pageSize	int	Assets amount when assets loaded with paging. Must be a multiple of gridCount. Nullable for non paging.	320 (80 * 4)
pathThumbSize	int	The size of thumb data in picker.	80
gridCount	int	Grid count in picker.	4
requestType	RequestType	Request type for picker.	RequestType.image
selectedAssets	List<AssetEntity>	Selected assets. Prevent duplicate selection. If you don't need to prevent duplicate selection, just don't pass it.	null
themeColor	Color	Main theme color for the picker	Color(0xff00bc56)
textDelegate	TextDelegate	Text delegate for the picker, for customize the texts.	DefaultTextDelegate()
routeCurve	Curve	The curve which the picker use to build page route transition.	Curves.easeIn
routeDuration	Duration	The duration which the picker use to build page route transition.	const Duration(milliseconds: 500)

Simple usage

final List<AssetEntity> assets = await AssetPicker.pickAssets(context);

or

AssetPicker.pickAsset(context).then((List<AssetEntity> assets) {
  /.../
});

Complete param usage

List<AssetEntity> assets = <AssetEntity>{};

final List<AssetEntity> result = await AssetPicker.pickAssets(
  context,
  maxAssets: 9,
  pageSize: 320,
  pathThumbSize: 80,
  gridCount: 4,
  requestType: RequestType.image,
  selectedAssets: assets,
  themeColor: Colors.cyan,
  textDelegate: DefaultTextDelegate(),
  routeCurve: Curves.easeIn,
  routeDuration: const Duration(milliseconds: 500),
);

or

List<AssetEntity> assets = <AssetEntity>{};

AssetPicker.pickAssets(
  context,
  maxAssets: 9,
  pageSize: 320,
  pathThumbSize: 80,
  gridCount: 4,
  requestType: RequestType.image,
  selectedAssets: assets,
  themeColor: Colors.cyan,
  textDelegate: DefaultTextDelegate(),
  routeCurve: Curves.easeIn,
  routeDuration: const Duration(milliseconds: 500),
).then((List<AssetEntity> assets) {
  /.../
});