Flutter: Bouncing button animation scroll issue - flutter

Question

I want to add some smooth & fluid animations in my Flutter app, especially on buttons like these on the Reflectly app (made on Flutter too).
So I followed this tutorial to add Bouncing Animations on my buttons. Everything is working fine but I noticed a "bug" related to the scroll:
When I touch a button AND keep pressing it, then drag to scroll down or up (always by keeping down), the button keep the down state and do not return to it's original position (see the GIF for more details).
Note: This issue doesn't appear on the Reflecty app.
To reproduce, this "bug", you can download the Bouncing button project here and then create a scroll with some bouncing buttons inside it like this:
return Scaffold(
body: Container(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
AnimatedButton(),
// [...] Many others animated button here
],
),
),
),
);
I tried to add a onVerticalDragEnd callback to restore the state after but it's worse because it is no longer possible to scroll (scroll seems to be catches only on buttons) !
Any help would be greatly appreciated :)
Thanks in advance !

Answer 1

You can copy paste run full code below
When onTapDown and scroll will trigger onTapCancel
You can put _controller.reverse(); in _onTapCancel()
code snippet
void _onTapCancel() {
print("on tap cancel");
_controller.reverse();
}
working demo
full code
import 'package:flutter/material.dart';
class AnimatedButton extends StatefulWidget {
#override
_AnimatedButtonState createState() => _AnimatedButtonState();
}
class _AnimatedButtonState extends State<AnimatedButton>
with SingleTickerProviderStateMixin {
double _scale;
AnimationController _controller;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
void _onTapDown(TapDownDetails details) {
_controller.forward();
}
void _onTapUp(TapUpDetails details) {
print("onTapUp");
_controller.reverse();
}
void _onTapCancel() {
print("on tap cancel");
_controller.reverse();
}
#override
Widget build(BuildContext context) {
_scale = 1 - _controller.value;
return GestureDetector(
onTapDown: _onTapDown,
onTapUp: _onTapUp,
onTapCancel: _onTapCancel,
child: Transform.scale(
scale: _scale,
child: _animatedButtonUI,
),
);
}
Widget get _animatedButtonUI => Container(
height: 100,
width: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
boxShadow: [
BoxShadow(
color: Color(0x80000000),
blurRadius: 30.0,
offset: Offset(0.0, 30.0),
),
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFA7BFE8),
Color(0xFF6190E8),
],
),
),
child: Center(
child: Text(
'tap!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
);
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
AnimatedButton(),
],
),
),
),
);
}
}