Flutter无限循环加载动画插件circular_infinity_loader的使用

Flutter无限循环加载动画插件circular_infinity_loader的使用

circular_infinity_loader 包为 Flutter 提供了一个名为 CircularInfinityLoader 的小部件，该小部件展示了一个视觉上吸引人的圆形加载器，并具有无限循环效果。用户可以自定义加载器的颜色以匹配其 UI 主题。该包利用了 Flutter 的动画功能来实现平滑且动态的加载器动画，从而在加载或处理任务时提升用户体验。

特性

以下是 circular_infinity_loader 包的功能：

1. 圆形加载器：展示一个圆形加载器小部件。
2. 无限循环动画：具有外环和移动点的动画循环效果，创造出无限循环的效果。
3. 可定制颜色：用户可以根据其 UI 主题来自定义加载器的颜色。
4. 平滑动画：利用 Flutter 的动画功能，提供平滑且动态的加载器动画。
5. 易于集成：可以轻松地将 CircularInfinityLoader 小部件集成到 Flutter 应用程序中，以指示加载或处理任务。
6. 灵活尺寸：加载器小部件的大小可以根据不同的布局需求进行调整。
7. 高度可定制：用户可以通过修改诸如描边宽度、模糊效果和动画持续时间等参数来进一步定制加载器的外观。
8. 可重用性：该包提供了一个可重复使用的组件，可以在 Flutter 应用程序的多个屏幕或组件中使用。

开始使用

添加包依赖

打开项目的 pubspec.yaml 文件，并添加 circular_infinity_loader 包作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  circular_infinity_loader: ^0.0.1  # 替换为最新版本

运行 flutter pub get 来获取依赖。

导入包

在 Dart 代码中导入包：

import 'package:circular_infinity_loader/circular_infinity_loader.dart';

使用加载器

在构建方法中使用 CircularInfinityLoader 小部件：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('我的应用'),
    ),
    body: Center(
      child: CircularInfinityLoader(color: Colors.blue), // 自定义颜色
    ),
  );
}

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 CircularInfinityLoader 小部件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '圆形无限加载器'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

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

class _MyHomePageState extends State<MyHomePage> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: CircularInfinityLoader(color: Colors.deepPurple),
      ), // 这个逗号使自动格式化更美观
    );
  }
}