这是所需的modalBottomSheet函数。
void _modalBottomSheetMenu(){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: 350.0,
color: Colors.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
}
);
}
此工作正常工作中最重要的部分是,在MaterialApp中将canvasColor设置为透明,如下所示。
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Tasks',
theme: new ThemeData(
primarySwatch: Colors.teal,
canvasColor: Colors.transparent,
),
home: new TasksHomePage(),
);
}
我已经测试了代码并且它工作得很好,因为我还在克隆Google Tasks应用程序,它将在我的github中开源。
你现在可以使用现在支持添加showModalBottomSheet
和ShapeBorder
的默认backgroundColor
方法来完成它!
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
backgroundColor: Colors.white,
...
);
而不是像其他答案所建议的那样覆盖应用程序的整个主题(这会导致我的应用程序的各个部分出现问题),我决定看看showModalBottomSheet
的实现并自己找到问题。事实证明,所需要的只是在包含Theme
技巧的canvasColor: Colors.transparent
小部件中包含模态的主要代码。我还更容易定制半径以及模态本身的颜色。
您可以使用pub上的package或包含相同代码的gist。不要忘记导入正确的包/文件。
showRoundedModalBottomSheet(
context: context,
radius: 20.0, // This is the default
color: Colors.white, // Also default
builder: (context) => ???,
);
您现在可以简单地设置shape
参数。例:
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
context: context,
builder: (context) => MyBottomSheet(),
);
把所有答案放在一起之前,我可以为此做出最好的结果(在我看来)。
showModalBottomSheet(
context: context,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
),
builder: (context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.email),
title: Text('Send email'),
onTap: () {
print('Send email');
},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Call phone'),
onTap: () {
print('Call phone');
},
),
],
);
});