[Flutter]AlertDialogの背景色を変えるには？

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

AlertDialogの背景色を変える方法を紹介します。

方法

AlertDialog自体の背景色

AlertDialog自体の背景色を変えるには、AlertDialogの引数「backgroundColor」に色を指定します。

AlertDialog(
  backgroundColor: Colors.blue, //背景色
  title: Text(
    'Alert',
    style: TextStyle(color: Colors.white),
  ),
  content: Text(
    'This is sample.',
    style: TextStyle(color: Colors.white),
  ),
)

AlertDialogの後ろの背景色

AlertDialogの後ろの画面の色を変えるには、「showDialog」関数の引数「barrierColor」に色を指定します。

showDialog(
  barrierColor: Colors.blue,//後ろの背景色
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is sample.'),
    );
  },
)

barrierColorで指定する色に透明度を指定する場合は、「withOpacity」を使います。

withOpacityの引数に、「０〜１」（０＝透明、１＝不透明）までの値を指定することで、色の透明度を設定できます。

showDialog(
  barrierColor: Colors.blue.withOpacity(0.3), //透明度0.3
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is sample.'),
    );
  },
)

まとめ

AlertDialog自体の背景色は、AlertDialogの引数「backgroundColor」で指定します。

そして、AlertDialogの後ろの画面の色は、showDialogの引数「barrierColor」で指定します。