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

案例效果：

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

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

ContainerbuildMapWidget(){returnContainer(
      height:360,
      padding:constEdgeInsets.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:constText('制定一个日程安排?',
    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:constEdgeInsets.all(8),),),),constSizedBox(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:constEdgeInsets.all(8),),),)]),

完整源码在这里