Flutter渐变圆形加载器插件circular_gradient_spinner的使用

简介

circular_gradient_spinner 是一个 Flutter 插件，提供了一个可自定义、动画化的渐变圆形进度指示器。CircularGradientSpinner 非常适合为您的 Flutter 应用程序添加视觉上吸引人且信息丰富的进度指示器。

特性

• 可自定义的渐变: 轻松自定义渐变的颜色。
• 动画控制: 带有内置动画，可以根据需要进行自定义或控制。
• 高度可自定义: 调整大小、描边宽度、渐变步数等。

入门

要使用此插件，需要在 pubspec.yaml 文件中添加 circular_gradient_spinner 作为依赖项。

dependencies:
  circular_gradient_spinner: ^1.0.0

示例代码

以下是一个简单的示例，展示了如何在 Flutter 应用程序中使用 CircularGradientSpinner。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circular Gradient Spinner'),
        ),
        body: Center(
          child: CircularGradientSpinner(
            color: Colors.blue,
            size: 200,
            strokeWidth: 20,
          ),
        ),
      ),
    );
  }
}

自定义

CircularGradientSpinner 可以通过以下参数进行自定义：

• color: 渐变的基本颜色。
• size: 圆的直径。
• strokeWidth: 描边的宽度。
• duration: 动画的持续时间。
• gradientSteps: 渐变的步数。

更多示例

以下是一个更复杂的示例，展示了如何使用更多的自定义选项。

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

void main(List<String> args) {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false,
      ),
      home: const PaintApp(),
    );
  }
}

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

  @override
  State<PaintApp> createState() => _PaintAppState();
}

class _PaintAppState extends State<PaintApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Progress'),
      ),
      body: const CircularGradientSpinner(
        color: Colors.black,
        size: 200,
        strokeWidth: 30,
        spinnerDirection: SpinnerDirection.clockwise,
        duration: Duration(seconds: 2),
        gradientSteps: 10,
      ),
    );
  }
}

贡献

贡献使开源社区成为一个学习、启发和创造的绝佳场所。非常感谢您的任何贡献。

如果您有任何改进建议，请 fork 仓库并创建一个 pull request。您也可以直接打开一个带有 “enhancement” 标签的问题。 别忘了给项目点个星！谢谢！

Fork 项目

1. 创建您的功能分支（git checkout -b feature/AmazingFeature）
2. 提交您的更改（git commit -m 'Add some AmazingFeature'）
3. 推送到分支（git push origin feature/AmazingFeature）
4. 打开一个 Pull Request

许可证

本项目采用 MIT 许可证，详情请参见 LICENSE 文件。

联系方式

• GabbyGreat
• TWITTER - @iGabbyGreat
• Email: gabrieloranekwu@gmail.com