Flutter中为TextField添加Drop Shadow投影的实现方法

失效原因 #

在Column组件外层包裹Material属性无法生效，核心原因是Column属于纯布局组件，没有自身的实体绘制边界，Material组件的elevation投影只会渲染在Material自身的绘制区域上，无法正确映射到内部的输入框控件上。

正确实现逻辑 #

要实现TextField投影，需要将Material组件直接包裹在目标TextField外层，同步匹配Material和TextField的形状、圆角参数，避免投影错位：

• 移除Column外层无效的Material包裹代码
• 给需要添加投影的TextField外层直接嵌套Material组件
• 配置Material的投影参数：elevation控制投影高度、shadowColor控制投影颜色和透明度、borderRadius和TextField的边框圆角保持完全一致
• 给TextField设置filled: true和不透明的背景填充色，避免投影穿透输入框显示区域
• 同步给TextField所有状态的边框（默认、聚焦、禁用）配置和Material一致的圆角，避免边缘错位

对应修改后的代码片段 #

你代码中Bio输入框部分修改后如下，用户名的自定义TextInput组件需要加投影时复用相同逻辑即可：

// 省略其他无关代码，仅展示修改后的Bio输入框部分
SizedBox(
  height: 55.h,
),
Material(
  elevation: 4, // 可按需调整投影高度，数值越大投影越弥散
  shadowColor: Colors.black.withOpacity(0.15), // 可按需调整投影透明度、颜色
  borderRadius: BorderRadius.circular(4), // 与TextField边框圆角保持一致，默认OutlineInputBorder圆角为4
  child: TextField(
    decoration: InputDecoration(
      hintText: 'Bio',
      filled: true,
      fillColor: Colors.white, // 输入框背景色，必须设置否则投影会透出
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(4),
        borderSide: const BorderSide(color: Colors.grey),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(4),
        borderSide: const BorderSide(color: Colors.grey),
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(4),
        borderSide: const BorderSide(color: Colors.grey),
      ),
    ),
    keyboardType: TextInputType.multiline,
    controller: bioController,
    minLines: 4,
    maxLines: null,
  ),
),
// 省略后续其他无关代码

如果你需要给输入框设置自定义圆角，只需要同步修改Material和TextField所有OutlineInputBorder的borderRadius参数为相同值即可，投影会自动匹配输入框形状。

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