Implemented new nav bar

This commit is contained in:
2026-02-06 14:03:57 +01:00
parent a4d4703069
commit ee1962ef9c
3 changed files with 76 additions and 105 deletions

View File

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

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,66 +73,28 @@ 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(
bottomNavigationBar: Container(
height: 115,
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),
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),
),
],
stops: const [0.0, 0.4, 0.8, 1],
),
),
),
),
// Navbar content
SafeArea(
child: SizedBox(
height: 70,
child: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
@@ -170,9 +130,6 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
),
),
),
],
),
),
);
}

View File

@@ -87,7 +87,17 @@ class _NavbarItemState extends State<NavbarItem>
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ScaleTransition(
AnimatedContainer(
width: 50,
height: 50,
decoration: BoxDecoration(
color: widget.isSelected
? 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),
@@ -99,6 +109,7 @@ class _NavbarItemState extends State<NavbarItem>
size: 32,
),
),
),
const SizedBox(height: 4),
Text(
widget.label,