Flutter図鑑

Dialog

Dialog Widgetは画面にポップアップを表示するために使用されます。
アラートや確認メッセージなど重要なメッセージを表示する場合に有効です。

基本的な使用方法

  • showDialog
  • Dialog

FlutterではshowDialog関数を使用してダイアログを呼び出すことができます。
ダイアログを閉じたい場合は、Navigator.pop(context)を使用して閉じることができます。

onPressed: () => showDialog(
  context: context,
  builder: (BuildContext context) => Dialog(
    child: ...
  )
),

全画面のダイアログ

  • Dialog.fullscreen

全画面のダイアログを表示するためにはDialog.fullscreenで対応することができます。
全画面に表示されるため、"閉じるボタン"を設置する必要があることに注意してください。

onPressed: () => showDialog(
  context: context,
  builder: (BuildContext context) => Dialog.fullscreen(
    child: ...
  )
)

AlertDialog

  • AlertDialog

AlertDialogはユーザーに対して注意や確認を行う場合に使用されます。
カスタマイズ性は低いですが、シンプルで使いやすくユーザーの確認が必要な場面で重宝します。

onPressed: () => showDialog(
  context: context,
  builder: (BuildContext context) => AlertDialog(
    title: const Text("Notifications"),
    content: const Text("Do you allow notifications?"),
    actions: <Widget>[
      TextButton(
        onPressed: () => Navigator.pop(context, 'Cancel'),
        child: const Text('Cancel'),
      ),
      TextButton(
        child: const Text('Approve'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
  )
),

表示時のアニメーション

  • showGeneralDialog

showGeneralDialogは高度なダイアログを実装する場合や、特定のデザインを持つダイアログを作成する際に使用されます。
transitionBuilderはダイアログの表示および非表示時のアニメーションを制御する関数であり、スケーリングやフェードなど様々なアニメーションを実装することができます。

onPressed: () => showGeneralDialog(
  context: context,
  pageBuilder: (c, a1, a2) => Container(),
  transitionBuilder: (ctx, a1, a2, child) {
    return Transform.scale(
        scale: Curves.easeInOut.transform(a1.value), // this is animation code
        child: Dialog(child: ...)
    );
  },
),

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next