Flutter中如何实现带内阴影效果的TextField输入框

原有代码的核心问题 #

• 代码中BoxShadow未指定阴影渲染模式，默认值为外投影，阴影会绘制在容器外侧，无法实现内嵌凹陷的视觉效果
• 两层Container嵌套属于冗余实现，无需额外套内层容器单独承载背景
• 单一层阴影的参数不符合凹陷效果的光影逻辑，真实的凹陷质感需要同时模拟背光面阴影和受光面高光的视觉差

可直接复用的实现代码 #

无需引入第三方依赖，直接通过Flutter原生的BoxDecoration属性即可实现，代码如下：

Container(
  width: 450,
  height: 50,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    // 匹配参考图的浅灰蓝底色
    color: const Color(0xFFE6EAF2),
    borderRadius: BorderRadius.circular(8),
    boxShadow: const [
      // 左上方向暗部内阴影，模拟凹陷的背光面
      BoxShadow(
        color: Color(0xFFB8BFCF),
        offset: Offset(2, 2),
        blurRadius: 4,
        spreadRadius: 0,
        blurStyle: BlurStyle.inner, // 核心配置：将阴影渲染模式设为内阴影
      ),
      // 右下方向亮部内高光，模拟凹陷的受光面
      BoxShadow(
        color: Colors.white,
        offset: Offset(-2, -2),
        blurRadius: 4,
        spreadRadius: 0,
        blurStyle: BlurStyle.inner,
      ),
    ],
  ),
  child: const TextField(
    decoration: InputDecoration(
      hintText: "Content goes here",
      border: InputBorder.none, // 移除TextField默认自带的原生边框
    ),
  ),
)

自定义调整方法 #

• 需要更深的凹陷效果：可以适当增大两个阴影的blurRadius模糊值、offset偏移量，或者调暗暗部阴影的颜色
• 需要更平缓的凹陷效果：减小模糊值和偏移量，降低阴影颜色的透明度即可
• 如果仅做样式展示不需要输入能力，把内层的TextField组件替换为Text组件即可，外层的内阴影效果不会受影响

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