Flutter动画加载插件lottie_loader的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter动画加载插件lottie_loader的使用

Lottie Loader

lottie_loader 是一个用于在 Flutter 应用中显示 Lottie 动画作为加载指示器的库。它支持从本地资源文件或网络 URL 加载 Lottie 动画。该包包括可自定义的覆盖层和一个简单的控制器来管理加载指示器的可见性。

特性

  • 可以从本地资产文件或网络 URL 显示 Lottie 动画。
  • 支持具有可配置颜色和透明度的覆盖层。
  • 使用 LoaderController 轻松管理加载指示器的可见性。
  • 可配置加载指示器动画的宽度和高度。

安装

首先，在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  lottie: ^2.3.2
  lottie_loader: ^0.0.3

然后在 Dart 文件中导入 lottie_loader 包：

import 'package:lottie_loader/lottie_loader.dart';

使用示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 lottie_loader：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Lottie Loader Example',
      home: HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lottie Loader Example')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示加载指示器
            LoaderOverlay.show(
              context,
              lottieAnimationPath: 'assets/Animation - 1734834675750.json', // 本地资源路径
              isNetwork: false, // 是否为网络路径
              width: 300, // 动画宽度
              height: 300, // 动画高度
              overlayOpacity: 0.6, // 覆盖层透明度
              overlayColor: Colors.black // 覆盖层颜色
            );

            // 模拟耗时操作
            await Future.delayed(const Duration(seconds: 3));

            // 隐藏加载指示器
            LoaderOverlay.hide();
          },
          child: const Text('Show Loader'),
        ),
      ),
    );
  }
}

更多关于Flutter动画加载插件lottie_loader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画加载插件lottie_loader的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用lottie_loader插件来加载和播放Lottie动画的示例代码。lottie_loader插件允许你在Flutter应用中轻松集成Lottie动画。

首先，确保你已经在pubspec.yaml文件中添加了lottie依赖：

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.2.1  # 确保使用最新版本

然后运行flutter pub get来安装依赖。

接下来，我们来看一个完整的示例，展示如何在Flutter中使用Lottie动画。

1. 创建一个新的Flutter项目

如果你还没有一个Flutter项目，可以使用以下命令创建一个新的项目：

flutter create my_lottie_app
cd my_lottie_app

2. 在项目中添加Lottie动画

假设你有一个名为animation.json的Lottie动画文件，你需要将它放在assets文件夹中。如果assets文件夹不存在，可以手动创建一个。

目录结构应如下所示：

my_lottie_app/
├── android/
├── ios/
├── assets/
│   └── animation.json
├── lib/
│   └── main.dart
├── pubspec.yaml
└── ...

在pubspec.yaml文件中，添加你的Lottie动画文件到assets部分：

flutter:
  assets:
    - assets/animation.json

3. 在main.dart文件中加载和播放Lottie动画

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lottie Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lottie Animation Demo'),
        ),
        body: Center(
          child: LottieBuilder.builder(
            filename: 'assets/animation.json',
            width: 300,
            height: 300,
            fit: BoxFit.cover,
            controller: null,  // 如果你需要控制动画，可以传递一个AnimationController
            loop: true,       // 是否循环播放
            reverse: false,    // 是否反向播放
            // 你可以传递其他参数来控制动画行为
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了LottieBuilder.builder方法来加载和显示Lottie动画。你可以通过filename参数指定动画文件的路径，width和height参数设置动画的尺寸，fit参数控制动画如何适应给定的尺寸，loop和reverse参数控制动画的播放行为。

4. 运行你的应用

使用以下命令运行你的Flutter应用：

flutter run

现在你应该能在你的应用中看到加载和播放的Lottie动画。

希望这个示例代码能够帮助你理解如何在Flutter中使用lottie_loader（实际上使用的是lottie插件）来加载和播放Lottie动画。如果你有任何其他问题，欢迎继续提问！

回到顶部