From b71651aadf2f98629542665526d7c40ee788d985 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 | 169 ++++++++++-------- .../widgets/bottom_navigation_widget.dart | 40 +---- lib/utils/colors.dart | 1 + 3 files changed, 107 insertions(+), 103 deletions(-) diff --git a/lib/screens/welcome_screen/welcome_screen.dart b/lib/screens/welcome_screen/welcome_screen.dart index edc2c969..870dda07 100644 --- a/lib/screens/welcome_screen/welcome_screen.dart +++ b/lib/screens/welcome_screen/welcome_screen.dart @@ -333,88 +333,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 3a3031ce..58a23293 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); static const Color listFileShadowColor = Color(0xFFD7D7D7); static const Color spanishGray = Color(0xFF969393); }