Soft Keyboard covers TextInput on the SlidingUpPanel flutter

Question

This is the package am using , when I use a TextInput within the panelBuilder it has both the ListView and the InputTextField, however when I start typing the Soft keyboard covers the InputText field.

I also tried to add this line :

resizeToAvoidBottomInset: false, in the Scaffold plus this one in the Manfiest file

<item name="android:windowFullscreen">true</item> .

But no luck.

Below are the screenshots :

image one

[image two

Solution

Wrap the contents of your panelBuilder result in a Scaffold and don't change resizeToAvoidBottomInset. By default the resize is true which will move the content up to avoid being hidden by keyboard when it appears. A false setting prevents the resize from happening.

The below example is from the slide_up_panel package example, with the panelBuilder argument result wrapped in a Scaffold. (I'm not suggesting you wrap _panel like I've done below, it's just easier to show the example working this way. Likely better to use Scaffold within the _panel function itself.)

  @override
  Widget build(BuildContext context){
    _panelHeightOpen = MediaQuery.of(context).size.height * .80;

    return Material(
      child: Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[

          SlidingUpPanel(
            maxHeight: _panelHeightOpen,
            minHeight: _panelHeightClosed,
            parallaxEnabled: true,
            parallaxOffset: .5,
            body: _body(),
            // WRAP panel contents in Scaffold
            panelBuilder: (sc) => Scaffold(body: _panel(sc)),
            // ↑↑↑↑↑↑↑↑
            borderRadius: BorderRadius.only(topLeft: Radius.circular(18.0), topRight: Radius.circular(18.0)),
            onPanelSlide: (double pos) => setState((){
              _fabHeight = pos * (_panelHeightOpen - _panelHeightClosed) + _initFabHeight;
            }),
          ),

To test yourself add a TextFormField to the bottom of the Widget _panel(ScrollController sc) method (around line 242)

            SizedBox(height: 24,),
            // ↓ Added for testing
            TextFormField(
              initialValue: 'type here',
              onSaved: (txt) => null,
            )

Then run the example, scroll the panel upwards and tap the TextField to have the keyboard slide up.

Comments

[Lutaaya Huzaifah Idris]

Thanks a bunch @Baker, you saved my life

[theboshy]

I have a similar problem with this but in the body of the sliding_up_panel, no matter that you wrapped your underneath widget with a Scaffold it still does not work and the keyboard hides the content, any idea?