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

Implemented new nav bar

Browse Source
This commit is contained in:
Felix Kirchner
2026-02-06 14:03:57 +01:00
parent a4d4703069
commit ee1962ef9c
3 changed files with 76 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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.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: <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,
),
],
),
),
),
);
}