Re-trigger Fade Transition - flutter

Question

I am trying to use FadeTransition to fade in a picture and some text after pressing a button. So far this is working fine, however, on subsequent presses of the button I want a new picture and text to Fade in. Right now the first picture and text fades in, but subsequent ones do not.
Here is my code so far:
import 'package:flutter/material.dart';
class SurpriseReveal extends StatefulWidget {
final Widget child;
final int surpriseNumber;
final List<Map<String, String>> surprises;
final Function randomSurprise;
SurpriseReveal(
{#required this.surpriseNumber,
#required this.surprises,
#required this.randomSurprise,
#required this.child});
#override
_SurpriseRevealState createState() => _SurpriseRevealState();
}
class _SurpriseRevealState extends State<SurpriseReveal> with SingleTickerProviderStateMixin{
AnimationController _controller;
Animation _animation;
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween(
begin: 0.0,
end: 1.0,
).animate(_controller);
}
#override
dispose(){
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
_controller.forward();
return Container(
child: Stack(
children: <Widget>[
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.share),
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[300],
onPressed: () {},
),
),
Positioned(
bottom: 300,
top: 40,
right: 40,
left: 40,
child: FadeTransition(
opacity: _animation,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.pink[300],
width: 4,
),
borderRadius: BorderRadius.circular(300),
),
child: Padding(
padding: const EdgeInsets.all(40.0),
child: Text(
widget.surprises[widget.surpriseNumber]['Surprises'],
style: TextStyle(fontSize: 20, color: Colors.pink[700]),
),
),
alignment: Alignment.topCenter,
),
),
),
Positioned(
bottom: 380,
top: 120,
right: 70,
left: 70,
child: FadeTransition(
opacity: _animation,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage(
widget.surprises[widget.surpriseNumber]['Image'] ),
fit: BoxFit.fill,
),
border: Border.all(
color: Colors.pink[300],
width: 2,
),
borderRadius: BorderRadius.circular(12),
),
//child: Image.asset(surprises[surpriseNumber]['Image']),
),
),
),
Positioned(
bottom: -60,
top: 400,
right: 120,
left: 120,
child: FloatingActionButton(
onPressed: widget.randomSurprise,
splashColor: Colors.pink[900],
backgroundColor: Colors.pink[300],
child: Container(
// decoration property gives it a color and makes it round like a floating action button
// add your desired padding here
// add the child element
child: Center(
child: Text(
'Surprise me again!',
// style of the text
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0,
color: Colors.pink[900],
),
),
),
),
),
),
],
overflow: Overflow.visible,
),
);
}
}
I would assume I need my FAB that triggers a new picture and text to also trigger the animation again, but I am unsure how to do this?

Answer 1

Try this:
FloatingActionButton(
onPressed: {widget.randomSurprise; _controller.reset();},
......
If you want your animation controller to play the animation again, you need to reset it.