Flutter中更改BottomSheet的背景颜色为透明

当我使用ShowModalBottomSheet方法弹出一个底页时,如何使背景色透明。
因为我需要圆角,所以我知道在MaterialApp中更改canvasColor可以做到这一点,但是其他小部件也可以更改颜色。

我试着把它嵌入主题,但没用

showModalBottomSheet < Null > (context: context, builder: (BuildContext context) {
    return Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.orange),
        child: Material(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
            child: Container(
                color: Colors.purple,
            ),
        ),
    );
});
只需将其添加到顶级主题数据中即可。这可以解决你的问题
bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.black54)

或者我们在最顶级的

MaterialApp
的theme里设置

canvasColor
为我们想要的颜色,也可以透明

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      theme: ThemeData(canvasColor: Colors.transparent),
      home: new HomePage(),
    );
  }
}
然后我们直接写一个对话框

void selectCurrencyDialog<T>(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (_) {
      return Container(
        color: Colors.purple,
        margin: EdgeInsets.symmetric(horizontal: 20.0),
      );
    },
  );
}
点击查看原图

我们的背景就是透明的了

本博客所有文章如无特别注明均为原创。作者:flutter教程网复制或转载请以超链接形式注明转自 Flutter教程网
原文地址《Flutter中更改BottomSheet的背景颜色为透明
分享到:更多

相关推荐


Flutter教程网 官方QQ群:874592746

扫描下面二维码 加入Flutter教程网微信群:


发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)