How can I set a background image on an AlertDialog in Flutter?

Question

I want to click a card with an InkWell that displays an image as it was an AlertDialog with text on top of it. I think the issue could be setting an image as background on AlertDialog, so I can write on top of it, but I can only use backgroundColor.

This is what I had in mind, but I can not set an image as background for the AlertDialog.

child: InkWell(
    onTap: () {
        showDialog(
            context: context,
            builder: (BuildContext context) {
                return AlertDialog(
                    content: Container(...),
                );
            },
        );
    },
    child: Container(...),
),

Have you tried [Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html)`? You can use it to overlap widgets. — kaboc, Apr 05 '20 at 04:48

score 3 · Accepted Answer · answered Apr 05 '20 at 05:28

Here try this out I might not have the InkWell where you want it but this results in centered text on top of an image. If you don't want the image and the text in the same alignment look into the Positioned widget.

Card(
          child: InkWell(
            child: Text('This is some text in a card'),
            onTap: () => showDialog(
              context: context,
              builder: (context) => AlertDialog(
                content: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(
                      'Path to image',
                      height: 200,
                      fit: BoxFit.cover,
                    ),
                    Text(
                      'This Is Some Text',
                      style: TextStyle(
                        fontSize: 24,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),

How can I set a background image on an AlertDialog in Flutter?

1 Answers1

Linked