Remove backdrop filters + increase contrast of elevated components (#1129)

integration_test/app_test.dart

@@ -24,7 +24,7 @@ void main() {
       final emailInputField = find.byKey(const ValueKey("emailInputField"));
       final logInButton = find.byKey(const ValueKey("logInButton"));
       await tester.tap(emailInputField);
-      await tester.pumpAndSettle(const Duration(seconds: 20));
+      await tester.pumpAndSettle(const Duration(seconds: 12));
       await findAndTapFAB(tester, logInButton);
 
       //Need to enter OTT manually and clicks the verify button automatically

ios/Podfile.lock

@@ -57,8 +57,6 @@ PODS:
   - flutter_inappwebview/Core (0.0.1):
     - Flutter
     - OrderedSet (~> 5.0)
-  - flutter_keyboard_visibility (0.0.1):
-    - Flutter
   - flutter_local_notifications (0.0.1):
     - Flutter
   - flutter_native_splash (0.0.1):
@@ -189,7 +187,6 @@ DEPENDENCIES:
   - flutter_email_sender (from `.symlinks/plugins/flutter_email_sender/ios`)
   - flutter_image_compress (from `.symlinks/plugins/flutter_image_compress/ios`)
   - flutter_inappwebview (from `.symlinks/plugins/flutter_inappwebview/ios`)
-  - flutter_keyboard_visibility (from `.symlinks/plugins/flutter_keyboard_visibility/ios`)
   - flutter_local_notifications (from `.symlinks/plugins/flutter_local_notifications/ios`)
   - flutter_native_splash (from `.symlinks/plugins/flutter_native_splash/ios`)
   - flutter_secure_storage (from `.symlinks/plugins/flutter_secure_storage/ios`)
@@ -263,8 +260,6 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_image_compress/ios"
   flutter_inappwebview:
     :path: ".symlinks/plugins/flutter_inappwebview/ios"
-  flutter_keyboard_visibility:
-    :path: ".symlinks/plugins/flutter_keyboard_visibility/ios"
   flutter_local_notifications:
     :path: ".symlinks/plugins/flutter_local_notifications/ios"
   flutter_native_splash:
@@ -339,7 +334,6 @@ SPEC CHECKSUMS:
   flutter_email_sender: 02d7443217d8c41483223627972bfdc09f74276b
   flutter_image_compress: 5a5e9aee05b6553048b8df1c3bc456d0afaac433
   flutter_inappwebview: bfd58618f49dc62f2676de690fc6dcda1d6c3721
-  flutter_keyboard_visibility: 0339d06371254c3eb25eeb90ba8d17dca8f9c069
   flutter_local_notifications: 0c0b1ae97e741e1521e4c1629a459d04b9aec743
   flutter_native_splash: 52501b97d1c0a5f898d687f1646226c1f93c56ef
   flutter_secure_storage: 23fc622d89d073675f2eaa109381aefbcf5a49be

ios/Runner.xcodeproj/project.pbxproj

@@ -281,7 +281,6 @@
 				"${BUILT_PRODUCTS_DIR}/flutter_email_sender/flutter_email_sender.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_image_compress/flutter_image_compress.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_inappwebview/flutter_inappwebview.framework",
-				"${BUILT_PRODUCTS_DIR}/flutter_keyboard_visibility/flutter_keyboard_visibility.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_local_notifications/flutter_local_notifications.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_native_splash/flutter_native_splash.framework",
 				"${BUILT_PRODUCTS_DIR}/flutter_secure_storage/flutter_secure_storage.framework",
@@ -338,7 +337,6 @@
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_email_sender.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_image_compress.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_inappwebview.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_keyboard_visibility.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_local_notifications.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_native_splash.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/flutter_secure_storage.framework",

lib/theme/effects.dart

@@ -8,6 +8,10 @@ List<BoxShadow> shadowFloatLight = const [
   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 [
   BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)),
   BoxShadow(

lib/ui/components/action_sheet_widget.dart

@@ -73,9 +73,6 @@ class ActionSheetWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final isTitleAndBodyNull =
         title == null && bodyWidget == null && body == null;
-    final blur = MediaQuery.of(context).platformBrightness == Brightness.light
-        ? blurMuted
-        : blurBase;
     final extraWidth = MediaQuery.of(context).size.width - restrictedMaxWidth;
     final double? horizontalPadding = extraWidth > 0 ? extraWidth / 2 : null;
     return Padding(
@@ -89,38 +86,35 @@ class ActionSheetWidget extends StatelessWidget {
         decoration: BoxDecoration(boxShadow: shadowMenuLight),
         child: ClipRRect(
           borderRadius: const BorderRadius.all(Radius.circular(8)),
-          child: BackdropFilter(
-            filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
-            child: Container(
-              color: backdropMutedDark,
-              child: Padding(
-                padding: EdgeInsets.fromLTRB(
-                  24,
-                  24,
-                  24,
-                  isTitleAndBodyNull ? 24 : 28,
-                ),
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    isTitleAndBodyNull
-                        ? const SizedBox.shrink()
-                        : Padding(
-                            padding: const EdgeInsets.only(bottom: 36),
-                            child: ContentContainerWidget(
-                              title: title,
-                              bodyWidget: bodyWidget,
-                              body: body,
-                              bodyHighlight: bodyHighlight,
-                              actionSheetType: actionSheetType,
-                              isCheckIconGreen: isCheckIconGreen,
-                            ),
+          child: Container(
+            color: backgroundElevated2Dark,
+            child: Padding(
+              padding: EdgeInsets.fromLTRB(
+                24,
+                24,
+                24,
+                isTitleAndBodyNull ? 24 : 28,
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  isTitleAndBodyNull
+                      ? const SizedBox.shrink()
+                      : Padding(
+                          padding: const EdgeInsets.only(bottom: 36),
+                          child: ContentContainerWidget(
+                            title: title,
+                            bodyWidget: bodyWidget,
+                            body: body,
+                            bodyHighlight: bodyHighlight,
+                            actionSheetType: actionSheetType,
+                            isCheckIconGreen: isCheckIconGreen,
                           ),
-                    ActionButtons(
-                      actionButtons,
-                    ),
-                  ],
-                ),
+                        ),
+                  ActionButtons(
+                    actionButtons,
+                  ),
+                ],
               ),
             ),
           ),

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/models/gallery_type.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/ui/components/bottom_action_bar/action_bar_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
         ? (widthOfScreen - restrictedMaxWidth) / 2
         : 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),
+                ),
+              ),
+            ),
+          )
+        ],
       ),
     );
   }

