Flutter如何实现表单输入框前置图标重叠的登录界面效果

下面是两种可直接落地的实现方案，可根据你的设计复杂度选择：

方案1：利用输入框自带prefix插槽实现（轻量化） #

不需要修改输入框外层结构，直接在InputDecoration的prefix属性中嵌套Stack组件即可实现重叠效果：

TextFormField(
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 48),
    // 前缀区域自定义重叠图标
    prefix: SizedBox(
      width: 40,
      child: Stack(
        clipBehavior: Clip.none, // 关闭裁剪，允许图标超出Stack范围
        children: [
          // 底层主图标
          Positioned(
            left: 8,
            top: 0,
            child: Icon(Icons.person, color: Colors.grey.shade600, size: 22),
          ),
          // 上层重叠图标，偏移量按需调整
          Positioned(
            left: 15,
            top: -3,
            child: Icon(Icons.verified, color: Colors.green, size: 16),
          ),
        ],
      ),
    ),
    hintText: "请输入账号",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide(color: Colors.grey.shade300),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide(color: Colors.grey.shade300),
    ),
  ),
)

方案2：自定义外层输入框结构（高自由度） #

如果重叠图标带背景、边框等复杂样式，可以放弃输入框自带边框和前缀，外层自行组装结构：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey.shade300),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // 自定义重叠图标区域
      Stack(
        clipBehavior: Clip.none,
        children: const [
          Icon(Icons.lock, color: Colors.grey, size: 22),
          Positioned(
            left: 12,
            top: -2,
            child: Icon(Icons.security, color: Colors.blueAccent, size: 15),
          )
        ],
      ),
      const SizedBox(width: 12),
      // 输入框去掉自带边框，自适应填充剩余宽度
      Expanded(
        child: TextFormField(
          obscureText: true,
          decoration: const InputDecoration(
            border: InputBorder.none,
            hintText: "请输入密码",
            contentPadding: EdgeInsets.symmetric(vertical: 16),
            isDense: true,
          ),
        ),
      )
    ],
  ),
)

适配调整注意事项 #

• 所有图标偏移量、内边距、尺寸参数都可以根据你的设计稿数值修改
• 如需联动输入状态显示/隐藏上层重叠图标，只需要用状态变量控制Stack内对应组件的显隐即可
• 务必测试输入文字时的排版，避免文字和图标出现重叠

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