How to make body of AlertDialog is Image?

Issue

I want to make AlertDialog like this bellow:

I try to build that with my code like this:

return Center(
                                child: AlertDialog(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  elevation: 0.0,
                                  content: Hero(
                                    tag: 'banner-hero',
                                    child: ClipRRect(
                                      borderRadius:
                                          BorderRadius.all(Radius.circular(10)),
                                      child: Image.asset(
                                        StringImageAsset.popUpBanner,
                                        height: Sizes.width(context) / 1,
                                        width: Sizes.width(context) / 1,
                                      ),
                                    ),
                                  ),
                                  actions: <Widget>[
                                    FlatButton(
                                      child: Text('Open'),
                                      onPressed: () {
                                        Navigator.pop(context);
                                        Navigation.intent(
                                            context, AddsBannerDetail());
                                      },
                                    ),
                                  ],
                                ),
                              );

And the result like this:

How to make the body of AlertDialog is full of images like the example? and the button of Open in front of the image.

Solution

Try something like this:

      RaisedButton(
        child: Text("Open"),
        onPressed: () => showDialog(
          context: context,
          builder: (context) {
            return Center(
              child: Container(
                margin: EdgeInsets.all(16),
                child: ClipRRect(
                    borderRadius:
                        BorderRadius.all(Radius.circular(10)),
                    child: Stack(
                      children: <Widget>[
                        Image.network("https://images.absolutdrinks.com/drink-images/Raw/Absolut/2f2f4c7b-9a52-467e-8c8f-6ad1f127bc35.jpg?imwidth=500",
                          fit: BoxFit.cover,),
                        Positioned(
                          right: 0,
                          bottom: 0,
                          child: FlatButton(
                            child: Text("Open"),
                            onPressed: () {},
                          ),
                        )
                      ],
                    ),
                  ),
                )
            );
          }
        ),
      )

Looks like this:

Answered By – Jonas

Answer Checked By – David Goodson (FlutterFixes Volunteer)