Flutter modal bottom sheet - flutter

Question

I was experimenting with flutter modal bottom sheet. I have used a texfield in modal bottom sheet. The textfield works but somehow I am unable to see in the screen what I am currently typing.What is the way to solve it? I have included the code as well. Thanks for your response.
Here is the code:
modalSheet() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
),
builder: (context) {
return Container(
height: MediaQuery.of(context).size.height * 0.9,
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.7,
child: Center(child: Text('Testing modal sheet'))),
Padding(
padding: EdgeInsets.only(
left: 16.0, right: 16.0, top: 8.0, bottom: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.08,
width: MediaQuery.of(context).size.width * 0.75,
decoration: BoxDecoration(
color: Hexcolor('#E9F1FE'),
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding:
const EdgeInsets.only(left: 16.0, right: 16.0),
child: Center(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
suffixIcon: Icon(Icons.insert_emoticon),
hintText: 'Write a comment...',
hintStyle: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
color: Colors.grey),
),
),
),
),
),
InkWell(
onTap: () {
print('Pressed');
},
child: CircleAvatar(
backgroundColor: Hexcolor('#0565ac'),
maxRadius: 20,
child: Icon(
Icons.arrow_upward,
color: Colors.white,
),
),
)
],
),
)
],
),
);
});
}
Here are the images for clarity: