wechat_assets_picker 1.6.0 wechat_assets_picker: ^1.6.0 copied to clipboard
An assets picker in pure dart which looks like the one in WeChat, support multi asset pick from device.
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 ✨ #
- 💚 99% simillar to WeChat style.
- 🌠 Support multi assets pick.
- 🔍 Support asset preview. (Image / Video)
TODO 📅 #
- ✅ Image asset support
- ✅ HEIC/HEIF Image type support
- ✅ Video asset support
- ❌ Audio asset support
- ❌ Single asset mode
- ✅ i18n support
- ✅ Custom text delegate support
- ❌ Custom theming entirely
- ❌ Flutter For Web support
Screenshots 📸 #
READ THIS FIRST #
Althought the package provide selection for assets, it still 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) {
/.../
});
Create AssetEntity
from File
or Uint8List
(rawData) #
In order to combine this package with camera shooting or something related, there's a wordaround about how to create an AssetEntity
with File
or Uint8List
object.
final File file = your_file; // Your file object
final Uint8List byteData = await file.readAsBytes(); // Convert to Uint8List
final AssetEntity imageEntity = await PhotoManager.editor.saveImage(byteData); // Saved in the device then create an AssetEntity
If you don't want to keep the asset in your device, just delete it after you complete with your process (upload, editing, etc).
final List<String> result = await PhotoManager.editor.deleteWithIds([entity.id]);