Flutter 对话框背景图片

问题描述

我正在尝试一些具有异国情调的 Flutter 对话框的实验。至于现在，我想要一个以资产图片为背景的 SimpleDialog（或 AlertDialog）。不幸的是，这似乎不可能，因为只有颜色可用作背景。我怎样才能规避这个问题并用图片填充我的对话框？

我已经看过 this answer 但这是一个对话框中的图像。它总是有边距

解决方法

你想要做的应该足够简单，你只需要确保将 contentPadding 的 AlertDialog 属性设置为零，并使用堆栈。

我还建议在您的图像周围使用定位，这样它就不会决定对话框的大小，否则对话框可能会变得尽可能大以适应屏幕。这样做可以确保对话框的大小适合另一个孩子（您的实际内容）。

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