Flutter TextFieled , The hint and cursor is in the bottom of the text filed even with specifying that the verticalTextAlign as Center

Question

 import 'package:flutter/material.dart';
 
 class TextFiledMessageSend extends StatelessWidget {
 const TextFiledMessageSend({super.key});
 
   @override
 Widget build(BuildContext context) {
 return TextField(
      textAlignVertical: TextAlignVertical.center,
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: "Type your message ",
        // contentPadding: const EdgeInsets.symmetric(horizontal: 10),
        prefixIcon: IconButton(
            onPressed: () {}, icon: const Icon(Icons.emoji_emotions, size: 22)),
      ),
    );
}

I want that the hint Text and the cursor is in the center horizontal as wel as the prefixIcon,suffixIcon is in the center :

Here is the image of the widget

Answer 1

You can do it by removing the size of the prefixIcon and applying a contentPadding :

TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    hintText: 'Type your message',
    contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    prefixIcon: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.emoji_emotions)),
  ),
);

Answer 2

The TextField is expanding.

So, set isDense to true on the InputDecoration and remove textAlignVertical: TextAlignVertical.center:

TextField(
        // textAlignVertical: TextAlignVertical.center,<-- Remove this
        decoration: InputDecoration(
          isDense: true, // <-- Added this
          border: InputBorder.none,
          hintText: "Type your message ",
          // contentPadding: const EdgeInsets.symmetric(horizontal: 10),
          prefixIcon: IconButton(
              onPressed: () {},
              icon: const Icon(Icons.emoji_emotions, size: 22)),
        ),
      )