如何使 AlertDialog 的主体为图像？答案

【问题标题】：How to make body of AlertDialog is Image?如何使 AlertDialog 的主体为图像？
【发布时间】：2020-01-18 10:50:04
【问题描述】：

我想像下面这样制作 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 的主体像示例一样充满图像？以及图片前面的打开按钮。

【问题讨论】：

标签： flutter flutter-alertdialog

【解决方案1】：

试试这样的：

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

看起来像这样：

【讨论】：

【解决方案2】：

在您的主屏幕上实现以下代码，然后导航到对话框屏幕（无论您想打开什么）

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

你不必创建对话框，你可以创建活动

【讨论】：

【解决方案3】：

将此代码添加到您的课程中

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

并在您的 onTap/onPressed 函数中调用 _showDialog()，只需将您的 AlertDialogs 背景色设置为透明并将其 contentpadding 设置为 0，您的代码应该是好的

【讨论】：