lib/ui/home/home_bottom_nav_bar.dart

@@ -72,17 +72,16 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
 
   @override
   Widget build(BuildContext context) {
+    final isBottomInsetPresent = MediaQuery.of(context).viewPadding.bottom != 0;
+    final bottomPadding = isBottomInsetPresent ? 32.0 : 8.0;
     final bool filesAreSelected = widget.selectedFiles.files.isNotEmpty;
     final enteColorScheme = getEnteColorScheme(context);
 
-    return AnimatedContainer(
-      duration: const Duration(milliseconds: 300),
-      curve: Curves.easeInOut,
-      height: filesAreSelected ? 0 : 56,
-      child: AnimatedOpacity(
-        duration: const Duration(milliseconds: 100),
-        opacity: filesAreSelected ? 0.0 : 1.0,
-        curve: Curves.easeIn,
+    return RepaintBoundary(
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+        height: filesAreSelected ? 0 : (56 + bottomPadding),
         child: IgnorePointer(
           ignoring: filesAreSelected,
           child: ListView(

lib/ui/home_widget.dart

@@ -345,7 +345,6 @@ class _HomeWidgetState extends State<HomeWidget> {
         );
       });
     }
-    final isBottomInsetPresent = MediaQuery.of(context).viewPadding.bottom != 0;
 
     final bool showBackupFolderHook =
         !Configuration.instance.hasSelectedAnyBackupFolder() &&
@@ -390,12 +389,9 @@ class _HomeWidgetState extends State<HomeWidget> {
         ),
         Align(
           alignment: Alignment.bottomCenter,
-          child: Padding(
-            padding: EdgeInsets.only(bottom: isBottomInsetPresent ? 32 : 8),
-            child: HomeBottomNavigationBar(
-              _selectedFiles,
-              selectedTabIndex: _selectedTabIndex,
-            ),
+          child: HomeBottomNavigationBar(
+            _selectedFiles,
+            selectedTabIndex: _selectedTabIndex,
           ),
         ),
       ],