Flutter Reusable Lottie Animations技巧

目录
  • 正文
  • 封装相关加载数据使用的lottie动画
    • 测试一下

正文

你是否想要在app里面新增一些炫酷的动画，但是呢？虽然Flutter提供了很多的动画，但是自己绘制吧，要么效果调整上过于耗费时间了，要么效果不尽人意。

专业的事情交给专业的人，如果动画是设计师提供并且能拿来使用，那就太好了！！！

曾经使用过gif，现在发现lottie动画，太香了～

封装相关加载数据使用的lottie动画

下面是我封装的有关加载数据使用的lottie动画

用关键值在枚举中定义动画，每个值都是磁盘上动画文件的名字。

enum LottieAnimation {
    dataNotFound(name: 'data_not_found'),
    empty(name: 'empty'),
    loading(mame: 'loading'),
    error(name: 'error'),
    smallError(name: 'small_error');
    final String name;
    const LottieAnimation({
        required this.name,
    });
}

创建一个基类,所有其他动画类都从该基类派生。这个类完全负责使用磁盘上的assets来呈现lottie动画。

在build方法里面，我们通过Lottie.asset返回一个实际的小部件。

class LottieAnimationView extends StatelessWidget {
    final LottieAnimation animation;
    final bool repeat;
    final bool reverse;
    const LottieAnimationView({
        super.key,
        required this.animation,
        this.repeat = true,
        this.reverse = false,
    });
    @override
    Widget build(BuildContext context) => Lottie.asset(
        animation.fullPath,
        reverse: reverse,
        repeat: repeat,
    );
}

给LottieAnimation增加一个拓展，获取文件全路径

extension GetFullPath on LottieAnimation {
    String get fullPath => 'assets/animationss/$name.json';
}

然后定义子类，只把lottie动画的名字传递给父类，你就可以开始是了！

class EmptyContentsAnimationView extends LottieAnimationView {
    const EmptyContentssAnimationView({super.key}) : super(
        animation: LottieAnimation.empty,
    );
}

测试一下

class HomePage extends StatelessWidget {
    const HomePage({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Home Page'),
            ),
            body: const EmptyCOntentsAnimationView(),
        );
    }
}

