Ver código fonte

Remove backdrop filter and add elevation to bottom action bar

ashilkn 2 anos atrás
pai
commit
fc7fe1dc4c

+ 4 - 0
lib/theme/effects.dart

@@ -8,6 +8,10 @@ List<BoxShadow> shadowFloatLight = const [
   BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.25)),
   BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.25)),
 ];
 ];
 
 
+List<BoxShadow> shadowFloatFaintLight = const [
+  BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.12)),
+];
+
 List<BoxShadow> shadowMenuLight = const [
 List<BoxShadow> shadowMenuLight = const [
   BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)),
   BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)),
   BoxShadow(
   BoxShadow(

+ 53 - 55
lib/ui/components/bottom_action_bar/bottom_action_bar_widget.dart

@@ -6,7 +6,7 @@ import 'package:photos/core/constants.dart';
 import "package:photos/generated/l10n.dart";
 import "package:photos/generated/l10n.dart";
 import 'package:photos/models/gallery_type.dart';
 import 'package:photos/models/gallery_type.dart';
 import 'package:photos/models/selected_files.dart';
 import 'package:photos/models/selected_files.dart';
-import 'package:photos/theme/effects.dart';
+import "package:photos/theme/effects.dart";
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/bottom_action_bar/action_bar_widget.dart';
 import 'package:photos/ui/components/bottom_action_bar/action_bar_widget.dart';
 import 'package:photos/ui/components/buttons/icon_button_widget.dart';
 import 'package:photos/ui/components/buttons/icon_button_widget.dart';
@@ -42,63 +42,61 @@ class BottomActionBarWidget extends StatelessWidget {
     final double leftRightPadding = widthOfScreen > restrictedMaxWidth
     final double leftRightPadding = widthOfScreen > restrictedMaxWidth
         ? (widthOfScreen - restrictedMaxWidth) / 2
         ? (widthOfScreen - restrictedMaxWidth) / 2
         : 0;
         : 0;
-    return ClipRRect(
-      child: BackdropFilter(
-        filter: ImageFilter.blur(sigmaX: blurFaint, sigmaY: blurFaint),
-        child: Container(
-          color: colorScheme.backdropBase,
-          padding: EdgeInsets.only(
-            top: 4,
-            bottom: hasSmallerBottomPadding ? 24 : 36,
-            right: leftRightPadding,
-            left: leftRightPadding,
-          ),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              ExpandableNotifier(
-                controller: _expandableController,
-                child: ExpandablePanel(
-                  theme: _getExpandableTheme(),
-                  header: Padding(
-                    padding: EdgeInsets.symmetric(
-                      horizontal: text == null ? 12 : 0,
-                    ),
-                    child: ActionBarWidget(
-                      selectedFiles: selectedFiles,
-                      galleryType: type,
-                      text: text,
-                      iconButtons: _iconButtons(context),
-                    ),
-                  ),
-                  expanded: expandedMenu,
-                  collapsed: const SizedBox.shrink(),
-                  controller: _expandableController,
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 16,
-                  vertical: 14,
+    return Container(
+      decoration: BoxDecoration(
+        color: colorScheme.backgroundElevated,
+        boxShadow: shadowFloatFaintLight,
+      ),
+      padding: EdgeInsets.only(
+        top: 4,
+        bottom: hasSmallerBottomPadding ? 24 : 36,
+        right: leftRightPadding,
+        left: leftRightPadding,
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          ExpandableNotifier(
+            controller: _expandableController,
+            child: ExpandablePanel(
+              theme: _getExpandableTheme(),
+              header: Padding(
+                padding: EdgeInsets.symmetric(
+                  horizontal: text == null ? 12 : 0,
                 ),
                 ),
-                child: GestureDetector(
-                  behavior: HitTestBehavior.opaque,
-                  onTap: () {
-                    onCancel?.call();
-                    _expandableController.value = false;
-                  },
-                  child: Center(
-                    child: Text(
-                      S.of(context).cancel,
-                      style: textTheme.bodyBold
-                          .copyWith(color: colorScheme.blurTextBase),
-                    ),
-                  ),
+                child: ActionBarWidget(
+                  selectedFiles: selectedFiles,
+                  galleryType: type,
+                  text: text,
+                  iconButtons: _iconButtons(context),
                 ),
                 ),
-              )
-            ],
+              ),
+              expanded: expandedMenu,
+              collapsed: const SizedBox.shrink(),
+              controller: _expandableController,
+            ),
           ),
           ),
-        ),
+          Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: 16,
+              vertical: 14,
+            ),
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () {
+                onCancel?.call();
+                _expandableController.value = false;
+              },
+              child: Center(
+                child: Text(
+                  S.of(context).cancel,
+                  style: textTheme.bodyBold
+                      .copyWith(color: colorScheme.blurTextBase),
+                ),
+              ),
+            ),
+          )
+        ],
       ),
       ),
     );
     );
   }
   }