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

案例效果: Flutter使用的版本 3.13.8,使用fvm管理版本。 加载动态地图示例,使用的是 lottie。

dart 复制代码
  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版本。

dart 复制代码
lottie: 2.7.0

加载文本特效使用的是 Shimmer

dart 复制代码
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版本

dart 复制代码
shimmer: 3.0.0

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

dart 复制代码
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),
      ),
    ),
  )
]),

完整源码在这里

相关推荐
Summer不秃3 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
sunly_3 小时前
Flutter:AnimatedSwitcher当子元素改变时,触发动画
flutter
AiFlutter3 小时前
Flutter封装Coap
flutter
旭日猎鹰9 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰9 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神9 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱21 小时前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart21 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
AiFlutter1 天前
Flutter通过 Coap发送组播
flutter