CODEWITHSUNDEEP
flutterflutter-layoutflutter-dialog
Wouter Vandenputte
Wouter Vandenputte

Reputation: 2113

Flutter dialog background image

I'm trying out some experiments with exotic Flutter dialogs. As for now, I'd like to have a SimpleDialog (or AlertDialog) with an asset image as background. Unfortunately this does not seem to be possible as only colors are available as background. How could I circumvene this issue and fill my dialog with an image either way?

I already looked at this answer but this is an image inside a dialog. It will always have margins

Upvotes: 0

Views: 856

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40503

What you want to do should be simple enough, you just need to make sure to set the contentPadding property of the AlertDialog to zero, and use a stack.

I'd also advise using a Positioned around your image so that it doesn't dictate the size of the dialog, or otherwise the dialog might just grow to as big as possible for the screen. Doing it this way ensures that the dialog will be sized to the other child (your actual content) instead.

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      backgroundColor: Colors.red,
      content: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            child: Image.network(
              "https://images.unsplash.com/photo-1596117803277-6142bb2ae8ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2364&q=80",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(24),
            child: Container(
              height: 400,
              width: 240,
              color: Colors.white.withOpacity(.3),
            ),
          )
        ],
      ),
      contentPadding: EdgeInsets.zero,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
    );
  },
);

Upvotes: 1

Related Questions