すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】Dialog(ダイアログ)を表示する方法

アプリ開発をおこなっていると次のような機能を実装したいケースがある。

  • ユーザーに選択肢を表示したい
  • データを削除するので注意を促したい

このようなケースではAlertDialogを用いてダイアログ(ポップアップ)を簡単に作成できる。

本エントリでは以下の流れでAlertDialogの使用方法を説明する。


AlertDialog使用パターン

各使用パターンごとに動作画像とコードを示す。 使用しているプロパティは「各プロパティ」で後述する。

タイトルのみ

タイトルのみのダイアログ

タイトルとコンテンツ

タイトルとコンテンツ

ボタン付き

ボタン付き

選択した値を他のウィジェットに渡す

選択した値を他のウィジェットに渡す

各プロパティ

title

ダイアログの上部に表示されるタイトルを指定する。

content

ダイアログの中部に表示されるコンテンツを指定する。

actions

ダイアログ下部に表示される選択肢をList<Widget>形式で指定する。