Повторно запустить переход затухания - PullRequest
Новая
       4

Повторно запустить переход затухания

0 голосов
/ 08 мая 2020

Я пытаюсь использовать FadeTransition для исчезновения изображения и текста после нажатия кнопки. Пока что это работает нормально, однако при последующих нажатиях кнопки я хочу, чтобы новое изображение и текст постепенно появлялись. Сейчас первое изображение и текст исчезают, а последующие - нет.

Вот мой код на данный момент: 

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,
      ),
    );
  }
}

Я бы предположил, что мне нужен мой FAB, который запускает новое изображение и текст, чтобы снова запускать анимацию, но я не уверен, как это сделать?

1 Ответ

1 голос
/ 08 мая 2020

Попробуйте следующее: 

FloatingActionButton(
                  onPressed: {widget.randomSurprise; _controller.reset();},
......

Если вы хотите, чтобы ваш контроллер анимации снова воспроизводил анимацию, вам необходимо сбросить его.

...