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

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

License: MIT

Animated Loading Indicators是一个集合了多种动画加载指示器的库，旨在为您的应用程序带来令人愉悦的用户体验。该集合包含了各种独特的设计和增强的功能。每个指示器都经过精心制作，用于在数据获取或处理过程中提供视觉反馈，确保用户界面流畅且吸引人。非常轻量且易于使用！

示例

InfinityCradle

ClockLoader

ThreeIcons

YingYang

TextLoader

FlipIcons

Pacman

CircleAnimation

CircleLoaderAnimation

UpDownLoader

Eye-Moving

Percentage indicator

导入

import 'package:animated_loading_indicators/animated_loading_indicators.dart';

如何使用

const pacmanLoader = PacmanLoader(
  size: 40,
  duration: Duration(milliseconds: 450),
  mainColor: Colors.red,
  borderColor: Colors.transparent,
  eyeColor: Colors.white,
  isStatic: true,
);

const infinityCradle = InfinityCradle(
  size: 50,
  color: Colors.red,
  duration: Duration(seconds: 1),
);

更多用法信息，请参阅示例文件夹中的main.dart。

请求

如果您遇到任何问题或有任何建议，请fork项目并发送包含您评论的pull请求。

注意事项

有关如何开始使用Flutter的更多信息，请查阅官方文档。

有关编辑插件代码的帮助，请查阅平台插件文档。

许可证

MIT License.

作者

  • Azizullo Sadriddinzoda (a.sadriddinzoda@innopolis.university)
  • Anushervon Qodirzoda (a.qodirzoda@innopolis.university)
  • Habibullo Assoev (h.assoev@innopolis.university)
  • Yoqub Davlatov (y.davlatov@innopolis.university)

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Loading indicators demo',
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Demo",
        ),
      ),
      body: const Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Divider(),
              InfinityCradle(
                size: 20,
              ),
              Divider(),
              InfinityCradle(
                size: 50,
                color: Colors.red,
                duration: Duration(seconds: 1),
              ),
              Divider(),
              ClockLoader(
                frameColor: Colors.deepOrange,
                minuteColor: Colors.blue,
                hourColor: Colors.green,
              ),
              Divider(),
              ClockLoader(
                size: 80,
                strokeWidth: 5,
                frameColor: Colors.deepOrange,
                minuteColor: Colors.blue,
                hourColor: Colors.green,
                duration: Duration(milliseconds: 1500),
              ),
              Divider(),
              ThreeIcons(
                icon: Icons.access_time_filled_sharp,
                iconColor1: Colors.red,
                iconColor2: Colors.black,
                iconColor3: Colors.blue,
                direction: Direction.up,
              ),
              Divider(),
              ThreeIcons(
                size: 25,
                icon: Icons.circle,
                iconColor1: Colors.red,
                iconColor2: Colors.yellow,
                iconColor3: Colors.green,
                duration: Duration(seconds: 1),
              ),
              Divider(),
              FlipIcons(
                icon: Icons.camera,
                first: Colors.red,
                second: Colors.blue,
              ),
              Divider(),
              FlipIcons(
                icon: Icons.home_outlined,
                icon2: Icons.home,
                first: Colors.green,
                second: Colors.amber,
                duration: Duration(seconds: 2),
                size: 50,
              ),
              Divider(),
              PacmanLoader(),
              Divider(),
              PacmanLoader(
                size: 40,
                duration: Duration(milliseconds: 450),
                mainColor: Colors.red,
                borderColor: Colors.transparent,
                eyeColor: Colors.white,
                isStatic: true,
              ),
              Divider(),
              TextLoader(),
              Divider(),
              TextLoader(
                size: 45,
                mainColor: Colors.redAccent,
                secondaryColor: Colors.greenAccent,
                duration: Duration(milliseconds: 600),
              ),
              Divider(),
              YingYangLoader(),
              Divider(),
              YingYangLoader(
                size: 70,
                firstColor: Colors.cyan,
                duration: Duration(seconds: 3),
              ),
              Divider(),
              UpDownLoader(
                duration: Duration(milliseconds: 300),
              ),
              Divider(),
              UpDownLoader(
                size: 15,
                duration: Duration(seconds: 1),
                firstColor: Colors.greenAccent,
                secondColor: Colors.blueAccent,
              ),
              Divider(),
              LoadingWidget(),
              Divider(),
              LoadingWidget(
                size: 60,
                color1: Colors.black,
                color2: Colors.orange,
                color3: Colors.purple,
                color4: Colors.greenAccent,
              ),
              Divider(),
              CircleAnimation(),
              Divider(),
              LoadingPercentage(
                isLoading: true,
                backgroundColor: Colors.black54,
                overLoading: null,
                timer: Duration(seconds: 6),
                colorLoading: Colors.blue,
                colorBackgroundLoading: Colors.white,
                paintingStyle: PaintingStyle.stroke,
                strokeJoin: StrokeJoin.round,
                strokeCap: StrokeCap.round,
                strokeWidth: 15.0,
                textColor: Colors.white,
                showProgress: true,
                bottomLoading: null,
                isLineLoading: true, // 设置加载状态
                child: SizedBox(),
              ),
              Divider(),
              EyeMoving(timer: Duration(seconds: 6)),
              Divider(),
              EyeMoving(
                timer: Duration(seconds: 1),
                iconSize: 80,
                size: 60,
                icon: IconType.eye,
                containerColor: Colors.green,
              ),
              SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


