0

I have a view that contains a Column of Widgets. One of the Widgets contains a button that will open a bottom sheet. Within that bottom sheet, a user can tap a TextField and open the keyboard which will keep the bottom sheet above the keyboard.

When I do this as-is, I get Bottom Overflowed by XXX Pixels. The yellow box is behind my bottom sheet, right above the keyboard.

I have tried wrapping the Column in a SingleChildScrollView but when I do that all of the Widgets in my Column disappear.

I have also tried wrapping in a Scaffold & that did not work either:

example:

Scaffold(
  resizeToAvoidBottomInset: false, // tried setting to true as well
  body: Column...

Any suggestions?

Here's some of the base setup:

@override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
         _buildWidget1(),
         _buildWidget2(),
         _buildWidget3(),
         // When wrapped in a SingleChildScrollView
         // this seems to be making everything in the column
         // disappear...
         Expanded(child: Container()),
         etc.
      ],
    );
}


void _bottomSheetButtonPressed(context) {
    showModalBottomSheet(
      barrierColor: Colors.transparent,
      backgroundColor: Colors.transparent,
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return Padding(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(24),
                topRight: const Radius.circular(24),
              ),
            ),
            child: _showBottomSheetItemsWidget(),
          ),
        );
      },
    );
  }

The colors are transparent just so I can see what is happening behind the bottom sheet.

So, with this I am getting the Bottom Overflowed issue... and that is what I am trying to resolve.

Update: After further debugging, I do see what I believe is making all my Widgets disappear. I have an Expanded Widget that has a child of Container to separate some of my Widgets.

Luke Irvin
  • 1,179
  • 1
  • 20
  • 39
  • try isScrollControlled: false,. If not working then wrap your column with Container and give it height and width. if still it not working then wrap container with singlechild controller. – Shailendra Rajput Oct 19 '21 at 18:50
  • @ShailandraRajput isScrollControlled will need to be true so the sheet stays above the keyboard. I tried the other suggestions but still no luck. I also added a little more context in a scenario where I see all my widgets disappear. – Luke Irvin Oct 19 '21 at 19:17

1 Answers1

0

The correct solution is indeed to wrap what you see into a scrollable widget such as SingleChildScrollView. But this can happen if and only if the contents of your scrollable widgets aren't infinite.

Indeed, the reason your widget simply "disappear" is an internal widget that forces infinite height (in this case, the Expanded widget), while the parent do not force a maximum height (the SingleChildScrollView), since it expects any number of widgets to be displayed. This causes an intrinsic / conceptual error (if you think about it) and therefore the framework throws an error.

It kinda depends on what you want to achieve, but as a rule of thumb in cases like this chances are that you want to wrap your scrollable widgets inside a SizedBox / Container / ConstrainedBox, so that you specify a height and therefore you force it to be not infinite.

In that case, your child widgets can use the Expanded logic with no issues. Let me know if that helps.

venir
  • 1,809
  • 7
  • 19
  • The user is going through a feed, they can stop on an item in the feed which will have various things they can interact with. One of which will display a custom bottom sheet & they can tap into a text field. This bottom sheet should slide up with the keyboard, be able to slide back down & disappear when the user is finished. I'm use to native iOS development so this flutter error is new to me. I'm stumped on the height portion because a lot of what I'm doing is more dynamic adjustments as some widgets on the screen will change height based on the amount of content in them. – Luke Irvin Oct 19 '21 at 23:40
  • If I do something such as --> return SingleChildScrollView( child: IntrinsicHeight( child: Column( Then at this point I can see all my widgets, but now they are all squished & there is extra padding above & below. – Luke Irvin Oct 20 '21 at 02:55