CODEWITHSUNDEEP
flutterflutter-layout
Anil Pradhan
Anil Pradhan

Reputation: 123

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

Upvotes: 12

Views: 3972

Answers (3)

gopal sharma
gopal sharma

Reputation: 111

My problem get solved by adding those lines:

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

Upvotes: 11

Raine Dale Holgado
Raine Dale Holgado

Reputation: 3460

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

Upvotes: 11

hisam
hisam

Reputation: 1629

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)

Upvotes: 1

Related Questions