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

Navbar animation verbessert #210

Merged
sneeex merged 2 commits from enhancement/209-navbar-animation-verbessern into development 2026-05-08 16:51:23 +00:00
Conversation 1 Commits 2 Files Changed 1 +70 -47
1 changed files with 70 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,24 +44,49 @@ class _NavbarItemState extends State<NavbarItem>
/// Scale animation for the icon when selected
late Animation<double> _scaleAnimation;
/// Color animation for the icon
late Animation<Color?> _iconColorAnimation;
/// Background color animation for the icon container
late Animation<Color?> _bgColorAnimation;
/// Font size animation for the label
late Animation<double> _fontSizeAnimation;
/// A simple double tween used to lerp between two font weights
late Animation<double> _fontWeightT;
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
// Set initial value directly so the visual state matches widget.isSelected
value: widget.isSelected ? 1.0 : 0.0,
);
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.2).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOutBack,
),
final curved = CurvedAnimation(
parent: _animationController,
curve: Curves.easeOut,
);
if (widget.isSelected) {
_animationController.forward();
}
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.2).animate(curved);
_iconColorAnimation = ColorTween(
begin: CustomTheme.navBarItemUnselectedColor,
end: CustomTheme.navBarItemSelectedColor,
).animate(curved);
_bgColorAnimation = ColorTween(
begin: Colors.transparent,
end: CustomTheme.primaryColor.withAlpha(50),
).animate(curved);
_fontSizeAnimation = Tween<double>(begin: 11.0, end: 12.0).animate(curved);
// drives font weight interpolation
_fontWeightT = Tween<double>(begin: 0.0, end: 1.0).animate(curved);
}
// Retrigger animation on selection change
@@ -83,46 +108,44 @@ class _NavbarItemState extends State<NavbarItem>
behavior: HitTestBehavior.opaque,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
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),
child: Icon(
widget.icon,
color: widget.isSelected
? CustomTheme.navBarItemSelectedColor
: CustomTheme.navBarItemUnselectedColor,
size: 32,
child: AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
final iconColor = _iconColorAnimation.value!;
final bgColor = _bgColorAnimation.value!;
final fontSize = _fontSizeAnimation.value;
final fontWeight = FontWeight.lerp(
FontWeight.w500,
FontWeight.bold,
_fontWeightT.value,
);
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: bgColor,
borderRadius: const BorderRadius.all(Radius.circular(15)),
),
child: ScaleTransition(
scale: _scaleAnimation,
child: Icon(widget.icon, color: iconColor, size: 32),
),
),
),
),
Text(
widget.label,
style: TextStyle(
color: widget.isSelected
? CustomTheme.navBarItemSelectedColor
: CustomTheme.navBarItemUnselectedColor,
fontSize: widget.isSelected ? 12 : 11,
fontWeight: widget.isSelected
? FontWeight.bold
: FontWeight.w500,
),
),
],
Text(
widget.label,
style: TextStyle(
color: iconColor,
fontSize: fontSize,
fontWeight: fontWeight,
),
),
],
);
},
),
),
),