使用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