✨ Add gridThumbSize (#117)

Co-authored-by: Alex Li <[email protected]>

Author: yanivshaked

README-ZH.md

@@ -153,10 +153,11 @@ platform :ios, '9.0'
 | selectedAssets            | `List<AssetEntity>?`   | 已选的资源。确保不重复选择。如果你允许重复选择，请将其置空。 | `null`              |
 | maxAssets                 | `int`                  | 最多选择的图片数量                      | 9                   |
 | pageSize                  | `int`                  | 分页加载时每页加载的资源数量。**必须为网格数的倍数。** 设置为`null`可以取消分页。 | 320 (80 * 4) |
-| pathThumbSize             | `int`                  | 选择器的缩略图大小                      | 80                  |
+| gridThumbSize             | `int`                  | 预览网格的缩略图大小                     | 200                  |
+| pathThumbSize             | `int`                  | 路径选择器的缩略图大小                    | 80                  |
+| previewThumbSize          | `List<int>?`           | 预览时图片的缩略图大小                    | `null`                 |
 | gridCount                 | `int`                  | 选择器网格数量                        | 4                   |
 | requestType               | `RequestType`          | 选择器选择资源的类型                    | `RequestType.image` |
-| previewThumbSize          | `List<int>?`           | 预览时图片的缩略图大小                    | `null`                 |
 | specialPickerType         | `SpecialPickerType?`   | 提供一些特殊的选择器类型以整合非常规的选择行为 | `null` |
 | themeColor                | `Color?`               | 选择器的主题色  | `Color(0xff00bc56)` |
 | pickerTheme               | `ThemeData?`           | 选择器的主题提供，包括查看器 | `null` |

README.md

@@ -181,10 +181,11 @@ platform :osx, '10.15'
 | selectedAssets            | `List<AssetEntity>?`        | Selected assets. Prevent duplicate selection. If you don't need to prevent duplicate selection, just don't pass it. | `null`                              |
 | maxAssets                 | `int`                       | Maximum asset that the picker can pick.                      | 9                                   |
 | pageSize                  | `int?`                      | Number of assets per page. **Must be a multiple of `gridCount`**. | 320 (80 * 4)                        |
-| pathThumbSize             | `int`                       | Thumbnail size.                                              | 80                                  |
+| gridThumbSize             | `int`                       | Thumbnail size for the grid's item.                          | 200                                 |
+| pathThumbSize             | `int`                       | Thumbnail size for the path selector.                        | 80                                  |
+| previewThumbSize          | `List<int>?`                | Preview thumbnail size in the viewer.                        | `null`                              |
 | gridCount                 | `int`                       | Grid count in picker.                                        | 4                                   |
 | requestType               | `RequestType`               | Request type for picker.                                     | `RequestType.image`                 |
-| previewThumbSize          | `List<int>?`                | Preview thumbnail size in the viewer.                        | `null`                              |
 | specialPickerType         | `SpacialPickerType?`        | Provides the option to integrate a custom picker type.       | `null`                              |
 | themeColor                | `Color?`                    | Main theme color for the picker.                             | `Color(0xff00bc56)`                 |
 | pickerTheme               | `ThemeData?`                | Theme data provider for the picker and the viewer.           | `null`                              |

example/lib/pages/multi_assets_page.dart

@@ -57,15 +57,15 @@ class _MultiAssetsPageState extends State<MultiAssetsPage>
       PickMethodModel(
         icon: '🎚',
         name: 'Custom image preview thumb size',
-        description:
-            'You can reduce the thumb size to get more quickly load speed.',
+        description: 'You can reduce the thumb size to get faster load speed.',
         method: (BuildContext context, List<AssetEntity> assets) {
           return AssetPicker.pickAssets(
             context,
             maxAssets: maxAssetsCount,
             selectedAssets: assets,
             requestType: RequestType.image,
-            previewThumbSize: const <int>[300, 300],
+            previewThumbSize: const <int>[150, 150],
+            gridThumbSize: 80,
           );
         },
       ),

lib/src/constants/constants.dart

@@ -45,7 +45,7 @@ class Constants {
       DefaultAssetsPickerTextDelegate();
   static SortPathDelegate sortPathDelegate = SortPathDelegate.common;
 
-  static const List<int> defaultPreviewThumbSize = <int>[200, 200];
+  static const int defaultGridThumbSize = 200;
 }
 
 /// Log only in debug mode.

lib/src/delegates/asset_picker_builder_delegate.dart

@@ -421,6 +421,7 @@ class DefaultAssetPickerBuilderDelegate
     WidgetBuilder? specialItemBuilder,
     IndicatorBuilder? loadingIndicatorBuilder,
     bool allowSpecialItemWhenEmpty = false,
+    this.gridThumbSize = Constants.defaultGridThumbSize,
     this.previewThumbSize,
     this.specialPickerType,
   })  : assert(
@@ -439,13 +440,25 @@ class DefaultAssetPickerBuilderDelegate
           allowSpecialItemWhenEmpty: allowSpecialItemWhenEmpty,
         );
 
