Home > Software design >  how to showbottomsheet above keyboard while typing in flutter
how to showbottomsheet above keyboard while typing in flutter

Time:10-17

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: ...
),
  • Related