➕ Support Drag and Select feature #175

example/lib/constants/picker_method.dart

@@ -36,6 +36,7 @@ class PickMethod {
           pickerConfig: AssetPickerConfig(
             maxAssets: maxAssetsCount,
             selectedAssets: assets,
+            enableDragAndSelect: true,
           ),
         );
       },

lib/src/constants/config.dart

@@ -39,6 +39,7 @@ class AssetPickerConfig {
     this.assetsChangeCallback,
     this.assetsChangeRefreshPredicate,
     this.shouldAutoplayPreview = false,
+    this.enableDragAndSelect = true,
   })  : assert(
           pickerTheme == null || themeColor == null,
           'pickerTheme and themeColor cannot be set at the same time.',
@@ -205,4 +206,8 @@ class AssetPickerConfig {
   /// Whether the preview should auto play.
   /// 预览是否自动播放
   final bool shouldAutoplayPreview;
+
+  /// Should enable drag and select function.
+  /// 是否开启拖拽选择
+  final bool enableDragAndSelect;
 }

lib/src/delegates/asset_picker_builder_delegate.dart

@@ -47,6 +47,7 @@ abstract class AssetPickerBuilderDelegate<Asset, Path> {
     this.pathNameBuilder,
     this.assetsChangeCallback,
     this.assetsChangeRefreshPredicate,
+    this.enableDragAndSelect = true,
     Color? themeColor,
     AssetPickerTextDelegate? textDelegate,
     Locale? locale,
@@ -130,6 +131,10 @@ abstract class AssetPickerBuilderDelegate<Asset, Path> {
   final AssetsChangeRefreshPredicate<AssetPathEntity>?
       assetsChangeRefreshPredicate;
 
+  /// Should enable drag and select function.
+  /// 是否开启拖拽选择
+  final bool enableDragAndSelect;
+
   /// [ThemeData] for the picker.
   /// 选择器使用的主题
   ThemeData get theme => pickerTheme ?? AssetPicker.themeData(themeColor);
@@ -755,6 +760,7 @@ class DefaultAssetPickerBuilderDelegate
     super.themeColor,
     super.textDelegate,
     super.locale,
+    super.enableDragAndSelect,
     this.gridThumbnailSize = defaultAssetGridPreviewSize,
     this.previewThumbnailSize,
     this.specialPickerType,
@@ -1268,6 +1274,10 @@ class DefaultAssetPickerBuilderDelegate
             context.topPadding + appBarPreferredSize!.height;
 
         final textDirection = Directionality.of(context);
+        final provider = Provider.of<DefaultAssetPickerProvider>(context);
+        final double screenWidth = MediaQuery.sizeOf(context).width;
+        final double itemSize = screenWidth / gridCount;
+
         Widget sliverGrid(BuildContext context, List<AssetEntity> assets) {
           return SliverGrid(
             delegate: SliverChildBuilderDelegate(
@@ -1278,15 +1288,39 @@ class DefaultAssetPickerBuilderDelegate
                   }
                   index -= placeholderCount;
                 }
-                return MergeSemantics(
-                  child: Directionality(
-                    textDirection: textDirection,
-                    child: assetGridItemBuilder(
+
+                Widget child = assetGridItemBuilder(
+                  context,
+                  index,
+                  assets,
+                  specialItem: specialItem,
+                );
+
+                if (enableDragAndSelect) {
+                  child = GestureDetector(
+                    onLongPressStart: (d) => provider.onDragStart(
                       context,
+                      d,
                       index,
-                      assets,
-                      specialItem: specialItem,
+                      assets[index],
                     ),
+                    onLongPressMoveUpdate: (d) => provider.onDragUpdate(
+                      context,
+                      d,
+                      itemSize,
+                      gridCount,
+                      topPadding,
+                    ),
+                    onLongPressCancel: provider.resetDraggingStatus,
+                    onLongPressEnd: provider.onDragEnd,
+                    child: child,
+                  );
+                }
+
+                return MergeSemantics(
+                  child: Directionality(
+                    textDirection: textDirection,
+                    child: child,
                   ),
                 );
               },

lib/src/delegates/asset_picker_delegate.dart

@@ -119,6 +119,7 @@ class AssetPickerDelegate {
         themeColor: pickerConfig.themeColor,
         locale: Localizations.maybeLocaleOf(context),
         shouldAutoplayPreview: pickerConfig.shouldAutoplayPreview,
+        enableDragAndSelect: pickerConfig.enableDragAndSelect,
       ),
     );
     final List<AssetEntity>? result = await Navigator.maybeOf(

lib/src/provider/asset_picker_provider.dart

@@ -254,6 +254,155 @@ abstract class AssetPickerProvider<Asset, Path> extends ChangeNotifier {
     set.remove(item);
     selectedAssets = set;
   }
+
+  /// 拖拽状态
+  /// Drag status
+  bool isInDragging = false;
+
+  /// 边缘自动滚动控制器
+  /// Edge Auto Scrolling Detector. Use to support edge auto scroll when drag position reach the edge of device's screen.
+  EdgeDraggingAutoScroller? _autoScroller;
+
+  // An eyeballed value for a smooth scrolling experience.
+  static const double _kDefaultAutoScrollVelocityScalar = 50;
+
+  /// 起始选择序号
+  /// Item index of the first selected item
+  int initialSelectedIdx = -1;
+
+  /// 拖拽选择 或 拖拽取消选择
+  /// Drag to select or deselect state
+  bool dragSelect = true;
+
+  /// 长按启动拖拽
+  /// Long Press to enable drag and select
+  void onDragStart(
+    BuildContext context,
+    LongPressStartDetails details,
+    int index,
+    Asset entity,
+  ) {
+    isInDragging = true;
+
+    final scrollableState = _checkScrollableStatePresent(context);
+    if (scrollableState == null) {
+      return;
+    }
+
+    _autoScroller = EdgeDraggingAutoScroller(
+      scrollableState,
+      velocityScalar: _kDefaultAutoScrollVelocityScalar,
+    );
+
+    initialSelectedIdx = index;
+
+    dragSelect = !selectedAssets.contains(entity);
+  }
+
+  void onDragUpdate(
+    BuildContext context,
+    LongPressMoveUpdateDetails details,
+    double itemSize,
+    int gridCount,
+    double topPadding,
+  ) {
+    if (!isInDragging) {
+      return;
+    }
+
+    if (dragSelect && selectedAssets.length == maxAssets) {
+      return;
+    }
+
+    final scrollableState = _checkScrollableStatePresent(context);
+    if (scrollableState == null) {
+      return;
+    }
+
+    final column = _getIndex(details.globalPosition.dx, itemSize);
+    final row = _getIndex(
+      details.globalPosition.dy -
+          topPadding -
+          24.0 +
+          scrollableState.position.pixels,
+      itemSize,
+    );
+
+    final currentDragIndex = row * gridCount + column;
+
+    List<Asset> filteredAssetList = <Asset>[];
+    // add asset
+    if (currentDragIndex < initialSelectedIdx) {
+      filteredAssetList = _currentAssets
+          .getRange(
+            currentDragIndex,
+            math.min(initialSelectedIdx + 1, currentAssets.length),
+          )
+          .toList()
+        ..reversed;
+    } else {
+      filteredAssetList = _currentAssets
+          .getRange(
+            initialSelectedIdx,
+            math.min(currentDragIndex + 1, currentAssets.length),
+          )
+          .toList();
+    }
+
+    filteredAssetList.forEach(dragSelect ? selectAsset : unSelectAsset);
+
+    _autoScroller?.startAutoScrollIfNecessary(
+      Rect.fromLTWH(
+        (column + 1) * itemSize,
+        details.globalPosition.dy > MediaQuery.sizeOf(context).height * 0.8
+            ? (row + 1) * itemSize
+            : math.max(topPadding, details.globalPosition.dy),
+        itemSize,
+        itemSize,
+      ),
+    );
+  }
+
+  void onDragEnd(LongPressEndDetails details) {
+    resetDraggingStatus();
+  }
+
+  /// 复原拖拽状态
+  /// Reset dragging status
+  void resetDraggingStatus() {
+    isInDragging = false;
+    initialSelectedIdx = -1;
+    dragSelect = true;
+    _autoScroller?.stopAutoScroll();
+    _autoScroller = null;
+  }
+
+  /// 检查[Scrollable] state是否存在
+  ///
+  ScrollableState? _checkScrollableStatePresent(BuildContext context) {
+    final scrollable = Scrollable.maybeOf(context);
+    assert(
+      scrollable != null,
+      'To use drag and select function, Scrollable state must be the present to get the actual item position.',
+    );
+    assert(
+      scrollable?.position.axis == Axis.vertical,
+      'To use drag and select function. The Scrollable Axis must be in vertical direction',
+    );
+
+    if (scrollable == null || scrollable.position.axis != Axis.vertical) {
+      resetDraggingStatus();
+      return null;
+    }
+
+    return scrollable;
+  }
+
+  /// 获取坐标
+  /// Get Coordinate Helper
+  int _getIndex(double delta, double itemSize) {
+    return delta ~/ itemSize;
+  }
 }
 
 /// The default implementation of the [AssetPickerProvider] for the picker.