I have made an AlertBox for my showDialog in Flutter, on which I have a text field. Whenever I open my keyboard to type, pixels overflow. What should I do to avoid this? I have made resizeToAvoidBottomInset: false,
in my Scaffold, but the error is caused by the alert box, which doesn't have a scaffold. Can someone tell me what should I do?
Here is my code -
InkWell(
onTap: () {
askDoubtDialog(context);
},
askDoubtDialog(context) {
return showDialog(
context: context,
builder: (context) => AlertDialog(
//title: Text('Alert'),
insetPadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero,
clipBehavior: Clip.antiAliasWithSaveLayer,
content: Builder(
builder: (context) => Container(
height: 330,
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: [
SizedBox(
height: 160,
width: MediaQuery.of(context).size.width*0.9,
child: TextField(
decoration: InputDecoration(
hintText: 'Type your question here',
border: InputBorder.none,
),
),
),
SizedBox(
width: 150.0,
height: 100.0,
child: Image.file(
_image,
fit: BoxFit.fill,
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Container(
height: 1,
color: tertiaryTextColor2,
width: double.infinity,
),
),
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)),
),
),
),
],
),
),
],
),
),
],
),
),
),
)
);
}
I tried to wrap the container (of height 330) inside SingleChildScrollView
, but it didn't worked.
Solution 1: fsbelinda
Wrap the Scaffold
body with SingleChildScrollView
.