showModalBottomSheet bottom overflow - flutter

Question

i got overflow when textformfield opens in showModalBottomSheet, i tried to wrap my first column widget with SingleChildScrollView but it gives me a hidden modalBottomSheet same as ListView i tried to wrap it but all the data disappeared (empty white sheet)
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
context: context,
builder: (context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 22,
backgroundImage: NetworkImage(
'${SocialCubit.get(context).userModel!.image}'),
),
SizedBox(
width: 15,
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
color: Colors.grey[350],
),
child: Padding(
padding:
const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'${SocialCubit.get(context).userModel!.name}',
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(
width: 7,
),
Text(
'2 minutes ago',
style: TextStyle(
fontSize: 11),
),
],
),
SizedBox(
height: 5,
),
Text(
'whats up broo i need to ask you something'),
],
),
),
),
],
),
if (model.postImage != '')
Padding(
padding: const EdgeInsetsDirectional.only(top: 15,start: 67),
child: Container(
height: 140,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
image: DecorationImage(
image: NetworkImage('${model.postImage}'),
fit: BoxFit.cover,
),
)),
),
],
),
),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context)
.viewInsets
.bottom),
child: Row(
children: [
CircleAvatar(
radius: 18,
backgroundImage: NetworkImage(
'${SocialCubit.get(context).userModel!.image}'),
),
SizedBox(
width: 15,
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Write your comment ...'
),
),
),
),
),
IconButton(
onPressed: () {},
icon: Icon(IconBroken.Send)),
],
),
),
],
),
);
});
my problem (overflow)
i tried to wrap the column with ListView but i got no data as shown
this one with SingleChildScrollView,

Answer 1

If you like to use SingleChildScrollView, remove Expanded from Column widget, You can think like, SingleChildScrollVew provides infinite height and Exapanded widget is trying to get infinite and this cause issue.
You can follow this way
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
context: context,
builder: (context) {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Column(
children: [
Row(
children: [
// CircleAvatar(
// radius: 22,
// backgroundImage: NetworkImage(
// '${SocialCubit.get(context).userModel!.image}'),
// ),
SizedBox(
width: 15,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey[350],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
// Text(
// '${SocialCubit.get(context).userModel!.name}',
// style: TextStyle(
// fontSize: 15,
// fontWeight:
// FontWeight
// .bold),
// ),
SizedBox(
width: 7,
),
Text(
'2 minutes ago',
style: TextStyle(fontSize: 11),
),
],
),
SizedBox(
height: 5,
),
Text(
'whats up broo i need to ask you something'),
],
),
),
),
],
),
],
),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Row(
children: [
SizedBox(
width: 15,
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Write your comment ...'),
),
),
),
),
],
),
),
],
),
),
);
});
Also there is DraggableScrollableSheet you may like it.

Answer 2

you can directly install pub library to use modal
https://pub.dev/packages/modal_bottom_sheet/install