0

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

Wouter Vandenputte
  • 1,948
  • 4
  • 26
  • 50

1 Answers1

1

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)),
    );
  },
);
rmtmckenzie
  • 37,718
  • 9
  • 112
  • 99
  • Your solution seems to work as it displays the bird but I do get an error `Unsupported operation: Infinity or NaN toInt`. Any idea what this is about? – Wouter Vandenputte Mar 10 '21 at 20:22
  • hmmm no idea if you've copied it as-is. I'm not seeing that error. Does the trace show anything relevant? – rmtmckenzie Mar 10 '21 at 20:26
  • I took a screenshot of your code pasted in my screenshot including the log https://ibb.co/wKv4K7r – Wouter Vandenputte Mar 10 '21 at 20:32
  • hmmm. That's strange. The only thing I can think of is if you added that in a hot reload. If you hot-restart or close and re-open the app do you still get the same error? If neither of those help it could theoretically be a new bug introduced by the null-safety changes. – rmtmckenzie Mar 10 '21 at 20:41