[Flutter]Cupertino(iOS style)でダイアログ(dialog)を表示する(show)には？

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

Cupertinoでダイアログを表示する方法を紹介します。

方法
使用例

方法

Cupertinoでダイアログを表示するには、showCupertinoDialog関数を使います。

具体的には、ダイアログを表示したいタイミングで、showCupertinoDialog関数を呼び出します。

showCupertinoDialog関数は、第１引数にcontext、第２引数でダイアログとして表示するウェジェットを返す関数を指定します。

showCupertinoDialog(
  context: context, //contextを指定
  builder: (context) {
    //ダイアログとして表示するウェジェットをreturn
    return Dialog();
  },
);

showCupertinoDialog関数を使うことで、Cupertinoでダイアログを表示することが出来ます。

iOS風のダイアログを表示したい場合は、第２引数で返すウェジェットにCupertinoAlertDialogを指定します。

showCupertinoDialog(
  context: context,
  builder: (context) {
    return CupertinoAlertDialog(・・・);
  },
);

[Flutter]CupertinoAlertDialogの使い方

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

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoButton(
          child: Text('Show'),
          onPressed: () {
            showCupertinoDialog(
              context: context,
              builder: (context) {
                return CupertinoAlertDialog(
                  title: Text("Alert Dialog"),
                  content: Text('This is Dialog.'),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: Text('OK'),
                    ),
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}