时间戳

首页 > 解决方案 > 我怎样才能只显示一个小部件，然后在 Flutter 中再次隐藏它

flutter - 我怎样才能只显示一个小部件，然后在 Flutter 中再次隐藏它

问题描述

我只想在按下按钮时显示一个小部件，然后在一秒钟后它消失

我正在尝试使用 Opacity Widget 来做到这一点：

double _woofOp = 0.0;

  void hideImg(){
    Duration(seconds: 1);
    setState(() {
      _woofOp = 0.0;
    });
  }
  void playAudio() {
    setState(() {
      _woofOp = 1.0;
      playBark.play('DogWoof.mp3');
    });
    hideImg();
  }

和小部件：

Opacity(
        opacity: _woofOp,
        child: Image.asset('images/woof-png.png',
        width: 80.0,
        ),
)

但是通过使用它没有任何反应，（但音频工作在相同的功能）知道为什么吗？

或者任何想法我怎么能用其他方式做到这一点？我只是一个学习者。谢谢

标签： flutterdart

解决方案

您可以使用OverlayEntry.

您应该从您的小部件中调用此方法：

 static void showToast({
    @required BuildContext context,
  }) {

    OverlayEntry overlayEntry;

    overlayEntry = OverlayEntry(
        builder: (context) => ToastWidget(
        )
    );
    Overlay.of(context).insert(overlayEntry);
    Timer(Duration(seconds: 1), () =>  overlayEntry.remove());

  }

toast_widget.dart：

class ToastWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 100.0,
      width: MediaQuery.of(context).size.width - 20,
      left: 10,

      child: Material(
        color: Colors.blue,
        elevation: 10.0,
        borderRadius: BorderRadius.circular(10),
        child: Text('Hello from toast'),
      ),
    );
  }
}

这是一个非常简单的实现，没有任何样式或动画之类的美化，但是您可以根据需要对其进行自定义。

此外，您可以查看这个有用的指南：https ://medium.com/@Mak95/how-to-make-custom-toast-messages-in-flutter-9799ef3239b7

推荐阅读