Flutter图片蒙层背景的实现

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

一、上效果图

二、上原理

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

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

三、上代码

//图片蒙层背景的实现
Stack(
  children: <Widget>[
    //图片加载loading
    Center(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。