メモ：flutterで自動的に閉じるシンプルなoverlay dialogをだす

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

overlay dialog widgetの実装

• ぶっちゃけこちらの方が紹介しているoverlayのコードをほぼ使った。
  • dart - Flutter custom animated dialog - Stack Overflow

• 以下がwidgetのコード。

overlay_dialog.dart

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を開き、１秒後に閉じるコード。今回はボタンをおした時に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());
    });
  }