[Flutter]ダイアログをスケールアニメーションで表示するには？

Flutter

2021.11.04

どうも、ちょげ(@chogetarou)です。

ダイアログをスケールアニメーションで表示する方法を紹介します。

方法

ダイアログをスケールアニメーションで表示するには、「flutter_animated_dialog」を使います。

まず、「pubspec.yaml」でパッケージを追加します。

dependencies:
  flutter_animated_dialog: ^2.0.1

そして、該当ファイルでパッケージをインポートします。

import 'package:flutter_animated_dialog/flutter_animated_dialog.dart';

次に「showDialog」関数を、「showAnimatedDialog」関数に置き換えます。

showAnimatedDialog(
  context: context,
  builder: (BuildContext context) {
    return /*Dialog Widget*/;
  },
);

最後に、showAnimatedDialogの引数「animationType」に「DialogTransition.scale」を指定します。

showAnimatedDialog(
  context: context,
  builder: (BuildContext context) {
    return /*Dialog Widget*/;
  },
  animationType: DialogTransitionType.scale,
);

これでダイアログをスケールアニメーションで表示することが出来ます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                showAnimatedDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Alert'),
                      content: Text('Sample Animaation'),
                      actions: [
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Close'),
                        ),
                      ],
                    );
                  },
                  animationType: DialogTransitionType.scale,
                  duration: Duration(seconds: 1), //アニメーションの時間
                );
              },
              child: Text('Show'),
            )
          ],
        ),
      ),
    );
  }