[Flutter]Cupertino(iOS風)でAlertDialogを表示するには？

Flutter

2021.10.26

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

CupertinoでAlertDialogを表示する方法を紹介します。

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

CupertinoでAlertDialogを表示するには、「showCupertinoDialog」で「CupertinoAlertDialog」を使います。

まず、ダイアログをshowCupertinoDialogで表示します。

showCupertinoDialog(
  context: context, //コンテキスト
  builder: (context) {}, //表示するダイアログ
);

そして、showDialogの「builder」の処理で、「CupertinoAlertDialog」を「return」します。

showCupertinoDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text('Alert'),
      content: Text('This is sample.'),
      actions: [
        CupertinoDialogAction(
          child: Text('close'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ],
    );
  },
);

CupertinoAlertDialogは、引数「title」にアラートのタイトル、引数「content」に本文を指定します。

そして、引数「actions」には、ボタンを指定します。

このボタンには、「CupertinoDialogAction」ウェジェットを使用します。

後は、showCupertinoDialogをタップやスワイプなどのトリガーで、呼び出します。

ElevatedButton(
  onPressed: () {

    showCupertinoDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('Alert'),
          content: Text('This is sample.'),
          actions: [
            CupertinoDialogAction(
              child: Text('close'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );

  },
  child: Text('Button'),
)