Flutter网络Lottie动画缓存插件cache_lottie_network的使用

希望这个插件可以帮助我们将Lottie网络动画保存到本地存储。

插件目标

帮助我们在使用Lottie网络动画时保存动画字节数据。因此，当设备没有连接到WIFI或移动数据时，应用程序可以展示之前加载过的动画。

使用步骤

1. 设置你的Lottie URL（JSON格式）

例如：'https://cache_lottie_network.json'

2. 设置你的Widget

我建议你使用类似于“Circular Progress Indicator”或“SkeletonAvatar”的小部件。这些小部件会在以下情况下显示：

• 设备在加载动画前已经没有网络连接。
• 这个包的本地存储为空且没有网络连接。

3. 设置你的Keys

为什么需要设置Key？因为这个插件使用了本地存储，并且需要Keys！如果你使用这个插件多次，请确保不要使用相同的Keys。 例如：

CacheLottieNetwork(
  LottieUrl: "https://loremipsum.json",
  function: CircularProgressIndicator(),
  keys: "lottie1"
)

CacheLottieNetwork(
  LottieUrl: "https://loremipsum.json",
  function: CircularProgressIndicator(),
  keys: "lottie2"
)

完整示例Demo

import 'package:flutter/material.dart';
import 'package:cache_lottie_network/cache_lottie_network.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Lottie Animation Cache Demo')),
        body: Center(
          child: LottieAnimationExample(),
        ),
      ),
    );
  }
}

class LottieAnimationExample extends StatefulWidget {
  [@override](/user/override)
  _LottieAnimationExampleState createState() => _LottieAnimationExampleState();
}

class _LottieAnimationExampleState extends State<LottieAnimationExample> {
  // 设置你的Lottie URL
  final String lottieUrl = 'https://loremipsum.json';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 使用CircularProgressIndicator作为加载指示器
        CacheLottieNetwork(
          LottieUrl: lottieUrl,
          function: CircularProgressIndicator(),
          keys: "lottie1",
        ),
        SizedBox(height: 20),
        // 再次使用不同的Keys以避免冲突
        CacheLottieNetwork(
          LottieUrl: lottieUrl,
          function: CircularProgressIndicator(),
          keys: "lottie2",
        ),
      ],
    );
  }
}