How to make body of AlertDialog is Image?

Question

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.

score 1 · Accepted Answer · answered Jan 18 '20 at 11:03

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:

score 0 · Answer 2 · answered Jan 18 '20 at 11:07

Implement the below code on your main screen then navigate to dialog screen(whatever you want to open)

Call this function on your onPress/onTap method

 void openDialogScreenPage() async {
    var value = await Navigator.of(context).push(PageRouteBuilder(
        opaque: false,
        pageBuilder: (BuildContext context, _, __) {
          return BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
              child: DialogSCreen();
        }));
    if (value != null) {
      print(value.toString());
    }
  }

And not necessary that you must create dialog you can create activity

Qonvex620 · Answer 3 · 2020-01-18T11:41:04.850

Add this code to your class

void _showDialog(){
showDialog(
    context: context,
    builder: (_)=> AlertDialog(
      backgroundColor: Colors.transparent,
      contentPadding: EdgeInsets.all(0),
      content: BackdropFilter(
        filter: prefix0.ImageFilter.blur(sigmaY: 4.0,sigmaX: 4.0),
        child: Container(
          width: scrw,
          height: scrh,

          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(20),
              image: DecorationImage(
                  image: NetworkImage("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                  fit: BoxFit.cover
              )
          ),
        ),
      ),
    )
);
 }

and call _showDialog() in your onTap/onPressed function, just set your AlertDialogs backgroundcolor to transparent and set its contentpadding to 0 and your code should be good

How to make body of AlertDialog is Image?

3 Answers3