Flutter中如何在BackdropFilter.blur内创建100×100的清晰区域

要实现这个需求，核心是通过Stack叠加图层，精准控制指定区域的模糊效果，让底层内容在目标区域清晰显示。以下是完整可运行的实现代码：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: [
            // 底层内容：可替换为任意你需要的组件（文本、布局、图片等）
            const Image(
              image: NetworkImage('https://picsum.photos/800/600'),
              fit: BoxFit.cover,
            ),
            // 全屏模糊层
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
              child: Container(color: Colors.black.withOpacity(0.1)),
            ),
            // 100×100的无模糊清晰区域（这里居中定位）
            Positioned(
              left: (MediaQuery.of(context).size.width - 100) / 2,
              top: (MediaQuery.of(context).size.height - 100) / 2,
              child: Container(
                width: 100,
                height: 100,
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
                  child: Container(color: Colors.transparent),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键细节： #

• Stack的fit: StackFit.expand确保模糊层铺满整个父容器范围
• 模糊层的sigmaX/sigmaY控制模糊强度，数值越大模糊效果越明显，可按需调整
• 清晰区域通过Positioned的left/top参数定位，修改这两个值可以调整清晰区域的位置
• 内部嵌套的BackdropFilter设置模糊参数为0，直接透出底层的清晰内容，兼容性比混合模式清除更好

内容的提问来源于stack exchange，提问作者Чечил Крым