AnimatedOpacity and AnimatedBuilder with opacity not performing same animation - flutter

Question

Minimal reproducible code:
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
AnimationController _controller;
bool _foo = true;
static const _curve = Curves.linear;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000),
)..addListener(() => setState(() {}));
}
void _animate() async {
if (_foo) await _controller.forward();
else await _controller.reverse();
_foo = !_foo;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: _controller.value,
duration: Duration(milliseconds: 500),
curve: _curve,
child: box,
),
SizedBox(height: 12),
AnimatedBuilder(
animation: CurvedAnimation(parent: _controller, curve: _curve),
builder: (context, child) {
return Opacity(
opacity: _controller.value,
child: box,
);
},
),
RaisedButton(
onPressed: _animate,
child: Text('Animate'),
),
],
),
),
);
}
Widget get box => Container(width: 100, height: 100, color: Colors.blue);
}
Output:
From the screenshot, you can see I am using same Curve for both AnimatedOpacity and AnimatedBuilder, but output is still not the same, can anyone tell me why?
I'm new to Flutter, so no idea if I am making some silly mistake.
Thank you so much for your time.

Answer 1

AnimatedOpacity is an ImplicitAnimationWidget, which means it construct a Tween based on the opacity value you give it (and the curve and duration). An implicit animation changes according to the current value and the new one, but because you give to it the _controller.value it changes its velocity based on the velocity change of the the controller (change of rate of a change of rate, sounds like inception). Think like maths, the AnimationBuilder gives you a velocity based on a curve(like first differential) and AnimatedOpacity does the same so you don't need to build a controller, but because you gave it the _controller.value (which changes with a given velocity) it gives you the change of rate of that velocity (sounds like second differential)
Check this example where I gave AnimatedOpacity a simple double (1 or 0 depending at the same time I start the AnimationController). They have the same curve and duration so the animation seems basically the same
class Home extends StatefulWidget{
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<Home> with TickerProviderStateMixin {
AnimationController _controller;
bool _foo = true;
double value;
static const _curve = Curves.linear;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1000),
);//..addListener(() => setState(() {}));
value = _controller.value;
}
void _animate() async {
setState(() {
value = _foo ? 1.0 : 0.0;
});
if (_foo) await _controller.forward();
else await _controller.reverse();
_foo = !_foo;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: value,//_controller.value,
duration: const Duration(milliseconds: 1000),
curve: _curve,
child: box,
),
SizedBox(height: 12),
AnimatedBuilder(
animation: CurvedAnimation(parent: _controller, curve: _curve),
builder: (context, child) {
return Opacity(
opacity: _controller.value,
child: box,
);
},
),
RaisedButton(
onPressed: _animate,
child: Text('Animate'),
),
],
),
),
);
}
Widget get box => Container(width: 100, height: 100, color: Colors.blue);
}

Answer 2

use same duration
duration: Duration(milliseconds: 500),
use flipped curve in reverseCurve
_animation = CurvedAnimation(
curve: _curve,
reverseCurve: FilppedCurve(_curve),
);
or
AnimatedOpacity(
opacity: value,//_controller.value,
duration: const Duration(milliseconds: 1000),
curve: _foo?_curve:FlippedCurve(_curve),
child: box,
),