Flutter图片蒙层背景的实现

为了使FlutterGithub APP项目详情页更酷炫，在头部加了一个图片蒙层背景，先上效果图。

一、上效果图

二、上原理

其实很简单，由一个Stack堆叠而成，该结构可以分为三层：

1. 最底层：放置一张背景图。
2. 中间层：使用APP当前主题色做一个透明处理，然后覆盖。(为了使整体看起来更和谐)
3. 最顶层：对背景做一个高斯模糊处理，然后放置顶层元素。

三、上代码

//图片蒙层背景的实现
Stack(children: <Widget>[//图片加载loadingCenter(child: new CircularProgressIndicator()),//第一层是背景图Container(width: double.infinity,child: FadeInImage.memoryNetwork(placeholder: kTransparentImage,image: personInfo.avatar_url,fit: BoxFit.cover),),//第二层是当前主题色的半透明处理Container(color: Theme.of(context).primaryColor.withOpacity(0.5),width: double.infinity,),//第三层是对前两层背景做高斯模糊处理，然后显示上面的内容ClipRRect(child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),child: Container(width: double.infinity,height: 200,child: _headPersonInfo(personInfo),  //背景上面的其他组件),),),],
),

四、注意点

BackDropFilter是Flutter提供的实现高斯模糊的过滤器组件，如果直接使用，会发现整个应用程序页面都是模糊的，并不是我们想要的效果。查看BackDropFilter的源码注释如下：

/// A widget that applies a filter to the existing painted content and then
/// paints [child].
///
/// The filter will be applied to all the area within its parent or ancestor
/// widget's clip. If there's no clip, the filter will be applied to the full
/// screen.
///......
class BackdropFilter extends SingleChildRenderObjectWidget {
...........

注释意思大致是如果没有剪辑，过滤器将应用于整个屏幕。
所以要使用ClipRRect或者其他裁剪组件包裹BackDropFilter使用。

附录： BackDropFilter的使用技巧：Flutter BackdropFilter 实现高斯模糊

五、项目介绍

项目地址：用flutter实现的一款界面精美的Github App
介绍：用Flutter实现的一款界面精美、功能较全、体验良好的Github客户端。支持多语言、换肤等功能。代码简单易懂且有充分的注释，很适用于学习Flutter。