How to reduce Space between textfield and the input text in flutter - flutter

I am developing this textfield and for some reason the text is having some space below it. Please let me know the solution to this.
This is my code for textfield.
Expanded(
child: Container(
height: 40,
child: TextField(
keyboardType: TextInputType.number,
controller: textEditingController,
style: TextStyle(
fontSize: 14, height: 0, color: Colors.white),
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
// isDense: true,
// errorText: validateQtyTxt.toString(),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10)),
labelText: 'QTY > '
// hintText: 'Enter a search term',
),
onChanged: (String newValue) {
(text) => setState(() => _text);
print(newValue);
int qty;
derivativeScanController.buttonClick(newValue, qty);
},
),
),
),
This is the image for reference
enter image description here

There is a property called contentPadding which takes EdgeInsetsGeometry type value with that you can reduce the spacing between textfield and actual text
sample code .
contentPadding: EdgeInsets.zero,
if you want to remove all the spacing change the isDense property to true also
isDense: true,
all the space will be removed

You can use the contentPadding in the decoration property of the TextField to edit its padding.
https://api.flutter.dev/flutter/material/InputDecoration-class.html
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.only(...),
),
)
Which you can fill with whatever values you want. You can use things like EdgeInsets.zero or EdgeInsets.symmetric too:
https://api.flutter.dev/flutter/painting/EdgeInsets-class.html

Change the textStyle from 0 to 1 and adjust the text using padding.

Related

How to add a static unit (text) to a TextFormField in Flutter?

I currently have this TextFormField with a hintText:
the goal is to add Units inside the TextFormField, regardless of whether the user is typing or not. It should kinda look like this:
How to achieve this?
Also, how to center the value?
Here's my current code for the TextFormField:
TextFormField(
decoration: InputDecoration(
hintText: '0.0',
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
filled: true,
fillColor: Colors.white24,
floatingLabelBehavior: FloatingLabelBehavior.never,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
counterText: '',
),
),
TheTextFormField decoration can a suffixText property
TextFormField(
controller: c,
// align to center
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '0.0',
// show kg
suffixText: 'Kg',
)
Text can be centered using the textAlign property
One way is to use TextFormField and text inside row which is inside a container
something like this can help
Container(
child: Row(
children: [TextFormField(), Text('Kg')],
),
),
another way is that you can use
TextFormField(
decoration: InputDecoration(suffixText: 'Kg'),
),
but here the problem is that you will only get suffix text when the TextFormField is enabled, one workaround you can try to make it always visible is to use autovalidate property like
TextFormField(
autovalidateMode: AutovalidateMode.always,
decoration: InputDecoration(suffixText: 'Kg'),
),
I have not tested this autovalidateMode but it should work properly.

TextField's input text cutting in half after getting full?

