Flutter加载动画插件loading_animations的使用

Flutter Loading Animations 是一个简单且高度可定制的加载动画集合，适用于Flutter项目。它提供了多种类型的加载动画，如翻转、旋转、双翻转、弹跳网格等。

安装

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

dependencies:
  loading_animations: "^2.1.0"

然后，在Dart文件中导入该库：

import 'package:loading_animations/loading_animations.dart';

使用方法

选择你喜欢的加载动画类型，并调用相应的函数。以下是几种常见的加载动画及其调用方式：

Flipping（翻转）

LoadingFlipping.circle()
LoadingFlipping.square()

Rotating（旋转）

LoadingRotating.square()

Double Flipping（双翻转）

LoadingDoubleFlipping.circle()
LoadingDoubleFlipping.square()

Bouncing Grid（弹跳网格）

LoadingBouncingGrid.circle()
LoadingBouncingGrid.square()

Filling（填充）

LoadingFilling.square()

Fading Line（渐隐线）

LoadingFadingLine.circle()
LoadingFadingLine.square()

Bouncing Line（弹跳线）

LoadingBouncingLine.circle()
LoadingBouncingLine.square()

Jumping Line（跳跃线）

LoadingJumpingLine.circle()
LoadingJumpingLine.square()

Bumping Line（碰撞线）

LoadingBumpingLine.circle()
LoadingBumpingLine.square()

你可以直接使用默认参数调用这些动画，也可以根据需要自定义它们。例如：

// 默认参数
LoadingFlipping.circle(
  color: Colors.blue,
);

// 自定义参数
LoadingFlipping.square(
  borderColor: Colors.cyan,
  size: 30.0,
);

// 更多自定义
LoadingFlipping.circle(
  borderColor: Colors.cyan,
  borderSize: 3.0,
  size: 30.0,
  backgroundColor: Colors.cyanAccent,
  duration: Duration(milliseconds: 500),
);

示例代码

以下是一个完整的示例代码，展示了如何在一个Flutter应用程序中使用loading_animations插件来创建一个包含多种加载动画的页面。这个例子创建了一个包含16个Tab的界面，每个Tab展示一种不同的加载动画。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Animations',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: DefaultTabController(
        length: 16,
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(48.0),
              child: TabBar(
                isScrollable: true,
                indicatorColor: Colors.white,
                tabs: <Widget>[
                  Tab(
                    child: LoadingBumpingLine.circle(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingBumpingLine.square(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingFadingLine.circle(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingFadingLine.square(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingBouncingLine.circle(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingBouncingLine.square(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingJumpingLine.circle(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingJumpingLine.square(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingFlipping.circle(
                      size: 30,
                      borderColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingFlipping.square(
                      size: 30,
                      borderColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingRotating.square(
                      size: 30,
                      borderColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingFilling.square(
                      size: 30,
                      borderColor: Colors.white,
                      fillingColor: Colors.white70,
                    ),
                  ),
                  Tab(
                    child: LoadingDoubleFlipping.circle(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingDoubleFlipping.square(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingBouncingGrid.circle(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                  Tab(
                    child: LoadingBouncingGrid.square(
                      size: 30,
                      backgroundColor: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Container(child: Center(child: Text('Bumping Line Circle'))),
              Container(child: Center(child: Text('Bumping Line Square'))),
              Container(child: Center(child: Text('Fading Line Circle'))),
              Container(child: Center(child: Text('Fading Line Square'))),
              Container(child: Center(child: Text('Bouncing Line Circle'))),
              Container(child: Center(child: Text('Bouncing Line Square'))),
              Container(child: Center(child: Text('Jumping Line Circle'))),
              Container(child: Center(child: Text('Jumping Line Square'))),
              Container(child: Center(child: Text('Flipping Circle'))),
              Container(child: Center(child: Text('Flipping Square'))),
              Container(child: Center(child: Text('Rotating Square'))),
              Container(child: Center(child: Text('Filling Square'))),
              Container(child: Center(child: Text('Double Flipping Circle'))),
              Container(child: Center(child: Text('Double Flipping Square'))),
              Container(child: Center(child: Text('Bouncing Grid Circle'))),
              Container(child: Center(child: Text('Bouncing Grid Square'))),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含16个Tab的AppBar，每个Tab显示不同类型的加载动画。每个Tab的内容页可以替换为实际的动画实例或任何其他内容。通过这种方式，你可以直观地看到每种加载动画的效果。

贡献和感谢

如果你有任何问题、发现Bug或者有改进建议，欢迎创建Issue或Pull Request。此外，该项目参考了CSSFX的设计思路，如果你喜欢这个包，请给它一个⭐️支持！

希望这篇文章能帮助你在Flutter项目中成功集成并使用loading_animations插件！

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

zlyuanteng 1楼•2 天前

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

当然，以下是一个关于如何在Flutter中使用loading_animations插件来展示加载动画的示例代码。这个插件提供了多种预定义的加载动画，可以很方便地集成到你的应用中。

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

dependencies:
  flutter:
    sdk: flutter
  loading_animations: ^3.0.1  # 请根据需要检查最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用loading_animations插件来展示加载动画。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Loading Animations Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoadingAnimationsDemo(),
    );
  }
}

class LoadingAnimationsDemo extends StatefulWidget {
  @override
  _LoadingAnimationsDemoState createState() => _LoadingAnimationsDemoState();
}

class _LoadingAnimationsDemoState extends State<LoadingAnimationsDemo> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Animations Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isLoading = !isLoading;
                });

                // Simulate a loading process with Future.delayed
                Future.delayed(Duration(seconds: 3), () {
                  setState(() {
                    isLoading = !isLoading;
                  });
                });
              },
              child: Text('Show/Hide Loading Animation'),
            ),
            SizedBox(height: 20),
            if (isLoading)
              LoadingAnimationBuilder(
                animation: PulseAnimation(),
                size: 50.0,
                child: FlutterLogo(),
              ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮和一个条件渲染的加载动画。当点击按钮时，加载动画会显示3秒钟，然后隐藏。

解释

依赖导入：

import 'package:loading_animations/loading_animations.dart';

状态管理：在_LoadingAnimationsDemoState类中，我们使用了一个布尔值isLoading来管理加载动画的显示状态。

按钮点击事件：

ElevatedButton(
  onPressed: () {
    setState(() {
      isLoading = !isLoading;
    });

    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        isLoading = !isLoading;
      });
    });
  },
  child: Text('Show/Hide Loading Animation'),
),

条件渲染加载动画：
```
if (isLoading)
  LoadingAnimationBuilder(
    animation: PulseAnimation(),
    size: 50.0,
    child: FlutterLogo(),
  ),
```
这里我们使用了LoadingAnimationBuilder来包裹FlutterLogo，并指定了PulseAnimation作为加载动画。size属性用于设置动画的大小。

动画类型

loading_animations插件提供了多种动画类型，如BounceAnimation, DoubleBounceAnimation, FadingCirclesAnimation, FadingFourDotsAnimation等。你可以根据需要替换PulseAnimation为其他动画类型。

希望这个示例能够帮助你理解如何在Flutter中使用loading_animations插件来展示加载动画。如果你有任何进一步的问题，欢迎继续提问！