Как сделать так, чтобы тело AlertDialog было Image?

Question

Я хочу сделать AlertDialog следующим образом:

Я пытаюсь построить это с помощью своего кода следующим образом:

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());
                                      },
                                    ),
                                  ],
                                ),
                              );

И вот такой результат:

Как сделать так, чтобы тело AlertDialog было полно изображений, как в примере? и кнопка Открыть перед изображением.

Answer 1

Реализуйте приведенный ниже код на главном экране, затем перейдите к диалоговому экрану (все, что вы хотите открыть)

Вызовите эту функцию в вашем методе onPress / onTap

 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());
    }
  }

И не обязательно, что вы должны создать диалог, вы можете создать деятельность

Answer 2

Добавьте этот код в ваш класс

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
              )
          ),
        ),
      ),
    )
);
 }

и вызовите _showDialog () в вашей функции onTap / onPressed, просто установите фоновый цвет вашего AlertDialogs в прозрачный и установите его contentpadding равным 0, и ваш код должен быть хорошим

Answer 3

Попробуйте что-то вроде этого:

      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: () {},
                          ),
                        )
                      ],
                    ),
                  ),
                )
            );
          }
        ),
      )

Выглядит так: