Flutter 3.27.1中BoxDecoration同时设borderRadius和boxShadow时边框消失

问题现象 #

• 自定义SelectBox组件，active=true时需同时显示白色边框与外层阴影，但升级Flutter到3.27.1后，仅Redmi Note 8 Pro（Android 10，API29）设备上边框消失，active=false时显示正常
• 移除borderRadius后边框可显示但丢失圆角，尝试嵌套Container等常规方案无效
• 模拟器及其他设备无此问题，换电脑用同版本Flutter构建仍复现

原问题代码 #

class SelectBox extends StatelessWidget {
  const SelectBox({super.key, required this.text, required this.active});
  final bool active;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(5)),
          border: Border.all(
            width: 2,
            color: Colors.white,
          ),
          boxShadow: [
            if (active)
              BoxShadow(
                color: Colors.white.withOpacity(0.7),
                blurRadius: 30,
                blurStyle: BlurStyle.outer,
              )
          ]),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
        child: Text(
          text,
          style: const TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.italic,
              fontSize: 20.0),
        ),
      ),
    );
  }
}

解决方案 #

问题根源是Flutter 3.27.1在Android 10设备上，同时使用borderRadius、border和BlurStyle.outer阴影时的渲染冲突。通过拆分容器将阴影与边框的渲染分离，可规避该bug：

方案1：双层Container分离阴影与边框

class SelectBox extends StatelessWidget {
  const SelectBox({super.key, required this.text, required this.active});
  final bool active;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      // 外层容器单独处理阴影
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        boxShadow: active
            ? [
                BoxShadow(
                  color: Colors.white.withOpacity(0.7),
                  blurRadius: 30,
                  blurStyle: BlurStyle.outer,
                )
              ]
            : [],
      ),
      // 内层容器处理边框与圆角，避免渲染冲突
      child: Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          border: Border.all(width: 2, color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
          child: Text(
            text,
            style: const TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.italic,
              fontSize: 20.0,
            ),
          ),
        ),
      ),
    );
  }
}

方案2：ClipRRect配合外层阴影（备用）

如果方案1仍有异常，可通过ClipRRect确保内层边框的圆角被正确裁剪：

class SelectBox extends StatelessWidget {
  const SelectBox({super.key, required this.text, required this.active});
  final bool active;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        boxShadow: active
            ? [
                BoxShadow(
                  color: Colors.white.withOpacity(0.7),
                  blurRadius: 30,
                  blurStyle: BlurStyle.outer,
                )
              ]
            : [],
      ),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        child: Container(
          decoration: const BoxDecoration(
            border: Border.all(width: 2, color: Colors.white),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
            child: Text(
              text,
              style: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                fontSize: 20.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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