使用键盘时，在flutter中的modalbottomsheet中出现renderflex溢出错误

Question

我在模式底部表单中使用了一个文本字段。当我打开键盘进行键入时，它会显示renderflex溢出的错误。我使用了singlechildscrollview，并且isScrollControlled为true，仍然出现错误。有什么解决方案吗？

return showModalBottomSheet(
context: context,
builder: (context) => Builder(
builder: (context) => SingleChildScrollView(
child: Container(
height: 350,
width: MediaQuery.of(context).size.width*0.9,
color: cardColor2,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 10),
child: Column(
children: [
ValueListenableBuilder(
valueListenable: _image,
builder: (BuildContext context, File f, Widget? child) {
return SizedBox(
height: f.path!='' ? 180 : 280,
width: MediaQuery.of(context).size.width*0.9,
child: TextField(
decoration: InputDecoration(
hintText: 'Type your question here',
border: InputBorder.none,
),
),
);
},
),
ValueListenableBuilder(
valueListenable: _image,
builder: (BuildContext context, File f, Widget? child) {
return f.path!='' ? SizedBox(
width: 150.0,
height: 100.0,
child: Image.file(
_image.value,
fit: BoxFit.fill,
),
) : Container();
},
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
height: 1,
color: tertiaryTextColor2,
width: double.infinity,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(top: 13.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: () {
_onAlertPress(context);
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
'Add an image',
style: TextStyle(
color: backgroundColor2,
fontSize: 14,
),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
),
SizedBox(
width: 10,
),
InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
'Post',
style: TextStyle(
color: backgroundColor2,
fontSize: 14,
),
),
decoration: BoxDecoration(
color: brandYellow,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
),
isScrollControlled: true,
);

Answer 1

尝试删除Container的高度，因为该高度不足以容纳其他子容器或sizedbox

return showModalBottomSheet(
context: context,
builder: (context) => Builder(
builder: (context) => SingleChildScrollView(
child: Container(
height: 350, ---------------> remove this
width: MediaQuery.of(context).size.width*0.9,