CODEWITHSUNDEEP
fluttertextfieldvertical-alignment
Bala
Bala

Reputation: 1375

Textfield text alignment is not aligned vertically

I am trying to build a form with custom textfield height, i would like to make the textfield text and hit text to be center vertically. Here is my code 

      SizedBox(
             height: 40,
              child:
              TextField(
                style: TextStyle(
                  fontSize: 14,
                ),
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                decoration: InputDecoration(
                    filled: true,
                    fillColor: Color(0xff5a9fd6).withOpacity(0.15),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xff5a9fd6).withOpacity(1.0),
                      ),
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                      borderRadius: BorderRadius.circular(1.0),
                    )
                ),
              )
          ),

When i decrease the font size then the text is aligned vertically but i would like to use the font size as 14 and above.

enter image description here

Upvotes: 1

Views: 2016

Answers (3)

SUDESH KUMARA
SUDESH KUMARA

Reputation: 1312

Do not wrap the TextField from SizeBox to manage the height of the TextField. You can do this by using vertical contentPadding as follows. It keeps your text in the center.

TextField(
    style: TextStyle(
        fontSize: 14,
    ),
    textAlignVertical: TextAlignVertical.center,
    textAlign: TextAlign.left,
    maxLines: 1,
    decoration: InputDecoration(
         contentPadding: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
         filled: true,
         fillColor: Color(0xff5a9fd6).withOpacity(0.15),
         focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                      color: Color(0xff5a9fd6).withOpacity(1.0),
                ),
                borderRadius: BorderRadius.circular(2.0),
          ),
          enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                      color: Colors.transparent,
                ),
          borderRadius: BorderRadius.circular(1.0),
          )
     ),
),

enter image description here

Upvotes: 2

Karol Lisiewicz
Karol Lisiewicz

Reputation: 674

You can to adjust contentPadding to center your text vertically, for example:

TextField(
decoration: InputDecoration(
    contentPadding: const EdgeInsets.all(<your value>),
)

Upvotes: 2

Guru Prasad mohapatra
Guru Prasad mohapatra

Reputation: 1969

You can set the contentPadding of the TextField as 0 or according to your requirement.

SizedBox(
             height: 40,
              child:
              TextField(
                style: TextStyle(
                  fontSize: 14,
                ),

                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                decoration: InputDecoration(
                    contentPadding: const EdgeInsets.all(0),
                    filled: true,
                    fillColor: Color(0xff5a9fd6).withOpacity(0.15),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Color(0xff5a9fd6).withOpacity(1.0),
                      ),
                      borderRadius: BorderRadius.circular(2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.transparent,
                      ),
                      borderRadius: BorderRadius.circular(1.0),
                    )
                ),
              )
          ),

Upvotes: 1

Related Questions