Flutter中如何为TextField添加边框阴影、边框或Elevation效果？

TextField本身没有直接的阴影或elevation属性，下面是几种实用的实现方案，覆盖边框阴影、整体阴影、elevation效果等需求：

1. 用Container包裹实现整体阴影+自定义边框 #

这是最灵活的方案，通过Container的boxShadow添加外阴影，同时可以自定义边框样式：

Container(
  margin: const EdgeInsets.symmetric(horizontal: 20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    // 自定义阴影：可调整颜色、扩散范围、模糊度、偏移量
    boxShadow: const [
      BoxShadow(
        color: Color.fromARGB(50, 0, 0, 0),
        spreadRadius: 1,
        blurRadius: 6,
        offset: Offset(0, 2), // 向下偏移2px
      ),
    ],
    // 可选：添加边框
    border: Border.all(color: Colors.blue.shade300, width: 1),
  ),
  child: const TextField(
    decoration: InputDecoration(
      hintText: "请输入内容",
      border: InputBorder.none, // 移除TextField默认边框，避免冲突
      contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  ),
)

2. 实现输入框内阴影 #

如果需要内阴影效果，可以用Stack组合一个带内阴影的容器和TextField：

Stack(
  alignment: Alignment.center,
  children: [
    // 内阴影容器
    Container(
      height: 52,
      margin: const EdgeInsets.symmetric(horizontal: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Color.fromARGB(30, 0, 0, 0),
            blurRadius: 8,
            spreadRadius: -4, // 负扩散值实现内阴影
            offset: Offset(0, 0),
          ),
        ],
      ),
    ),
    TextField(
      decoration: InputDecoration(
        hintText: "带内阴影的输入框",
        filled: true,
        fillColor: Colors.white,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: Colors.grey.shade200),
        ),
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
    ),
  ],
)

3. 用Material组件快速实现Elevation效果 #

Material组件自带elevation属性，能快速生成符合Material Design规范的阴影：

Material(
  elevation: 3, // elevation值越大，阴影越明显
  borderRadius: BorderRadius.circular(8),
  color: Colors.white,
  child: const TextField(
    decoration: InputDecoration(
      hintText: "带Elevation的输入框",
      border: InputBorder.none,
      contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    ),
  ),
)

额外提示 #

• 区分聚焦状态：可以通过FocusNode监听TextField的聚焦状态，动态修改Container/Material的阴影或边框样式。
• 调整阴影参数：boxShadow的spreadRadius控制阴影扩散范围，blurRadius控制模糊程度，offset控制阴影偏移方向，按需调整就能得到不同风格的阴影。
• 避免双重边框：当用外部容器包裹时，记得移除TextField的默认边框（border: InputBorder.none），防止出现边框重叠。

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