💄 Update style usages for ThemeData (#519)

AlexV525 · web-flow · commit ec7adc15f04b · 2023-12-07T14:39:45.000+08:00
Resolves #500.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,10 @@ See the [Migration Guide](guides/migration_guide.md) for the details of breaking
 
 - Integrate `PermissionRequestOption` for callers.
 
+### Improvements
+
+- Adapt `ThemeData` usages.
+
 ## 8.9.0-dev.1
 
 ### Breaking changes
diff --git a/lib/src/delegates/asset_picker_builder_delegate.dart b/lib/src/delegates/asset_picker_builder_delegate.dart
@@ -1434,7 +1434,7 @@ class DefaultAssetPickerBuilderDelegate
         gradient: LinearGradient(
           begin: AlignmentDirectional.bottomCenter,
           end: AlignmentDirectional.topCenter,
-          colors: <Color>[theme.dividerColor, Colors.transparent],
+          colors: <Color>[theme.splashColor, Colors.transparent],
         ),
       ),
       child: Padding(
@@ -1465,7 +1465,7 @@ class DefaultAssetPickerBuilderDelegate
             gradient: LinearGradient(
               begin: AlignmentDirectional.topCenter,
               end: AlignmentDirectional.bottomCenter,
-              colors: <Color>[theme.dividerColor, Colors.transparent],
+              colors: <Color>[theme.splashColor, Colors.transparent],
             ),
           ),
           child: Padding(
@@ -1502,7 +1502,7 @@ class DefaultAssetPickerBuilderDelegate
           height: appBarItemHeight,
           padding: const EdgeInsets.symmetric(horizontal: 12),
           color: theme.colorScheme.secondary,
-          disabledColor: theme.dividerColor,
+          disabledColor: theme.splashColor,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(3),
           ),
