Search code examples
flutterdarttextinput

Soft Keyboard covers TextInput on the SlidingUpPanel flutter


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.

    panel pushed up by keyboard