【原】Flutter案例日程安排首页效果 Lottie动画与Shimmer实现的微光效果

案例效果：

Flutter使用的版本 3.13.8，使用fvm管理版本。

加载动态地图示例，使用的是 lottie。

  Container buildMapWidget() {    return Container(      height: 360,      padding: const EdgeInsets.only(top: 100, right: 40, left: 40, bottom: 50),      decoration: BoxDecoration(color: Colors.red.shade100),      width: double.infinity,      child: Lottie.asset("assets/88146-event-venue.json"),    );  }

Lottie是一个适用于Android和iOS的移动库，它解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备上原生渲染它们！

这个存储库是纯Dart中Lottie安卓库的非官方转换。它适用于Android、iOS、macOS、linux、windows和web。

本文章使用的 lottie 库是 2.7.0版本。

lottie: 2.7.0

加载文本特效使用的是 Shimmer

Shimmer.fromColors(  baseColor: Colors.black,  highlightColor: Colors.red,  child: const Text(    '制定一个日程安排?',    textAlign: TextAlign.center,    style: TextStyle(      fontSize: 32.0,      fontWeight: FontWeight.bold,    ),  ),)

Shimmer库，用于在Flutter项目中添加微光效果的一个包，本项目使用的是3.0.0版本

shimmer: 3.0.0

加载中的占位使用的也是 Shimmer 

Row(children: [  Expanded(    child: Shimmer.fromColors(      baseColor: Colors.grey.shade200,      highlightColor: Colors.grey.shade300,      child: Container(        width: 180,        decoration: BoxDecoration(            color: Colors.white,            borderRadius: BorderRadius.circular(3)),        padding: const EdgeInsets.all(8),      ),    ),  ),  const SizedBox(width: 10),  Expanded(    child: Shimmer.fromColors(      baseColor: Colors.grey.shade200,      highlightColor: Colors.grey.shade300,      child: Container(        width: 100,        decoration: BoxDecoration(            color: Colors.white,            borderRadius: BorderRadius.circular(3)),        padding: const EdgeInsets.all(8),      ),    ),  )]),

完整源码，大家可以点击查看原文查看