Flutter animate reverse effect on FadeTransition - flutter

Question

in this simple code, i try to show and hide barrier on top of widgets,showing this barrier can be have with animation, but when i try to close and hide that, controller.reverse() doesn't have any animation to hide
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')),
),
),
)
],
),
),
);
}
}

Answer 1

Is this what you are looking for?
Full code:
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))),
),
),
)
],
);
},
),
);
}
}