Flutter 颤振为FadeTransition上的反转效果设置动画

在这个简单的代码中，我尝试在小部件上显示和隐藏屏障，显示这个屏障可以通过动画来实现，但是当我尝试关闭和隐藏它时，

controller.reverse（）

没有任何动画要隐藏

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: BarrierEffect(),
    ));

class BarrierEffect extends StatefulWidget {
  @override
  State<BarrierEffect> createState() => _BarrierEffect();
}

class _BarrierEffect extends State<BarrierEffect> with TickerProviderStateMixin {
  var isShownBarrier = false;
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
        setState(() {
          isShownBarrier = false;
        });
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
        setState(() {
          isShownBarrier = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: <Widget>[
            Center(
              child: RaisedButton(
                  color: Colors.white,
                  child: Text('show barrier'),
                  onPressed: () => controller.forward(),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0))),
            ),
            Visibility(
              visible: isShownBarrier ? true : false,
              child: FadeTransition(
                opacity: animation,
                child: Container(
                  color: Colors.black.withOpacity(0.5),
                  child: Center(child: Text('test')),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MaterialApp(
主页：BarrierEffect（），
));
类BarrierEffect扩展StatefulWidget{
@凌驾
State createState（）=>_barrieEffect（）；
}
类_barrieEffect使用TickerProviderStateMixin扩展状态{
var isShownBarrier=假；
动画控制器；
动画；
@凌驾
void initState（）{
super.initState（）；
控制器=AnimationController（持续时间：常量持续时间（毫秒：1000），vsync:this）；
动画=曲线动画（父对象：控制器，曲线：Curves.easeIn）；
animation.addStatusListener（（状态）{
如果（状态==AnimationStatus.completed）{
controller.reverse（）；
设置状态（）{
isShownBarrier=假；
});
}else if（状态==AnimationStatus.discomered）{
controller.forward（）；
设置状态（）{
isShownBarrier=真；
});
}
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
子：堆栈(
儿童：[
居中(
孩子：升起按钮(
颜色：颜色，白色，
子项：文本（'show barrier'），
onPressed:（）=>controller.forward（），
形状：RoundedRectangleBorder（borderRadius:borderRadius.circular（50.0）），
),
可见度(
可见：isShownBarrier？对：错，
孩子：FadeTransition(
不透明度：动画，
子：容器(
颜色：颜色。黑色。不透明度（0.5），
子：中心（子：文本（“测试”）），
),
),
)
],
),
),
);
}
}

这就是你要找的吗

完整代码：

void main() => runApp(MaterialApp(home: BarrierEffect()));

class BarrierEffect extends StatefulWidget {
  @override
  State<BarrierEffect> createState() => _BarrierEffect();
}

class _BarrierEffect extends State<BarrierEffect> with TickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (_, child) {
          return Stack(
            children: <Widget>[
              Center(
                child: RaisedButton(
                  child: Text('Show Barrier'),
                  onPressed: () => controller.repeat(reverse: true),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0)),
                ),
              ),
              Visibility(
                visible: controller.value != 0,
                child: Opacity(
                  opacity: controller.value,
                  child: Container(
                    color: Colors.black.withOpacity(0.9),
                    child: Center(child: Text('My Barrier', style: TextStyle(color: Colors.white))),
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

void main（）；
类BarrierEffect扩展StatefulWidget{
@凌驾
State createState（）=>_barrieEffect（）；
}
类_barrieEffect使用TickerProviderStateMixin扩展状态{
动画控制器；
@凌驾
void initState（）{
super.initState（）；
controller=AnimationController（持续时间：const-duration（毫秒：2000），vsync:this）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
body:AnimatedBuilder(
动画：控制器，
建筑商：（u，孩子）{
返回堆栈(
儿童：[
居中(
孩子：升起按钮(
子项：文本（'Show Barrier'），
按下：（）=>控制器。重复（反向：true），
形状：RoundedRectangleBorder（borderRadius:borderRadius.circular（50.0）），
),
),
可见度(
可见：controller.value！=0，
子对象：不透明度(
不透明度：controller.value，
子：容器(
颜色：颜色。黑色。不透明度（0.9），
child:Center（child:Text（'My Barrier'，style:TextStyle（color:Colors.white）），
),
),
)
],
);
},
),
);
}
}

在显示小部件后，能否尝试调用

controller.reverse（）

内部

setState（）

？@durgadass？我想我最近测试了为什么将

动画定义为
initState
？你不用it@DolDurma是的，你是对的，你真的不需要它，我忘了删除它。我刚刚更新了答案。