animated_loading_indicators 是一个 Flutter 插件，提供了多种动画加载指示器，可以用于在应用程序中显示加载状态。这个插件提供了多种预定义的动画加载指示器，使用起来非常方便。下面是如何使用 animated_loading_indicators 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 animated_loading_indicators 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_loading_indicators: ^1.0.0  # 请检查最新版本

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:animated_loading_indicators/animated_loading_indicators.dart';

3. 使用动画加载指示器

animated_loading_indicators 提供了多种加载指示器，你可以根据需要选择使用。以下是一些常用的加载指示器示例：

3.1 AnimatedLoadingIndicator

这是一个通用的加载指示器，支持多种动画类型。

AnimatedLoadingIndicator(
  indicatorType: IndicatorType.circle, // 选择指示器类型
  color: Colors.blue, // 设置颜色
  size: 50.0, // 设置大小
),

indicatorType 可以是以下几种类型：

  • IndicatorType.circle：圆形指示器
  • IndicatorType.threeBounce：三个点弹跳指示器
  • IndicatorType.wave：波浪指示器
  • IndicatorType.foldingCube：折叠立方体指示器

3.2 CircleLoadingIndicator

这是一个圆形加载指示器。

CircleLoadingIndicator(
  color: Colors.red, // 设置颜色
  size: 50.0, // 设置大小
),

3.3 ThreeBounceLoadingIndicator

这是一个三个点弹跳的加载指示器。

ThreeBounceLoadingIndicator(
  color: Colors.green, // 设置颜色
  size: 50.0, // 设置大小
),

3.4 WaveLoadingIndicator

这是一个波浪加载指示器。

WaveLoadingIndicator(
  color: Colors.purple, // 设置颜色
  size: 50.0, // 设置大小
),

3.5 FoldingCubeLoadingIndicator

这是一个折叠立方体加载指示器。

FoldingCubeLoadingIndicator(
  color: Colors.orange, // 设置颜色
  size: 50.0, // 设置大小
),

4. 完整示例

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Loading Indicators'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedLoadingIndicator(
                indicatorType: IndicatorType.circle,
                color: Colors.blue,
                size: 50.0,
              ),
              SizedBox(height: 20),
              CircleLoadingIndicator(
                color: Colors.red,
                size: 50.0,
              ),
              SizedBox(height: 20),
              ThreeBounceLoadingIndicator(
                color: Colors.green,
                size: 50.0,
              ),
              SizedBox(height: 20),
              WaveLoadingIndicator(
                color: Colors.purple,
                size: 50.0,
              ),
              SizedBox(height: 20),
              FoldingCubeLoadingIndicator(
                color: Colors.orange,
                size: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部