sliding_up_panel
sliding_up_panel copied to clipboard
akshathjain
Body size does not respect Software Keyboard.
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(),
),
],
),
),
),
),
),
);
}
}
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.
To produce the parallax effect, line 260 in
panel.dartwraps the body in aPositionedwidget.//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
Positionedwidget 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.
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.dartPlease provide a samplemain.dartthat 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
Hey @huxaiphaer and others,
just posted a potential solution on Stack.
Thanks a bunch @ben-xx , this works like charm 😎
To produce the parallax effect, line 260 in
panel.dartwraps the body in aPositionedwidget.//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
Positionedwidget 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,
),
)
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.
> > > 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
