CODEWITHSUNDEEP
flutter
YeisonM
YeisonM

Reputation: 597

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',
),

enter image description here

Upvotes: 16

Views: 5485

Answers (8)

Zain Arshad
Zain Arshad

Reputation: 41

set height to 1 in TextStyle of TextField.

     TextField(
        style: TextStyle(height: 1),
      )

Upvotes: 0

Baker
Baker

Reputation: 28010

Bottom contentPadding set to a small (e.g. 5) value and isDense: true were key for my situation:

child: TextFormField(
  controller: pwc.tec,
  maxLength: 4,
  onTapOutside: (event) => FocusManager.instance.primaryFocus?.unfocus(),
  style: const TextStyle(fontSize: 25),
  decoration: const InputDecoration(
    contentPadding: EdgeInsets.only(bottom: 5), // ←←
    isDense: true, // ←←
    helperText: '',
  ),
)

isDense: true causes the TextField to use less vertical space.

Specifying some small values for the bottom contentPadding prevents TextField from using its default (i.e. large) values when input text is nearing max width. The large (default) contentPadding values can cause the input text to 'pop' upwards making it invisible.

Side note: specifying helperText (even as emptystring) prevents the field from changing height when transitioning from empty to entering values.

Upvotes: 0

zhangwb1996
zhangwb1996

Reputation: 31

I got the same problem, and solved it by adding decoration property to TextField like this:

decoration: const InputDecoration(
  isCollapsed: true,
),

Upvotes: 2

Maher Ahmad EL-Amary
Maher Ahmad EL-Amary

Reputation: 196

You need to add

contentPadding: EdgeInsets.zero

to your InputDecoration

Upvotes: 9

devu mani
devu mani

Reputation: 377

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. enter image description here

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.

Upvotes: 6

Jayant Dhingra
Jayant Dhingra

Reputation: 546

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)

Upvotes: 0

user12149728
user12149728

Reputation:

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),

Upvotes: 4

Naveen Avidi
Naveen Avidi

Reputation: 3073

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',
              ),
            )));
  }

Screenshot

Upvotes: 0

Related Questions