Implemented new nav bar with selected animation
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:game_tracker/core/custom_theme.dart';
|
||||
|
||||
/// A navigation bar item widget that represents a single tab in a navigation bar.
|
||||
/// - [index]: The index of the tab.
|
||||
@@ -35,7 +36,45 @@ class NavbarItem extends StatefulWidget {
|
||||
State<NavbarItem> createState() => _NavbarItemState();
|
||||
}
|
||||
|
||||
class _NavbarItemState extends State<NavbarItem> {
|
||||
class _NavbarItemState extends State<NavbarItem>
|
||||
with SingleTickerProviderStateMixin {
|
||||
/// Animation controller for the scale animation
|
||||
late AnimationController _animationController;
|
||||
|
||||
/// Scale animation for the icon when selected
|
||||
late Animation<double> _scaleAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(begin: 1.0, end: 1.2).animate(
|
||||
CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOutBack,
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.isSelected) {
|
||||
_animationController.forward();
|
||||
}
|
||||
}
|
||||
|
||||
// Retrigger animation on selection change
|
||||
@override
|
||||
void didUpdateWidget(NavbarItem oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (widget.isSelected && !oldWidget.isSelected) {
|
||||
_animationController.forward();
|
||||
} else if (!widget.isSelected && oldWidget.isSelected) {
|
||||
_animationController.reverse();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
@@ -48,19 +87,29 @@ class _NavbarItemState extends State<NavbarItem> {
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
widget.icon,
|
||||
color: widget.isSelected ? Colors.white : Colors.black,
|
||||
ScaleTransition(
|
||||
scale: widget.isSelected
|
||||
? _scaleAnimation
|
||||
: const AlwaysStoppedAnimation(1.0),
|
||||
child: Icon(
|
||||
widget.icon,
|
||||
color: widget.isSelected
|
||||
? CustomTheme.navBarItemSelectedColor
|
||||
: CustomTheme.navBarItemUnselectedColor,
|
||||
size: 26,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
widget.label,
|
||||
style: TextStyle(
|
||||
color: widget.isSelected ? Colors.white : Colors.black,
|
||||
fontSize: 12,
|
||||
color: widget.isSelected
|
||||
? CustomTheme.navBarItemSelectedColor
|
||||
: CustomTheme.navBarItemUnselectedColor,
|
||||
fontSize: widget.isSelected ? 12 : 11,
|
||||
fontWeight: widget.isSelected
|
||||
? FontWeight.bold
|
||||
: FontWeight.normal,
|
||||
: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -69,4 +118,10 @@ class _NavbarItemState extends State<NavbarItem> {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user