flutter 背景图片毛玻璃效果_flutter 毛玻璃效果

1、引入图片滤镜文件
		import 'dart:ui';
		
2、在Stack组件中堆叠，产生图标毛玻璃效果
	若不使用图片毛玻璃，仅仅是背景模糊透明，用Opacity组件就可实现
		第一个组件为图片
		第二个组件为图片产生毛玻璃效果，并设置图片上的组件
			
		BackdropFilter( 背景过滤器
             filter: ImageFilter.blur(sigmaX:100.0,sigmaY:5.0),   处理图片的模糊度，在最外层包裹截切组件ClipRect,可以将图片的模糊区域限制在子组件的大小区域中
             child: 组件
         )
1
2
3
4
5
6
7
8
9
10
11
12

效果图:

代码示例:

Container(
      // width: double.infinity,
       child:Stack(
         children: <Widget>[
           ConstrainedBox( //约束盒子,添加额外的约束条件到子组件上
              constraints: BoxConstraints.expand(),  //随着子元素扩展
              child: 
              Image.asset("images/2.0x/钢铁侠4.jpg"),

           ),
          
           Center(
             child: ClipRect( //使图片模糊区域仅在子组件区域中
               child: BackdropFilter( //背景过滤器
                   filter: ImageFilter.blur(sigmaX:5.0,sigmaY:5.0),   //设置图片模糊度
                   child: Opacity( //悬浮的内容
                     opacity: 0.5,
                     child: Container(
                       width: 200.0,
                       height: 200.0,
                       color:Colors.grey.shade200 ,
                       child: Center(
                         child: Text("大Jeff"),
                       ),
                     ),
                   ),
               ),
             ),
           )
         ],
       ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31