Bouncing containers in Listview in flutter - flutter

Question

I know enable a button to bounce on tap but the problem i am facing is that i want to implement this on a listview containing containers but i am unable to do it.There are only questions regarding a single button like here https://pub.dev/packages/bouncing_widget but not for whole list of buttons/containers or so. I tried the above link package but it is also causing other issues like the list is not scrolling , and sometimes it is not working at all, Please help
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage()
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{
AnimationController animationController;
double _scale;
#override
void initState(){
animationController=AnimationController(vsync: this,duration: Duration(milliseconds: 500),
lowerBound: 0.0,upperBound: 0.2);
animationController.addListener(() {
setState(() {
});
});
super.initState();
}
void Ontapdown(TapDownDetails details){
animationController.forward();
}
void Ontapup(TapUpDetails details){
animationController.reverse();
}
bool lights=false;
int count1=0;
int count2=0;
#override
Widget build(BuildContext context) {
_scale =1-animationController.value;
return Scaffold(
appBar: AppBar(
title: Text("Quickier"),
centerTitle: true,
backgroundColor: Colors.indigo,
),
body: Container(
height: 250,
margin: EdgeInsets.fromLTRB(10, 10, 5, 10),
child: ListView(
scrollDirection: Axis.horizontal,
physics: BouncingScrollPhysics(),
children: <Widget>[
GestureDetector(
onTap: (){
Navigator.push(context,MaterialPageRoute(builder:
(context)=> camerapp()));
},
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.grey[700],
borderRadius: BorderRadius.all(Radius.circular(10),)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.camera_alt,
color: Colors.black,
size: 70,
),
SizedBox(height: 20.0),
Text(
"Camera",
style: TextStyle(
fontSize: 20.0,
color: Colors.black
),
)
],
)
),
),
GestureDetector(
onTap: (){
setState(() {
if(count1%2==1){
lights=false;
Flashlight.lightOff();}
else{
lights=true;
Flashlight.lightOn();
}
count1+=1;
});
},
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
height: 100,
width: 200,
padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 20.0),
decoration: BoxDecoration(
color: Colors.teal[300],
borderRadius: BorderRadius.all(Radius.circular(10),)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.highlight,
color: lights ? Colors.yellow.shade600 : Colors.black,
size: 70,
),
SizedBox(height: 20.0),
Text(
"Flashlight",
style: TextStyle(
fontSize: 20.0,
color: Colors.black
),
)
],
)
),
),
GestureDetector(
onTap: (){
HapticFeedback.lightImpact();
},
onTapDown: Ontapdown,
onTapUp: Ontapup,
child: Transform.scale(
scale: _scale,
child: Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.teal[400],
borderRadius: BorderRadius.all(Radius.circular(10),)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.vibration,
color: Colors.black,
size: 70,
),
SizedBox(height: 20.0),
Text(
"Vibration",
style: TextStyle(
fontSize: 20.0,
color: Colors.black
),
)
],
)
),
),
),
Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
height: 100,
width: 200,
decoration: BoxDecoration(
color: Colors.teal[500],
borderRadius: BorderRadius.all(Radius.circular(10),)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.settings,
color: Colors.black,
size: 70,
),
SizedBox(height: 20.0),
Text(
"Settings",
style: TextStyle(
fontSize: 20.0,
color: Colors.black
),
)
],
)
)
],
),
)
);
}
}
I have enable it on one container i.e. third the vibration one but when i apply ontapup and ontapdown on other's GestureDetectors very different things happen like if i click any one of the containers all are bouncing at the same time,type......
so, please tell me what I should do or if there is any other approach it will be helpful as I'm only a beginner.
Any other suggestions will be grateful too.