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),
),
Related
I'm asking the same question as this question, except in their case they were able to solve the problem with a Hero animation which is not applicable here. The situation I have is that when a user focuses a search field, the keyboard will appear and shift the content upward. I would like to be able to animate that content upward so that it doesn't jump (and animate its motion also when the keyboard is dismissed), but the locations are entirely layout-dependent, meaning I can't know what the final position will be in order to use something like a SlideTransition.
Attached is a screenshot of my current situation. The centered magnifying glass icon and text are the widget group that I would like to animate.
It seems like the solution is dependent on a couple of things - one is that I had to set the resetToAvoidBottomInset property on my Scaffold widget to false, but in addition I had to use an AnimatedPadding widget that applies a padding to the bottom of my centered content that is equal to the MediaQuery.of(context).viewInsets.bottom value which accounts for space taken up by the keyboard. This certainly works but feels odd that I'm relying on knowledge of what's happening outside of the widget in order to provide an animation.
Here's a sample of the relevant code:
Expanded(
child: Container(
color: Colors.white,
child: AnimatedPadding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
duration: const Duration(milliseconds: 600),
curve: Curves.easeInOut,
child: Center(
Just set property resizeToAvoidBottomInset in your Scaffold to 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 ?
I wanted to use the plugin modal_bottom_sheet to create a MaterialBottomModal view that has a single text field and a button to verify the password of the user.
Currently, if the user tries to enter their details, the keyboard will cover the MaterialBottomModal completely blocking the view of the modal. Therefore users cannot see what they are typing.
I can make the overall size of the modal bigger so the keyboard can fit but at that point, I could have just created another screen.
Hi #jamesblasco, hope this is possible within the current scope. Thanks for your plugin, its awesome!
Try surrounding your modal's content with a Padding.
The workaround below should help.
Padding(
padding:
EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: ...,
)
I want to only make a part of my screen scrollable. When the number of items in my ListView exceeds 4 or 5 I am unable to place any widgets below this list view. I am not sure if there is a way to wrap all the contents of the listview to make that scrollable.
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: _getListings(businessListing),
),
This is my ListView and this is how the UI looks
The problem is when the number of RadioTile exceeds 8; the textField and the Button are pushed out of the screen.
I am wondering if it is good to make the entire screen scrollable?
Or make only a part of the screen containing the RadioTiles Scrollable?
Thanks,
To complete thebuggycoder answer if you want to keep only a part of your screen scrollable but keep variable height bottom elements, you can embed your ListView inside the Expanded of a Column, as shown below:
Column(
children: [
Expanded(
child: ListView(
children: _getListings(businessListing),
),
),
Container(
child: Text('This element must stay at the bottom'),
),
],
);
What are you doing there is basically telling your Column that it has 2 (or more) elements where each element usually takes the space it needs, except elements that are Expanded elements and will take "the maximum space left" in the Column.
There are a couple of points to consider:
If you plan to have more fields below the RadioTiles along with the Google Listing URL and the Save button, then it might be a good option to keep the entire screen scrollable.
On the other hand, if it's going to be just the two things below the RadioTiles, then it would be better to keep only the RadioTile list to be scrollable. This way the TextField and the Save button will always be accessible to the user without the need to scroll.
Also, you can decide about the scrolling depending on the priority of the fields. If the TextField and Save button have more priority then it would be best if they are always visible on the screen.
To make only a part of the screen scrollable, you can wrap the ListView in a Container with some fixed height, so that the it will scroll only within those bounds.
You will also need to change the physics property to AlwaysScrollableScrollPhysics().
Example -
Container(
height: 300.0 //Your custom height
child: ListView(
shrinkWrap: true,
physics: AlwaysScrollableScrollPhysics(),
children: _getListings(businessListing),
),
)
I have four tabs in flutter application. Each tab has is a child of AnimatedContainer Each tab has icon and text but the text is only visible for selected tab.(The width of container increases and text appears). I applied fade animation to text so that text fades in when selected. But the text overflow is seen until the enough width is available for the text to appear.
How can this be achieved so that text does not overflow?
Problem is illustrated in the link below.
Thanks!!
You should wrap your Text in Flexible widget and add softWrap:false property to your Text:
new Flexible(
child: Text(
"Very, very, very, long text...",
softWrap: false,
)
)
Also maybe for you will be useful information about Text property overflow:
https://docs.flutter.io/flutter/rendering/TextOverflow-class.html
This link show you how to use overflow property:
https://stackoverflow.com/a/54222581/2978855
Good Luck!