Flutter——實現閃爍效果

我們在加載列表的時候，數據沒請求下來之前，一般會有個加載對話框的交互，也有閃爍骨架屏交互，下面我們在flutter中實現閃爍骨架屏的交互。

1、添加依賴

shimmer: ^1.0.0

2、獲取依賴包

flutter pub get

3、導入需要使用的文件中

import 'package:shimmer/shimmer.dart';

4、使用

class MyShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Shimmer.fromColors(
        baseColor: Colors.grey,
        highlightColor: Colors.white,
        child: Column(
          children: <Widget>[
            CoinRankingListItemSkeleton(),
            CoinRankingListItemSkeleton(),
            CoinRankingListItemSkeleton(),
            CoinRankingListItemSkeleton(),
            CoinRankingListItemSkeleton(),
            CoinRankingListItemSkeleton(),

          ],
        ),
      ),
    );
  }
}

class CoinRankingListItemSkeleton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
      height: 80.0,
      child: Row(
        children: <Widget>[
          Container(width: 100.0, height: 100.0, color: Colors.grey),
          SizedBox(width: 10.0),
          Expanded(
              child: Container(
            child: Column(
              children: <Widget>[
                Container(height: 10.0, color: Colors.grey),
                SizedBox(height: 10),
                Container(height: 10.0, color: Colors.grey),
                SizedBox(height: 10),
                Container(height: 10.0, color: Colors.grey),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(width:50.0,height: 10.0, color: Colors.grey),
                    Container(width:70.0,height: 10.0, color: Colors.grey),
                    Container(width:20.0,height: 10.0, color: Colors.grey),
                  ],
                )

              ],
            ),
          ))
        ],
      ),
    );
  }
}

5、運行查看效果

 

最後

如果你看到了這裏，覺得文章寫得不錯就給個讚唄！歡迎大家評論討論！如果你覺得那裏值得改進的，請給我留言。一定會認真查詢，修正不足，定期免費分享技術乾貨。感興趣的小夥伴可以點一下關注哦。謝謝！