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有用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容