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.
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.
Related
Is there a way to make a few widgets static upon a PageView change?
I know I can make one widget static by wrapping the Scaffold within a Container, and have that Container have something like a decoration, but I don't know how to add more widgets that do not change when a page changes.
I have a few widgets that change when the page view changes, but then I want to have, say a Button below those widgets that stay still, but
if I put the same Button in every widget, it will swipe through and show two buttons when I change the page momentarily.
I just figured it out, I thought the PageView can only be assigned to the body property of a Scaffold, but wrapping it within a Column like this works. So just add the static widgets within the Column!
return Container(
decoration: BoxDecoration(), // For background.
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Column(
children: [
Flexible(child: pageView),
// Static Widgets here!
],
),
),
);
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
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.
I have positioned(using Align) two child widgets within stack widget and one of it contains form TextField to take input. When I clicked to enter data, only it's parent widget is moved up on Keypad entered as in the below picture.
Is there any way to move/resize the child widgets of stack while entering data from keypad.
Source code:
return Scaffold(
body: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/playingboard2.jpg'),
fit: BoxFit.cover)),
child: null,
),
_buildSelfPlayer(), // Returns the widget with form input and other widgets
_buildBank(), // top center, shows two pictures of bank
],
),
);
I don't see another fix for this, while also making use of Stack widget.
So instead I'd suggest you to use Column widget wrapped inside a SingleChildScrollView. I tried it and it works as intended. The other children move up too along with the TextField, so maintaining the distance between them and not overlapping.
For the background image, you can wrap the Scaffold in a Container, use that image in the Column decoration and make the Scaffold's backgroundColor to Colors.transparent.
I am creating a new page route PopupRoute and using a Stack as the root of the new popup page. It works fine until I add Text to its children. Text will have two yellow lines underneath. I tried Material(child:Stack()) and Scaffold(child:Stack()). It can fix the yellow line issue, but it covers the entire screen and make the barrierDismissible not work.
Are there any other widgets can solve the Text yellow issues in my case?
You just need to wrap your Text widget inside a DefaultTextStyle widget. A DefaultTextStyle widget gets added implicitly by the Scaffold or Material widget.
DefaultTextStyle(
style: TextStyle(),
child: Text("This is a test"),
),
There might be a cleaner solution, but the first thing I thought of is wrapping Material inside of Align widget.
e.g.
showDialog(context: context, barrierDismissible: true, builder: (context) {
return Stack(alignment: Alignment.center, fit: StackFit.loose, children: <Widget>[
Container(width: 100, height: 100, color: Colors.blue),
Align(
child: Material(
type: MaterialType.transparency,
child: Text("TEXT"),
)
),
]);
});
This is my code:
build(BuildContext context) {
return new Scaffold(
body: new SafeArea(
child: new ListView.builder(
itemBuilder: (itemBuilder),
itemCount: (1),
padding: kMaterialListPadding,
),
)
);
}
itemBuilder(BuildContext context, int index) {
return new TextFormField(
decoration: new InputDecoration(
border: const OutlineInputBorder(),
hintText: "What's on your mind?",
helperText: "5-500 characters",
),
maxLines: 3,
);
}
When I tap on the text field, keyboard opens but lot of blank space appears on top of keyboard as you can see in the picture (border of textfield is cut).
It happens because of the ListView. If I add just the text field to the body, appearance is fine.
The reason for lot of wasted space was because there was a Scaffold inside a Scaffold. Each scaffold adding space for keyboard. Removing one solved the problem.
Scaffold has a property resizeToAvoidBottomPadding.
Set this property false
For those who see white space after closing the keyboard, it can be caused by MediaQuery, where in my case I used MediaQuery around the base scaffold to fix the problem of using RangeSlider inside a drawer(using the RangeSlider will show the behavior of closing the drawer not changing the value of the slider ), where I used this:
MediaQuery(
data: MediaQueryData.fromWindow(window).copyWith(
gestureSettings: const DeviceGestureSettings(touchSlop: kTouchSlop)),
child: Scaffold(...)
But this however causes the white space that we saw after dismissing the keyboard, also it causes that when you open the keyboard on form, the screen won't scroll anymore.
So I add the media query solution only on the Scaffold where I used the drawer...
FYI, for those who uses Getx, I used it with bottom app bar, where we use:
Scaffold(
body: Obx(
() => IndexedStack(
children: controller.menuPages,
index: controller.navMenuIndex(),
),
),
and then after the main tabs, you use another Scaffold (I used the MediaQuery on this one )