Body size does not respect Software Keyboard.

[allco]

Describe the bug Body is not being resized when Software Keyboard appears. Which leads to some negative affects such as If there is a TextField which is close to the bottom edge of the body and Software Keyboard appears then the TextField is being covered by the keyboard.

To Reproduce Tap a TextField in the app.

Expected behavior The body is resized accordingly to available space and tapped TextField is not being obscured.

Screenshots

Original:

Wish SlidingUpPanel:

Smartphone (please complete the following information):

• Device: Nexus 5X
• OS: Android 5.0.2
• Flutter Version: v1.17.3
• sliding_up_panel Version: 1.0.2

Sample main.dart Please provide a sample main.dart that reproduces this issue. The code provided here should be able to be run on its own without any external dependencies.

Original

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(32),
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.lightBlueAccent,
                    height: 400,
                    child: Center(
                      child: Text(
                        'Huge logo',
                        textAlign: TextAlign.center,
                        style: Theme.of(context).textTheme.headline2,
                      ),
                    ),
                  ),
                  SizedBox(height: 32),
                  Container(
                    padding: EdgeInsets.all(8),
                    color: Colors.black12,
                    child: TextField(),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

With SlidingUpPanel

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: SlidingUpPanel(
          panel: Container(
            color: Colors.amber,
            height: 200,
          ),
          minHeight: 32,
          maxHeight: 200,
          slideDirection: SlideDirection.DOWN,
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(32),
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.lightBlueAccent,
                    height: 400,
                    child: Center(
                      child: Text(
                        'Huge logo',
                        textAlign: TextAlign.center,
                        style: Theme.of(context).textTheme.headline2,
                      ),
                    ),
                  ),
                  SizedBox(height: 32),
                  Container(
                    padding: EdgeInsets.all(8),
                    color: Colors.black12,
                    child: TextField(),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

[mhrst]

To produce the parallax effect, line 260 in panel.dart wraps the body in a Positioned widget.

//make the back widget take up the entire back side
widget.body != null ? AnimatedBuilder(
  animation: _ac,
  builder: (context, child){
    return Positioned(
      top: widget.parallaxEnabled ? _getParallax() : 0.0,
      child: child,
    );
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: widget.body,
  ),
) : Container(),

Removing the Positioned widget allows the panel body to properly resize with the soft keyboard. There would need to be another solution for the parallax effect though.

[mhrst]

Seemingly related issues:

147

138

[chounry]

This package handle that. Sliding panel

[furkankurt]

To produce the parallax effect, line 260 in panel.dart wraps the body in a Positioned widget.

//make the back widget take up the entire back side
widget.body != null ? AnimatedBuilder(
  animation: _ac,
  builder: (context, child){
    return Positioned(
      top: widget.parallaxEnabled ? _getParallax() : 0.0,
      child: child,
    );
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: widget.body,
  ),
) : Container(),

Removing the Positioned widget allows the panel body to properly resize with the soft keyboard. There would need to be another solution for the parallax effect though.

It's not worked.

[mzafer]

Same problem here, any work around for this ?

[birakdar]

Describe the bug Body is not being resized when Software Keyboard appears. Which leads to some negative affects such as If there is a TextField which is close to the bottom edge of the body and Software Keyboard appears then the TextField is being covered by the keyboard.

To Reproduce Tap a TextField in the app.

Expected behavior The body is resized accordingly to available space and tapped TextField is not being obscured.

Screenshots

Original:

Wish SlidingUpPanel:

Smartphone (please complete the following information):

• Device: Nexus 5X
• OS: Android 5.0.2
• Flutter Version: v1.17.3
• sliding_up_panel Version: 1.0.2

Sample main.dart Please provide a sample main.dart that reproduces this issue. The code provided here should be able to be run on its own without any external dependencies.

Original

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(32),
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.lightBlueAccent,
                    height: 400,
                    child: Center(
                      child: Text(
                        'Huge logo',
                        textAlign: TextAlign.center,
                        style: Theme.of(context).textTheme.headline2,
                      ),
                    ),
                  ),
                  SizedBox(height: 32),
                  Container(
                    padding: EdgeInsets.all(8),
                    color: Colors.black12,
                    child: TextField(),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

With SlidingUpPanel

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: SlidingUpPanel(
          panel: Container(
            color: Colors.amber,
            height: 200,
          ),
          minHeight: 32,
          maxHeight: 200,
          slideDirection: SlideDirection.DOWN,
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.all(32),
              child: Column(
                children: <Widget>[
                  Container(
                    color: Colors.lightBlueAccent,
                    height: 400,
                    child: Center(
                      child: Text(
                        'Huge logo',
                        textAlign: TextAlign.center,
                        style: Theme.of(context).textTheme.headline2,
                      ),
                    ),
                  ),
                  SizedBox(height: 32),
                  Container(
                    padding: EdgeInsets.all(8),
                    color: Colors.black12,
                    child: TextField(),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

You can add footer widget SlidingUpPanel( footer: Widget() )

You will solve the problem

[huxaiphaer]

Did you get the solution @allco , I am stuck also.

Thanks

[ben-xx]

Hey @huxaiphaer and others,

just posted a potential solution on Stack.

[huxaiphaer]

Hey @huxaiphaer and others,

just posted a potential solution on Stack.

Thanks a bunch @ben-xx , this works like charm 😎

[moosoul]

To produce the parallax effect, line 260 in panel.dart wraps the body in a Positioned widget.

//make the back widget take up the entire back side
widget.body != null ? AnimatedBuilder(
  animation: _ac,
  builder: (context, child){
    return Positioned(
      top: widget.parallaxEnabled ? _getParallax() : 0.0,
      child: child,
    );
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: widget.body,
  ),
) : Container(),

Removing the Positioned widget allows the panel body to properly resize with the soft keyboard. There would need to be another solution for the parallax effect though.

This is work, when comment the Positioned widgets. Thanks.

My code like

AnimatedBuilder(
  animation: _ac,
  builder: (context, child) {
    // beacuse the Positioned will make the body resizeToAvoidBottomInset not work
    // so when the parallaxEnabled is false, not use the Positioned
    if (widget.parallaxEnabled) {
      return Positioned(
        top: _getParallax(),
        child: child ?? SizedBox(),
      );
    }
    return child ?? SizedBox();
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: widget.body,
  ),
)

[ultimate-tester]

Hey @huxaiphaer and others, just posted a potential solution on Stack.

Thanks a bunch @ben-xx , this works like charm 😎

~~This doesn't seem to work for me.. I have wrapped the panel widget in a Scaffold, no visible difference to me. My panel has a Column widget and has as children an Expanded -> ListView in it and a Padding -> Row with an TextFormField.~~

EDIT: Scratch that, while adding some information that might help to trace where this is coming from I realized that my top level Scaffold also having resizeToAvoidBottomInset set to true. I have set the primary Scaffold's resizeToAvoidBottomInset to false, and wrap my panel in a Scaffold which has resizeToAvoidBottomInset to true.

[bfAloe]

> > > Hey @huxaiphaer and others,
> > > just posted a [potential solution on Stack](https://stackoverflow.com/a/65635757/2301224).
> > 
> > 
> > Thanks a bunch @ben-xx , this works like charm 😎
> 
> ~This doesn't seem to work for me.. I have wrapped the panel widget in a Scaffold, no visible difference to me. My panel has a Column widget and has as children an Expanded -> ListView in it and a Padding -> Row with an TextFormField.~
> 
> EDIT: Scratch that, while adding some information that might help to trace where this is coming from I realized that my top level Scaffold also having resizeToAvoidBottomInset set to true. I have set the primary Scaffold's resizeToAvoidBottomInset to false, and wrap my panel in a Scaffold which has resizeToAvoidBottomInset to true.

@ultimate-tester you saved my life