【Flutter】SimpleDialogの使い方｜オプション選択可能なダイアログを実装

2023年7月24日

FlutterのSimpleDialogウィジェットの用途と使い方のまとめ記事です。

本記事ではSimpleDialogのサンプルコードを使いながら基本的な使い方、知っておきたい基本プロパティを解説していきます。

SimpleDialogとは？

SimpleDialogは複数のオプション選択が可能なダイアログを（ポップアップウィンドウ）を表示できるウィジェットです。

SimpleDialogの基本的な使い方

SimpleDialogはshowDialog()を実行して表示できます。（showDialog()の書き方は下のサンプルコードを参照）

SimpleDialogのtitleでダイアログのタイトル、childrenのリストにオプション数だけSimpleDialogOption()を追加します。

SimpleDialogOption()のchildの引数に任意のウィジェット、onPressedでオプションがタップされた場合の処理を指定できます。またNavigator.of(context).pop()を実行することでダイアログを非表示できます。

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text("タイトル"),
      children: [
        SimpleDialogOption(
          child: Text('オプション1'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text('オプション2'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text('オプション3'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

周囲の黒い部分をタップして閉じないようにする

SimpleDialogはNavigator.of(context).pop()以外にもアラートダイアログの周囲の黒い部分をタップして閉じることができます。

周囲の黒い部分をタップして閉じないようにするにはshowDialog()のbarrierDismissibleの引数にfalseを渡します。

showDialog(
  barrierDismissible: false,
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text("タイトル"),
      children: [
        SimpleDialogOption(
          child: Text('オプション1'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text('オプション2'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text('オプション3'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

SimpleDialogで知っておきたい基本プロパティ

スクロールできます

プロパティ名	説明
backgroundColor	ダイアログの背景色を指定
elevation	ダイアログの影の高さを調整
shape	ダイアログの形を指定

backgroundColor：ダイアログの背景色を指定

backgroundColorの引数にColor渡してアラートダイアログの背景色を指定できます。

SimpleDialog(
  title: Text("タイトル"),
  backgroundColor: Colors.yellow,
  children: [
    SimpleDialogOption(
      child: Text('オプション1'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    SimpleDialogOption(
      child: Text('オプション2'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    SimpleDialogOption(
      child: Text('オプション3'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
)

アウトプット（左側）

elevation：ダイアログの影の高さを調整

elevationの引数にdouble値を渡して影の高さを調整できます。

SimpleDialog(
  title: Text("タイトル"),
  elevation: 5,
  children: [
    SimpleDialogOption(
      child: Text('オプション1'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    SimpleDialogOption(
      child: Text('オプション2'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    SimpleDialogOption(
      child: Text('オプション3'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

アウトプット（左側）

shape：ダイアログの形を指定

shapeの引数にRoundedRectangleBorder()を渡して角丸の調整ができます。

RoundedRectangleBorder()>borderRadius>BorderRadius.circular()の引数にdouble値を渡して角丸を調整します。

SimpleDialog(
  title: Text("タイトル"),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  children: [
    SimpleDialogOption(
      child: Text('オプション1'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    SimpleDialogOption(
      child: Text('オプション2'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
    SimpleDialogOption(
      child: Text('オプション3'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
)

アウトプット（左側）

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: const SimpleDialogExample(),
      ),
    );
  }
}

class SimpleDialogExample extends StatefulWidget {
  const SimpleDialogExample({super.key});

  @override
  State<SimpleDialogExample> createState() => _SimpleDialogExampleState();
}

class _SimpleDialogExampleState extends State<SimpleDialogExample> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('Show SimpleDialog'),
        onPressed: () {
          showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext context) {
              return SimpleDialog(
                title: Text("タイトル"),
                elevation: 5,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                children: [
                  SimpleDialogOption(
                    child: Text('オプション1'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  SimpleDialogOption(
                    child: Text('オプション2'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  SimpleDialogOption(
                    child: Text('オプション3'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        },
      ),
    );
  }
}