This question already has answers here:
Bottom overloaded by 213 pixels in flutter
(18 answers)
Closed 12 months ago.
I had an error "Bottom Overflowed by 199 pixel" when creating an Image inside the ListView, and after i google it, all of them suggest me to add:
resizeToAvoidBottomPadding: false
But, it doesnt work! The error is still there.
SafeArea widget is also doesnt solve the problem. Here is the short code version of my layout:
body: ListView(
children:<Widget> [
new Container(
child: new Stack(
children:<Widget> [
//THE WIDGET
new Container(), //THE BACKGROND IMAGE
new Positioned(
child: Column(
children:<Widget>[
new Transform(),
new FadeTransition(),
new FadeTransition(),
Divider(),
new Row(),
//THE IMAGE THAT I WANT TO ADD
new Container(
height: 360.0
decoration: BoxDecoration(
image: DecorationImage(
image: Assetimage('lake.jpg)
Use Scaffold property "resizeToAvoidBottomPadding: false" and "SingleChildScrollView" as parent of Scaffold body:
home: Scaffold(
resizeToAvoidBottomInset : false,
appBar: AppBar(
title: Text("Registration Page"),
),
body: SingleChildScrollView(
child: RegisterUserPage(),
)),
put your contents in a SingleChildScrollView and add ConstrainedBox like this:
body :SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: ListView(
children:<Widget> [
new Container(
child: new Stack(
children:<Widget> [
//THE WIDGET
new Container(), //THE BACKGROND IMAGE
new Positioned(
child: Column(
children:<Widget>[
new Transform(),
new FadeTransition(),
new FadeTransition(),
Divider(),
new Row(),
//THE IMAGE THAT I WANT TO ADD
new Container(
height: 360.0
decoration: BoxDecoration(
image: DecorationImage(
image: Assetimage('lake.jpg)
This is may make your screen scrollable and adding constraint will make it finite scroll.
Nothing, Just include your widget inside Expanded like this
Expanded(
child: sectionList(),
)
//this solved my issue
Using resizeToAvoidBottomInset: true, in Scaffold and wrapping the first child in the body with SingleChildScrollView solved my problem.
Just Use
SingleChildScrollView()
like as
body: SingleChildScrollView(
child: Column(
children: [
widgetClassSectionButton(),
listAttandance.isNotEmpty ? headLineContainer() : msgNothingToShow(),
listAttandance.isNotEmpty ? widgetStudentList():widgetMsgEmpty(),
CustomButton("Submit Data",context)
],
),
)
The parameter in scaffold works for me, envolve your widget for this error.
singlechildscrollview
This works for me for long form:
return Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: IntrinsicHeight(
child: Form(
key: _formKey,
child: Column(...
This is How I solved it, adding a resizeToAvoidBottomInset: false, inside Scaffold() and using SingleChildScrollView() inside the body.
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.grey,
appBar: AppBar(
title: Text("Quotes"),
backgroundColor: Colors.green,
),
body: SingleChildScrollView(
child: Column(
children: quotes.map((quote) => quotesTemplete(quote)).toList(),
),
)
);
This aligns the item from bottom to top:
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
reverse: true,
Related
In Flutter, DropdownButtonFormField's modal list keeps growing to fill some height limit that seems to be ~90% of the screen (or possibly, and more likely, the Container it's in). When it reaches that limit, it becomes scrollable. Is it possible to set that height limit?
Here's the code I'm working with
Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Container(
padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
child: Form(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//other widgets here
DropdownButtonFormField(items: this.dropDownItems),
],
),
)),
);
I was checking the code of DropDown and there is no property to set the height of the Dialog, it just fill almost the screen.
I made a small change to the class and you can include to your project if you want:
https://gist.github.com/tudor07/9f886102f3cb2f69314e159ea10572e1
Usage
1- Add the file into your project.
2- Import the file with an alias to avoid conflicts.
import 'custom_dropdown.dart' as custom;
3- Use the alias in your Widgets related to the DropDown, and add the height property:
Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Container(
padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
child: Form(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//other widgets here
custom.DropdownButtonFormField(
height: 200.0,
items: this.dropDownItems),
],
),
)),
);
4- Don't forget to add the alias also in your DropdownMenuItem like this :
custom.DropdownMenuItem(
child: Text("Sample Tex"),
value: "any_value",
),
with this lines you can use DropdownButtonFormFieldlike a cheaps:
isDense: false,
itemHeight: 60,//what you need for height
so your code will be this :
Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Container(
padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
child: Form(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//other widgets here
DropdownButtonFormField(items: this.dropDownItems
isDense: false,
itemHeight: 60,//what you need for height
),
],
),
)),
);
I spent over 30 minutes searching for answers!
I simply used the "menuMaxHeight" property of DropdownButton
It solved the problem
e.g
child: DropdownButton(
menuMaxHeight: 300,
This works!
DropdownButtonHideUnderline(
child: Container(
height: // some height,
padding: // add padding
decoration: // add decoration
child: DropdownButtonFormField(
decoration: InputDecoration.collapsed(hintText: ''),
// add some function according to you
),
),
)
**This container decoration is responsible for showing decoration in your dropDown button **
If you are using DropdownButton2 use dropdownMaxHeight: 300, for item list height
DropdownButtonHideUnderline(
child: DropdownButton2(
isExpanded: true, // For Expanded view (cover rest of the container width)
dropdownMaxHeight: 300, // For List Height
hint: ......
items: ......
)
)
NOTE: Im using Navigator.of(context).push to push ModalRoute,
Hi I have page with ModalRoute with TextFormField in the body, but when keyboard show up, the input is being hide by keyboard, how to fix this?
return Container(
child: ListView(
children: <Widget>[
//other widget
SizedBox(height: _qtyAnimation.value),
Row(
children: <Widget>[
Expanded(
child: Text(
"Jumlah",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
SizedBox(
width: 145.0,
child: TextFormField(
focusNode: _qtyFocusNode,
controller: qty,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0),
prefixIcon: IconButton(
icon: Icon(Icons.remove),
onPressed: () {},
),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 0.1),
),
suffixIcon: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
),
),
),
],
),
],
);
thats my code, i try with focusnode and more, still same result
please help me
thanks solve my problem with this padding on bottom of textfield
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom));
and mare reverse list
This worked for me...
First add this
final bottom = MediaQuery.of(context).viewInsets.bottom;
Then use a SingleChildScrollView() to wrap around the main widget (whatever you're using, e.g. Column, ListView, etc) like this...
You need "reverse: true"
Widget build{
return Scaffold(
body: SingleChildScrollView(
reverse: true;
child: Container(...
You also need these two lines of code for the Scaffold as well..
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(...
and finally, reference the 'bottom' for your EdgeInsets..
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Container(...
You need to wrap everything in a SingleChildScrollView and set the reverse to true.
SingleChildScrollView(
reverse: true,
child: Container(),
);
Just that worked for me!
I had a similar problem. I try all solution, but didn't work.
Finally I removed
<item name="android:windowFullscreen">true</item>
from my styles.xml file in android folder, and fix the problem.
There are few methods for this (as of Dec 3rd 2018):
You can read this for a better solution: When i select a Textfield the keyboard moves over it.
Inside Scaffold() add: resizeToAvoidBottomPadding: false,.
You can also wrap your TextWidget with SingleChildScrollView(). This will allow you to scroll whenever the keyboard is shown.
Set resizeToAvoidBottomInset to false inside your Scaffold Widget.
Note that resizeToAvoidBottomPadding will be deprecated.
Scaffold( resizeToAvoidBottomInset: false, ...)
I use form elements in modal_bottom_sheet plugin. I solved it by just adding the following code to SingleChildScrollView.
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
Too add to the commonly accepted answers here which is
body: SingleChildScrollView(
reverse: true,
child: Container(
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Stack(
fit: StackFit.loose,
children: <Widget>[
I added a thing to the bottom inset to prevent it from going too high.
var bottom = MediaQuery.of(context).viewInsets.bottom;
bottom = max(min(bottom, 80), 0);
What worked for me was combining the docs with tips over here. It uses, LayoutBuilder, SingleChildScrollView, Padding (with bottom hack) and finally, ConstrainedBox (to use Expanded). By combining these It works with Expanded widgets inside Columns.
The docs (from where LayoutBuilder comes):
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
Structure
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,`
body: SafeArea(
child: Container(
child: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
maxHeight: viewportConstraints.maxHeight),
child: Column(
SingleChildScrollView does solve the problem while the resizeToAvoidBottomInset is set to true, while setting it to false would be a not recommended solution. Let me explain why:
When user presses the TextField, usually a virtual keyboard will popup and takes up a large portion of the bottom space on the screen. In such case, problem would occur, if the TextField is near said bottom, it will be covered by the keyboard (resizeToAvoid... set to false), and user will be unable to see what they've typed in; if there are other widgets below the TextField (when resizeToAvoid is true, e.g. buttons in the same Column with TextField), there will be overflow because there is no space for them to show on the remaining viewport.
Speaking from a user's perspective, what we want is:
TextField who gets focus is always visible.
No bottom overflow and bugged graphics.
However, such description is not technical, it does not tell us how exactly do we implement it. What we actually want is, make the whole layout scrollable, and allow Scaffold to resize. When the viewport resizes, anything below the focused TextField scrolls away to the invisible bottom, and the TextField itself snaps to the keyboard.That's why SingleChildScrollView + resize = true is what we want.
To have a centered content first on build method I added this:
final bottom = MediaQuery.of(context).viewInsets.bottom;
and return this:
return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
fit: StackFit.expand,
children: [
///Content
Align(
alignment: Alignment.center,
child: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: [
MyContent()
],
),
),
),
),
///Button
Align(
alignment: Alignment.bottomCenter,
child: MyBottomButton()
)
],
),
),
);
And it works very well with keyboard flow
In my case, there was were important to use only small padding, otherwise when open the keyboard it makes a big mess.
Padding(padding: EdgeInsets.only(bottom: 20)
Check my solution:
child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: Container(
color: Colors.black,
child: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: 20),
child: Container(
child: ReservationCard(
),
),
),
),
)
For Android, check for windowSoftInputMode. (AndroidManifest.xml)
android:windowSoftInputMode="adjustResize"
I am trying to make a simple chat app, so I created a scaffold and my body, will be the messages and my bottomNavigationBar would be my typing field and sending icon.
I added a text field but when typing the navigation bar is hidden by the keyboard.
this is the code of my BottomNavigationBar :
bottomNavigationBar: new Container(
height: ScreenSize.height/12,
/*color: Colors.red,*/
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
child: new Icon(Icons.send),
width:ScreenSize.width/6,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Material(
child: new Container(
child: new TextField(
autofocus: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(9.0),
border: InputBorder.none,
hintText: 'Please enter a search term',
),
),
width:ScreenSize.width*4/6,
),
elevation: 4.0,
/*borderRadius: new BorderRadius.all(new Radius.circular(45.0)),*/
clipBehavior: Clip.antiAlias,
type: MaterialType.card,
)
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
child: Text('HELLO C1'),
color: Colors.green,
width:ScreenSize.width/6,
),
],
)
],
),
),
here is how it looks when focused :
if you use a Stack on your Scaffold's body, instead of bottomNavigationBar, your nav will push up above the keyboard. even if you fix to the bottom with a Positioned:
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: MyNav(),
),
simply wrap your bottom navigation bar with Padding and set it to MediaQuery.of(context).viewInsets,
bottomNavigationBar: Padding(
padding: MediaQuery.of(context).viewInsets,
child: ChatInputField(),
),
Literally just worked through the same issue. Given the code i was refactoring, this worked like a charm. Peep the github link, review his change and apply. Couldn't be much more straight forward: https://github.com/GitJournal/GitJournal/commit/f946fe487a18b2cb8cb1d488026af5c64a8f2f78..
Content of the link above in case the link goes down:
(-)BottomAppBar buildEditorBottonBar(
(+)Widget buildEditorBottonBar(
BuildContext context,
Editor editor,
EditorState editorState,
BottomAppBar buildEditorBottonBar(
folderName = "Root Folder";
}
*REPLACE* return BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(Icons.folder),
label: Text(folderName),
onPressed: () {
var note = editorState.getNote();
editor.moveNoteToFolderSelected(note);
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
*WITH THE WRAPPER* return StickyBottomAppBar(
child: BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(Icons.folder),
label: Text(folderName),
onPressed: () {
var note = editorState.getNote();
editor.moveNoteToFolderSelected(note);
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
);
}
class StickyBottomAppBar extends StatelessWidget {
final BottomAppBar child;
StickyBottomAppBar({#required this.child});
#override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
child: child,
);
}
}
I achieved this by a mix of two things I found separated in the web:
1 - Inside the Scaffold, I put other with only a bottomNavigationBar with a empty Container. For some reason, this trick push all my real bottomNavigationBar up to the top of the keyboard.
Scaffold(
bottomNavigationBar: Container(
height: 0,
),
body: Scaffold(
body: MyWidget(
But, I did not want all the content up, so I got that Package:
2 - I added flutter_keyboard_visibility: ^5.1.0 from
https://pub.dev/packages/flutter_keyboard_visibility
With this Package, you can do anything you want in response to keyboard visibility - is up to you. In my case, I made all content of my real bottomNavigationBar disappear except the textfield, which stay on the top of the keyboard:
[TextFormField] // dont go away,
//The others:
KeyboardVisibilityBuilder(builder: (context, visible) {
return Column(
children: [
visible
? SizedBox(
height: 0,
)
: OtherWidgets(
If you need some kind of button; you can do:
Scaffold(
bottomNavigationBar: bottomNavigationBar,
floatingActionButton: ExampleButton(
text: 'Hello',
),
body: body,
),
You can apply further customizations on the Floating Action Button using parameters in the Scaffold.
There is a simple way to do this if you want to really need to use the bottom navigation bar of the scaffold to put your widgets in rather than put it on a stack. Just wrap your scaffold with another scaffold and it should solve the problem.
return Scaffold(
body: Scaffold(
bottomNavigationBar: yourBottomNavigationBarWidget(),
body: yourBody(),
This works best especially when the height of your widget changes dynamically (because the text user types may introduce multiple lines) and you want the body to resize accordingly. A body in the stack, as suggested by many, will require a bottom padding to be visible over the text field and need to change dynamically as user types which is difficult to handle when you have multiple widgets sitting in and around the text field.
I'm learning Flutter, and I've made some VERY simple modifications to the starter app, so that the floating button changes the text item to a random string from an array.
The problem is that the text is too close to the edge of the screen--needs padding. But whenever I try to add a padding: element in any number of places, VSCode doesn't seem to like it. I've seen padding used in other example code, but can't seem to get it to work in this case.
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Welcome to DadBot!',
),
new Text(
_txt,
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _changeText,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
The easiest way to get padding is to wrap your widget in a Padding widget and specify the offset you want.
Fixed the issue by wrapping the Text widget in question within a Padding class, like so:
new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
_txt,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.display1,
),
),
I'm still getting used to the way Flutter does things, but I like it!
I'm creating a login screen, and i have this background image,
the problem is when the user clicks one of the TextFields and the keyboard pops, the background image changes its size to fit the new screen size (excluding the keyboard).
I want the background to stay persistent and the same size, i would use BoxFit.none, but i'm afraid it will hurt the responsiveness of the app.
Here's the code:
new Container(
decoration: new BoxDecoration(
color: Colors.red,
image: new DecorationImage(
fit: BoxFit.cover,
image: new AssetImage(
'assets/images/splash_screen/background.png'))),
child: new Center(
child: new ListView(
physics: new PageScrollPhysics(),
children: <Widget>[ //Login screen content ],
),
),
);
I also tried to define BoxConstraints with minHeight of the device screen but it doesn't help, and used Stack as well but with not luck.
Here's what i mean by changing dimensions:
No Keyboard / With Keyboard
Put your Scaffold as a child of a Container and make it transparent
final emailField = TextFormField(
decoration: InputDecoration(
hintText: "Email",
),
);
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/bg.png'),
fit: BoxFit.cover,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: ListView(
children: <Widget>[
emailField,
],
),
),
);
Try using a Stack, with your image in a Positioned, with a BoxFit of fill. Then, set top: 0.0. This way, its height shouldn't be influenced by the height of the bottom of the screen (i.e. it shouldn't change when the keyboard comes up), and its size should remain the same.
Example:
return Stack(
children: <Widget>[
Positioned(
top: 0.0,
child: Image.asset(
'assets/images/splash_screen/background.png',
fit: BoxFit.fill,
),
),
Center(
child: ListView(
physics: PageScrollPhysics(),
children: <Widget>[
//Login screen content
],
),
),
],
);
Try going to to your Scaffold (or use one) and set
resizeToAvoidBottomPadding = false
You can try this, It works well
import 'package:flutter/material.dart';
class SignUpView extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/background.png"),
fit: BoxFit.cover,
))),
Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.transparent,
appBar: AppBar(
title: Text('NEW USER'),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(children: <Widget>[])))
]);
}
}