[Flutter] ShowDialog の実装

はじめに

今回は ShowDialog についてまとめてみようと思います。
以前参加したハッカソンの際に利用しましたが、その際に利用した部分のみしか知らないので、他の種類やその実装方法についてくわしく調べてみました。

ShowDialog

ShowDialog は、ユーザーの操作の確認を行ったり、情報の入力を求めたりする際に利用します。
その中でも AlertDialog と SimpleDialog の大きく2種類あります。
いずれを使うにしても以下のコードは共通部分です。
SingleChildScrollView を利用することでスクロールができるようにもなるみたいです。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(); //または　SimpleDialog
  },
);

AlertDialog

AlertDialog は何かを変更したり、削除したりする際にユーザーへ警告として確認をうながす際に利用します。 Navigator.of(context).pop を使わないとダイアログは閉じてくれないので注意が必要です。

AlertDialog(
  title: Text('確認'),
  content: Text('本当に削除しますか？'),
  actions: [
    TextButton(onPressed: () => Navigator.pop(context, false),
    child: Text('キャンセル')),
    TextButton(onPressed: () => Navigator.pop(context, true),
    child: Text('削除')),
  ],
);

SimpleDialog

SimpleDialog はログイン時にどれを使うのか、言語選択は何にするのか、などユーザーに何かを選択させたいときに利用します。

SimpleDialog(
  title: Text('選択してください'),
  children: [
    SimpleDialogOption(onPressed: () => Navigator.pop(context, 'A'),
    child: Text('A')),
    SimpleDialogOption(onPressed: () => Navigator.pop(context, 'B'),
    child: Text('B')),
  ],
);

その他

他にもダイアログにはいくつか種類があるみたいです。

Dialog ではカスタムが自由で、画像やチェックボックス等複雑なものを含む場合に利用します。
また、iOS 風な UI を再現したい際に利用する showCupertinoDialog や、下からスライド式で出てくる showModalBottomSheet、自作のアニメーションを実装する際に使える
showGeneralDialog など自由なダイアログを作成するための Widget があります。

最後に

今回は ShowDialog について調べたことをまとめてみました。
以前までは　AlertDialog しかしらなかったのでいい勉強の機会になりました。
他にもいくつか Widget があるみたいなので、今後機会があれば調べて実装していきたいと思います。