flutter 毛玻璃效果(一)

• 简单的毛玻璃效果

  代码直接粘贴就可以使用

class MaoBoLiView extends StatelessWidget {
  const MaoBoLiView({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          ConstrainedBox(
              constraints: const BoxConstraints.expand(), 
              child: Image.network(
                'https://upload.jianshu.io/users/upload_avatars/1841040/bfc8d287-a36d-476c-b315-7868ea45aedf.jpg',
                fit: BoxFit.cover,
              )),
           ClipRect( 
              child: BackdropFilter(   
                filter: ImageFilter.blur(sigmaX: 6.0, sigmaY: 7.0), 
                child: Opacity( 
                  opacity: 0.7,
                  child: Container(
                    decoration: BoxDecoration(color:Colors.grey.shade200), 
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

效果如下：