Flutter中DraggableScrollableSheet顶部圆角与DropdownButton冲突问题

方案一：全局canvasColor为白色时实现底部Sheet圆角 #

不用修改全局主题的canvasColor，直接在showModalBottomSheet里设置backgroundColor: Colors.transparent，让底部弹窗的默认背景透明，再通过内部的Container设置圆角和背景色即可：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  // 关键：将弹窗默认背景设为透明
  backgroundColor: Colors.transparent,
  builder: (context) {
    return DraggableScrollableSheet(
      expand: false,
      initialChildSize: 0.4,
      minChildSize: 0.4,
      builder: (context, scrollController) {
        return Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.background,
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(20.0),
              topRight: Radius.circular(20.0),
            ),
          ),
          // 此处添加Sheet的具体内容
          child: ListView(
            controller: scrollController,
            children: const [
              ListTile(title: Text('Sheet选项1')),
              ListTile(title: Text('Sheet选项2')),
            ],
          ),
        );
      },
    );
  },
);

这种方式既保留全局canvasColor为白色，又能实现Sheet的圆角效果，不会影响DropdownButton的弹窗背景。

方案二：全局设置DropdownButton弹窗背景色，恢复canvasColor为透明 #

如果想继续用canvasColor透明的方案实现Sheet圆角，同时修复DropdownButton的透明问题，可以在全局主题中单独配置DropdownButton的弹窗样式：

ThemeData.light().copyWith(
  // 恢复canvasColor为透明，保证Sheet圆角正常显示
  canvasColor: Colors.transparent,
  // 单独配置DropdownButton的弹窗样式
  dropdownTheme: DropdownThemeData(
    menuStyle: MenuStyle(
      // 设置Dropdown弹窗的白色背景
      backgroundColor: MaterialStateProperty.all(Colors.white),
      // 可选：给Dropdown弹窗添加圆角
      shape: MaterialStateProperty.all(
        RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.0),
        ),
      ),
    ),
  ),
  // 其他主题配置项...
);

这样DropdownButton的弹窗会使用白色背景，不会出现UI混乱，同时DraggableScrollableSheet的圆角效果也能正常保留。

内容的提问来源于stack exchange，提问作者ololo