Обратный эффект анимации флаттера на FadeTransition

в этом простом коде я пытаюсь показать и скрыть барьер поверх виджетов, показать этот барьер можно с помощью анимации, но когда я пытаюсь закрыть и скрыть его, controller.reverse() не имеет никакой анимации, чтобы скрыть

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

flutter flutter-animation
person DolDurma    schedule 14.08.2019    source источник
comment
Можете ли вы попробовать позвонить controller.reverse() внутри setState()?   -  person Durgadass S    schedule 14.08.2019
comment
@DurgadassS после показа виджета? кажется, я тестировал недавно   -  person DolDurma    schedule 14.08.2019

Ответы (1)


arrow_upward
3
arrow_downward

Это то, что вы ищите?

введите здесь описание изображения

Полный код:

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))),
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }
}
person CopsOnRoad    schedule 15.08.2019
comment
почему вы определяете animation в initState? ты не используешь это - person DolDurma; 15.08.2019
comment
@DolDurma Да, ты прав, тебе это действительно не нужно, я забыл это удалить. Я только что обновил ответ. - person CopsOnRoad; 16.08.2019