Flutter Web：如何让TextField输入文本在容器内垂直居中？

我在Flutter Web应用的页面头部添加搜索输入控件，相关实现代码如下：

Widget _buildSearchControl() {
    return Container(
      alignment: Alignment.centerLeft,
      color: Colors.white,
      padding: EdgeInsets.only(right: 20),
      margin: EdgeInsets.all(10),
      width: 300,
      child: TextField(
        style: TextStyle(backgroundColor: Colors.white, color: Colors.black),
        decoration: InputDecoration(
            prefixIcon: const Icon(Icons.search,color: Colors.black,),
            suffixIcon: IconButton(
              icon: const Icon(Icons.clear,color: Colors.black,),
              onPressed: () {
                /* Clear the search field */
              },
            ),
            hintText: 'Search...',
            border: InputBorder.none),
      ),
    );
  }

但实际输入文本时，字符并未如预期垂直居中，无法与前后图标对齐，请问有什么方法可以解决该问题？

方法1：调整InputDecoration的contentPadding #

默认情况下TextField的contentPadding会导致文本和图标垂直位置偏移，直接在InputDecoration中设置垂直方向的内边距，让文本和图标对齐：

decoration: InputDecoration(
    prefixIcon: const Icon(Icons.search, color: Colors.black),
    suffixIcon: IconButton(
      icon: const Icon(Icons.clear, color: Colors.black),
      onPressed: () {
        /* Clear the search field */
      },
    ),
    hintText: 'Search...',
    border: InputBorder.none,
    // 根据控件实际高度调整垂直内边距，确保文本居中
    contentPadding: EdgeInsets.symmetric(vertical: 16),
),

方法2：固定容器高度+启用紧凑模式 #

给外层Container设置固定高度，同时让TextField启用紧凑模式并取消默认内边距，确保内容填充容器并居中：

Widget _buildSearchControl() {
    return Container(
      alignment: Alignment.centerLeft,
      color: Colors.white,
      padding: EdgeInsets.only(right: 20),
      margin: EdgeInsets.all(10),
      width: 300,
      height: 48, // 设置统一高度
      child: TextField(
        style: TextStyle(backgroundColor: Colors.white, color: Colors.black),
        decoration: InputDecoration(
            prefixIcon: const Icon(Icons.search, color: Colors.black),
            suffixIcon: IconButton(
              icon: const Icon(Icons.clear, color: Colors.black),
              onPressed: () {
                /* Clear the search field */
              },
            ),
            hintText: 'Search...',
            border: InputBorder.none,
            contentPadding: EdgeInsets.zero, // 取消默认内边距
            isDense: true, // 启用紧凑布局，减少额外空白
        ),
      ),
    );
  }

方法3：手动用Row布局（最灵活） #

放弃TextField自带的prefix/suffixIcon，改用Row手动组合图标和输入框，完全控制对齐逻辑：

Widget _buildSearchControl() {
    return Container(
      alignment: Alignment.centerLeft,
      color: Colors.white,
      padding: EdgeInsets.symmetric(horizontal: 12),
      margin: EdgeInsets.all(10),
      width: 300,
      height: 48,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 强制子元素垂直居中
        children: [
          Icon(Icons.search, color: Colors.black, size: 24),
          SizedBox(width: 8), // 图标和输入框之间的间距
          Expanded(
            child: TextField(
              style: TextStyle(backgroundColor: Colors.white, color: Colors.black),
              decoration: InputDecoration(
                hintText: 'Search...',
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(vertical: 0),
              ),
            ),
          ),
          IconButton(
            icon: const Icon(Icons.clear, color: Colors.black),
            onPressed: () {
              /* Clear the search field */
            },
          ),
        ],
      ),
    );
  }

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