feat: renew nav bar widget for mobile version

atsign-foundation · Jan 29, 2024 · 3473d56 · 3473d56
1 parent 8735c00
commit 3473d56
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 104 deletions.
diff --git a/lib/screens/welcome_screen/welcome_screen.dart b/lib/screens/welcome_screen/welcome_screen.dart
@@ -7,7 +7,6 @@ import 'package:at_sync_ui_flutter/at_sync_ui_flutter.dart';
 import 'package:atsign_atmosphere_pro/routes/route_names.dart';
 import 'package:atsign_atmosphere_pro/screens/common_widgets/error_screen.dart';
 import 'package:atsign_atmosphere_pro/screens/common_widgets/linear_progress_bar.dart';
-import 'package:atsign_atmosphere_pro/screens/common_widgets/skeleton_loading_widget.dart';
 import 'package:atsign_atmosphere_pro/screens/contact_new_version/contact_screen.dart';
 import 'package:atsign_atmosphere_pro/screens/history/transfer_history_screen.dart';
 import 'package:atsign_atmosphere_pro/screens/my_files/my_files_screen.dart';
@@ -333,88 +332,113 @@ class _WelcomeScreenState extends State<WelcomeScreen> {
               provider.selectedBottomNavigationIndex,
           builder: (context, selectedBottomNavigationIndex, _) {
             return Container(
-              height: 74,
+              height: 72,
               margin: EdgeInsets.fromLTRB(
-                16.toWidth,
+                28.toWidth,
                 0,
-                16.toWidth,
-                16 + MediaQuery.of(context).padding.bottom,
+                28.toWidth,
+                32 + MediaQuery.of(context).padding.bottom,
               ),
-              padding: EdgeInsets.symmetric(horizontal: 16),
-              decoration: BoxDecoration(
-                color: Colors.white,
-                borderRadius: BorderRadius.circular(76),
-              ),
-              child: Padding(
-                padding: const EdgeInsets.only(left: 15, right: 15.0),
-                child: Row(
-                  children: [
-                    Expanded(
-                      child: BottomNavigationWidget(
-                        iconActivate: ImageConstants.icUserActivate,
-                        iconInactivate: ImageConstants.icUserInactivate,
-                        title: "Contacts",
-                        index: 1,
-                        indexSelected: selectedBottomNavigationIndex,
-                        onTap: (index) {
-                          welcomeScreenProvider
-                              .changeBottomNavigationIndex(index);
-                        },
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 32,
+                        vertical: 16,
                       ),
-                    ),
-                    Expanded(
-                      child: BottomNavigationWidget(
-                        iconActivate: ImageConstants.icFileActivate,
-                        iconInactivate: ImageConstants.icFileInactivate,
-                        title: "Files",
-                        index: 2,
-                        indexSelected: selectedBottomNavigationIndex,
-                        onTap: (index) {
-                          welcomeScreenProvider
-                              .changeBottomNavigationIndex(index);
-                        },
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(74),
+                        color: Colors.white,
                       ),
-                    ),
-                    Expanded(
-                      child: BottomNavigationWidget(
-                        iconActivate: ImageConstants.icSendActivate,
-                        iconInactivate: ImageConstants.icSendInactivate,
-                        index: 0,
-                        indexSelected: selectedBottomNavigationIndex,
-                        onTap: (index) {
-                          welcomeScreenProvider
-                              .changeBottomNavigationIndex(index);
-                        },
+                      child: Row(
+                        children: [
+                          Expanded(
+                            child: BottomNavigationWidget(
+                              iconActivate: ImageConstants.icUserActivate,
+                              iconInactivate: ImageConstants.icUserInactivate,
+                              index: 1,
+                              indexSelected: selectedBottomNavigationIndex,
+                              onTap: (index) {
+                                welcomeScreenProvider
+                                    .changeBottomNavigationIndex(index);
+                              },
+                            ),
+                          ),
+                          Expanded(
+                            child: BottomNavigationWidget(
+                              iconActivate: ImageConstants.icFileActivate,
+                              iconInactivate: ImageConstants.icFileInactivate,
+                              index: 2,
+                              indexSelected: selectedBottomNavigationIndex,
+                              onTap: (index) {
+                                welcomeScreenProvider
+                                    .changeBottomNavigationIndex(index);
+                              },
+                            ),
+                          ),
+                          Expanded(
+                            child: BottomNavigationWidget(
+                              iconActivate: ImageConstants.icHistoryActivate,
+                              iconInactivate:
+                                  ImageConstants.icHistoryInactivate,
+                              index: 3,
+                              indexSelected: selectedBottomNavigationIndex,
+                              onTap: (index) {
+                                welcomeScreenProvider
+                                    .changeBottomNavigationIndex(index);
+                              },
+                            ),
+                          ),
+                          Expanded(
+                            child: BottomNavigationWidget(
+                              iconActivate: ImageConstants.icSettingActivate,
+                              iconInactivate:
+                                  ImageConstants.icSettingInactivate,
+                              index: 4,
+                              indexSelected: selectedBottomNavigationIndex,
+                              onTap: (index) {
+                                welcomeScreenProvider
+                                    .changeBottomNavigationIndex(index);
+                              },
+                            ),
+                          ),
+                        ],
                       ),
                     ),
-                    Expanded(
-                      child: BottomNavigationWidget(
-                        iconActivate: ImageConstants.icHistoryActivate,
-                        iconInactivate: ImageConstants.icHistoryInactivate,
-                        title: "History",
-                        index: 3,
-                        indexSelected: selectedBottomNavigationIndex,
-                        onTap: (index) {
-                          welcomeScreenProvider
-                              .changeBottomNavigationIndex(index);
-                        },
+                  ),
+                  SizedBox(width: 12),
+                  Container(
+                    padding: EdgeInsets.all(16),
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      gradient: LinearGradient(
+                        begin: Alignment(-1.00, 0.00),
+                        end: Alignment(1, 0),
+                        colors: selectedBottomNavigationIndex == 0
+                            ? [
+                                ColorConstants.orange.withOpacity(0.25),
+                                ColorConstants.navBarButtonLinearColor
+                                    .withOpacity(0.25),
+                              ]
+                            : [
+                                Colors.white,
+                                Colors.white,
+                              ],
                       ),
                     ),
-                    Expanded(
-                      child: BottomNavigationWidget(
-                        iconActivate: ImageConstants.icSettingActivate,
-                        iconInactivate: ImageConstants.icSettingInactivate,
-                        title: "Settings",
-                        index: 4,
-                        indexSelected: selectedBottomNavigationIndex,
-                        onTap: (index) {
-                          welcomeScreenProvider
-                              .changeBottomNavigationIndex(index);
-                        },
-                      ),
+                    child: BottomNavigationWidget(
+                      iconActivate: ImageConstants.icSendActivate,
+                      iconInactivate: ImageConstants.icSendActivate,
+                      index: 0,
+                      indexSelected: selectedBottomNavigationIndex,
+                      onTap: (index) {
+                        welcomeScreenProvider
+                            .changeBottomNavigationIndex(index);
+                      },
                     ),
-                  ],
-                ),
+                  )
+                ],
               ),
             );
           },

diff --git a/lib/screens/welcome_screen/widgets/bottom_navigation_widget.dart b/lib/screens/welcome_screen/widgets/bottom_navigation_widget.dart
@@ -1,19 +1,15 @@
-import 'package:at_common_flutter/services/size_config.dart';
-import 'package:atsign_atmosphere_pro/utils/colors.dart';
 import 'package:flutter/material.dart';
 
 class BottomNavigationWidget extends StatelessWidget {
   final Function(int index)? onTap;
   final int index;
   final String iconActivate, iconInactivate;
-  final String title;
   final int indexSelected;
 
   const BottomNavigationWidget({
     Key? key,
     this.onTap,
     required this.index,
-    this.title = '',
     required this.indexSelected,
     required this.iconActivate,
     required this.iconInactivate,
@@ -25,33 +21,15 @@ class BottomNavigationWidget extends StatelessWidget {
       onTap: () {
         onTap?.call(index);
       },
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Container(
-            width: 36,
-            height: 36,
-            alignment: Alignment.center,
-            child: Image.asset(
-              indexSelected == index ? iconActivate : iconInactivate,
-              height: title.isNotEmpty ? 32 : null,
-              color: indexSelected == index
-                  ? null
-                  : ColorConstants.inactiveIconColor,
-              fit: BoxFit.cover,
-            ),
-          ),
-          if (title.isNotEmpty)
-            Text(
-              title,
-              style: TextStyle(
-                fontSize: 12.toFont,
-                color:
-                    indexSelected == index ? Colors.black : Color(0xFFAEAEAE),
-                fontWeight: FontWeight.w500,
-              ),
-            ),
-        ],
+      child: Container(
+        width: 36,
+        height: 36,
+        alignment: Alignment.center,
+        child: Image.asset(
+          indexSelected == index ? iconActivate : iconInactivate,
+          height: 32,
+          fit: BoxFit.cover,
+        ),
       ),
     );
   }

diff --git a/lib/utils/colors.dart b/lib/utils/colors.dart
@@ -106,6 +106,7 @@ class ColorConstants {
   static const Color disableTooltipColor = Color(0xFFC4C4C4);
   static const Color inactiveIconColor = Color(0xFFC5C5C5);
   static const Color closeButtonColor = Color(0xFFE6E6E6);
+  static const Color navBarButtonLinearColor = Color(0xFFE9A743);
 }
 
 class ContactInitialsColors {