SingleChildScrollView内部的动画

Question

我一直在尝试通过创建颤动来创建高程效果

具有动画填充和不透明度的容器。

但是，当我将容器插入SingleChildScrollView中时（用于溢出问题）

不透明的动画停止了（当clipBehavior！= none时），如下面的GIF所示。

[首先是clipBehavior：clipBehavior.none，之后是clipBehavior：clipBehavior.hardEdge]

代码：

AnimationController _introController;
  Animation _introAnimation;
  bool _visible;
  int _precentageCounter = 0;
  final int _opacityAnimationTime = 700;
  final int _fillAnimationTime = 1500;
  final int _upwardAnimationTime = 1000;
  final int _precentAnimationTime = 1500;

  void animateIntro() {
    double per = (widget.experinceIn.precentage * 100);
    setState(() {
      _visible = true;
    });
  }

  @override
  void initState() {
    super.initState();
    widget.animateIntro = animateIntro;
    _visible = false;
  }

  @override
  Widget build(BuildContext context) {
    double image_width = widget.height;
    double spacer = widget.width / 25;
    double slider_width = widget.width - (image_width + spacer);
    double slider_height = widget.height * (3 / 10);
    double slider_fill_width = slider_width * widget.experinceIn.precentage;
    double textSize = widget.textSize;

    BorderRadius border = BorderRadius.all(Radius.circular(slider_height));
    Container skillSlide = Container(
      width: slider_width,
      height: (slider_height),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: border,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: Align(
        alignment: Alignment.centerLeft,
        child: AnimatedContainer(
          duration: Duration(milliseconds: _fillAnimationTime),
          constraints:
              BoxConstraints.expand(width: _visible ? slider_fill_width : 0.0),
          decoration: BoxDecoration(
            gradient: widget.gradient,
            borderRadius: border,
          ),
        ),
      ),
    );
    Text tittleText = Text(
      widget.experinceIn.name,
      style: TextStyle(
        fontFamily: 'Future',
        fontWeight: FontWeight.w600,
        fontSize: textSize,
        color: widget.titleColor,
      ),
    );
    Text exprinceText = Text(
      '  ${widget.experinceIn.year} years',
      textAlign: TextAlign.start,
      style: TextStyle(
        fontFamily: 'Future',
        fontWeight: FontWeight.w600,
        fontSize: (textSize / 1.5),
        color: widget.exprinceColor,
      ),
    );
    Text precentText = Text(
      '  ${(widget.experinceIn.precentage * 100.0)}%',
      textAlign: TextAlign.end,
      style: TextStyle(
        fontFamily: 'Future',
        fontWeight: FontWeight.w600,
        fontSize: (textSize),
        color: widget.titleColor,
      ),
    );

    return MaterialButton(
      onPressed: () {
        setState(() {
          _visible = !_visible;
        });
      },
      child: AnimatedOpacity(
        opacity: _visible ? 1.0 : 0.0,
        curve: Curves.easeInOutCubic,
        duration: Duration(milliseconds: _opacityAnimationTime),
        child: Align(
          alignment: Alignment.center,
          child: AnimatedContainer(
            duration: Duration(milliseconds: this._upwardAnimationTime),
            curve: Curves.easeInCubic,
            padding: _visible
                ? EdgeInsets.only(top: 0)
                : EdgeInsets.only(top: widget.height / 2),
            width: widget.width,
            height: widget.height,
            child: SingleChildScrollView(
              clipBehavior: Clip.none,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image(
                    image: widget.experinceIn.image,
                    height: widget.height,
                    width: image_width,
                  ),
                  SizedBox(
                    width: spacer,
                  ),
                  Center(
                    child: Container(
                      width: slider_width,
                      height: (textSize * 1.3) + slider_height,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            // crossAxisAlignment: CrossAxisAlignment.s,
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.baseline,
                                children: <Widget>[
                                  // SizedBox(width: round_radious / 2),
                                  tittleText,
                                  exprinceText,
                                ],
                              ),
                              precentText,
                            ],
                          ),
                          skillSlide,
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

GIF： enter image description here