Home page performance improvements. (#1107)

lib/ente_theme_data.dart

@@ -293,10 +293,6 @@ extension CustomColorScheme on ColorScheme {
       ? const Color.fromRGBO(196, 196, 196, 0.6)
       : const Color.fromRGBO(255, 255, 255, 0.7);
 
-  Color get gNavBarActiveColor => brightness == Brightness.light
-      ? const Color.fromRGBO(255, 255, 255, 0.6)
-      : const Color.fromRGBO(255, 255, 255, 0.9);
-
   Color get galleryThumbBackgroundColor => brightness == Brightness.light
       ? const Color.fromRGBO(240, 240, 240, 1)
       : const Color.fromRGBO(20, 20, 20, 1);

lib/theme/colors.dart

@@ -22,6 +22,7 @@ class EnteColorScheme {
   // Fill Colors
   final Color fillBase;
   final Color fillBasePressed;
+  final Color fillStrong;
   final Color fillMuted;
   final Color fillFaint;
   final Color fillFaintPressed;
@@ -69,6 +70,7 @@ class EnteColorScheme {
     this.blurTextBase,
     this.fillBase,
     this.fillBasePressed,
+    this.fillStrong,
     this.fillMuted,
     this.fillFaint,
     this.fillFaintPressed,
@@ -108,6 +110,7 @@ const EnteColorScheme lightScheme = EnteColorScheme(
   blurTextBaseLight,
   fillBaseLight,
   fillBasePressedLight,
+  fillStrongLight,
   fillMutedLight,
   fillFaintLight,
   fillFaintPressedLight,
@@ -135,6 +138,7 @@ const EnteColorScheme darkScheme = EnteColorScheme(
   blurTextBaseDark,
   fillBaseDark,
   fillBasePressedDark,
+  fillStrongDark,
   fillMutedDark,
   fillFaintDark,
   fillFaintPressedDark,
@@ -181,12 +185,14 @@ const Color blurTextBaseDark = Color.fromRGBO(255, 255, 255, 0.95);
 // Fill Colors
 const Color fillBaseLight = Color.fromRGBO(0, 0, 0, 1);
 const Color fillBasePressedLight = Color.fromRGBO(0, 0, 0, 0.87);
+const Color fillStrongLight = Color.fromRGBO(0, 0, 0, 0.48);
 const Color fillMutedLight = Color.fromRGBO(0, 0, 0, 0.12);
 const Color fillFaintLight = Color.fromRGBO(0, 0, 0, 0.04);
 const Color fillFaintPressedLight = Color.fromRGBO(0, 0, 0, 0.08);
 
 const Color fillBaseDark = Color.fromRGBO(255, 255, 255, 1);
 const Color fillBasePressedDark = Color.fromRGBO(255, 255, 255, 0.9);
+const Color fillStrongDark = Color.fromRGBO(225, 225, 225, 0.64);
 const Color fillMutedDark = Color.fromRGBO(255, 255, 255, 0.16);
 const Color fillFaintDark = Color.fromRGBO(255, 255, 255, 0.12);
 const Color fillFaintPressedDark = Color.fromRGBO(255, 255, 255, 0.06);
@@ -217,6 +223,7 @@ const Color tabIconDark = Color.fromRGBO(255, 255, 255, 0.80);
 
 const Color fixedStrokeMutedWhite = Color.fromRGBO(255, 255, 255, 0.50);
 const Color strokeSolidMutedLight = Color.fromRGBO(147, 147, 147, 1);
+const Color strokeSolidFaintLight = Color.fromRGBO(221, 221, 221, 1);
 
 const Color _primary700 = Color.fromRGBO(0, 179, 60, 1);
 const Color _primary500 = Color.fromRGBO(29, 185, 84, 1);

lib/ui/home/home_bottom_nav_bar.dart

@@ -1,13 +1,10 @@
 import 'dart:async';
-import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:photos/core/event_bus.dart';
-import 'package:photos/ente_theme_data.dart';
 import 'package:photos/events/tab_changed_event.dart';
 import 'package:photos/models/selected_files.dart';
-import 'package:photos/theme/colors.dart';
-import 'package:photos/theme/effects.dart';
+import "package:photos/theme/colors.dart";
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/nav_bar.dart';
 
@@ -77,10 +74,6 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
   Widget build(BuildContext context) {
     final bool filesAreSelected = widget.selectedFiles.files.isNotEmpty;
     final enteColorScheme = getEnteColorScheme(context);
-    final navBarBlur =
-        MediaQuery.of(context).platformBrightness == Brightness.light
-            ? blurBase
-            : blurMuted;
 
     return AnimatedContainer(
       duration: const Duration(milliseconds: 300),
@@ -98,84 +91,67 @@ class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  ClipRRect(
-                    borderRadius: BorderRadius.circular(32),
-                    child: Container(
-                      alignment: Alignment.bottomCenter,
-                      height: 48,
-                      child: ClipRect(
-                        child: BackdropFilter(
-                          filter: ImageFilter.blur(
-                            sigmaX: navBarBlur,
-                            sigmaY: navBarBlur,
-                          ),
-                          child: GNav(
-                            curve: Curves.easeOutExpo,
-                            backgroundColor:
-                                getEnteColorScheme(context).fillMuted,
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            rippleColor: Colors.white.withOpacity(0.1),
-                            activeColor: Theme.of(context)
-                                .colorScheme
-                                .gNavBarActiveColor,
-                            iconSize: 24,
-                            padding: const EdgeInsets.fromLTRB(16, 6, 16, 6),
-                            duration: const Duration(milliseconds: 200),
-                            gap: 0,
-                            tabBorderRadius: 32,
-                            tabBackgroundColor: Theme.of(context)
-                                .colorScheme
-                                .gNavBarActiveColor,
-                            haptic: false,
-                            tabs: [
-                              GButton(
-                                margin: const EdgeInsets.fromLTRB(8, 6, 10, 6),
-                                icon: Icons.home_rounded,
-                                iconColor: enteColorScheme.tabIcon,
-                                iconActiveColor: strokeBaseLight,
-                                text: '',
-                                onPressed: () {
-                                  _onTabChange(
-                                    0,
-                                    mode: "OnPressed",
-                                  ); // To take care of occasional missing events
-                                },
-                              ),
-                              GButton(
-                                margin: const EdgeInsets.fromLTRB(10, 6, 10, 6),
-                                icon: Icons.collections_rounded,
-                                iconColor: enteColorScheme.tabIcon,
-                                iconActiveColor: strokeBaseLight,
-                                text: '',
-                                onPressed: () {
-                                  _onTabChange(
-                                    1,
-                                    mode: "OnPressed",
-                                  ); // To take care of occasional missing
-                                  // events
-                                },
-                              ),
-                              GButton(
-                                margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
-                                icon: Icons.people_outlined,
-                                iconColor: enteColorScheme.tabIcon,
-                                iconActiveColor: strokeBaseLight,
-                                text: '',
-                                onPressed: () {
-                                  _onTabChange(
-                                    2,
-                                    mode: "OnPressed",
-                                  ); // To take care
-                                  // of occasional missing events
-                                },
-                              ),
-                            ],
-                            selectedIndex: currentTabIndex,
-                            onTabChange: _onTabChange,
-                          ),
-                        ),
+                  GNav(
+                    curve: Curves.easeOutExpo,
+                    backgroundColor:
+                        getEnteColorScheme(context).backgroundElevated2,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    iconSize: 24,
+                    padding: const EdgeInsets.fromLTRB(16, 6, 16, 6),
+                    duration: const Duration(milliseconds: 200),
+                    gap: 0,
+                    tabBorderRadius: 32,
+                    tabBackgroundColor:
+                        MediaQuery.of(context).platformBrightness ==
+                                Brightness.light
+                            ? strokeFainterLight
+                            : strokeSolidFaintLight,
+                    haptic: false,
+                    tabs: [
+                      GButton(
+                        margin: const EdgeInsets.fromLTRB(8, 6, 10, 6),
+                        icon: Icons.home_rounded,
+                        iconColor: enteColorScheme.tabIcon,
+                        iconActiveColor: strokeBaseLight,
+                        text: '',
+                        onPressed: () {
+                          _onTabChange(
+                            0,
+                            mode: "OnPressed",
+                          ); // To take care of occasional missing events
+                        },
                       ),
-                    ),
+                      GButton(
+                        margin: const EdgeInsets.fromLTRB(10, 6, 10, 6),
+                        icon: Icons.collections_rounded,
+                        iconColor: enteColorScheme.tabIcon,
+                        iconActiveColor: strokeBaseLight,
+                        text: '',
+                        onPressed: () {
+                          _onTabChange(
+                            1,
+                            mode: "OnPressed",
+                          ); // To take care of occasional missing
+                          // events
+                        },
+                      ),
+                      GButton(
+                        margin: const EdgeInsets.fromLTRB(10, 6, 8, 6),
+                        icon: Icons.people_outlined,
+                        iconColor: enteColorScheme.tabIcon,
+                        iconActiveColor: strokeBaseLight,
+                        text: '',
+                        onPressed: () {
+                          _onTabChange(
+                            2,
+                            mode: "OnPressed",
+                          ); // To take care
+                          // of occasional missing events
+                        },
+                      ),
+                    ],
+                    selectedIndex: currentTabIndex,
+                    onTabChange: _onTabChange,
                   ),
                 ],
               ),

lib/ui/home_widget.dart

@@ -384,7 +384,9 @@ class _HomeWidgetState extends State<HomeWidget> {
         ),
         const Align(
           alignment: Alignment.bottomCenter,
-          child: BottomShadowWidget(),
+          child: BottomShadowWidget(
+            offsetDy: 36,
+          ),
         ),
         Align(
           alignment: Alignment.bottomCenter,

lib/ui/nav_bar.dart

@@ -2,6 +2,7 @@ library google_nav_bar;
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import "package:photos/theme/effects.dart";
 
 class GNav extends StatefulWidget {
   const GNav({
@@ -78,7 +79,11 @@ class _GNavState extends State<GNav> {
     selectedIndex = widget.selectedIndex;
 
     return Container(
-      color: widget.backgroundColor ?? Colors.transparent,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(32),
+        color: widget.backgroundColor,
+        boxShadow: shadowMenuLight,
+      ),
       child: Row(
         mainAxisAlignment: widget.mainAxisAlignment,
         children: widget.tabs!
@@ -112,9 +117,7 @@ class _GNavState extends State<GNav> {
                 curve: widget.curve ?? Curves.easeInCubic,
                 backgroundGradient:
                     t.backgroundGradient ?? widget.tabBackgroundGradient,
-                backgroundColor: t.backgroundColor ??
-                    widget.tabBackgroundColor ??
-                    Colors.transparent,
+                backgroundColor: t.backgroundColor ?? widget.tabBackgroundColor,
                 duration: widget.duration ?? const Duration(milliseconds: 500),
                 onPressed: () {
                   widget.onTabChange!(widget.tabs!.indexOf(t));

lib/ui/sharing/share_collection_page.dart

@@ -40,7 +40,9 @@ class _ShareCollectionPageState extends State<ShareCollectionPage> {
       await routeToPage(
         context,
         ManageIndividualParticipant(
-            collection: widget.collection, user: _sharees.first!),
+          collection: widget.collection,
+          user: _sharees.first!,
+        ),
       );
     } else {
       await routeToPage(