skip to Main Content

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

Answers


  1. Chosen as 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(),
      ),
    )
    

  2.  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(),
          ),
        ),
      ),
    );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search