Flutter加载动画插件micro_loaders的使用

Micro Loaders 是一个全面且可定制的Flutter包，为您的移动应用程序带来一系列精美的加载动画。由Micro Club - USTHB开发。

主要特点

• 30多种独特的加载动画：从微妙到壮观
• 高度可定制：调整大小、颜色和持续时间
• 易于实现
• MIT许可证：免费用于商业和个人用途

Micro Club是什么？

Micro Club是1985年在USTHB成立的一个科学俱乐部。它是第一个致力于计算机科学和技术的阿尔及利亚科学俱乐部，拥有超过1000名对技术和合作充满热情的成员。

安装

在pubspec.yaml中添加以下内容：

dependencies:
  micro_loaders: ^0.0.5

然后运行：

$ flutter pub get

或者您可以使用终端：

$ flutter pub add micro_loaders

导入

import 'package:micro_loaders/micro_loaders.dart';

快速开始

基本用法

// 简单的Circle Dots Loader
CircleDotsLoader(
  size: 100,
  color: Colors.blue,
  duration: 1
)

// 可定制的Growing Arc Loader
GrowingArcLoader(
  size: 80,
  primaryColor: Colors.white,
  arcColor: Colors.red,
  strokeWidth: 6,
  duration: 1500
)

// 文件下载进度加载器
FileDownloadLoader(
  totalSize: 100.0,
  downloadSpeed: 5.0
)

示例Demo

完整示例代码

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

void main() => runApp(const App());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Micro Loaders',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.dark),
      home: MyWebApp(),
    );
  }
}

class MyWebApp extends StatelessWidget {
  MyWebApp({super.key});

  final loaders = <Widget>[
    const CircleDotsLoader(color: Colors.white, size: 50),
    const CirclesLoader(color: Colors.white, size: 50),
    const CircularOrbitLoader(size: 50, color: Colors.white),
    const CrlMugLoader(size: 50),
    const DotsLoaderView(dotSize: 5, dotColor: Colors.white),
    const DotsProgressLoader(secondColor: Colors.white, size: 5),
    const FileDownloadLoader(
        totalSize: 500, downloadSpeed: 5, color: Colors.white, size: 50),
    const DualRotatingExpandingArcLoader(outerColor: Colors.white, size: 50),
    const DualExpandingArcLoader(outerColor: Colors.white, size: 50),
    const ExpandingArcLoader(color: Colors.white, size: 50),
    const ExpandingArcTwoColorsLoader(color1: Colors.white, size: 50),
    const ExpandingTwoHalvesArcLoader(color1: Colors.white, size: 50),
    const ExplosionLoader(color: Colors.white, size: 20),
    const FadeScaleLoader(color: Colors.white, size: 50),
    const FlowerLoader(size: 25),
    const FourRotatingDots(size: 50),
    const GrowingArcLoader(primaryColor: Colors.white, size: 75),
    const PendulumLoader(color: Colors.white, size: 20),
    const PointsLoader(color: Colors.white, size: 75),
    const ProgressLoader(borderColor: Colors.white, height: 20, width: 100),
    const PulseRingLoader(color: Colors.white, size: 50),
    const RotatingArcLoader(primaryColor: Colors.white, size: 75),
    const RotatingDualHalfArcLoader(color: Colors.white, size: 50),
    const RotatingLoader(color: Colors.white, size: 50),
    const RotatingTwoArcLoader(outerArcColor: Colors.white, arcSize: 50),
    const ScaleDotsLoader(color: Colors.white, size: 5),
    const SlidingDotsLoader(color: Colors.white, size: 5),
    const SlidingSquareLoaderView(
      squareColor: Colors.white,
      squareSize: 8,
      squareCount: 3,
    ),
    const SpinningBarsLoader(color: Colors.white, size: 50),
    const SpinningLoader(),
    const SpiralLoader(color: Colors.white, size: 50, duration: 3000),
    const SunLoader(size: 25, color: Colors.white),
    const SunshineLoader(size: 25, color: Colors.white),
  ];

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: const Text(
          'Micro Loaders',
          style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: context.adaptiveCrossAxisCount,
            mainAxisSpacing: 20,
            crossAxisSpacing: 20,
            childAspectRatio: 1,
          ),
          itemCount: loaders.length,
          itemBuilder: (context, index) {
            return Column(
              children: [
                Expanded(
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20),
                    ),
                    elevation: 4,
                    color: Colors.grey[900],
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: loaders[index],
                      ),
                    ),
                  ),
                ),
                Text(
                  loaders[index].toString(),
                  style: TextStyle(
                    fontSize: width * 0.02,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

extension on BuildContext {
  int get adaptiveCrossAxisCount {
    final width = MediaQuery.of(this).size.width;
    if (width > 1024) {
      return 5;
    } else if (width > 720 && width < 1024) {
      return 4;
    } else if (width > 480) {
      return 3;
    } else if (width > 320) {
      return 2;
    }
    return 1;
  }
}

这个示例展示了如何在Flutter应用中集成并展示多种不同的加载动画。通过这种方式，您可以根据需要选择合适的加载动画，并轻松地将其集成到您的项目中。希望这些信息对您有所帮助！如果您有任何问题或建议，请随时联系我。Happy Coding! 💻✨ Made with ❤️ by Micro Club