如何在Flutter中实现Container组件边角的这类模糊效果

该效果无法通过Container组件自带属性直接实现，核心实现逻辑为通过Stack组件叠加多层元素，在四个边角位置放置裁剪后的模糊遮罩，具体实现步骤如下：

• 先创建基础的Container主容器，设置好需要的背景色、圆角、边框、内边距等基础属性
• 引入BackdropFilter组件配合ImageFilter.blur实现模糊效果，四个边角分别设置独立的模糊层
• 用ClipRRect对每个边角的模糊层做局部裁剪，仅保留边角对应区域的模糊效果，避免遮盖容器中间的正常内容
• 四个模糊层通过Positioned组件定位到Container的四个角落，叠放在主容器的上层即可

可直接复用的示例代码如下：

import 'dart:ui';
import 'package:flutter/material.dart';

class CornerBlurContainer extends StatelessWidget {
  // 模糊强度
  final double blurRadius;
  // 边角模糊区域大小
  final double cornerSize;
  // 主容器背景色
  final Color containerColor;
  // 主容器圆角大小
  final double borderRadius;
  // 容器内部子组件
  final Widget? child;

  const CornerBlurContainer({
    super.key,
    this.blurRadius = 8.0,
    this.cornerSize = 40.0,
    this.containerColor = Colors.white,
    this.borderRadius = 16.0,
    this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        // 基础主容器
        Container(
          decoration: BoxDecoration(
            color: containerColor,
            borderRadius: BorderRadius.circular(borderRadius),
          ),
          padding: const EdgeInsets.all(16),
          child: child,
        ),
        // 左上角模糊层
        Positioned(
          top: -cornerSize / 2,
          left: -cornerSize / 2,
          child: ClipRRect(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(borderRadius)),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: blurRadius, sigmaY: blurRadius),
              child: Container(
                height: cornerSize,
                width: cornerSize,
                color: containerColor.withOpacity(0.1),
              ),
            ),
          ),
        ),
        // 右上角模糊层
        Positioned(
          top: -cornerSize / 2,
          right: -cornerSize / 2,
          child: ClipRRect(
            borderRadius: BorderRadius.only(topRight: Radius.circular(borderRadius)),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: blurRadius, sigmaY: blurRadius),
              child: Container(
                height: cornerSize,
                width: cornerSize,
                color: containerColor.withOpacity(0.1),
              ),
            ),
          ),
        ),
        // 左下角模糊层
        Positioned(
          bottom: -cornerSize / 2,
          left: -cornerSize / 2,
          child: ClipRRect(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(borderRadius)),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: blurRadius, sigmaY: blurRadius),
              child: Container(
                height: cornerSize,
                width: cornerSize,
                color: containerColor.withOpacity(0.1),
              ),
            ),
          ),
        ),
        // 右下角模糊层
        Positioned(
          bottom: -cornerSize / 2,
          right: -cornerSize / 2,
          child: ClipRRect(
            borderRadius: BorderRadius.only(bottomRight: Radius.circular(borderRadius)),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: blurRadius, sigmaY: blurRadius),
              child: Container(
                height: cornerSize,
                width: cornerSize,
                color: containerColor.withOpacity(0.1),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

参数调整说明：

• 修改blurRadius数值可以调整模糊效果的强度，数值越大模糊越明显
• 修改cornerSize可以调整边角模糊区域的覆盖范围
• borderRadius数值需要和主容器的圆角大小保持一致，避免出现视觉错位

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