Flutter：如何给Container与TextField添加阴影？我的Container阴影异常

一、修复Container阴影问题 #

你当前的Container代码缺少阴影配置，只需在BoxDecoration中添加boxShadow属性即可实现类似预期效果的阴影。以下是修改后的完整代码：

Container(
  margin: EdgeInsets.symmetric(horizontal: 35),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(30),
    // 添加阴影配置
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3), // 阴影颜色，带透明度
        blurRadius: 8, // 模糊半径，值越大阴影越柔和
        offset: Offset(0, 3), // 阴影偏移量，x水平，y垂直
        spreadRadius: 1, // 阴影扩散程度，可选
      ),
    ],
  ),
  child: TextButton(
    style: TextButton.styleFrom(
      backgroundColor: Colors.transparent, // 确保按钮背景透明，不覆盖Container样式
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30), // 按钮圆角与Container保持一致
      ),
    ),
    onPressed: () {},
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.all(2),
          child: Image.asset(
            'assets/images/icons/facebook.png',
            height: mQHeight / 30,
          ),
        ),
        SizedBox(width: mQWidth / 50),
        Text(
          "Continue with Facebook",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ],
    ),
  ),
),

说明：

• boxShadow是数组类型，可添加多个阴影层实现更复杂效果
• 调整blurRadius和offset参数，可匹配你预期的阴影柔和度与位置
• 给TextButton设置透明背景和对应圆角，避免按钮样式覆盖Container的圆角与阴影

二、TextField添加阴影 #

TextField本身无直接阴影属性，通常通过外层包裹Container来实现阴影效果，示例代码如下：

Container(
  margin: EdgeInsets.symmetric(horizontal: 35, vertical: 10),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        blurRadius: 8,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: TextField(
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      hintText: "请输入内容",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: BorderSide.none, // 去掉TextField默认边框
      ),
      contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    ),
  ),
),

说明：

• 利用Container的阴影作为TextField的外层阴影
• 将TextField的border设为BorderSide.none，避免出现双重边框
• 开启filled并设置fillColor，让TextField背景与Container融合，保证视觉统一

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