flutterで自動的に閉じるoverlay dialogを表示する方法

Posted by roadman on Saturday, March 9, 2019

TOC

  • シンプルでいいけど、animationでぬるっと出てきて自動的に閉じてくれるoverlayな表示を出すための実装。

overlay dialog widgetの実装

  • ぶっちゃけこちらの方が紹介しているoverlayのコードをほぼ使った。
  • 以下がwidgetのコード。
    import 'package:flutter/material.dart';
    
    class OverlayDialog extends StatefulWidget {
        OverlayDialog({Key key, this.message}):super(key:key);
      
        final String message;
      
        @override
        State<StatefulWidget> createState() => OverlayDialogState();
    }
    
    class OverlayDialogState extends State<OverlayDialog> with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<double> opacityAnimation;
      Animation<double> scaleAnimatoin;
    
      @override
      void initState() {
        super.initState();
    
        controller =
            AnimationController(vsync: this, duration: Duration(milliseconds: 450));
        opacityAnimation = Tween<double>(begin: 0.0, end: 0.4).animate(
            CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn));
        scaleAnimatoin =
            CurvedAnimation(parent: controller, curve: Curves.elasticInOut);
    
        controller.addListener(() {
          setState(() {});
        });
    
        controller.forward();
      }
    
      @override
      Widget build(BuildContext context) {
        return Material(
          color: Colors.black.withOpacity(opacityAnimation.value),
          child: Center(
            child: ScaleTransition(
              scale: scaleAnimatoin,
              child: Container(
                decoration: ShapeDecoration(
                    color: Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0))),
                child: Padding(
                  padding: const EdgeInsets.all(50.0),
                  child: Text(widget.message),
                ),
              ),
            ),
          ),
        );
      }
    }

widgetのopen/closeの実装

  • overlay dialog wigetを開き、1秒後に閉じるコード。今回はボタンをおした時にoverlay表示を出すので、onPressedのfunctionに入れてある。
      void _onPressed() {
        setState(() {
          var _overlayEntry = OverlayEntry(
            builder: (BuildContext context) {
              return OverlayDialog(message: "open!");
            },
          );
          Navigator.of(context).overlay.insert(_overlayEntry);
          Timer(Duration(seconds: 1), () => _overlayEntry.remove());
        });
      }