搞定，接下来我得研究研究 如何制作一个lottie动画了，更多关于Flutter Lottie Animations的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Presenting Streams in Flutter

    Presenting Streams in Flutter

    目录 如果我想要做一个组件,每秒更新时间, 最开始的想法就是使用StatefulWidget, 然后每秒调用一下setState方法刷新数据 能不能换成使用StatelessWidget呢? 可以的,不过用Stream来实现. 先创建一个AsyncSnapshot的拓展 extends PresentAsyncSnapshot<E> on AsyncSnapshot<E> { Widget present({ required BuildContext context, Widge

  • Flutter组件生命周期和App生命周期示例解析

    目录 引言 无状态组件(StatelessWidget) 有状态组件(StatefulWidget) StatefulWidget生命周期详细分析 1. createState 2. initState 3. didChangeDependencies 4. build 5. didUpdateWidget 6. deactivate 7. dispose 8. reassemble App生命周期 结束语 引言 在Flutter开发中,所有的组件和页面都继承自Widget,所以探索页面的生命周

  • Flutter Widget之NavigationBar使用详解

    目录 正文 background 正文 这是一个和时间一样古老的故事.您的应用程序有三到五个主要内容区域,您的用户应该能够在任何屏幕之间切换. 那么,在这种情况下,请查看NavigationBar. 现在,您可能会想,“底部们有导航栏吗?,这个新的导航栏小部件有什么特别之处?“ 不同之处在于BoottomNavigationBar使用Material 2设计系统,而NavigationBar具有新的Material 3外观和感觉. 例如,药丸形状,它以对比色指示活动的目的地. 要启动并运行,为N

  • flutter中的布局和响应式app方法示例

    目录 flutter中的布局 (使用)放置一个组件 app 本身就是个组件 Material apps 和 Non-Material apps 自适应和响应式 flutter实现响应式的方法 小结 flutter中的布局 flutter布局机制的核心是组件.在flutter中,几乎所有的东西都是组件,布局模型也不例外.图片,Icon, 文本等等,我们在flutter客户端中看到的所有内容都是组件.我们看不到的东西,比如:rows,columns,等等等等也都是组件. 我们将简单的组件组合在一起,

  • Flutter添加页面过渡动画实现步骤

    Flutter添加页面过渡动画实现步骤

    目录 正文 使用插件探索不同的转换 步骤 1: 在 pubspec.yaml 中添加页面动画转换 步骤 2: 在 PageOne 上导入库 步骤3.添加以下导航代码行 其他类型转换的完整代码: 总结 正文 大家好,在这篇文章中,我们将学习如何添加动画,同时从一个页面到其他在 Flutter.我们将覆盖不同类型的动画和实现基本动画 Flutter 使用包页动画过渡. 动画在提升用户体验方面起着至关重要的作用,但动画到底是什么呢? 设计语言,例如 Material,定义了在路线(或屏幕)之间转换时的

  • Flutter在项目中使用动画不使用包实现详解

    目录 前言 正文 1 按下按钮柔软的感觉 2 想要一个像 Instagram 一样的喜欢按钮吗? 3 动画页面过渡 4 动画文字 5 更改/闪动文本样式 前言 动画对于 web 和移动应用程序都非常重要.但是在移动应用程序中不应该使用夸张的动画.简单但是很多动画使你的应用程序更好用.以至于当你点击一个按钮时,一种平滑的感觉或者页面过渡都会影响到你. 正文 1 按下按钮柔软的感觉 class _CustomButtonState extends State<CustomButton> with

  • 使用Flutter 构建Web应用逻辑解析

    目录 一.起源 二.渲染逻辑 三.打包处理 四.配置开发环境 测试应用 结束语 一.起源 Flutter 的起源就很有意思,大家都知道早期 Flutter 最先支持的平台是 Android 和 iOS,至今最核心的维护平台依然是 Android 和 iOS,但是事实上Flutter 来源于前端 Chrome 团队.另外前端的同学应该知道,Dart 起初也是为了 Web 而生,事实上 Dart 诞生至今也有 10 年了,所以可以说 Flutter 其实充满了 Web 的基因. 二.渲染逻辑 首先

  • Flutter Reusable Lottie Animations技巧

    目录 正文 封装相关加载数据使用的lottie动画 测试一下 正文 你是否想要在app里面新增一些炫酷的动画,但是呢?虽然Flutter提供了很多的动画,但是自己绘制吧,要么效果调整上过于耗费时间了,要么效果不尽人意. 专业的事情交给专业的人,如果动画是设计师提供并且能拿来使用,那就太好了!!! 曾经使用过gif,现在发现lottie动画,太香了- 封装相关加载数据使用的lottie动画 下面是我封装的有关加载数据使用的lottie动画 用关键值在枚举中定义动画,每个值都是磁盘上动画文件的名字.

  • vue.js样式布局Flutter业务开发常用技巧

    阴影样式中flutter和css对应关系 UI给出的css样式 width: 75px; height: 75px; background-color: rgba(255, 255, 255, 1); border-radius: 4px; box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08); flutter样式布局 Container( constraints: BoxConstraints.tightFor(width: 75, height:

  • SafeList in Flutter and Dart小技巧

    目录 正文 封装一个SafeList 测试一下 正文 最近遇到一些列表的错误,例如,列表为空时直接调用方法会报错. 一般都会在使用前判断列表是否为空,再使用. 虽然Flutter提供了Null safety,但是用的时候还是会忘记或者忽略,直接使用'!'来跳过非空判断. 封装一个SafeList 代码如下: class SafeList<T> extends ListBase<T> { final List<T> _list; final T defaultValue;

  • Flutter中使用setState时的6个简单技巧总结

    Flutter中使用setState时的6个简单技巧总结

    目录 前言 setState 有什么用? 技巧 1:保持## widgets小! 技巧 2:不要在构建方法中调用 setState 技巧 3:不要在 initState 方法中调用 setState 技巧4:setState()和setState(...)是相等的 技巧 5:setState(...) 代码必须很小 技巧 6:setState(...) 代码不能是异步的 结束 前言 setState 函数是在 Flutter 应用程序中管理状态的最基本方法.以下是一些保持应用可维护性的最佳实践.

  • Android开发中Flutter组件实用技巧

    Android开发中Flutter组件实用技巧

    目录 正文 简化 Assert 管理 更容易 imports 从按钮上移除飞溅效果 更简单的平台小工具 可见性小工具 正文 今天我将向您展示 4 个非常有用的 Flutter 技巧,您可以立即应用到您的项目.我不会向您展示任何包或扩展,就像我通常做的那样,但是非常简单,但是非常有用的提示! 简化 Assert 管理 管理 Assert 可能非常困难.如果你想在你的应用程序中多次使用一个图像,你必须一次又一次地指定路径.但是有一个简单得多的解决方案.创建一个 App Assets 类,用于存储所有

  • Android开发组件flutter的20个常用技巧示例总结

    Android开发组件flutter的20个常用技巧示例总结

    目录 1.map遍历快速实现边距,文字自适应改变大小 2.使用SafeArea 添加边距 3.布局思路 4.获取当前屏幕的大小 5.文本溢出显示省略号 6.一个圆角带搜索icon的搜索框案例 7.修改按钮的背景色 8.tab切换实例 9.点击事件组件点击空白区域不触发点击 10.使用主题色 11.往安卓模拟器中传图片 12.控制text的最大行数显示影藏文字 13.去掉默认的抽屉图标 14.图片占满屏 15.倒计时 16.固定底部 17.添加阴影 18.隐藏键盘 19.获取父级组件大小 20.点

  • Lottie动画前端开发使用技巧

    Lottie动画前端开发使用技巧

    目录 一.为什么会有Lottie动画呢? 二.Lottie介绍 三.Lottie常见属性和方法 四.封装Lottie - React Hooks版 五.Lottie组件的引入与调用 结语 一.为什么会有Lottie动画呢? 在前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾.一般来说,页面中包含的动画效果越复杂,前端程序员在实现时需要的工期成本越大,尤其是在官网.大促活动.活动拉新等包含巨多动画效果的场景中,动画实现需要的时间占据了大部分工期时

  • Flutter Recovering Stream Errors小技巧

    目录 正文 简单封装 override bind() 测试一下 正文 你是否遇到过,出现异常的时候也需要给一个默认值,让程序可以继续运行下去? 一般的做法就是 一个达到try catch,然后在finally里面做一个处理. 今天我尝试换一个思路,简单的封装一下 简单封装 首先定义一个stream转换器,为了处理error handler. 如果onError不为空,就将出现错误添加到stream中 class StreamErrorHandle<T> extends StreamTransf

  • Flutter TV Android端开发技巧详细教程

    目录 前言 开发思路 先上效果 开发细节 使用RawKeyboardListener Provider层对事件进行处理 注意 总结 文件参考 TV keyCode详解 前言 最近公司有了新的业务,把现有Flutter Android项目应用到TV上去,这不,Asscre的活就来了. 本文详细说明Flutter for TV的两种实现方式,能力有限,不足之处欢迎指点,哈哈哈 开发思路 在开发之前,我们先设定一下我们的思路. 即,如何对原有程序代码侵入式最小.性能最佳.可玩性更高做出设定. 那么,通

  • Flutter开发技巧ListView去除水波纹方法示例

    正文 ScrollConfiguration( behavior: NoScrollBehaviorWidget(), child: ListView( ...... ...... ), ), 调用ScrollConfiguration官方类,实现behavior NoScrollBehaviorWidget用于去除水波纹的自定义Widget import 'package:flutter/material.dart'; /// 去除listview水印 /// ScrollConfigurat

随机推荐