【Flutter】Shimmer流光效果

67 阅读1分钟

前言

在实际项目中,经常会在加载数据以及等待时添加动态效果,可提升用户体验感。在此可以使用shimmer库,该库可以作用在列表、安装、文本等,使用简单便捷。

  • 数据还没有加载完时,等待页面展示流光效果,提示用户在动态加载。
  • 可以制作如滑动解锁效果。
  • 也可以作为临时占位符使用,如轮播图的骨架屏。

安装

flutter pub add shimmer

使用

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,         // 基础颜色
    highlightColor: Colors.yellow, // 高亮颜色
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);