♻️ Refactored example to allow custom implementations

Author: AlexV525

example/lib/constants/custom_pick_method.dart

@@ -0,0 +1,19 @@
+///
+/// [Author] Alex (https://github.com/AlexV525)
+/// [Date] 2021/5/10 16:56
+///
+import 'package:flutter/widgets.dart';
+
+class CustomPickMethod {
+  const CustomPickMethod({
+    required this.icon,
+    required this.name,
+    required this.description,
+    required this.method,
+  });
+
+  final String icon;
+  final String name;
+  final String description;
+  final void Function(BuildContext context) method;
+}

example/lib/constants/picker_model.dart renamed to example/lib/constants/picker_method.dart

@@ -6,16 +6,16 @@ import 'package:flutter/material.dart';
 import 'package:wechat_assets_picker/wechat_assets_picker.dart';
 import 'package:wechat_camera_picker/wechat_camera_picker.dart';
 
-class PickMethodModel {
-  const PickMethodModel({
+class PickMethod {
+  const PickMethod({
     required this.icon,
     required this.name,
     required this.description,
     required this.method,
   });
 
-  factory PickMethodModel.image(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.image(int maxAssetsCount) {
+    return PickMethod(
       icon: '🖼️',
       name: 'Image picker',
       description: 'Only pick image from device.',
@@ -30,8 +30,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.video(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.video(int maxAssetsCount) {
+    return PickMethod(
       icon: '🎞',
       name: 'Video picker',
       description: 'Only pick video from device.',
@@ -46,8 +46,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.audio(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.audio(int maxAssetsCount) {
+    return PickMethod(
       icon: '🎶',
       name: 'Audio picker',
       description: 'Only pick audio from device.',
@@ -62,11 +62,11 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.camera({
+  factory PickMethod.camera({
     required int maxAssetsCount,
     required Function(BuildContext, AssetEntity) handleResult,
   }) {
-    return PickMethodModel(
+    return PickMethod(
       icon: '📷',
       name: 'Pick from camera',
       description: 'Allow pick an asset through camera.',
@@ -99,8 +99,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.common(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.common(int maxAssetsCount) {
+    return PickMethod(
       icon: '📹',
       name: 'Common picker',
       description: 'Pick images and videos.',
@@ -115,8 +115,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.threeItemsGrid(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.threeItemsGrid(int maxAssetsCount) {
+    return PickMethod(
       icon: '🔲',
       name: '3 items grid',
       description: 'Picker will served as 3 items on cross axis. '
@@ -134,8 +134,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.customFilterOptions(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.customFilterOptions(int maxAssetsCount) {
+    return PickMethod(
       icon: '⏳',
       name: 'Custom filter options',
       description: 'Add filter options for the picker.',
@@ -162,8 +162,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.prependItem(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.prependItem(int maxAssetsCount) {
+    return PickMethod(
       icon: '➕',
       name: 'Prepend special item',
       description: 'A special item will prepend to the assets grid.',
@@ -185,8 +185,8 @@ class PickMethodModel {
     );
   }
 
-  factory PickMethodModel.noPreview(int maxAssetsCount) {
-    return PickMethodModel(
+  factory PickMethod.noPreview(int maxAssetsCount) {
+    return PickMethod(
       icon: '👁️‍🗨️',
       name: 'No preview',
       description: 'Pick assets like the WhatsApp/MegaTok pattern.',
@@ -209,7 +209,7 @@ class PickMethodModel {
   final String name;
   final String description;
   final Future<List<AssetEntity>?> Function(
-    BuildContext,
-    List<AssetEntity>,
+    BuildContext context,
+    List<AssetEntity> selectedAssets,
   ) method;
 }

example/lib/customs/CONTRIBUTING.md

@@ -0,0 +1,21 @@
+# Contribute custom implementations
+
+This folder allows people to contribute their delegates, use case, or even a brand-new picker.
+
+To add your works, make sure you follow this instruction.
+
+## Ensure that your picker is worth to contribute
+
+People usually have their own apps to build, and the thing like the picker is not always the same between apps.
+However, some patterns can be consumed using arguments and fields override, without creating a new picker/delegate.
+Please think twice before you confirmed it should be pushed as a new implementation example.
+
+## Contribute steps
+
+1. Fork this project.
+2. Create a new branch named `custom-{write-your-implementation-name}`.
+3. Create a new picker dart file named `{your_implementation_name}_asset_picker.dart` in the `pickers` folder.
+4. Brought all your implementations into the file you've just created.
+5. Add a `CustomPickMethod` at the `custom_picker_page.dart` file in `pickMethods`
+   in order to build an entrance to your picker.
+6. Submit your PR with proper explain how your picker works.

example/lib/customs/custom_picker_page.dart

@@ -0,0 +1,117 @@
+///
+/// [Author] Alex (https://github.com/AlexV525)
+/// [Date] 2020-11-01 02:05
+///
+import 'package:flutter/material.dart';
+import 'package:wechat_assets_picker_demo/customs/pickers/directory_file_asset_picker.dart';
+
+import '../constants/custom_pick_method.dart';
+import '../constants/extensions.dart';
+
+class CustomPickersPage extends StatefulWidget {
+  @override
+  _CustomPickerPageState createState() => _CustomPickerPageState();
+}
+
+class _CustomPickerPageState extends State<CustomPickersPage>
+    with AutomaticKeepAliveClientMixin {
+  ThemeData get currentTheme => context.themeData;
+
+  List<CustomPickMethod> get pickMethods {
+    return <CustomPickMethod>[
+      CustomPickMethod(
+        icon: '🗄',
+        name: 'Directory+File picker',
+        description: 'The picker is built with `Directory` and `File` '
+            'as entities, which allows users to display/select `File` '
+            'through `Directory`.',
+        method: (BuildContext context) => Navigator.of(context).push<void>(
+          MaterialPageRoute<void>(
+            builder: (_) => const DirectoryFileAssetPicker(),
+          ),
+        ),
+      ),
+    ];
+  }
+
+  Widget methodItemBuilder(BuildContext _, int index) {
+    final CustomPickMethod model = pickMethods[index];
+    return InkWell(
+      onTap: () => model.method(context),
+      child: Container(
+        padding: const EdgeInsets.symmetric(
+          horizontal: 30.0,
+          vertical: 10.0,
+        ),
+        child: Row(
+          children: <Widget>[
+            Container(
+              margin: const EdgeInsets.all(2.0),
+              width: 48,
+              height: 48,
+              child: Center(
+                child: Text(
+                  model.icon,
+                  style: const TextStyle(fontSize: 24.0),
+                ),
+              ),
+            ),
+            const SizedBox(width: 12.0),
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  Text(
+                    model.name,
+                    style: const TextStyle(
+                      fontSize: 18.0,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const SizedBox(height: 5),
+                  Text(
+                    model.description,
+                    style: context.themeData.textTheme.caption,
+                    overflow: TextOverflow.fade,
+                  ),
+                ],
+              ),
+            ),
+            const Icon(Icons.chevron_right, color: Colors.grey),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget get methodListView {
+    return Expanded(
+      child: ListView.builder(
+        padding: const EdgeInsets.symmetric(vertical: 10.0),
+        itemCount: pickMethods.length,
+        itemBuilder: methodItemBuilder,
+      ),
+    );
+  }
+
+  Widget get tips {
+    return const Padding(
+      padding: EdgeInsets.all(20.0),
+      child: Text(
+        'This page contains customized pickers with different asset types, '
+        'different UI layouts, or some use case for specific apps. '
+        'Contribute to add your custom picker are welcomed.',
+      ),
+    );
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  Widget build(BuildContext context) {
+    super.build(context);
+    return Column(children: <Widget>[tips, methodListView]);
+  }
+}