Flutter中如何实现点击TextFormField时添加底部宽边框效果？

核心思路：通过自定义InputDecoration的focusedBorder属性，设置输入框获得焦点时的底部边框样式，同时可配合enabledBorder定义未聚焦状态的边框，保证视觉一致性。

• 简洁实现方案（推荐）：使用UnderlineInputBorder，它默认仅显示底部边框，完美适配需求场景：

TextFormField(
  decoration: InputDecoration(
    // 未聚焦时的默认底部边框
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1.0),
    ),
    // 聚焦时的宽绿色底部边框
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.green, width: 3.0),
    ),
    hintText: '请输入内容',
  ),
)

• 自定义边框细节方案：如果需要调整圆角或其他边框细节，可使用OutlineInputBorder，将非底部边框设为透明以仅显示底部效果：

TextFormField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.zero,
      borderSide: BorderSide(
        color: Colors.grey,
        width: 1.0,
        style: BorderStyle.solid,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.zero,
      borderSide: BorderSide(
        color: Colors.green,
        width: 3.0,
        style: BorderStyle.solid,
      ),
    ),
    hintText: '请输入内容',
    contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
  ),
)

第一种方案代码更简洁，完全贴合需求；第二种方案适合需要更复杂边框样式的场景。

内容的提问来源于stack exchange，提问作者Mr.Robot