在 Flutter Widget 上绘制 Lottie 文件。 lottie 1.2.2

在 Flutter 上原生渲染 After Effects 动画。

入门

• 将此包下载为库

  • 依赖它 运行此命令

    $ flutter pub add lottie
    

  • 这将在您的包的 pubspec.yaml 文件中添加如下一行（并运行隐式 flutter pub get）

    dependencies:
       lottie: ^1.2.2
    

  • 现在在你的Dart代码中导入它，你可以使用

    import 'package:lottie/lottie.dart';
    

• 如何使用此包

  • 基本用法（以最简单的方式显示 Lottie 动画）

        // Load a Lottie file from your assets
        Expanded(
            child: Lottie.asset('assets/lottieJson/delivery.json'),
        ),
        // Load an animation and its images from a zip file
        Expanded(
            child: Lottie.asset('assets/lottieZip/mfood.zip'),
        ),
        // Load a Lottie file from a remote url
        Expanded(
            child: Container(
            width: MediaQuery.of(context).size.width,
            child: LottieBuilder.network(
                'https://assets4.lottiefiles.com/packages/lf20_q5pk6p1k.json'),
            ),
        ),
    

  • Lottie 组件接受与 Image 组件相同的参数，并且在控制其大小时具有相同的行为

      Lottie.asset(
          'assets/lottieJson/delivery.json',
          width: 200,
          height: 200,
          fit: BoxFit.fill,
      ),
  

• 预览

GitHub

查看 Github