I have a stateful class BottomBarWidget as follows
class BottomBarWidget extends StatefulWidget {
const BottomBarWidget({
Key? key,
required this.item,
required this.isSelected,
required this.iconSize,
required this.onItemSelected,
required this.index,
required this.selectedIndex,
}) : super(key: key);
final ShakingBottomNavigationBarItem item;
final bool isSelected;
final double iconSize;
final ValueChanged<int> onItemSelected;
final int index, selectedIndex;
@override
State<BottomBarWidget> createState() => _BottomBarWidgetState();
}
class _BottomBarWidgetState extends State<BottomBarWidget>
with SingleTickerProviderStateMixin {
late AnimationController animationController;
// late Animation<double> shakeAnimation;
late Animation<Color?> colorAnimation;
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 700),
);
// shakeAnimation = TweenSequence(<TweenSequenceItem<double>>[
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 0.0, end: -0.7),
// weight: 60,
// ),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: -0.7, end: 0), weight: 20),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 0, end: 0.5), weight: 20),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 0.5, end: 0), weight: 10),
// ]).animate(
// CurvedAnimation(
// parent: animationController,
// curve: Curves.ease,
// ),
// );
colorAnimation = ColorTween(
begin: widget.isSelected ? widget.item.selectedColor : widget.item.inactiveColor,
end: widget.isSelected ? widget.item.inactiveColor : widget.item.selectedColor,
).animate(animationController);
}
@override
void dispose() {
super.dispose();
animationController.dispose();
}
@override
Widget build(BuildContext context) {
final int indexToBeMoved = widget.selectedIndex;
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, _) {
return GestureDetector(
onTap: (){
print(indexToBeMoved);
widget.onItemSelected(widget.index);
// animationController.forward();
// Future.delayed(const Duration(milliseconds: 700),(){
// animationController.reset();
// });
},
child: SizedBox(
height: widget.iconSize * 2,
width: widget.iconSize * 2.5,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Transform.rotate(
angle: 0,
// angle: shakeAnimation.value,
child: IconTheme(
data: IconThemeData(
size: widget.iconSize,
color: widget.isSelected ? Colors.red : Colors.grey,
),
child: widget.item.icon,
),
),
// const SizedBox(
// height: 3,
// ),
// widget.isSelected
// ? Container(
// height: 10,
// width: 35,
// decoration: BoxDecoration(
// color: widget.item.selectedColor,
// borderRadius: BorderRadius.circular(10),
// ),
// )
// : const SizedBox(),
],
),
),
);
});
}
}
I have implemented it as
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: items.map(
(bottomBarItem) {
var index = items.indexOf(bottomBarItem);
return BottomBarWidget(
item: bottomBarItem,
isSelected: index == selectedIndex,
iconSize: iconSize,
onItemSelected: onItemSelected,
index: index,
selectedIndex: selectedIndex,
);
},
).toList(),
),
What I am trying to do is to animate the BottomBarWidget of index 0 and 1 if BottomBarWidget of index 2 is clicked, animate index of 1 and 2 if BottomBarWidget of index 0 is clicked and animate index of 2 and 0 if BottomBarWidget of index 1 is pressed.