Re-trigger Fade Transition

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.