Flutter窗口加载动画插件winloading的使用

什么是它？

以下是一些演示视频：

如何使用

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

dependencies:
  winloading: ^0.0.2

然后导入包并使用：

import 'package:winloading/winloading.dart';

Center(
  child: View3D.me(),
)

自定义配置

WinLoading 构造函数提供了丰富的参数来满足不同的需求：

const WinLoading({
    this.color = Colors.white,       // 加载动画的颜色，默认为白色
    this.radius = 3,                 // 圆角半径，默认为 3
    this.gap = 0.04,                 // 空隙比例，默认为 0.04
    this.amount = 5,                 // 动画数量，默认为 5
    this.width = 60,                 // 宽度，默认为 60
    this.height = 60,                // 高度，默认为 60
    this.duration = const Duration(milliseconds: 7200), // 动画持续时间，默认为 7200 毫秒
    this.cubic = const Cubic(.21, .6, .59, .8), // 动画曲线，默认为 Cubic(.21, .6, .59, .8)
    Key? key,                        // 键值
})

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 winloading 插件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:winloading/winloading.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 应用程序的根部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 第一个加载动画
          const ColoredBox(
            color: Colors.black38,
            child: WinLoading(), // 使用默认配置
          ),
          const SizedBox.square(dimension: 10,), // 添加间距

          // 第二个加载动画，自定义 cubic 曲线
          const ColoredBox(
            color: Colors.black38,
            child: WinLoading(cubic: const Cubic(.07, .59, .59, .8)),
          ),
          const SizedBox.square(dimension: 10,),

          // 第三个加载动画，再次自定义 cubic 曲线
          const ColoredBox(
            color: Colors.black38,
            child: WinLoading(cubic: const Cubic(.17,.59,.59,.8)),
          ),
          const SizedBox.square(dimension: 10,),

          // 第四个加载动画，继续自定义 cubic 曲线
          const ColoredBox(
            color: Colors.black38,
            child: WinLoading(cubic: const Cubic(.22,.42,.64,.79)),
          ),
          const SizedBox.square(dimension: 10,),

          // 第五个加载动画，更多自定义选项
          const ColoredBox(
            color: Colors.black38,
            child: WinLoading(cubic: const Cubic(.22,.42,.44,.71)),
          ),
          const SizedBox.square(dimension: 10,),

          // 第六个加载动画，进一步自定义
          const ColoredBox(
            color: Colors.black38,
            child: WinLoading(cubic: const Cubic(.15,.6,.64,.79)),
          ),
          const SizedBox.square(dimension: 10,),
        ],
      ),
    );
  }
}