Flutter之毛玻璃/模糊效果

对图片的模糊处理
Flutter没有单独的模糊处理容器，需要部件层层叠加实现模糊效果

毛玻璃/模糊效果图.png

（图片如有侵权，请联系作者删除）

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

class FrostedGlassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            ConstrainedBox(
              constraints: BoxConstraints.expand(),
              child: Image.network(
                  'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg'),
            ),
            Center(
              child: ClipRect(  // 可裁切矩形
                child: BackdropFilter(  // 背景过滤器
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Opacity(
                    opacity: 0.5,
                    child: Container(
                      alignment: Alignment.center,
                      height: double.infinity,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: Colors.grey.shade500
                      ),
                      child: Text('Janise',style: Theme.of(context).textTheme.display3,),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

红色背景代码中已删除，可自行添加，
ClipRect 可裁切矩形
BackdropFilter 背景过滤器，其中blur方法中的sigmaX和sigmaY是模糊参数，Opacity为设置透明部件,

图层组成

模糊的面积大小取决于Container的大小，BackdropFilter背景过滤器中filter只对child有用。