如何在Flutter中实现模态底部表单的模糊背景？

Question

我正在使用Modal Bottom Sheet并希望提供模糊的背景，但是参数barriercolor的类型是Color，所以我不能使用BackdropFilter()。 有人知道如何为Modal Bottom Sheet实现模糊的背景吗？

- zmxngh2

Answer 1

更新：
抱歉我的粗心大意。
您可以设置 backgroundColor:Colors.transparent 和 expand:true，并在 builder 中创建自己的 barrier。

它可能会像这样：

showMaterialModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      expand: true,
      builder: (context) => BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(
              height: 200,
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: Text('Im child'),
            )
          ],
        ),
      ),
    );

- iwpz

---

谢谢您的快速回复，但是与我想要的有很大不同。我想让障碍部分模糊，而不是表格部分。 - zmxngh2

你可以创建一个“全屏底部工作表”，并使整个背景成为障碍。 - iwpz

我尝试过了，但问题是我无法通过点击屏障部分来关闭底部工作表，因为屏障部分就是“底部工作表”。 - zmxngh2

将整个小部件用GestureDetector包装起来，然后添加onTap:(){Navigator.of(context).pop();}。这意味着，在您想要“轻击以关闭”的位置，需要包含一个已经包装了GestureDetector的小部件。 - iwpz

谢谢。我不知道“Navigator.of(context).pop()”可以关闭底部表格！ - zmxngh2

Navigator.of(context).pop() 可以关闭对话框。 - iwpz