redesinged bottom nav and added bottom shadow

lib/app.dart

@@ -35,7 +35,7 @@ final lightThemeData = ThemeData(
       onPrimary: Colors.white, primary: Colors.black),
   toggleableActiveColor: Colors.red[400],
   scaffoldBackgroundColor: Colors.white,
-  bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
+  bottomAppBarColor: Color.fromRGBO(196, 196, 196, 0.5),
   backgroundColor: Colors.white,
   appBarTheme: AppBarTheme().copyWith(
       backgroundColor: Colors.white,
@@ -91,7 +91,7 @@ final darkThemeData = ThemeData(
   iconTheme: IconThemeData(color: Colors.white),
   primaryIconTheme: IconThemeData(color: Colors.red, opacity: 1.0, size: 50.0),
   hintColor: Colors.grey,
-  bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
+  bottomAppBarColor: Color.fromRGBO(196, 196, 196, 0.5),
 
   colorScheme: ColorScheme.dark(),
   accentColor: Color.fromRGBO(45, 194, 98, 0.2),

lib/ui/gallery_footer_widget.dart

@@ -12,13 +12,12 @@ class GalleryFooterWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        Padding(padding: EdgeInsets.all(12)),
+        Padding(padding: EdgeInsets.all(6)),
         Divider(
           height: 1,
-          color: Theme.of(context).buttonColor.withOpacity(0.4),
         ),
         Container(
-          padding: EdgeInsets.fromLTRB(28, 36, 28, 46),
+          padding: EdgeInsets.fromLTRB(20, 24, 20, 72),
           child: OutlinedButton(
             style: OutlinedButton.styleFrom(
               shape: RoundedRectangleBorder(
@@ -29,19 +28,15 @@ class GalleryFooterWidget extends StatelessWidget {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisSize: MainAxisSize.min,
+              //mainAxisSize: MainAxisSize.min,
               children: [
                 Icon(
                   Icons.cloud_upload,
-                  //color: Theme.of(context).colorScheme.onSurface
                   color: Theme.of(context).backgroundColor,
                 ),
                 Padding(padding: EdgeInsets.all(6)),
                 Text(
-                  "preserve more",
-                  // style: TextStyle(
-                  //   color: Theme.of(context).colorScheme.onBackground,
-                  // ),
+                  "Preserve more",
                 ),
               ],
             ),

lib/ui/home_widget.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:io';
+import 'dart:ui';
 
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -275,7 +276,7 @@ class _HomeWidgetState extends State<HomeWidget> {
                 ? _getBackupFolderSelectionHook()
                 : _getMainGalleryWidget(),
             _deviceFolderGalleryWidget,
-            _sharedCollectionGallery,
+            //_sharedCollectionGallery,
             _settingsPage,
           ],
           onPageChanged: (page) {
@@ -287,6 +288,22 @@ class _HomeWidgetState extends State<HomeWidget> {
           physics: NeverScrollableScrollPhysics(),
           controller: _pageController,
         ),
+        Align(
+          alignment: Alignment.bottomCenter,
+          child: Container(
+            height: 8,
+            decoration: BoxDecoration(
+              color: Colors.transparent,
+              boxShadow: [
+                BoxShadow(
+                  color: Theme.of(context).backgroundColor,
+                  spreadRadius: 42,
+                  blurRadius: 42, // changes position of shadow
+                ),
+              ],
+            ),
+          ),
+        ),
         Align(
           alignment: Alignment.bottomCenter,
           child: _buildBottomNavigationBar(),
@@ -344,7 +361,7 @@ class _HomeWidgetState extends State<HomeWidget> {
         final importantPaths = Configuration.instance.getPathsToBackUp();
         final ownerID = Configuration.instance.getUserID();
         final archivedCollectionIds =
-        CollectionsService.instance.getArchivedCollections();
+            CollectionsService.instance.getArchivedCollections();
         FileLoadResult result;
         if (importantPaths.isNotEmpty) {
           result = await FilesDB.instance.getImportantFiles(creationStartTime,
@@ -392,7 +409,6 @@ class _HomeWidgetState extends State<HomeWidget> {
     return Stack(
       children: [
         Container(
-          margin: const EdgeInsets.only(bottom: 80),
           child: gallery,
         ),
         HomePageAppBar(_selectedFiles),
@@ -448,71 +464,76 @@ class _HomeWidgetState extends State<HomeWidget> {
   }
 
   Widget _buildBottomNavigationBar() {
-    return Container(
-      margin: EdgeInsets.fromLTRB(48, 12, 48, 4),
-      alignment: Alignment.bottomCenter,
-      height: 90,
-      width: 220,
-      child: SafeArea(
-        child: GNav(
-          curve: Curves.easeOutExpo,
-          backgroundColor: Theme.of(context).bottomAppBarColor,
-          mainAxisAlignment: MainAxisAlignment.center,
-          rippleColor: Theme.of(context).buttonColor.withOpacity(0.20),
-          hoverColor: Theme.of(context).buttonColor.withOpacity(0.20),
-          activeColor: Colors.black,
-          iconSize: 24,
-          padding: EdgeInsets.fromLTRB(2, 2, 1, 2),
-          duration: Duration(milliseconds: 200),
-          tabMargin: EdgeInsets.all(10),
-          gap: 0,
-          tabBorderRadius: 24,
-          tabBackgroundColor: Colors.white,
-          haptic: false,
-          tabShadow: [
-            BoxShadow(
-              color: Colors.grey.withOpacity(0.5),
-              spreadRadius: 5,
-              blurRadius: 7,
-              offset: Offset(0, 3), // changes position of shadow
-            ),
-          ],
-          tabs: [
-            GButton(
-              icon: Icons.photo_library_outlined,
-              iconColor: Colors.black,
-              text: '',
-              onPressed: () {
-                _onTabChange(0); // To take care of occasional missing events
-              },
-            ),
-            GButton(
-              icon: Icons.folder_special_outlined,
-              iconColor: Colors.black,
-              text: '',
-              onPressed: () {
-                _onTabChange(1); // To take care of occasional missing events
-              },
-            ),
-            GButton(
-              icon: Icons.folder_shared_outlined,
-              iconColor: Colors.black,
-              text: '',
-              onPressed: () {
-                _onTabChange(2); // To take care of occasional missing events
-              },
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 8.0),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(36),
+        child: Container(
+          alignment: Alignment.bottomCenter,
+          height: 52,
+          width: 180,
+          child: ClipRect(
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
+              child: GNav(
+                curve: Curves.easeOutExpo,
+                backgroundColor: Theme.of(context).bottomAppBarColor,
+                mainAxisAlignment: MainAxisAlignment.center,
+                rippleColor: Theme.of(context).buttonColor.withOpacity(0.20),
+                hoverColor: Theme.of(context).buttonColor.withOpacity(0.20),
+                activeColor: Colors.black,
+                iconSize: 24,
+                padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
+                duration: Duration(milliseconds: 200),
+                gap: 0,
+                tabBorderRadius: 24,
+                tabBackgroundColor: Colors.white,
+                haptic: false,
+                tabs: [
+                  GButton(
+                    margin: EdgeInsets.fromLTRB(6, 6, 0, 6),
+                    icon: Icons.home,
+                    iconColor: Colors.black,
+                    text: '',
+                    onPressed: () {
+                      _onTabChange(
+                          0); // To take care of occasional missing events
+                    },
+                  ),
+                  GButton(
+                    margin: EdgeInsets.fromLTRB(0, 6, 0, 6),
+                    icon: Icons.photo_library,
+                    iconColor: Colors.black,
+                    text: '',
+                    onPressed: () {
+                      _onTabChange(
+                          1); // To take care of occasional missing events
+                    },
+                  ),
+                  // GButton(
+                  //   icon: Icons.folder_shared_outlined,
+                  //   iconColor: Colors.black,
+                  //   text: '',
+                  //   onPressed: () {
+                  //     _onTabChange(2); // To take care of occasional missing events
+                  //   },
+                  // ),
+                  GButton(
+                    margin: EdgeInsets.fromLTRB(0, 6, 6, 6),
+                    icon: Icons.person,
+                    iconColor: Colors.black,
+                    text: '',
+                    onPressed: () {
+                      _onTabChange(
+                          3); // To take care of occasional missing events
+                    },
+                  )
+                ],
+                selectedIndex: _selectedTabIndex,
+                onTabChange: _onTabChange,
+              ),
             ),
-            GButton(
-              icon: Icons.settings,
-              iconColor: Colors.black,
-              text: '',
-              onPressed: () {
-                _onTabChange(3); // To take care of occasional missing events
-              },
-            )
-          ],
-          selectedIndex: _selectedTabIndex,
-          onTabChange: _onTabChange,
+          ),
         ),
       ),
     );

lib/ui/nav_bar.dart

@@ -1,7 +1,6 @@
 library google_nav_bar;
 
 import 'dart:async';
-import 'dart:math';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -88,7 +87,6 @@ class _GNavState extends State<GNav> {
                       key: t.key,
                       border: t.border ?? widget.tabBorder,
                       activeBorder: t.activeBorder ?? widget.tabActiveBorder,
-                      shadow: t.shadow ?? widget.tabShadow,
                       borderRadius:
                           t.borderRadius ?? widget.tabBorderRadius != null
                               ? BorderRadius.all(
@@ -109,8 +107,6 @@ class _GNavState extends State<GNav> {
                           widget.hoverColor ??
                           Colors.transparent,
                       padding: t.padding ?? widget.padding,
-                      textStyle: t.textStyle ?? widget.textStyle,
-                      text: t.text,
                       icon: t.icon,
                       haptic: widget.haptic ?? true,
                       leading: t.leading,
@@ -235,11 +231,6 @@ class _GButtonState extends State<GButton> {
         iconActiveColor: widget.iconActiveColor,
         iconColor: widget.iconColor,
         icon: widget.icon,
-        text: Text(
-          widget.text,
-          style: widget.textStyle ??
-              TextStyle(fontWeight: FontWeight.w600, color: widget.textColor),
-        ),
       ),
     );
   }
@@ -380,47 +371,6 @@ class _ButtonState extends State<Button> with TickerProviderStateMixin {
             child: FittedBox(
               fit: BoxFit.fitHeight,
               child: Stack(children: [
-                Row(mainAxisAlignment: MainAxisAlignment.end, children: [
-                  icon,
-                  Container(
-//               width: double.infinity,
-
-                    child: Container(
-                      //color: Colors.blue.withOpacity(.2),
-                      child: Align(
-                          alignment: Alignment.centerRight,
-                          widthFactor: curveValue,
-                          child: Container(
-                            //width: 100,
-                            //color: Colors.red.withOpacity(.2),
-                            child: Opacity(
-                                opacity: _expanded
-                                    ? pow(expandController.value, 13)
-                                    : expandController
-                                        .drive(CurveTween(curve: Curves.easeIn))
-                                        .value,
-                                //width: 100,
-                                child: Padding(
-                                  padding: EdgeInsets.only(
-                                      left: widget.gap +
-                                          8 -
-                                          (8 *
-                                              expandController
-                                                  .drive(CurveTween(
-                                                      curve:
-                                                          Curves.easeOutSine))
-                                                  .value),
-                                      right: 8 *
-                                          expandController
-                                              .drive(CurveTween(
-                                                  curve: Curves.easeOutSine))
-                                              .value),
-                                  child: widget.text,
-                                )),
-                          )),
-                    ),
-                  ),
-                ]),
                 Align(alignment: Alignment.centerLeft, child: icon),
               ]),
             ),