Flutter动画加载指示器插件flutter_animated_loadingkit的使用

✨ Flutter Animated Loadingkit ✨

这是一个由Flutter动画实现的自定义加载指示器集合。

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_animated_loadingkit: ^0.0.7

导入

在Dart文件中导入此包：

import 'package:flutter_animated_loadingkit/flutter_animated_loadingkit.dart';

使用方法

下面是一个创建SideWaySurge加载指示器的例子：

const loader = AnimatedLoadingSideWaySurge(
  expandWidth: 70,
  borderColor: Colors.black,
  speed: Duration(milliseconds: 600),
);

示例代码

下面提供了一个完整的示例demo，您可以直接运行这个例子来查看不同类型的加载指示器。

main.dart

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

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 创建一个SideWaySurge加载指示器
            const AnimatedLoadingSideWaySurge(
              expandWidth: 70,
              borderColor: Colors.black,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Circle Surge加载指示器
            const CircleSurge(
              size: 70,
              color: Colors.red,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Dual Surge加载指示器
            const DualSurge(
              size: 70,
              color1: Colors.green,
              color2: Colors.blue,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Face Surge加载指示器
            const FaceSurge(
              size: 70,
              color: Colors.purple,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Round Burst加载指示器
            const RoundBurst(
              size: 70,
              color: Colors.orange,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Floral Burst加载指示器
            const FloralBurst(
              size: 70,
              color: Colors.pink,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Star Burst加载指示器
            const StarBurst(
              size: 70,
              color: Colors.teal,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Waving Line加载指示器
            const WavingLine(
              width: 100,
              height: 50,
              color: Colors.deepOrange,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Heart Beat加载指示器
            const HeartBeat(
              size: 70,
              color: Colors.red,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Infinity Spin加载指示器
            const InfinitySpin(
              size: 70,
              color: Colors.indigo,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Tango加载指示器
            const Tango(
              size: 70,
              color: Colors.brown,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Spinner加载指示器
            const Spinner(
              size: 70,
              color: Colors.cyan,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Jumping Dots加载指示器
            const JumpingDots(
              size: 70,
              dotColor: Colors.grey,
              backgroundColor: Colors.white,
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Firework加载指示器
            const Firework(
              size: 70,
              colors: [Colors.red, Colors.green, Colors.blue],
              speed: Duration(milliseconds: 600),
            ),
            SizedBox(height: 20,),
            // 创建一个Spiral Lines加载指示器
            const SpiralLines(
              size: 70,
              color: Colors.amber,
              speed: Duration(milliseconds: 600),
            ),
          ],
        ),
      ),
    );
  }
}

示例

以下是几种加载指示器的效果图：

Side-Way Surge	Circle Surge	Dual Surge	Face Surge	Round Burst

Floral Burst	Star Burst	Waving Line	Heart Beat	Infinity Spin

Tango	Spinner	Jumping Dots	Firework	Spiral Lines

如果您喜欢这个包，请不要忘记点击⭐️按钮！

谢谢并祝您编码愉快 👻