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

user_13882468 0
Viewed 1371

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(),
          ),
         ),
       ),
flutter-layout flutter
3 Answers

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

My problem get solved by adding those lines:

 maxLines: 1,
 decoration: InputDecoration(
              isDense: true,
              .
              .
              .)
user_196197070

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)

user_135403490
Related