Flutter TextField提示文本、光标及图标居中问题求助

你遇到的问题是因为TextField默认的内边距和提示文本样式未配置到位，按下面的修改可实现需求：

修改后的代码 #

import 'package:flutter/material.dart';

class TextFiledMessageSend extends StatelessWidget {
  const TextFiledMessageSend({super.key});

  @override
  Widget build(BuildContext context) {
    return TextField(
      textAlignVertical: TextAlignVertical.center,
      // 控制输入文本水平居中
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: "Type your message ",
        // 配置提示文本样式，设置水平居中
        hintStyle: const TextStyle(textAlign: TextAlign.center),
        // 调整内边距，让内容垂直居中，同时给图标留出空间
        contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 10),
        prefixIcon: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.emoji_emotions, size: 22),
          // 移除IconButton默认内边距，避免图标偏移
          padding: EdgeInsets.zero,
        ),
        // 如需suffixIcon，同样设置padding: EdgeInsets.zero即可垂直居中
        // suffixIcon: IconButton(
        //   onPressed: () {},
        //   icon: const Icon(Icons.send, size: 22),
        //   padding: EdgeInsets.zero,
        // ),
      ),
    );
  }
}

关键修改点说明 #

• 光标与输入文本垂直居中：通过textAlignVertical: TextAlignVertical.center配合contentPadding的垂直内边距，确保内容在TextField垂直方向居中。
• 提示文本水平居中：在hintStyle里设置textAlign: TextAlign.center单独控制提示文本对齐；同时设置textAlign: TextAlign.center让输入文本也水平居中。
• 图标垂直居中：给IconButton添加padding: EdgeInsets.zero移除默认内边距，配合contentPadding的垂直设置，让图标和内容保持垂直对齐。

内容的提问来源于stack exchange，提问作者Otmane Bachri