diff --git a/lib/core/custom_theme.dart b/lib/core/custom_theme.dart index 9400d3d..28ea385 100644 --- a/lib/core/custom_theme.dart +++ b/lib/core/custom_theme.dart @@ -27,6 +27,9 @@ class CustomTheme { /// Text color used throughout the app static const Color textColor = Color(0xFFFFFFFF); + /// Background color for the navigation bar + static const Color navBarBackgroundColor = Color(0xFF131313); + /// Selected color for the [NavbarItem] static Color navBarItemSelectedColor = primaryColor.withGreen(100); diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index 9e81a34..7eb9b66 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -1,5 +1,3 @@ -import 'dart:ui'; - import 'package:flutter/material.dart'; import 'package:tallee/core/adaptive_page_route.dart'; import 'package:tallee/core/custom_theme.dart'; @@ -75,103 +73,62 @@ class _CustomNavigationBarState extends State backgroundColor: CustomTheme.backgroundColor, body: tabs[currentIndex], extendBody: true, - bottomNavigationBar: SizedBox( - height: 70 + MediaQuery.of(context).padding.bottom, - child: Stack( - children: [ - // Dynamically generated blur layers for ultra-smooth transition - ...List.generate(34, (index) { - // Use cubic curve for an even more natural, smoother transition - final progress = index / 34.0; // 0.0 to 1.0 - final cubic = progress * progress * progress; // cubic curve - final blurStrength = - 0.5 + (cubic * 50.0); // Very smooth from 0.5 to 50.5 - - // Height goes completely from 100% to 0% (all the way down) - // With extra density at the bottom for softer transition - final heightFactor = index < 25 - // First 25 layers: 100% to 30% - ? 1.0 - (progress * 0.7) - // Last 10 layers: 30% to 0% (denser) - : 0.3 - ((index - 25) / 34.0); - - return Positioned( - left: 0, - right: 0, - bottom: 0, - height: - (70 + MediaQuery.of(context).padding.bottom) * - heightFactor.clamp(0.05, 1.0), - child: ClipRect( - child: BackdropFilter( - filter: ImageFilter.blur( - sigmaX: blurStrength, - sigmaY: blurStrength, - ), - child: Container(color: Colors.transparent), - ), - ), - ); - }), - // Gradient overlay - Positioned.fill( - child: Container( - decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment.bottomCenter, - end: Alignment.topCenter, - colors: [ - CustomTheme.boxColor.withValues(alpha: 1), - CustomTheme.boxColor.withValues(alpha: 0.5), - CustomTheme.boxColor.withValues(alpha: 0.2), - CustomTheme.boxColor.withValues(alpha: 0.0), - ], - stops: const [0.0, 0.4, 0.8, 1], - ), - ), - ), - ), - // Navbar content - SafeArea( - child: SizedBox( - height: 70, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - NavbarItem( - index: 0, - isSelected: currentIndex == 0, - icon: Icons.home_rounded, - label: loc.home, - onTabTapped: onTabTapped, - ), - NavbarItem( - index: 1, - isSelected: currentIndex == 1, - icon: Icons.gamepad_rounded, - label: loc.matches, - onTabTapped: onTabTapped, - ), - NavbarItem( - index: 2, - isSelected: currentIndex == 2, - icon: Icons.group_rounded, - label: loc.groups, - onTabTapped: onTabTapped, - ), - NavbarItem( - index: 3, - isSelected: currentIndex == 3, - icon: Icons.bar_chart_rounded, - label: loc.statistics, - onTabTapped: onTabTapped, - ), - ], - ), - ), + bottomNavigationBar: Container( + height: 115, + decoration: BoxDecoration( + color: CustomTheme.navBarBackgroundColor, + border: Border.all( + strokeAlign: BorderSide.strokeAlignOutside, + color: CustomTheme.boxBorder, + width: 2, + ), + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(30), + topRight: Radius.circular(30), + ), + boxShadow: [ + BoxShadow( + color: Colors.black.withValues(alpha: 0.1), + blurRadius: 20, + offset: const Offset(0, -5), ), ], ), + child: SafeArea( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + NavbarItem( + index: 0, + isSelected: currentIndex == 0, + icon: Icons.home_rounded, + label: loc.home, + onTabTapped: onTabTapped, + ), + NavbarItem( + index: 1, + isSelected: currentIndex == 1, + icon: Icons.gamepad_rounded, + label: loc.matches, + onTabTapped: onTabTapped, + ), + NavbarItem( + index: 2, + isSelected: currentIndex == 2, + icon: Icons.group_rounded, + label: loc.groups, + onTabTapped: onTabTapped, + ), + NavbarItem( + index: 3, + isSelected: currentIndex == 3, + icon: Icons.bar_chart_rounded, + label: loc.statistics, + onTabTapped: onTabTapped, + ), + ], + ), + ), ), ); } diff --git a/lib/presentation/widgets/navbar_item.dart b/lib/presentation/widgets/navbar_item.dart index 0b08371..3cc7433 100644 --- a/lib/presentation/widgets/navbar_item.dart +++ b/lib/presentation/widgets/navbar_item.dart @@ -87,16 +87,27 @@ class _NavbarItemState extends State mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ - ScaleTransition( - scale: widget.isSelected - ? _scaleAnimation - : const AlwaysStoppedAnimation(1.0), - child: Icon( - widget.icon, + AnimatedContainer( + width: 50, + height: 50, + decoration: BoxDecoration( color: widget.isSelected - ? CustomTheme.navBarItemSelectedColor - : CustomTheme.navBarItemUnselectedColor, - size: 32, + ? CustomTheme.primaryColor.withAlpha(50) + : Colors.transparent, + borderRadius: const BorderRadius.all(Radius.circular(15)), + ), + duration: const Duration(milliseconds: 200), + child: ScaleTransition( + scale: widget.isSelected + ? _scaleAnimation + : const AlwaysStoppedAnimation(1.0), + child: Icon( + widget.icon, + color: widget.isSelected + ? CustomTheme.navBarItemSelectedColor + : CustomTheme.navBarItemUnselectedColor, + size: 32, + ), ), ), const SizedBox(height: 4),