• 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"),
        );
      }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

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

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

    lottie: 2.7.0
    
    • 1

    加载文本特效使用的是 Shimmer

    Shimmer.fromColors(
      baseColor: Colors.black,
      highlightColor: Colors.red,
      child: const Text(
        '制定一个日程安排?',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 32.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    )
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

    shimmer: 3.0.0
    
    • 1

    加载中的占位使用的也是 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),
          ),
        ),
      )
    ]),
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    完整源码在这里

  • 相关阅读:
    html+css实战193-内容-布局
    2022华数杯B题论文思路分析+完整代码(水下机器人组装计划)
    REF543KB127AAAA 支持整个企业的有效扩展规划和分析
    STM32 内部ADC方式_解释(AN2834)
    半导体制造工艺之分类浅述
    pid 电机控制算法
    uni-app(三):离线打包与插件引用(Android)
    Apache解析漏洞复现
    Kubectl 的使用——k8s陈述式资源管理
    比 poi导入导出更好用的 EasyExcel使用小结
  • 原文地址:https://blog.csdn.net/zl18603543572/article/details/134322228