Flutter bottom sheet height changed while keyboard is shown

96 Views Asked by At

i am developing a bottom sheet which contains a TextField, i noticed that every time the keyboard is shown, the bottom sheet's height reduced, then recovered when keyboard is hidden, this is my demo code

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (_) {
                return const SafeArea(
                  child: SizedBox(
                    height: 500,
                    child: TextField(),
                  ),
                );
              }
            );
          },
          child: const Text("show bottom sheet"),
        ),
      )
    );
  }
}

perhaps is the SafeArea became hidden when keyboard is shown? how can i keep the bottom sheet's hight the same while keyboard is shown

2

There are 2 best solutions below

0
Zhentao On BEST ANSWER

i just noticed that there is a parameter maintainBottomViewPadding in Safe Area, when i set it true, bottom sheet's height will not change while keyboard is shown

SafeArea(
  maintainBottomViewPadding: true,
  child: SizedBox(
    height: 500,
    child: TextField(),
  ),
)
1
Preetham fernandes On
 Center(
    child: ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          isScrollControlled: true,
          context: context,
          builder: (_) {
            return const NewWidget();
          },
        );
      },
      child: const Text("Show Bottom Sheet"),
    ),
  ),

final MediaQueryData mediaQueryData = MediaQuery.of(context);

return Padding(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom,
  ),
  child: const SingleChildScrollView(
    child: SizedBox(
      height: 500,
      child: SizedBox(
        height: 40,
        child: TextField(),
      ),
    ),
  ),
);