[Flutter]AlertDialogの背景に画像を設定する方法

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

AlertDialogの背景に画像を設定する方法を紹介します。

方法

まず、showDialogの「builder」で返すウェジェットをStackに指定します。

showDialog(
  context: context,
  builder: (context) {
    return Stack();
  },
);

次に、「Stack」の引数「children」に、画像を表示するContainerを指定します。

この「Container」ウェジェットは、「Align」で中央に表示されるようにします。

showDialog(
  context: context,
  builder: (context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              image: DecorationImage(
                  image:
                      AssetImage('asset/images/dog-illust.jpg'), //画像（皆さんの環境に合わせてください）
                  fit: BoxFit.fill
                ),
            ),
          ),
        ),
      ],
    );
  },
);

画像は、「Container」ウェジェットの「BoxDecoration」で指定します。

最後に、Alignの後に、表示するAlertDialogを指定します。

表示する「AlertDialog」の引数「elevation」に「０」、引数「color」に透明色である「Colors.transparent」を指定します。

showDialog(
  context: context,
  builder: (context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.center,
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              image: DecorationImage(
                  image:
                      AssetImage('asset/images/dog-illust.jpg'),
                  fit: BoxFit.fill),
            ),
          ),
        ),
        AlertDialog(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: Text('Alert'),
          content: Text('This is sample.'),
        ),
      ],
    );
  },
);

これでAlertDialogの背景に画像を表示することが出来ます。