我正在尝试使用ModalBottomSheet
。如何为模式表达到设备屏幕尺寸的90%高度。我做了mediaquery,但仍然不能给我超过一半的屏幕尺寸。我该如何解决?
代码如下:
class _TestFileState extends State<TestFile> {
modalSheet() {
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.max,
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');
},
),
],
);
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Center(child: Text('Testing Modal Sheet')),
),
body: Center(
child: InkWell(
onTap: () {
modalSheet();
},
child: Container(
color: Colors.indigo,
height: 40,
width: 100,
child: Center(
child: Text(
'Click Me',
style: TextStyle(color: Colors.white),
),
)),
),
),
),
);
}
}
以下是输出:
答案 0 :(得分:3)
您必须传递isScrollControlled:true并使用如下所示的mediaquery
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height * 0.5,
color: Colors.red,
//height: MediaQuery.of(context).size.height,
);
});
答案 1 :(得分:1)
我记得那是对Flutter模态底部工作表的本地实现的限制。
您可以使用软件包modal_bottom_sheet来实现。
安装:
.footer3 ul, .footer li{
list-style-type: none;
display: block;
}
最小的例子:
dependencies:
modal_bottom_sheet: ^0.2.2