Flutter：弹跳按钮动画滚动问题

Question

我想在我的Flutter应用程序中添加一些smooth和fluid动画，尤其是在[Reflectly应用程序（也是在Flutter上制作）中的buttons上，特别是在[[buttons]]上。”

所以我跟随 this tutorial在我的按钮上添加弹跳动画。一切正常，但我注意到与滚动有关的“ bug”：

当我触摸按钮AND时，按住它，然后拖动向下或向上滚动（始终保持按下），按钮保持向下状态和< [不返回到其原始位置（有关更多详细信息，请参见GIF）。

注意：此问题未显示

在Reflecty应用程序上。

要重现此“

bug

”，您可以在此处下载弹跳button project，然后像下面这样创建带有一些弹跳按钮的滚动条：

return Scaffold(
      body: Container(
        width: double.infinity,
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              AnimatedButton(),
              // [...] Many others animated button here 
            ],
          ),
        ),
      ),
    );

我试图添加onVerticalDragEnd回调以恢复之后的状态，但是它是[[更糟

，因为它<（滚动似乎仅在按钮上起作用了！）

任何帮助将不胜感激：）

提前感谢！我想在Flutter应用程序中添加一些流畅流畅的动画，尤其是在Reflectly应用程序（也由Flutter制造）上的类似按钮上。所以我按照本教程添加了弹跳动画...

Answer 1

工作演示

完整代码
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(),
            ],
          ),
        ),
      ),
    );
  }
}