liquid-development/game-tracker
3
1
Fork 0
Code Issues 8 Pull Requests 4 Actions Releases 1 Activity

NavBar optimieren #189

Merged
flixcoo merged 4 commits from enhancement/188-navbar-optimieren into development 2026-02-07 20:18:47 +00:00
Conversation 1 Commits 4 Files Changed 8 +85 -115
8 changed files with 85 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/core/custom_theme.dart
View File

@@ -13,13 +13,13 @@ 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);
gelbeinhalb commented 2026-02-07 19:24:33 +00:00
Review
Copy Link

ich finde gut dass die farbe Bob heißt

ich finde gut dass die farbe Bob heißt
/// Default color for boxes and containers
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);
@@ -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);
@@ -51,7 +54,7 @@ class CustomTheme {
// ==================== Decorations ====================
static BoxDecoration standardBoxDecoration = BoxDecoration(
color: boxColor,
border: Border.all(color: boxBorder),
border: Border.all(color: boxBorderColor),
borderRadius: standardBorderRadiusAll,
);

149
lib/presentation/views/main_menu/custom_navigation_bar.dart
View File

@@ -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<CustomNavigationBar>
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: <Widget>[
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.boxBorderColor,
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: <Widget>[
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,
),
],
),
),
),
);
}

2
lib/presentation/views/main_menu/match_view/match_result_view.dart
View File

@@ -74,7 +74,7 @@ class _MatchResultViewState extends State<MatchResultView> {
),
decoration: BoxDecoration(
color: CustomTheme.boxColor,
border: Border.all(color: CustomTheme.boxBorder),
border: Border.all(color: CustomTheme.boxBorderColor),
borderRadius: BorderRadius.circular(12),
),
child: Column(

2
lib/presentation/widgets/custom_alert_dialog.dart
View File

@@ -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),
),
);
}

30
lib/presentation/widgets/navbar_item.dart
View File

@@ -87,19 +87,29 @@ class _NavbarItemState extends State<NavbarItem>
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),
Text(
widget.label,
style: TextStyle(

2
lib/presentation/widgets/text_input/custom_search_bar.dart
View File

@@ -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)),

4
lib/presentation/widgets/text_input/text_input_field.dart
View File

@@ -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,
),

2
lib/presentation/widgets/tiles/custom_radio_list_tile.dart
View File

@@ -31,7 +31,7 @@ class CustomRadioListTile<T> 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(