How to move TextField up when keyboard appears? - flutter

Question

Textfield inside bottom sheet gets hidden when keyboard pops up to type inside textfield in flutter. How to move TextField up when keyboard appears?
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(
Icons.west,
size: 30,
color: Colors.black,
),
onPressed: () {
Navigator.pop(context);
},
),
actions: [
Icon(
Icons.filter,
color: Colors.black,
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
VideoCardWidget(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
onPressed: () {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (context) {
return Container(
margin: EdgeInsets.zero,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
// gradient: LinearGradient(
// colors: [Color(0xFF6589AB), Colors.white],
// begin: Alignment.topCenter,
// end: Alignment.bottomCenter,
// ),
color: Colors.white,
),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
child: Card(
elevation: 10,
margin: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
fillColor: Color(0xFFf5f5f5),
filled: true,
hintText: 'Ask your Doubts',
hintStyle: TextStyle(
color: Colors.grey[600],
),
),
keyboardType: TextInputType.multiline,
maxLines: 15,
),
),
),
),
SizedBox(
height: 10,
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 20),
child: TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 40.0),
child: Text(
'Send',
style: TextStyle(color: Colors.white),
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(12),
),
),
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
),
),
),
],
),
),
);
});
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
child: Text(
'Ask Your Doubt',
style: TextStyle(
color: Colors.white,
),
),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
// onPressed: _openQuizBottomSheet,
onPressed: () {},
child: Text(
'Quiz',
style: TextStyle(
color: Colors.white,
),
),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) {
// return KeyNoteScreen();
// },
// ),
// );
},
child: Text(
'Key Notes',
style: TextStyle(
color: Colors.white,
),
),
),
],
),
],
),
);

Answer 1

in your case you need to set isScrollControlled in your showModalBottomSheet as follows:
showModalBottomSheet(
context: context,
isScrollControlled: true,
but In general, you can have to approaches:
use resizeToAvoidBottomPadding to avoid the overflow:
return Scaffold(
resizeToAvoidBottomPadding: false, // this avoids the overflow error
// in flutter 2.0 or upper versions, use resizeToAvoidBottomInset instead
appBar: AppBar(
title: Text('TextField Animation Demo'),
),
or wrap your whole widget by SingleChildScrollView. However, as you returning column, first you need to wrap it by suitable container size. for example set height of this container based on the screen size.

Answer 2

You need Wrap Column with SingleChildScrollView