I have taken a floating action button to show showModelbottomsheet,
but when I click on textfield for entry, keyboard coming on top of the bottom sheet,
how to scroll this bottom sheet above keyboard layout,
here is my code
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Sqflite with Provider'),),
body: getbody(),
floatingActionButton: FloatingActionButton(
onPressed: (){
showModalBottomSheet<void>(context: context, builder: (context){
return EntryForm();
});
},
child: Icon(Icons.add),
),
);
}
Widget getbody() {
return Text('Welcome to Provider');
}
}
and entryform widget
class _EntryFormState extends State<EntryForm> {
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
TextField(),
TextField(),
ElevatedButton(onPressed: (){}, child: Text('Save Record'))
],
),
);
}
}
CodePudding user response:
First set isScrollControlled
to true
like this:
showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
builder: (context){
return EntryForm();
}
);
then in EntryForm
add padding to SingleChildScrollView
:
SingleChildScrollView(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: ...
),