From ee1962ef9caa431261b6d782bc5d8488c10b0583 Mon Sep 17 00:00:00 2001 From: Felix Kirchner Date: Fri, 6 Feb 2026 14:03:57 +0100 Subject: [PATCH 1/4] Implemented new nav bar --- lib/core/custom_theme.dart | 3 + .../main_menu/custom_navigation_bar.dart | 149 +++++++----------- lib/presentation/widgets/navbar_item.dart | 29 ++-- 3 files changed, 76 insertions(+), 105 deletions(-) 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), -- 2.49.1 From 3f790cfbb111cd44fa48b6480e5c4390b4d0627a Mon Sep 17 00:00:00 2001 From: Felix Kirchner Date: Fri, 6 Feb 2026 14:04:16 +0100 Subject: [PATCH 2/4] Renamed variable --- lib/core/custom_theme.dart | 4 ++-- lib/presentation/views/main_menu/custom_navigation_bar.dart | 2 +- .../views/main_menu/match_view/match_result_view.dart | 2 +- lib/presentation/widgets/custom_alert_dialog.dart | 2 +- lib/presentation/widgets/text_input/custom_search_bar.dart | 2 +- lib/presentation/widgets/text_input/text_input_field.dart | 4 ++-- lib/presentation/widgets/tiles/custom_radio_list_tile.dart | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/core/custom_theme.dart b/lib/core/custom_theme.dart index 28ea385..25adf0f 100644 --- a/lib/core/custom_theme.dart +++ b/lib/core/custom_theme.dart @@ -19,7 +19,7 @@ class CustomTheme { static const Color boxColor = Color(0xFF101010); /// Default border color for boxes and containers - static const Color boxBorder = Color(0xFF272727); + static const Color boxBorderColor = Color(0xFF272727); /// Color for boxes and containers displayed on boxes static const Color onBoxColor = Color(0xFF181818); @@ -54,7 +54,7 @@ class CustomTheme { // ==================== Decorations ==================== static BoxDecoration standardBoxDecoration = BoxDecoration( color: boxColor, - border: Border.all(color: boxBorder), + border: Border.all(color: boxBorderColor), borderRadius: standardBorderRadiusAll, ); diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index 7eb9b66..6d18091 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -79,7 +79,7 @@ class _CustomNavigationBarState extends State color: CustomTheme.navBarBackgroundColor, border: Border.all( strokeAlign: BorderSide.strokeAlignOutside, - color: CustomTheme.boxBorder, + color: CustomTheme.boxBorderColor, width: 2, ), borderRadius: const BorderRadius.only( diff --git a/lib/presentation/views/main_menu/match_view/match_result_view.dart b/lib/presentation/views/main_menu/match_view/match_result_view.dart index 75015f0..214c500 100644 --- a/lib/presentation/views/main_menu/match_view/match_result_view.dart +++ b/lib/presentation/views/main_menu/match_view/match_result_view.dart @@ -74,7 +74,7 @@ class _MatchResultViewState extends State { ), decoration: BoxDecoration( color: CustomTheme.boxColor, - border: Border.all(color: CustomTheme.boxBorder), + border: Border.all(color: CustomTheme.boxBorderColor), borderRadius: BorderRadius.circular(12), ), child: Column( diff --git a/lib/presentation/widgets/custom_alert_dialog.dart b/lib/presentation/widgets/custom_alert_dialog.dart index 84843b7..bf98f2c 100644 --- a/lib/presentation/widgets/custom_alert_dialog.dart +++ b/lib/presentation/widgets/custom_alert_dialog.dart @@ -32,7 +32,7 @@ class CustomAlertDialog extends StatelessWidget { actionsAlignment: MainAxisAlignment.spaceAround, shape: RoundedRectangleBorder( borderRadius: CustomTheme.standardBorderRadiusAll, - side: const BorderSide(color: CustomTheme.boxBorder), + side: const BorderSide(color: CustomTheme.boxBorderColor), ), ); } diff --git a/lib/presentation/widgets/text_input/custom_search_bar.dart b/lib/presentation/widgets/text_input/custom_search_bar.dart index aeb71f2..313fc1a 100644 --- a/lib/presentation/widgets/text_input/custom_search_bar.dart +++ b/lib/presentation/widgets/text_input/custom_search_bar.dart @@ -88,7 +88,7 @@ class CustomSearchBar extends StatelessWidget { ], backgroundColor: WidgetStateProperty.all(CustomTheme.boxColor), side: WidgetStateProperty.all( - const BorderSide(color: CustomTheme.boxBorder), + const BorderSide(color: CustomTheme.boxBorderColor), ), shape: WidgetStateProperty.all( RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), diff --git a/lib/presentation/widgets/text_input/text_input_field.dart b/lib/presentation/widgets/text_input/text_input_field.dart index 16f5072..541ae6f 100644 --- a/lib/presentation/widgets/text_input/text_input_field.dart +++ b/lib/presentation/widgets/text_input/text_input_field.dart @@ -44,11 +44,11 @@ class TextInputField extends StatelessWidget { counterText: '', enabledBorder: const OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(12)), - borderSide: BorderSide(color: CustomTheme.boxBorder), + borderSide: BorderSide(color: CustomTheme.boxBorderColor), ), focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(12)), - borderSide: BorderSide(color: CustomTheme.boxBorder), + borderSide: BorderSide(color: CustomTheme.boxBorderColor), ), floatingLabelBehavior: FloatingLabelBehavior.never, ), diff --git a/lib/presentation/widgets/tiles/custom_radio_list_tile.dart b/lib/presentation/widgets/tiles/custom_radio_list_tile.dart index 2b8e855..53d0a03 100644 --- a/lib/presentation/widgets/tiles/custom_radio_list_tile.dart +++ b/lib/presentation/widgets/tiles/custom_radio_list_tile.dart @@ -31,7 +31,7 @@ class CustomRadioListTile extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 2), decoration: BoxDecoration( color: CustomTheme.boxColor, - border: Border.all(color: CustomTheme.boxBorder), + border: Border.all(color: CustomTheme.boxBorderColor), borderRadius: CustomTheme.standardBorderRadiusAll, ), child: Row( -- 2.49.1 From 487efb4d61da01d87411e8e5d57d941813d535f8 Mon Sep 17 00:00:00 2001 From: Felix Kirchner Date: Fri, 6 Feb 2026 14:07:43 +0100 Subject: [PATCH 3/4] Added type annotation --- lib/core/custom_theme.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/custom_theme.dart b/lib/core/custom_theme.dart index 25adf0f..0e9fec2 100644 --- a/lib/core/custom_theme.dart +++ b/lib/core/custom_theme.dart @@ -13,7 +13,7 @@ class CustomTheme { static const Color secondaryColor = Color(0xFFf2a981); /// Background color of the app theme - static const backgroundColor = Color(0xFF0B0B0B); + static const Color backgroundColor = Color(0xFF0B0B0B); /// Default color for boxes and containers static const Color boxColor = Color(0xFF101010); -- 2.49.1 From d4fcc8106f33668e0dd5c95c51610640ce5e40eb Mon Sep 17 00:00:00 2001 From: Felix Kirchner Date: Sat, 7 Feb 2026 20:21:46 +0100 Subject: [PATCH 4/4] Removed spacing in navbar item --- lib/presentation/widgets/navbar_item.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/presentation/widgets/navbar_item.dart b/lib/presentation/widgets/navbar_item.dart index 3cc7433..17c055c 100644 --- a/lib/presentation/widgets/navbar_item.dart +++ b/lib/presentation/widgets/navbar_item.dart @@ -110,7 +110,6 @@ class _NavbarItemState extends State ), ), ), - const SizedBox(height: 4), Text( widget.label, style: TextStyle( -- 2.49.1