TextField placeholder and text vertical alignment is not right

Question

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.

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

Answer 1

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