使用flutter打造炫酷的list

使用了flutter一段时间，愈来愈喜欢flutter了，flutter比咱们想象中的强大。这篇文章介绍了怎么使用flutter来展现一个很漂亮的list，先看下效果图。

样式仍是很漂亮的，下面咱们一步一步完成这个小项目。

开发前准备

• 咱们会用到加载网络图片FadeInImage这么个widget，须要一个loading的icon，因此须要在pubspec.yaml里配置下静态资源，只有配置过的静态资源才能够在项目中使用

assets:
 - assets/images/
复制代码

• 须要mock一些假数据和一些经常使用的常量，因此专门建了个constant.dart来管理

colors  # 颜色
    data  # list的数据
    # ...
复制代码

appBar部分

• appBar须要透明的背景这样才能将后面的图片展现出来，看起来很像沉浸式。
• 须要将elevations设置为0，这样就能够取消安卓特有的阴影效果，下面是代码:

Scaffold(
    appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    title: Text(
        'flutter awesome list',
        style: TextStyle(
        color: Colors.white,
        ),
    ),
    ),
    body: HomeBody(),
);
复制代码

Banner部分

• 咱们须要使用Transform.translate()这个weidget来将Banner部分向上移动，让appBar所有展现在banner上面，这里给的offset为offset: Offset(0, -56)，56为appBar的高度
• 下面的斜切造型须要使用ClipPath()来完成，用法有点像canvas，代码以下：

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path p = Path();
    p.lineTo(size.width, 0.0);
    p.lineTo(size.width, size.height / 4.75);
    p.lineTo(0.0, size.height / 3.75);
    p.close();
    return p;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}
复制代码

• 用户信息的展现用的widget是ListTile和CircleAvatar，用法也比较简单，我直接贴代码了：

ListTile(
    leading: CircleAvatar(
    backgroundImage: NetworkImage(CONSTANT.userAvatar),
    ),
    title: Text(
    CONSTANT.userName,
    style: CONSTANT.defaultTextStyle,
    textScaleFactor: 1.5,
    ),
    subtitle: Text(
    CONSTANT.userProfile,
    style: CONSTANT.defaultTextStyle,
    ),
)
复制代码

列表展现部分

• 列表的展现使用的是ListView.builder()，两个必传参数itemCount和itemBuilder，前者控制列表的数量，后者控制item的展现，由于item的样式仍是比较多的，因此抽离成单独的StatelessWidget组件：AwesomeListItem
• 咱们用InkWell组件将AwesomeListItem包裹，InkWell是flutter自带的组件，这个组件的特色是点击的时候带有水墨绽放的效果。点击item的时候，咱们使用Navigator.push跳转到详情页面
• 图片的展现，咱们仍是使用的FadeInImage，这种渐入效果的用户体验仍是很不错的。而后再使用Hero()来包裹FadeInImage，这样能在页面跳转的时候提供图片之间的过渡动画，非常强大和炫酷

Hero(
    tag: index,
    child: FadeInImage(
        image: NetworkImage(data.image),
        fit: BoxFit.cover,
        placeholder: AssetImage('assets/images/loading.gif'),
    ),
)
复制代码

详情页面

最后就是详情页面的展现，这个页面并无写什么样式，展现了从列表页跳转过来时，图片的过渡效果，有兴趣的同窗能够丰富下页面的样式和内容

结尾

• 博客文章地址
• 文章中没有张贴所有代码，感兴趣的同窗能够看下源码xch1029/awesomelist
• 颜色生成工具 来自这里
• 图片 来自这里
• 受启发于 FlutterAwesomeList