CODEWITHSUNDEEP
flutterflutter-text
Wai Yan Hein
Wai Yan Hein

Reputation: 14791

TextField placeholder and text vertical alignment is not right

I am developing a mobile application using Flutter. I am having an issue with aligning the text field's placeholder text and its value vertically centered.

This is my code for TextField.

return Container(
      color: Colors.black,
      child: Padding(
        padding: EdgeInsets.all(10),
        child: TextField(
          onChanged: (text) {
            this.filter = text.toLowerCase();
            this._refreshListItems();
          },
          style: TextStyle(
            height: 0.5
          ),
          cursorColor: Colors.black12,
          textAlignVertical: TextAlignVertical.center,
          decoration: InputDecoration(
            filled: true,
            fillColor: Colors.white,
              prefixIcon: Icon(Icons.search, color: Colors.black26,),
              border: OutlineInputBorder(
                borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0),
                ),
              ),
              hintText: "Search",
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.white),
              borderRadius: const BorderRadius.all(
                const Radius.circular(10.0),
              ),
            ),
          ),
        ),
      )
    );

However, when it is rendered, the placeholder and its value are getting a little bit to the top vertically as in the screenshots below.

enter image description here

enter image description here

What's wrong with my code and how can I fix it?

Upvotes: 1

Views: 2378

Answers (2)

shine_like_a_million
shine_like_a_million

Reputation: 193

enter image description here

if you set a custom height, try this.

Container(
  height: 36,
  child: TextField(
    maxLines: 1,
    style: TextStyle(fontSize: 17),
    textAlignVertical: TextAlignVertical.center,
    decoration: InputDecoration(
      filled: true,
      prefixIcon:
          Icon(Icons.search, color: Theme.of(context).iconTheme.color),
      border: OutlineInputBorder(
          borderSide: BorderSide.none,
          borderRadius: BorderRadius.all(Radius.circular(30))),
      fillColor: Theme.of(context).inputDecorationTheme.fillColor,
      contentPadding: EdgeInsets.zero,
      hintText: 'Search',
    ),
  ),
)

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68400

Using text style height to 0.5 is causing the text span to be half of the size of the font size. Remove it as don't think that will help you.

style: TextStyle(
    height: 0.5
),

In order to handle content size you can play with contentPadding

decoration: InputDecoration(
   contentPadding: EdgeInsets.all(1),
   ....
   ),

I used the following code and it is working

contentPadding: EdgeInsets.fromLTRB(0, 8, 0, 0),

Upvotes: 2

Related Questions