[Flutter]CupertinoAlertDialog（クパチーノアラートダイアログ）の使い方

[Flutter]CupertinoAlertDialogの使い方

Flutter

2021.10.25

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

CupertinoAlertDialogの使い方を解説します。

使い方

使い方

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

引数

CupertinoAlertDialogは、引数で表示するダイアログの設定をすることが出来ます。

主な引数は、次の３つです。

title : タイトル
content : 本文
actions : ボタン

引数「title」にはタイトルとなるテキスト、引数「content」にはアラートのメッセージ本文を指定します。

そして、「actions」には、アラートの下部分に表示するボタンを指定します。

ポイントは、「actions」のボタンで、「CupertinoDialogAction」という特別なボタンを使います。

CupertinoDialogActionの引数で主に使用するのは、次の４つです。

child : ボタンに表示するウェジェット
onPressed : タップした時の処理
isDefaultAction : デフォルトのボタンかどうか。（trueを指定すると、テキストが青色になる）
isDestructiveAction : ディストラクティブボタンか。(trueを指定すると、テキストが赤色になる)

デフォルトのボタンというのは、肯定的な意味を表すボタン（「OK」とか「完了」とか）です。

これに対して、ディストラクティブボタンというのは、否定的な意味を表すボタン（「キャンセル」とか「削除」とか）です。

iOSでは、否定的な意味を持つボタンには、ディストラクティブボタンを指定し、テキストを赤色にするマナーみたいなものがあります。

表示

CupertinoAlertDialogを表示するには、「showCupertinoDialog」関数もしくは「showDialog」関数を使います。

関数の引数「builder」の戻り値に、表示する「CupertinoAlertDialog」を指定します。

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

showCupertinoDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(
      title: Text('Alert'),
    );
  },
);

showCupertinoDialogとshowDialogのどちらでも表示することが出来ます。

ただ、表示された時の画面が少し違っていて、「showCupertinoDialog」で表示する方が明るくなります。

使用例

以下は、実際の使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                showCupertinoDialog(
                  context: context,
                  builder: (context) {
                    return CupertinoAlertDialog(
                      title: Text('Alert'),
                      content: Text('This is sample.'),
                      actions: [
                        CupertinoDialogAction(
                          isDestructiveAction: true,
                          child: Text('close'),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                        CupertinoDialogAction(
                          child: Text('OK'),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                      ],
                    );
                  },
                );
              },
              child: Text('Button'),
            )
          ],
        ),
      ),
    );
  }