This question already has answers here:
Overflow Error in Flutter when keyboard open
(7 answers)
Closed 3 years ago.
Layout is ok when there is no keyboard.
But, when keyboard pop up bottom owerflowed.
How do i fix it?
Your widget gets resized whenever your keyboard gets focused as your widget is not scrollable and has finite height. So, what you can do is wrap your hole widget inside a SingleChildScrollView.
For Ex:
SingleChildScrollView(child:_buildYourWidget());
If your widget consist column as its top most layer then you should provide column an additional property that is mainAxisSize to minimum. So that Column will take the required height and SingleChildScrollView will be able to manage your content properly.
mainAxisSize:MainAxisSize.min
This will definitely solve your issue.
You need a Scroll Widget on top of the others. This is the best way, because the widgets will adjust to the keyboard. However you can also edit your Scaffold with:
resizeToAvoidBottomPadding: false
Or, try this one
Expanded(
child: ListView(
children: <Widget>[
YourWidgets()
]
)
)
Related
I have a screen with a column in flutter which is basically a form. At first i had trouble with the fact that the pop-up keyboard reduced the visible space and thus had an overflow. Fixed that adding the SingleChildScrollView and setting a container as a parent with an specific height (based on devicequery size).
Unfortunately, when I test the rotated screen, i get the same problem. Is there a way to set the height of the container which controls the SingleChildScrollView so that it adjusts to the total size occupied by the column widgets?
Please add Listview instead of Colum Widget.
in your scaffold
set resizeToAvoidBottomInset to false or add it
resizeToAvoidBottomInset:false
I want to give a margin around the whole screen in Flutter. So I put my content inside a Column and put the Column inside a Container. So I gave a padding to the whole screen. But when a TextField is selected and the keyboard appears the bottom overflow. I can't give resizeToAvoidBottomPadding: false, because then the keyboard covers the TextField.
I can't use SingleChildScrollView or a ListView because then the placing of the children won't keep space between.
It seems the only option is to remove the Container and set a padding to each child of the Column.
Is there a better option for this ?
My question is similar to this How to make my page scrollable when i show overlay element, that have too many items in flutter? but it has no answers so I'll try to ask as well:
I have an Overlay showing a list of questions using ListView. The list of questions is long and I need to enable scrolling inside the Overlay.
Now it's static and part of it disappears at the bottom of the mobile device.
Why is not just scrollable (since the list inside the Overlay is inside a ListView) and is there a way to make it scrollable?
Thanks in advance for any help!
UPDATE (SOLVED) :
The problem was that the ListView widget is inside a Positioned widget and the top, left, bottom and width values (in my case) need to be set in order for the content to be scrollable.
The problem was that the ListView widget is inside a Positioned widget and the top, left,bottom and width values (in my case) need to be set in order for the content to be scrollable.
I have several TextField and TextFormField in my app, but I customized them so they can display an error message below them.
Because it now shows an error, the space between the actual TextField seems smaller.
So is there a way to increase the size between the keyboard and a widget when the screen scrolls up?
I'm assuming this space is a value set somewhere, but cannot seem to find it.
So this is not a question about making the screen scroll this works, it's about increasing the space between the keyboard.
Thanks.
Since you make use of TextField widgets, you can use the scrollPadding property which indicates how much space you want to have between so called viewInsets (usually something like the UI keyboard) and the TextField widget. So you can set something like EdgeInsets.only(bottom: 32.0) (default is 20.0).
Keep in mind: This does only work, if the surrounding Scrollable (like ListView) has enough space to scroll past the TextField widget to fit the given scrollPadding - otherwise you will see, that the TextField is right above the keyboard, "ignoring" the padding. To resolve that, you could place a SizedBox as the last entry in your Scrollable widget which ensures that there is enough place to scroll once the keyboard is shown:
ListView(
TextField(
scrollPadding: const EdgeInsets.only(bottom: 32.0),
),
SizedBox(height: MediaQuery.of(context).viewInsets.bottom + 32.0),
),
I had problem when keyboards up, The error occured "bottom overflowed by xx pixels".
So I resolved the problem by Wrapping column with SingleChildScrollView, and I wonder how It can happen? I s there special trick with SingleChildScrollView?
It happens because the keyboard takes up padding space from screen estate. So wrapping the column with SingleChildScrollView() essentially handles that by making your screen scrollable.
Hope this helpsā
Edit:
Also the second solution given by #EdwynZN is perfectly alright.
It just has one issue, if you have textfields that are in the region where the keyboard lies, the user won't be able to see them until they lower their keyboard. And that isn't considered a good UX practice.
So using SingleChildScrollView() is the best way to go, in regards to UI/UX.
SingleChildScrollView allows to scroll an area of the space if there is not enough to show the widget (in this case the column). When the keyboard appears the amount of space of the screen is reduced and it shows the overflow because the column cannot show the whole list of children, that's why you would need a scroll area. Another solution if you don't need to scroll is to change the parameter resizeToAvoidBottomInset: false in the scaffold