Flutter：将TextFormField图标移至输入框外部右侧的实现问题

直接把搜索栏和图标放在Row里，给搜索栏套个Expanded就能解决你之前图标不显示的问题——核心是让搜索栏占满Row的可用宽度，图标自然就能显示在外部右侧。

修改后的完整代码如下：

Expanded(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      SizedBox(height: 40),
      Row(
        children: [
          SizedBox(width: 8),
          //MENU
          Icon(
            Icons.menu,
            size: 34,
            color: AppColors.black,
          ),
          Spacer(),
          //LOGO
          SizedBox(
              height: 60,
              width: 100,
              child: Image.asset(
                'assets/icons/logo_transparent_main.png',
              )),
          SizedBox(width: 8)
        ],
      ),
      // 修改后的搜索栏区域
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            Expanded(
              child: TextFormField(
                // controller: textIDController,
                style: const TextStyle(
                    color: Colors.black, fontWeight: FontWeight.w700),
                decoration: InputDecoration(
                  labelText: "Search",
                  labelStyle: const TextStyle(
                      color: Colors.black, fontWeight: FontWeight.w700),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                    borderSide:
                        const BorderSide(color: Colors.black, width: 2.0),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                    borderSide:
                        const BorderSide(color: Colors.black, width: 2.0),
                  ),
                ),
                maxLines: 1,
                keyboardType: TextInputType.text,
                textInputAction: TextInputAction.next,
              ),
            ),
            SizedBox(width: 8), // 图标和搜索栏之间的间距
            FaIcon(
              Icons.filter_list_sharp,
              size: 30,
              color: AppColors.black,
            ),
          ],
        ),
      ),
      SizedBox(height: 10),
    ],
  ),
),

关键修改说明 #

• 移除TextFormField的suffixIcon配置，避免图标在输入框内部显示
• 使用Row包裹TextFormField与过滤图标，给TextFormField添加Expanded组件，确保它占据Row的全部剩余宽度，解决图标被挤压消失的问题
• 在图标与搜索栏之间添加SizedBox(width:8)，保持布局间距的一致性

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