Flutter bottom modal sheet with TextField

53 Views Asked by At

I have modal bottom sheet, with the following simplified structure:

showModalBottomSheet(
  isScrollControlled: true,
  ...
  builder: (BuildContext context) {
   return Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: StatefulBuilder(
          builder: (BuildContext context, StateSetter setModalState){
            return SizedBox(
                height: MediaQuery.of(context).size.height,
                child: Stack(
                  children: [
                    getBackgroundImage(),
                    SingleChildScrollView(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          // ... ELEMENTS (text, TEXTFIELD, button, ...)
                        ],
                      )
                    ),
                  ],
                )
           );
         }
      ),
    );
  }
);

The problem is following: When I open this in smaller device, the bottom modal sheet is displayed well, it is scrollable. But when I click on TextField that is inside, and the keyboard opens, then although everything seems to be working, following issue is displayed in the log:

A RenderFlex overflowed by 144 pixels on the bottom.

Can somebody help with this? I checked various sources and forums, but I did not find any relevant answer. Thank you.

1

There are 1 best solutions below

0
Tom11 On

I have solved this by adding this to my Scaffold:

resizeToAvoidBottomInset: false,