Lottie的使用

1.Lottie

官方链接见https://pub-web.flutter-io.cn/packages/lottie

支持Android/iOS/linux/MacOS/Windows

2.pubspec.yaml添加依赖

1
2
3
4
5

  lottie: ^3.1.0

  assets:
    - images/
    - lottiefile/

注意把示例animation - 1710978871330.json文件添加到lottiefile目录下

3.示例

  • HiveWidget.dart
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import 'package:base_demo/common/hive_manage.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

  @override
  HiveWidgetState createState() => HiveWidgetState();
}

class HiveWidgetState extends State<HiveWidget> {
  String _name = '';
  int _age = 0;


  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('网络json文件播放Lottie动画示例'),
            SizedBox(
              width: 300, // 替换为适当的宽度
              height: 200, // 替换为适当的高度
              child: Lottie.network(
                  'https://lottie.host/818be078-1686-4e92-b663-251c4d97e4c0/qNnbLZil3p.json'),
            ),
            const Text('本地json文件播放Lottie动画示例'),
            SizedBox(
              width: 300, // 替换为适当的宽度
              height: 200, // 替换为适当的高度
              child: Lottie.asset('lottiefile/animation - 1710978871330.json',
                  onLoaded: (composition) {
                    debugPrint('composition:${composition.duration}');
                  }),
            )
          ],
        ));
  }
}

4.效果

image