From 3473d56866611db66f2ef43186e18f64f0b437f7 Mon Sep 17 00:00:00 2001 From: sonle Date: Mon, 15 Jan 2024 15:38:11 +0700 Subject: [PATCH] feat: renew nav bar widget for mobile version --- .../welcome_screen/welcome_screen.dart | 170 ++++++++++-------- .../widgets/bottom_navigation_widget.dart | 40 +---- lib/utils/colors.dart | 1 + 3 files changed, 107 insertions(+), 104 deletions(-) diff --git a/lib/screens/welcome_screen/welcome_screen.dart b/lib/screens/welcome_screen/welcome_screen.dart index 773cb27d..cd911a3e 100644 --- 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 { 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 index 87b8d585..5ab66a87 100644 --- 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 index fd3c1fc8..9575f126 100644 --- 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 {