Keyboard hiding my bottom sheet text field in flutter - flutter

Question

Keyboard hiding my bottom sheet text field in flutter.
I opened a bottom sheet for textfield but when starting to enter some text, keyboard opens and hides textfield bottom sheet and 'save' buttom too, so not able to see what i'm typing in textfield.
see below image
I want this result:
Code:
Opening bottom sheet on click of '+ Add' button.
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Form(
key: formKey,
child: Container(
padding: const EdgeInsets.all(8),
height: MediaQuery.of(context).size.height/4.5,
// color: Colors.red,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(10),
child: TextFormField(
controller: _noteTextController,
maxLines: 2,
minLines: 2,
decoration: InputDecoration(
hintText: "Add Note",
border: InputBorder.none
),
validator: (value){
if(value.trim().isEmpty){
return 'Notes can\'t be empty';
} else {
return null;
}
},
),
),
Container(
padding: const EdgeInsets.all(8),
width: MediaQuery.of(context).size.width,
// color: Colors.black,
alignment: Alignment.topRight,
child: InkWell(
onTap: (){
if (formKey.currentState.validate()) {
formKey.currentState.save();
DateTime noteDate = DateTime.now();
setState(() {
notes.add(
NoteModel(
date: noteDate,
noteText: _noteTextController.text
)
);
});
Navigator.of(context).pop();
_noteTextController.clear();
}
},
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8)
),
width: MediaQuery.of(context).size.width/5,
height: MediaQuery.of(context).size.height/25 ,
child: Text("Save", style:TextStyle(
color: Colors.white,
fontSize: 19
)),
),
),
)
],
),
),
);
},
);

Answer 1

Here is a simple workaround that would suite your use case:
Using the minimal code from your example, try to wrap the Widget with AnimatedPadding and wraps it inside SingleChildScrollView to push the BottomSheet from bottom and thus preventing keyboard from overlapping.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: TextButton.icon(
icon: Icon(
Icons.add,
color: Colors.blue,
),
label: Text(
'Add',
style: TextStyle(
color: Colors.blue,
),
),
onPressed: () {
showModalBottomSheet<void>(
// isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return Form(
key: key,
child: SingleChildScrollView(
child: AnimatedPadding(
padding: MediaQuery.of(context).viewInsets,
duration: const Duration(milliseconds: 100),
curve: Curves.decelerate,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(10),
child: TextFormField(
maxLines: 2,
minLines: 2,
decoration: InputDecoration(
hintText: "Add Note", border: InputBorder.none),
),
),
],
),
),
),
);
},
);
},
),
);
}
}