Screenshot of the problem
I am trying to add an Email, which is a long text, but when the text field got full it cut all text in half.
here is my code:
Container(
height: 45,
decoration: BoxDecoration(
color: HexColor(MyColors.white),
),
child: TextFormField(
controller: _email,
maxLength: 100,
autofocus: true,
validator: validateEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
counterText: "",
border: OutlineInputBorder(),
),
),
),
I get your point.. your problem there is text got high up.. you can set
Just adjust the contentPadding top bottom so it can be centered
decoration: InputDecoration(
contentPadding:
const EdgeInsets.only(
left: 8.0,
bottom: 8.0,
top: 8.0)),```
My problem get solved by adding those lines:
maxLines: 1,
decoration: InputDecoration(
isDense: true,
.
.
.)
I think your problem happens because you are using Container in the wrong way, so your Container is covering your TextFormField. So, in my opinion you can use Container, but with minimal attribute, or without attributes at all. But, I'm more prefer to not using Container.
And also, you can add the maxLines as null if you want it to be really long.
Your code should be like:
TextFormField(
maxLines: null,
controller: _email,
maxLength: 100,
autofocus: true,
validator: validateEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: 'Email',
counterText: "",
border: OutlineInputBorder(),
),
style: TextStyle(
color: Colors.black,
),
),
Also, you can improve the design later by your self.
(NOTE: In my codes, I'm not using Container)

TextField hint/input text not centered without prefixIcon after update to Flutter 1.12.13

I created TextFields with a custom height and a different background color. Here is the code snippet:
Container(
width: width,
height: 35,
decoration: BoxDecoration(
color: Constants.greyColor,
borderRadius: BorderRadius.all(Radius.circular(2)),
),
padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
textAlign: descriptor == null ? TextAlign.center : TextAlign.left,
decoration: InputDecoration(
hintText: placeholder,
hintStyle: Constants.textStyleTextInputHint,
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(horizontal: 0),
),
onChanged: (value) {
state.didChange(value);
},
obscureText: isPassword,
style: Constants.textStyleTextInput,
cursorColor: Constants.primaryColor,
),
),
It worked fine until I recently updated Flutter to version 1.12.13+hotfix.5. Now the hint text as well as the input text are not centered anymore. It seems as if the Container does not change the height of the TextField anymore. Like so:
If I add a prefixIcon the text and the icon will get perfectly centered. Like so:
Does anybody know how I can center the text without an Icon?
Thank you!
I think it's because you add a contentPadding property, even tho it's only horizontal. Have you tried removing it?
TextField(
textAlign: TextAlign.center
decoration: InputDecoration(
hintText: ...,
hintStyle: ...,
border: ...,
// contentPadding:
)
)

set min height of textfiled in flutter

I have a textfiled in container, and i want the textfiled support multiline, so i can not the the height of the container. but how to set the default height of the textfield when there is no word?
I have try the contentPadding, but not work.
here is my code:
TextField(
controller: _textEditingController,
decoration: InputDecoration(
hintText: "留下你的评论吧~",
contentPadding: EdgeInsets.only(left: getMyWidth(10), right: getMyWidth(10)),
fillColor: default_bg,
filled: true,
border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.all(Radius.circular(getMyWidth(5)))),
),
style: makeBlackStyle(),
keyboardType: TextInputType.multiline,
maxLines: null,
cursorColor: themeColor,
onChanged: (str) {
setState(() {
inputStr = str;
});
},
)
so, my question is: How to set the default height of the textfield when there is no word? I want to decrease the default height of the textfiled , and need support mulitiline
You can use 'minLines: 2', it will give you the height of the number of lines you put.
Hope it help.
just set isDense : true in decoration
https://github.com/flutter/flutter/issues/27838
accepted aswer
Use -> contentPadding:
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8.0),//here set your padding
https://github.com/flutter/flutter/issues/27838#issuecomment-507603179
or
new Container(
width:80.0
child:new TextField
)
Use can set maxLines of the TextField to set max height. Setting maxLines will still support multiline.
TextField(
maxLines: 5
)
You can use the following, which I am using in one my projects as well. Wrap your TextField in a container and change the size of the container itself. Then add a contentPadding to make the input smaller.
Container(
height 56, // Optional to decrease/increase
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8.0), // Increase to make smaller
prefixIcon: icon,
labelText: 'Label',
hintText: 'Hint',
border: null,
),
minLines: 1,
maxLines: null // Adds support for multiple lines
));
Replace your code with following to have at-least 3 lines in your TextField:
TextField(
minLines: 3,
controller: _textEditingController,
decoration: InputDecoration(
hintText: "留下你的评论吧~",
contentPadding: EdgeInsets.only(left: getMyWidth(10), right: getMyWidth(10)),
fillColor: default_bg,
filled: true,
border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.all(Radius.circular(getMyWidth(5)))),
),
style: makeBlackStyle(),
keyboardType: TextInputType.multiline,
maxLines: null,
cursorColor: themeColor,
onChanged: (str) {
setState(() {
inputStr = str;
});
},
)
set in TextField
minLines: NUMBER, // default: 1
maxLines: NUMBER or null, // null: support for multiple lines
set in decoration
isDense : true // uses less vertical space, default: false
Hope to help you 😘💕

Flutter when text is bigger than input, text disappears

The problem is that when the text is bigger than the input size, the text just disappears and I don't know why.
Here is my code:
TextField(
focusNode: _focusEmailNode,
controller: _emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: txtEmailBoder),
),
hintText: 'Email',
),
After searching through many sites, I finally got a solution. You can solve this problem by giving decoration and maxlines in the textfield. Give isDense as true in InputDecoration
Example:
Container(
height: 20,
width: 100,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.fromLTRB(5.0, 1.0, 5.0, 1.0),
),
onChanged: (value) {
print(value);
},
),
);
if you don't give content padding then your text will be cut from the middle, like below.
Be careful when you give padding, you should give padding as needed by your textfield's height. If you give wrong padding then also your text will be invisible.
You need to add
contentPadding: EdgeInsets.zero
to your InputDecoration
Give text field an input formatter with desired length of the text like this:
inputFormatters: [
LengthLimitingTextInputFormatter(50),
],
And then have content padding set to like this :
contentPadding: EdgeInsets.fromLTRB(5.0 , 20.0 , 5.0 , 20.0),
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.fromLTRB(5.0, 50, 5.0, 10.0),
alignment: Alignment.center,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
),
hintText: 'Email',
),
)));
}
To Prevent this disappearing use decoration as InputDecoration.collapsed(hintText: "Search Customer")
Full Code is TextField(decoration : InputDecoration.collapsed(hintText: "Search Customer"), textCapitalization: TextCapitalization.sentences)