Flutter动画加载插件 flare_loading 的使用

flare_loading 是一个基于 Flare 动画的加载小部件，允许你创建自定义的加载小部件或对话框。如果你使用的是 Rive 而不是 Flare，请使用 rive_loading 插件。

安装

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

dependencies:
  flare_loading: ^<latest_version>

然后运行 flutter pub get 来安装该插件。

使用方法

基本用法

FlareLoading(
  name: 'animation.flr', 
  startAnimation: 'intro',
  loopAnimation: 'circle',
  endAnimation: 'end',
);

参数说明：

• name: Flare 动画的路径和名称。
• until: 返回一个 Future 的回调函数，用于处理初始化。
• isLoading: 如果你想通过布尔值管理加载状态，可以使用这个参数作为 until 的替代。
• loopAnimation: 循环播放的动画名称。
• endAnimation: 当 until 完成或 isLoading 为 false 时播放的结束动画。
• startAnimation: 开始时播放的动画名称。
• height: 强制设置 Flare 动画的高度，默认情况下它会占据所有可用空间。
• width: 强制设置 Flare 动画的宽度，默认情况下它会占据所有可用空间。
• alignment: Flare 动画的对齐方式，默认居中。
• onSuccess: 动画完成后且 isLoading 为 false 或 until 完成时调用的回调函数。
• onError: 当 until 失败时调用的回调函数。

可用模式

只有一个动画

如果只需要显示一个动画并停留在最后一帧，则只需指定 startAnimation：

FlareLoading(
  name: 'loading.flr',
  startAnimation: 'Loading',
  width: 200,
  height: 200,
);

开始和循环动画

如果你的动画有一个介绍和一个循环状态，则需要指定 startAnimation 和 loopAnimation：

FlareLoading(
  name: 'loading.flr',
  startAnimation: 'Intro',
  loopAnimation: 'Looping',
  width: 200,
  height: 200,
);

结束和循环动画

如果你的动画有一个结束和一个循环状态，则需要指定 endAnimation 和 loopAnimation：

FlareLoading(
  name: 'loading.flr',
  endAnimation: 'Complete',
  loopAnimation: 'Looping',
  width: 200,
  height: 200,
);

开始和结束动画

如果你的动画有一个介绍和一个结束状态，并且应该停留在最后一帧，则只需指定 startAnimation 和 endAnimation：

FlareLoading(
  name: 'loading.flr',
  startAnimation: 'Intro',
  endAnimation: 'Complete',
  width: 200,
  height: 200,
);

开始、结束和循环动画

如果你的动画有一个介绍、一个结束和一个循环状态，则需要指定 startAnimation、endAnimation 和 loopAnimation：

FlareLoading(
  name: 'loading.flr',
  startAnimation: 'Intro',
  endAnimation: 'Complete',
  loopAnimation: 'Looping',
  width: 200,
  height: 200,
);

示例 Demo

下面是一个完整的示例代码，展示了如何使用 flare_loading 插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FlareLoading(
            name: 'assets/loading.flr',
            loopAnimation: 'Loading',
            startAnimation: 'Loading',
            endAnimation: 'Complete',
            width: 200,
            height: 200,
            fit: BoxFit.fill,
            until: () => Future.delayed(Duration(seconds: 5)),
            onSuccess: (_) {
              print('Finished');
            },
            onError: (err, stack) {
              print(err);
            },
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: FlareLoading(
                    name: 'assets/loading.flr',
                    loopAnimation: 'Loading',
                    endAnimation: 'Complete',
                    isLoading: _isLoading,
                    onSuccess: (_) {
                      print('Finished');
                    },
                    onError: (err, stack) {
                      print(err);
                    },
                  ),
                ),
                ElevatedButton(
                  child: Text('Toggle loading'),
                  onPressed: () => setState(() {
                    _isLoading = !_isLoading;
                  }),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}