💄 Sync UI details for the viewer

Author: AlexV525

lib/src/delegates/asset_picker_viewer_builder_delegate.dart

@@ -4,6 +4,7 @@
 ///
 import 'dart:async';
 import 'dart:io';
+import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -47,13 +48,17 @@ abstract class AssetPickerViewerBuilderDelegate<A, P> {
   /// [StreamController] for viewing page index update.
   /// 用于更新当前正在浏览的资源页码的流控制器
   ///
-  /// The main purpose is narrow down build parts when page index is changing,
+  /// The main purpose is to narrow down build parts when index is changing,
   /// prevent widely [setState] and causing other widgets rebuild.
   /// 使用 [StreamController] 的主要目的是缩小页码变化时构建组件的范围，
   /// 防止滥用 [setState] 导致其他部件重新构建。
   final StreamController<int> pageStreamController =
       StreamController<int>.broadcast();
 
+  /// The [ScrollController] for the previewing assets list.
+  /// 正在预览的资源的 [ScrollController]
+  final ScrollController previewingListController = ScrollController();
+
   /// The [State] for a viewer.
   /// 预览器的状态实例
   late final AssetPickerViewerState<A, P> viewerState;
@@ -103,12 +108,18 @@ abstract class AssetPickerViewerBuilderDelegate<A, P> {
   /// 保留一个 dispose 方法与 [State] 同步。
   void dispose() {
     pageStreamController.close();
+    previewingListController.dispose();
+    selectedNotifier.dispose();
   }
 
   /// The length getter for selected assets currently.
   /// 当前选中的资源的长度获取
   int get selectedCount => selectedAssets?.length ?? 0;
 
+  /// 是否已经选择了最大数量的资源
+  bool get selectedMaximumAssets =>
+      selectedAssets != null && selectedAssets!.length == maxAssets;
+
   /// Construct a notifier to notify
   /// whether if a new asset is selected or unselected.
   /// 构造一个通知器，在新资源选中或取消选中时通知。
@@ -289,6 +300,7 @@ class DefaultAssetPickerViewerBuilderDelegate
   @override
   void dispose() {
     _doubleTapAnimationController.dispose();
+    pageController.dispose();
     super.dispose();
   }
 
@@ -456,18 +468,20 @@ class DefaultAssetPickerViewerBuilderDelegate
                   valueListenable: selectedNotifier,
                   builder: (_, int count, __) => Container(
                     width: count > 0 ? double.maxFinite : 0,
-                    height: 90,
+                    height: bottomPreviewHeight,
                     color: _backgroundColor,
                     child: ListView.builder(
+                      controller: previewingListController,
                       scrollDirection: Axis.horizontal,
                       padding: const EdgeInsets.symmetric(horizontal: 5.0),
+                      physics: const ClampingScrollPhysics(),
                       itemCount: count,
                       itemBuilder: bottomDetailItemBuilder,
                     ),
                   ),
                 ),
               Container(
-                height: 50,
+                height: bottomBarHeight,
                 padding: const EdgeInsets.symmetric(horizontal: 20.0),
                 decoration: BoxDecoration(
                   border: Border(
@@ -498,8 +512,12 @@ class DefaultAssetPickerViewerBuilderDelegate
 
   @override
   Widget bottomDetailItemBuilder(BuildContext context, int index) {
+    const double padding = 8.0;
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
+      padding: const EdgeInsets.symmetric(
+        horizontal: padding,
+        vertical: padding * 2,
+      ),
       child: AspectRatio(
         aspectRatio: 1.0,
         child: StreamBuilder<int>(
@@ -522,9 +540,24 @@ class DefaultAssetPickerViewerBuilderDelegate
             }();
             return GestureDetector(
               onTap: () {
+                if (pageController.page == index.toDouble()) {
+                  return;
+                }
+                final int page;
                 if (previewAssets != selectedAssets) {
-                  pageController.jumpToPage(previewAssets.indexOf(asset));
+                  page = previewAssets.indexOf(asset);
+                } else {
+                  page = index;
                 }
+                pageController.jumpToPage(page);
+                final double offset =
+                    (index - 0.5) * (bottomPreviewHeight - padding * 3) -
+                        context.mediaQuery.size.width / 4;
+                previewingListController.animateTo(
+                  math.max(0, offset),
+                  curve: Curves.ease,
+                  duration: kThemeChangeDuration,
+                );
               },
               child: Selector<AssetPickerViewerProvider<AssetEntity>?,
                   List<AssetEntity>?>(
@@ -548,7 +581,7 @@ class DefaultAssetPickerViewerBuilderDelegate
                           border: isViewing
                               ? Border.all(
                                   color: themeData.colorScheme.secondary,
-                                  width: 2.0,
+                                  width: 3,
                                 )
                               : null,
                           color: isSelected
@@ -691,6 +724,9 @@ class DefaultAssetPickerViewerBuilderDelegate
   /// Select button for apple OS.
   /// 苹果系列系统的选择按钮
   Widget _appleOSSelectButton(bool isSelected, AssetEntity asset) {
+    if (!isSelected && selectedMaximumAssets) {
+      return const SizedBox.shrink();
+    }
     return Padding(
       padding: const EdgeInsetsDirectional.only(end: 10.0),
       child: GestureDetector(
@@ -712,17 +748,7 @@ class DefaultAssetPickerViewerBuilderDelegate
             color: isSelected ? themeData.buttonColor : null,
             shape: BoxShape.circle,
           ),
-          child: Center(
-            child: isSelected
-                ? Text(
-                    '${selectedAssets!.indexOf(asset) + 1}',
-                    style: const TextStyle(
-                      fontSize: 16.0,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  )
-                : const Icon(Icons.check, size: 20.0),
-          ),
+          child: const Center(child: Icon(Icons.check, size: 20.0)),
         ),
       ),
     );