在 flutter 中打开对话框时如何更改表面色调颜色

Question

当我在 flutter 中打开一个对话框时，我希望背景变成浅蓝色且不透明，如下图所示：

我已经将我的 Dialog 小部件的 surfaceTintColor 设置为我想要的颜色，但它没有被应用。相反，我看到了对话框的默认高度。这是我的代码：

class PickImageDialog extends StatelessWidget {
  const PickImageDialog({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 16, 10, 22),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                IconButton(
                  onPressed: () {
                    context.router.pop();
                  },
                  icon: Icon(Icons.clear),
                ),
                Expanded(
                  child: Text(
                    AppStrings.pickImage,
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 26,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  height: 60,
                  width: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      border: Border.all(
                          width: 2, color: Theme.of(context).primaryColor),
                      color: Theme.of(context).colorScheme.surfaceTint),
                  child: SvgPicture.asset(
                    AppVectors.camera,
                    color: Theme.of(context).primaryColor,
                    height: 28,
                  ),
                ), Container(
                  height: 60,
                  width: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(16)),
                      border: Border.all(
                          width: 2, color: Theme.of(context).primaryColor),
                      color: Theme.of(context).colorScheme.surfaceTint),
                  child: SvgPicture.asset(
                    AppVectors.gallery,
                    color: Theme.of(context).primaryColor,
                    height: 28,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

如果你想显示一个对话框，你可以使用 barrierColor 属性，像这样：

InkWell(
  child: Text('click'),
  onTap: () {
    showDialog(
      context: context,
      builder: (_) => PickImageDialog(),
      barrierColor: Colors.red.withOpacity(0.4), // <--- add this
    );
  },
),

如果你想模糊背景，你可以在你的 PickImageDialog 类中用 BackdropFilter 包装你的 Dialog ：

BackdropFilter( // <--- add this
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),// <--- add this
  child: Dialog(
    shape: RoundedRectangleBorder(
    ...
)

Answer 2

在 Flutter 中打开对话框时，您可以使用 ThemeData 类的 Color 属性更改表面色调。

以下是如何实现此目标的示例：

class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.transparent,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        padding: EdgeInsets.all(16),
        child: Text("Hello, Dialog!"),
      ),
    );
  }
}

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        dialogBackgroundColor: Colors.blue[200],
      ),
      child: MyDialog(),
    );
  },
);

在示例中，一个 Dialog 小部件包装在一个 Theme 小部件中，并且自定义 ThemeData 以将 dialogBackgroundColor 设置为 Colors.blue[200]。这会在显示对话框时更改表面色调颜色。

Answer 3

Salaam，为了让背景变得模糊，首先将你的PickImageDialog 编辑为：

BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Dialog(
        // surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 16, 10, 22),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  IconButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    icon: Icon(Icons.clear),
                  ),
                  Expanded(
                    child: Text(
                      'AppStrings.pickImage',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 26,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    height: 60,
                    width: 60,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(16)),
                        border: Border.all(
                            width: 2, color: Theme.of(context).primaryColor),
                        color: Theme.of(context).colorScheme.surfaceTint),
                    child: Container(color: Colors.red,),
                  ), Container(
                    height: 60,
                    width: 60,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(16)),
                        border: Border.all(
                            width: 2, color: Theme.of(context).primaryColor),
                        color: Theme.of(context).colorScheme.surfaceTint),
                    child: Container(color: Colors.amber,),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );

顺便说一句，如果你之前没有实现它，我没有看到任何代码来显示你的对话框，这是你需要的代码：

/// put it in your CTA(call to action) of showing dialog
                        showDialog(
                        context: context,
                        builder: (_) => PickImageDialog(),
                      );

理工学院毕业后编码愉快！