Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

how to showbottomsheet above keyboard while typing in flutter

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,

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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'))
        ],
      ),
    );
  }
}

>Solution :

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: ...
),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading