Question

我想用Flutter中的容器制作一个showModalBottomSheet。我希望此容器的顶部边界变圆，但是，当我尝试此操作时，拐角处有一些小的无色空间。如何删除它们？

这是我使用的代码：

class OverlayWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: const Text('showModalBottomSheet'),
      onPressed: () {
        showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (BuildContext context) {
            return Container(
              height: MediaQuery.of(context).size.height * 0.80,
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30.0),
                  topRight: Radius.circular(30.0),
                ),
              ),
              child: Center(...),
            );
          },
        );
      },
    );
  }
}

结果小部件如下：

我要删除顶部边框中的空白。预先谢谢你

Answer 1

ThemeData具有bottomSheetTheme参数，您可以按如下所示进行覆盖：

MaterialApp(
        ...
        theme: ThemeData(
          ...
          bottomSheetTheme:
              BottomSheetThemeData(backgroundColor: Colors.transparent),
        ),
        ...
      ),

这将为transparent赋予bottomSheet颜色

Answer 2

审阅文档时，我意识到showModalBottomSheet函数具有名为“ backgroundColor”的属性?‍♀️

只需添加：

backgroundColor: Colors.transparent,

到showModalBottomSheet即可。无论如何，谢谢您的帮助！

showModalBottomSheet和边框半径

2 个答案: