Flutter实现带内阴影的按钮：现有代码缺失内阴影求解决方案

要给按钮添加内阴影，Flutter的BoxDecoration默认boxShadow仅支持外阴影，我们可以通过Stack嵌套容器的方式模拟内阴影效果，以下是修改后的完整代码：

GestureDetector(
  onTap: () {
    debugPrint("123");
  },
  child: Stack(
    alignment: Alignment.center,
    children: [
      // 底层容器：模拟内阴影
      Container(
        width: Get.width,
        height: 80.sp,
        margin: EdgeInsets.symmetric(horizontal: 18.0.sp),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(24.0.sp)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.3),
              blurRadius: 8.sp,
              offset: Offset(0, 4.sp),
              spreadRadius: -4.sp, // 负扩散半径让阴影向内收缩
            ),
          ],
        ),
      ),
      // 上层渐变按钮本体
      Container(
        width: Get.width,
        height: 80.sp,
        margin: EdgeInsets.symmetric(horizontal: 18.0.sp),
        decoration: BoxDecoration(
          gradient: AppColor.weightBMIGradient,
          borderRadius: BorderRadius.all(Radius.circular(24.0.sp)),
        ),
      ),
    ],
  ),
)

关键参数调整： #

• 修改color的透明度可以控制阴影深浅
• 调整blurRadius改变阴影模糊程度
• 调整offset控制阴影偏移方向和距离
• 修改spreadRadius的数值可以调整阴影向内收缩的范围，匹配设计图效果

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