Flutter动画加载插件dotlottie_loader的使用

dotLottieLoader for Flutter

dotLottieLoader 是一个帮助下载和解压缩 .lottie 文件的库，可以访问动画以及包含在包中的资源。这个仓库是基于 dotottieloader-android 库的纯 Dart 版本。

它适用于 Android、iOS、macOS、Linux、Windows 和 Web。

安装

flutter pub add dotlottie_loader

还需要安装 lottie 包来渲染动画。

使用

从应用资源加载

DotLottieLoader.fromAsset("assets/anim2.lottie",
    frameBuilder: (BuildContext ctx, DotLottie? dotlottie) {
  if (dotlottie != null) {
    return Lottie.memory(dotlottie.animations.values.single);
  } else {
    return Container();
  }
}),

从网络加载

DotLottieLoader.fromNetwork(
  "https://github.com/sartajroshan/dotlottieloader-flutter/raw/master/example/assets/animation.lottie",
  frameBuilder: (ctx, dotlottie) {
    if (dotlottie != null) {
      return Lottie.memory(dotlottie!.animations.values.single);
    } else {
      return Container();
    }
  },
  errorBuilder: (ctx, e, s) {
    print(s);
    return Text(e.toString());
  },
),

带有图片的加载

DotLottieLoader.fromAsset(
  "assets/animation_external_image.lottie",
  frameBuilder: (ctx, dotlottie) {
    if (dotlottie != null) {
      return Lottie.memory(dotlottie.animations.values.single,
          imageProviderFactory: (asset) {
        return MemoryImage(dotlottie.images[asset.fileName]!);
      });
    } else {
      return Container();
    }
  },
),

DotLottie 数据结构

class ManifestAnimation {
  String id;
  double speed;
  String? themeColor;
  bool loop;

  ManifestAnimation(this.id, this.speed, this.themeColor, this.loop);
}

class Manifest {
  String? generator, author;
  int? revision;
  String? version;
  late List<ManifestAnimation> animations;
  Map<String, dynamic>? custom;

  Manifest(this.generator, this.author, this.revision, this.version,
      this.animations, this.custom);
}

class DotLottie {
  Manifest? manifest;
  Map<String, Uint8List> animations;
  Map<String, Uint8List> images;

  DotLottie(this.manifest, this.animations, this.images);
}

查看更多文档

更多信息请参考 dotlottie.io。

示例代码

以下是一个完整的示例代码，展示了如何使用 dotlottie_loader 加载不同类型的 Lottie 动画：

import 'package:dotlottie_loader/dotlottie_loader.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DotLottieLoader Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("DotLottie Loader"),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              /// 简单的 .Lottie 动画
              DotLottieLoader.fromAsset("assets/animation.lottie",
                  frameBuilder: (ctx, dotlottie) {
                if (dotlottie != null) {
                  return Lottie.memory(dotlottie.animations.values.single);
                } else {
                  return Container();
                }
              }),
              const SizedBox(height: 20),

              /// 从网络加载 .Lottie 动画
              DotLottieLoader.fromNetwork(
                "https://github.com/sartajroshan/dotlottieloader-flutter/raw/master/example/assets/animation.lottie",
                frameBuilder: (ctx, dotlottie) {
                  if (dotlottie != null) {
                    return Lottie.memory(
                      dotlottie.animations.values.single,
                    );
                  } else {
                    return Container();
                  }
                },
                errorBuilder: (ctx, e, s) {
                  return Text(e.toString());
                },
              ),
              const SizedBox(height: 20),

              /// 带外部图片的 .lottie 动画
              DotLottieLoader.fromAsset(
                  "assets/animation_external_image.lottie",
                  frameBuilder: (ctx, dotlottie) {
                if (dotlottie != null) {
                  return Lottie.memory(dotlottie.animations.values.single,
                      imageProviderFactory: (asset) {
                    return MemoryImage(dotlottie.images[asset.fileName]!);
                  });
                } else {
                  return Container();
                }
              }),
              const SizedBox(height: 20),

              /// 带内联图片的 .lottie 动画
              DotLottieLoader.fromAsset("assets/animation_inline_image.lottie",
                  frameBuilder: (ctx, dotlottie) {
                if (dotlottie != null) {
                  return Lottie.memory(dotlottie.animations.values.single,
                      imageProviderFactory: (asset) {
                    return MemoryImage(dotlottie.images[asset.fileName]!);
                  });
                } else {
                  return Container();
                }
              }),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何在 Flutter 应用中使用 dotlottie_loader 插件加载和显示不同来源的 Lottie 动画。希望这些信息对你有所帮助！