Flutter clicking on 1 button should animate rest of the buttons - dart

Question

Main Code:
ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return MyWidget(index + 1);
},
),
MyWidget is a StatefulWidget and it's build() method is
#override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _controller,
child: RaisedButton(
child: Text(widget.index.toString()),
onPressed: () {},
),
);
}
What needs to be done:
So, as you can see here, I got 5 buttons named 1 2 3 4 5, what I want to achieve is when I click on any button say 3, rest of the buttons should animate except 3. How can I do it?
Screenshot:
TL;DR :> How to animate other buttons when button 3 is tapped?

Answer 1

Not sure if it's the most efficient way of doing it but this works, using an AnimatedWidget for each ListItem:
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Example")),
body: AnimatedListView(),
),
);
}
}
class AnimatedListView extends StatefulWidget {
#override
_AnimatedListViewState createState() => _AnimatedListViewState();
}
class _AnimatedListViewState extends State<AnimatedListView>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
int _selected;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000),
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.ease,
);
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 5,
itemBuilder: _buildListItem,
);
}
Widget _buildListItem(BuildContext context, int index) {
return AnimatedListItem(
selected: _selected == index,
animation: _animation,
onTap: () {
setState(() {
_selected = index;
});
_controller.forward();
},
);
}
}
class AnimatedListItem extends AnimatedWidget {
final Tween<double> _opacityTween = Tween(begin: 1, end: 0);
final GestureTapCallback onTap;
final bool selected;
AnimatedListItem(
{Key key,
#required Animation<double> animation,
this.onTap,
this.selected})
: super(key: key, listenable: animation);
#override
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return Opacity(
opacity: selected ? 1.0 : _opacityTween.evaluate(animation),
child: ListTile(title: Text("Item"), onTap: onTap),
);
}
}