+  /// Thumbnail size in the grid.
+  /// 预览时网络的缩略图大小
+  ///
+  /// This only works on images and videos since other types does not have to
+  /// request for the thumbnail data. The preview can speed up by reducing it.
+  /// 该参数仅生效于图片和视频类型的资源，因为其他资源不需要请求缩略图数据。
+  /// 预览图片的速度可以通过适当降低它的数值来提升。
+  ///
+  /// This cannot be `null` or a large value since you shouldn't use the
+  /// original data for the grid.
+  /// 该值不能为空或者非常大，因为在网格中使用原数据不是一个好的决定。
+  final int gridThumbSize;
+
   /// Preview thumbnail size in the viewer.
   /// 预览时图片的缩略图大小
   ///
-  /// This only works on images since other types does not have request
-  /// for thumb data. The speed of preview can be raised by reducing it.
-  ///
-  /// 该参数仅生效于图片类型的资源，因为其他资源不需要请求缩略图数据。
+  /// This only works on images and videos since other types does not have to
+  /// request for the thumbnail data. The preview can speed up by reducing it.
+  /// 该参数仅生效于图片和视频类型的资源，因为其他资源不需要请求缩略图数据。
   /// 预览图片的速度可以通过适当降低它的数值来提升。
   ///
   /// Default is `null`, which will request the origin data.
@@ -802,8 +815,11 @@ class DefaultAssetPickerBuilderDelegate
     int index,
     AssetEntity asset,
   ) {
-    final AssetEntityImageProvider imageProvider =
-        AssetEntityImageProvider(asset, isOriginal: false);
+    final AssetEntityImageProvider imageProvider = AssetEntityImageProvider(
+      asset,
+      isOriginal: false,
+      thumbSize: <int>[gridThumbSize, gridThumbSize],
+    );
     return RepaintBoundary(
       child: ExtendedImage(
         image: imageProvider,

lib/src/delegates/asset_picker_viewer_builder_delegate.dart

@@ -369,7 +369,8 @@ class DefaultAssetPickerViewerBuilderDelegate
         child: ExtendedImage(
           image: AssetEntityImageProvider(
             asset,
-            isOriginal: false,
+            isOriginal: previewThumbSize == null,
+            thumbSize: previewThumbSize,
           ),
           fit: BoxFit.cover,
         ),

lib/src/provider/asset_entity_image_provider.dart

@@ -14,7 +14,7 @@ class AssetEntityImageProvider extends ImageProvider<AssetEntityImageProvider> {
   const AssetEntityImageProvider(
     this.entity, {
     this.scale = 1.0,
-    this.thumbSize = Constants.defaultPreviewThumbSize,
+    this.thumbSize,
     this.isOriginal = true,
   }) : assert(
           isOriginal || thumbSize?.length == 2,

lib/src/widget/asset_picker.dart

@@ -24,6 +24,7 @@ class AssetPicker<A, P> extends StatelessWidget {
     List<AssetEntity>? selectedAssets,
     int maxAssets = 9,
     int pageSize = 80,
+    int gridThumbSize = Constants.defaultGridThumbSize,
     int pathThumbSize = 80,
     int gridCount = 4,
     RequestType requestType = RequestType.image,
@@ -95,6 +96,7 @@ class AssetPicker<A, P> extends StatelessWidget {
               textDelegate: textDelegate,
               themeColor: themeColor,
               pickerTheme: pickerTheme,
+              gridThumbSize: gridThumbSize,
               previewThumbSize: previewThumbSize,
               specialPickerType: specialPickerType,
               specialItemPosition: specialItemPosition,