@@ -1745,7 +1745,7 @@ class DefaultAssetPickerBuilderDelegate
           padding: const EdgeInsetsDirectional.only(start: 12, end: 6),
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(999),
-            color: theme.dividerColor,
+            color: theme.focusColor,
           ),
           child: Selector<DefaultAssetPickerProvider,
               PathWrapper<AssetPathEntity>?>(
@@ -2107,7 +2107,7 @@ class DefaultAssetPickerBuilderDelegate
           gradient: LinearGradient(
             begin: AlignmentDirectional.bottomCenter,
             end: AlignmentDirectional.topCenter,
-            colors: <Color>[theme.dividerColor, Colors.transparent],
+            colors: <Color>[theme.splashColor, Colors.transparent],
           ),
         ),
         child: Row(
@@ -2147,7 +2147,9 @@ class DefaultAssetPickerBuilderDelegate
       padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(
         bottom: context.bottomPadding,
       ),
-      color: theme.primaryColor.withOpacity(isAppleOS(context) ? .9 : 1),
+      color: theme.bottomAppBarTheme.color?.withOpacity(
+        theme.bottomAppBarTheme.color!.opacity * (isAppleOS(context) ? .9 : 1),
+      ),
       child: Row(
         children: <Widget>[
           if (isPreviewEnabled) previewButton(context),
@@ -2162,15 +2164,17 @@ class DefaultAssetPickerBuilderDelegate
         children: <Widget>[accessLimitedBottomTip(context), child],
       );
     }
-    child = ClipRect(
-      child: BackdropFilter(
-        filter: ui.ImageFilter.blur(
-          sigmaX: appleOSBlurRadius,
-          sigmaY: appleOSBlurRadius,
+    if (isAppleOS(context)) {
+      child = ClipRect(
+        child: BackdropFilter(
+          filter: ui.ImageFilter.blur(
+            sigmaX: appleOSBlurRadius,
+            sigmaY: appleOSBlurRadius,
+          ),
+          child: child,
         ),
-        child: child,
-      ),
-    );
+      );
+    }
     return child;
   }
 
diff --git a/lib/src/delegates/asset_picker_delegate.dart b/lib/src/delegates/asset_picker_delegate.dart
@@ -241,14 +241,30 @@ class AssetPickerDelegate {
           selectionHandleColor: themeColor,
         ),
         indicatorColor: themeColor,
-        appBarTheme: const AppBarTheme(
-          systemOverlayStyle: SystemUiOverlayStyle(
+        appBarTheme: AppBarTheme(
+          backgroundColor: Colors.grey[100],
+          systemOverlayStyle: const SystemUiOverlayStyle(
             statusBarBrightness: Brightness.light,
             statusBarIconBrightness: Brightness.dark,
           ),
+          iconTheme: IconThemeData(color: Colors.grey[900]),
           elevation: 0,
         ),
+        bottomAppBarTheme: BottomAppBarTheme(
+          color: Colors.grey[100],
+        ),
         buttonTheme: ButtonThemeData(buttonColor: themeColor),
+        iconTheme: IconThemeData(color: Colors.grey[900]),
+        checkboxTheme: CheckboxThemeData(
+          checkColor: MaterialStateProperty.all(Colors.black),
+          fillColor: MaterialStateProperty.resolveWith((states) {
+            if (states.contains(MaterialState.selected)) {
+              return themeColor;
+            }
+            return null;
+          }),
+          side: const BorderSide(color: Colors.black),
+        ),
         colorScheme: ColorScheme(
           primary: Colors.grey[50]!,
           secondary: themeColor,
@@ -257,7 +273,7 @@ class AssetPickerDelegate {
           brightness: Brightness.light,
           error: const Color(0xffcf6679),
           onPrimary: Colors.white,
-          onSecondary: Colors.white,
+          onSecondary: Colors.grey[100]!,
           onSurface: Colors.black,
           onBackground: Colors.black,
           onError: Colors.white,
@@ -278,14 +294,30 @@ class AssetPickerDelegate {
         selectionHandleColor: themeColor,
       ),
       indicatorColor: themeColor,
-      appBarTheme: const AppBarTheme(
-        systemOverlayStyle: SystemUiOverlayStyle(
+      appBarTheme: AppBarTheme(
+        backgroundColor: Colors.grey[850],
+        systemOverlayStyle: const SystemUiOverlayStyle(
           statusBarBrightness: Brightness.dark,
           statusBarIconBrightness: Brightness.light,
         ),
+        iconTheme: const IconThemeData(color: Colors.white),
         elevation: 0,
       ),
+      bottomAppBarTheme: BottomAppBarTheme(
+        color: Colors.grey[850],
+      ),
       buttonTheme: ButtonThemeData(buttonColor: themeColor),
+      iconTheme: const IconThemeData(color: Colors.white),
+      checkboxTheme: CheckboxThemeData(
+        checkColor: MaterialStateProperty.all(Colors.white),
+        fillColor: MaterialStateProperty.resolveWith((states) {
+          if (states.contains(MaterialState.selected)) {
+            return themeColor;
+          }
+          return null;
+        }),
+        side: const BorderSide(color: Colors.white),
+      ),
       colorScheme: ColorScheme(
         primary: Colors.grey[900]!,
         secondary: themeColor,
@@ -294,7 +326,7 @@ class AssetPickerDelegate {
         brightness: Brightness.dark,
         error: const Color(0xffcf6679),
         onPrimary: Colors.black,
-        onSecondary: Colors.black,
+        onSecondary: Colors.grey[850]!,
         onSurface: Colors.white,
         onBackground: Colors.white,
         onError: Colors.black,
diff --git a/lib/src/delegates/asset_picker_viewer_builder_delegate.dart b/lib/src/delegates/asset_picker_viewer_builder_delegate.dart
@@ -21,6 +21,7 @@ import '../delegates/asset_picker_text_delegate.dart';
 import '../internal/singleton.dart';
 import '../provider/asset_picker_provider.dart';
 import '../provider/asset_picker_viewer_provider.dart';
+import '../widget/asset_picker_app_bar.dart';
 import '../widget/asset_picker_viewer.dart';
 import '../widget/builder/audio_page_builder.dart';
 import '../widget/builder/fade_image_builder.dart';
@@ -537,7 +538,10 @@ class DefaultAssetPickerViewerBuilderDelegate
 
   @override
   Widget bottomDetailBuilder(BuildContext context) {
-    final Color backgroundColor = themeData.primaryColor.withOpacity(.9);
+    final backgroundColor = themeData.bottomAppBarTheme.color?.withOpacity(
+      themeData.bottomAppBarTheme.color!.opacity *
+          (isAppleOS(context) ? .9 : 1),
+    );
     return ValueListenableBuilder2<bool, int>(
       firstNotifier: isDisplayingDetail,
       secondNotifier: selectedNotifier,
@@ -694,72 +698,40 @@ class DefaultAssetPickerViewerBuilderDelegate
   /// AppBar widget.
   /// 顶栏部件
   Widget appBar(BuildContext context) {
-    return ValueListenableBuilder<bool>(
-      valueListenable: isDisplayingDetail,
-      builder: (_, bool value, Widget? child) => AnimatedPositionedDirectional(
-        duration: kThemeAnimationDuration,
-        curve: Curves.easeInOut,
-        top: value ? 0.0 : -(context.topPadding + kToolbarHeight),
-        start: 0.0,
-        end: 0.0,
-        height: context.topPadding + kToolbarHeight,
-        child: child!,
+    return AssetPickerAppBar(
+      leading: Semantics(
+        sortKey: ordinalSortKey(0),
+        child: IconButton(
+          tooltip: MaterialLocalizations.of(context).backButtonTooltip,
+          onPressed: Navigator.of(context).maybePop,
+          icon: const Icon(Icons.close),
+        ),
       ),
-      child: Container(
-        padding: EdgeInsetsDirectional.only(top: context.topPadding),
-        color: themeData.canvasColor,
-        child: Row(
-          children: <Widget>[
-            Expanded(
-              child: Align(
-                alignment: AlignmentDirectional.centerStart,
-                child: Semantics(
-                  sortKey: ordinalSortKey(0),
-                  child: IconButton(
-                    icon: const Icon(Icons.close),
-                    tooltip: MaterialLocalizations.of(
-                      context,
-                    ).backButtonTooltip,
-                    onPressed: Navigator.of(context).maybePop,
+      centerTitle: true,
+      title: specialPickerType == null
+          ? Semantics(
+              sortKey: ordinalSortKey(0.1),
+              child: StreamBuilder<int>(
+                initialData: currentIndex,
+                stream: pageStreamController.stream,
+                builder: (_, AsyncSnapshot<int> snapshot) => ScaleText(
+                  '${snapshot.requireData + 1}/${previewAssets.length}',
+                  style: const TextStyle(
+                    fontSize: 17,
+                    fontWeight: FontWeight.w500,
                   ),
                 ),
               ),
-            ),
-            if (specialPickerType == null)
-              Expanded(
-                child: Center(
-                  child: Semantics(
-                    sortKey: ordinalSortKey(0.1),
-                    child: StreamBuilder<int>(
-                      initialData: currentIndex,
-                      stream: pageStreamController.stream,
-                      builder: (_, AsyncSnapshot<int> snapshot) => ScaleText(
-                        '${snapshot.requireData + 1}/${previewAssets.length}',
-                        style: const TextStyle(
-                          fontSize: 17,
-                          fontWeight: FontWeight.w500,
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            if (provider != null)
-              Expanded(
-                child: Container(
-                  alignment: AlignmentDirectional.centerEnd,
-                  padding: const EdgeInsetsDirectional.only(end: 14),
-                  child: Semantics(
-                    sortKey: ordinalSortKey(0.2),
-                    child: selectButton(context),
-                  ),
-                ),
-              )
-            else
-              const Spacer(),
-          ],
-        ),
-      ),
+            )
+          : null,
+      actions: [
+        if (provider != null)
+          Semantics(
+            sortKey: ordinalSortKey(0.2),
+            child: selectButton(context),
+          ),
+        const SizedBox(width: 14),
+      ],
     );
   }
 
@@ -819,7 +791,7 @@ class DefaultAssetPickerViewerBuilderDelegate
             height: 32,
             padding: const EdgeInsets.symmetric(horizontal: 12),
             color: themeData.colorScheme.secondary,
-            disabledColor: themeData.dividerColor,
+            disabledColor: themeData.splashColor,
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(3),
             ),
@@ -911,13 +883,12 @@ class DefaultAssetPickerViewerBuilderDelegate
       builder: (_, Widget? w) => StreamBuilder<int>(
         initialData: currentIndex,
         stream: pageStreamController.stream,
-        builder: (BuildContext _, AsyncSnapshot<int> s) {
+        builder: (_, s) {
           final AssetEntity asset = previewAssets.elementAt(s.data!);
           return Selector<AssetPickerViewerProvider<AssetEntity>,
               List<AssetEntity>>(
-            selector: (_, AssetPickerViewerProvider<AssetEntity> p) =>
-                p.currentlySelectedAssets,
-            builder: (BuildContext c, List<AssetEntity> assets, _) {
+            selector: (_, p) => p.currentlySelectedAssets,
+            builder: (context, assets, _) {
               final bool isSelected = assets.contains(asset);
               return Semantics(
                 selected: isSelected,
@@ -929,9 +900,9 @@ class DefaultAssetPickerViewerBuilderDelegate
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: <Widget>[
                     if (isAppleOS(context))
-                      _appleOSSelectButton(c, isSelected, asset)
+                      _appleOSSelectButton(context, isSelected, asset)
                     else
-                      _androidSelectButton(c, isSelected, asset),
+                      _androidSelectButton(context, isSelected, asset),
                     if (!isAppleOS(context))
                       ScaleText(
                         textDelegate.select,
diff --git a/lib/src/widget/asset_picker_app_bar.dart b/lib/src/widget/asset_picker_app_bar.dart
@@ -102,8 +102,6 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     final ThemeData theme = Theme.of(context);
-    final AppBarTheme appBarTheme = theme.appBarTheme;
-    final IconThemeData iconTheme = this.iconTheme ?? theme.iconTheme;
     final Widget? titleWidget;
     if (centerTitle) {
       titleWidget = Center(child: title);
@@ -174,16 +172,20 @@ class AssetPickerAppBar extends StatelessWidget implements PreferredSizeWidget {
       );
     }
 
-    /// Apply the icon theme data.
-    child = IconTheme.merge(data: iconTheme, child: child);
+    final AppBarTheme appBarTheme = theme.appBarTheme;
 
-    final Color effectiveBackgroundColor =
-        backgroundColor ?? theme.colorScheme.surface;
+    /// Apply the icon theme data.
+    child = IconTheme.merge(
+      data: iconTheme ?? appBarTheme.iconTheme ?? theme.iconTheme,
+      child: child,
+    );
 
     // Set [SystemUiOverlayStyle] according to the brightness.
     final Brightness effectiveBrightness = brightness ??
         appBarTheme.systemOverlayStyle?.statusBarBrightness ??
         theme.brightness;
+    final Color effectiveBackgroundColor =
+        backgroundColor ?? theme.colorScheme.surface;
     final SystemUiOverlayStyle overlayStyle = appBarTheme.systemOverlayStyle ??
         SystemUiOverlayStyle(
           statusBarColor: effectiveBackgroundColor,
