Flutter自定义指示器插件gafa

Flutter 自定义指示器插件 gafa_indicator 的使用

Gafa 指示器

Gafa 指示器是一个 Flutter 小部件，用于创建可自定义渐变流动弧形指示器，并带有动画效果。它非常适合在您的应用程序中视觉化地表示进度、百分比或动态状态。

特性

可自定义颜色的渐变流动弧。
多种指示器类型：
- UnfilledStatic: 填充未填充颜色到当前百分比。
- FixedUnfilledEnd: 未填充颜色保持静态到最大百分比。
- MovingUnfilled: 未填充颜色随着进度移动。
- ReverseUnfilledShift: 未填充颜色随着进度反向移动。
支持平滑过渡的动画。
通过 flowAnimation 属性自定义动画。
轻松调整半径、颜色和百分比。

示例预览

总览视图

这张图片展示了 Gafa 指示器的整体视图。从左到右，指示器分别是：

IndicatorType.unfilledStatic
IndicatorType.fixedUnfilledEnd
IndicatorType.movingUnfilled
IndicatorType.reverseUnfilledShift

颜色随机生成，指示器以网格布局显示。

动画和自定义

动画和自定义视图

Gafa 指示器允许完全自定义动画、文本、背景颜色、未填充颜色等。此示例展示了一个具有可自定义属性的单个动画指示器。

指示器类型比较

UnfilledStatic	MovingUnfilled

FixedUnfilledEnd	ReverseUnfilledShift

开始使用

要开始使用，请确保已经在您的机器上安装了 Flutter。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  gafa_indicator: ^0.0.1

运行 flutter pub get 来获取该包。

使用方法

以下是如何在 Flutter 应用程序中使用 GafaIndicator 的简单示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Gafa Indicator 示例')),
        body: Center(
          child: GradientAniFlowArcIndicator(
            innerRadius: 20,
            outerRadius: 30,
            percentage: 70,
            colors: [Colors.blue, Colors.purple],
            unfilledColor: Colors.grey,
            type: IndicatorType.unfilledStatic,
          ),
        ),
      ),
    );
  }
}

指示器类型

UnfilledStatic:
- 未填充颜色填充到当前进度百分比。
FixedUnfilledEnd:
- 未填充颜色保持固定到最大百分比。
MovingUnfilled:
- 未填充颜色随着进度移动。
ReverseUnfilledShift:
- 未填充颜色随着进度反向移动。

动画自定义

您可以使用 flowAnimation 属性来自定义弧线的动画，该属性接受一个包含 Animation<double> 和 AnimationController 的记录。
避免直接将 animation.value 设置为 percentage 属性，以防止渲染问题。
如果您想让文本进行动画，请务必使用 animation.value 作为文本属性的输入。

具有自定义动画的示例

GradientAniFlowArcIndicator(
  innerRadius: 20,
  outerRadius: 30,
  percentage: 70, // 避免在这里设置 animation.value。
  flowAnimation: (
    Tween<double>(begin: 0, end: 100).animate(animationController),
    animationController
  ),
  centerText: Text(
    // 为了使文本值进行动画，请确保使用 animation.value 作为输入。
    // 使用 toStringAsFixed(n) 来格式化值以便更清晰的显示。
    // 不要直接将 animation.value 设置为小部件的 `percentage` 属性。
    // 如果您希望文本进行动画，请显式地将 animation.value 传递给它。
    '${_animation.value.toStringAsFixed(1)}%',
    style: TextStyle(
      fontSize: 25,
      fontWeight: FontWeight.bold,
      color: Color.fromARGB(255, 116, 221, 68),
    ),
  ),
  colors: [Colors.blue, Colors.green],
  type: IndicatorType.movingUnfilled,
);

其他信息

如果您对这个包中的选项或类型的命名有任何建议，请通过问题或讨论告诉我们！

对于错误报告、功能请求或贡献，欢迎在 GitHub 上打开问题或提交拉取请求：GitHub。

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:gafa_indicator/gafa_indicator.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gafa 指示器示例'),
        backgroundColor: Colors.white,
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => BasicExamplePage()),
                );
              },
              child: Text('查看基本示例'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => AnimationExamplePage()),
                );
              },
              child: Text('查看动画示例'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => TypeExamplePage()),
                );
              },
              child: Text('查看类型示例'),
            ),
          ],
        ),
      ),
    );
  }
}

class BasicExamplePage extends StatelessWidget {
  final List<IndicatorType> indicatorTypes = [
    IndicatorType.unfilledStatic,
    IndicatorType.fixedUnfilledEnd,
    IndicatorType.movingUnfilled,
    IndicatorType.reverseUnfilledShift,
  ];

  List<Color> _generateRandomColors() {
    final random = Random();
    return [
      Color.fromARGB(
          255, random.nextInt(256), random.nextInt(256), random.nextInt(256)),
      Color.fromARGB(
          255, random.nextInt(256), random.nextInt(256), random.nextInt(256)),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本示例'),
        backgroundColor: Colors.white,
      ),
      backgroundColor: Colors.white,
      body: GridView.builder(
        padding: EdgeInsets.all(8),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
        ),
        itemCount: 24,
        itemBuilder: (context, index) {
          return GradientAniFlowArcIndicator(
            innerRadius: 20,
            outerRadius: 25,
            percentage: Random().nextDouble() * 100,
            colors: _generateRandomColors(),
            unfilledColor: Colors.black,
            centerText: null,
            innerCircleColor: Colors.white,
            enableAnimation: true,
            type: indicatorTypes[index % indicatorTypes.length],
          );
        },
      ),
    );
  }
}

class AnimationExamplePage extends StatefulWidget {
  [@override](/user/override)
  _AnimationExamplePageState createState() => _AnimationExamplePageState();
}

class _AnimationExamplePageState extends State<AnimationExamplePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  final double percentage = 75;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

    _animation = Tween<double>(begin: 0, end: percentage).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );

    _controller.forward();
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    print(_animation.value);
    return Scaffold(
      appBar: AppBar(
        title: Text('动画示例'),
        backgroundColor: Colors.white,
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return GradientAniFlowArcIndicator(
              innerRadius: 60,
              outerRadius: 70,
              // 请使用常量值
              percentage: percentage,
              colors: [Colors.purple, Colors.blue],
              unfilledColor: Colors.redAccent,
              centerText: Text(
                // 为了使文本值进行动画，请确保使用 animation.value 作为输入。
                // 使用 toStringAsFixed(n) 来格式化值以便更清晰的显示。
                // 不要直接将 animation.value 设置为小部件的 `percentage` 属性。
                // 如果您希望文本进行动画，请显式地将 animation.value 传递给它。
                '${_animation.value.toStringAsFixed(1)}%',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                  color: Colors.blueAccent,
                ),
              ),
              innerCircleColor: Colors.amber,
              flowAnimation: (_animation, _controller),
              enableAnimation: true,
              type: IndicatorType.unfilledStatic,
            );
          },
        ),
      ),
    );
  }
}

class TypeExamplePage extends StatelessWidget {
  final List<IndicatorType> indicatorTypes = [
    IndicatorType.unfilledStatic,
    IndicatorType.fixedUnfilledEnd,
    IndicatorType.movingUnfilled,
    IndicatorType.reverseUnfilledShift,
  ];

  List<Color> _generateRandomColors() {
    final random = Random();
    return [
      Color.fromARGB(
          255, random.nextInt(256), random.nextInt(256), random.nextInt(256)),
      Color.fromARGB(
          255, random.nextInt(256), random.nextInt(256), random.nextInt(256)),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('基本示例'),
        backgroundColor: Colors.white,
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: GradientAniFlowArcIndicator(
          innerRadius: 60,
          outerRadius: 70,
          percentage: 77.7,
          colors: [Colors.lime.shade100, Colors.lightGreen],
          unfilledColor: Colors.black,
          centerText: null,
          innerCircleColor: Colors.white,
          enableAnimation: true,
          type: IndicatorType.fixedUnfilledEnd,
        ),
      ),
    );
  }
}

更多关于Flutter自定义指示器插件gafa_indicator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼

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

gafa_indicator 是一个 Flutter 插件，用于创建自定义的加载指示器。它提供了多种预定义的指示器样式，同时也支持自定义指示器的外观和行为。以下是如何在 Flutter 项目中使用 gafa_indicator 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  gafa_indicator: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 gafa_indicator 包：

import 'package:gafa_indicator/gafa_indicator.dart';

3. 使用预定义指示器

gafa_indicator 提供了多种预定义的指示器样式。你可以直接使用它们：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gafa Indicator Example'),
      ),
      body: Center(
        child: GafaIndicator(
          type: GafaIndicatorType.circle,  // 选择指示器类型
          size: 50.0,  // 指示器大小
          color: Colors.blue,  // 指示器颜色
        ),
      ),
    );
  }
}

4. 自定义指示器

如果你需要自定义指示器的外观和行为，可以使用 GafaIndicator.custom 构造函数：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Gafa Indicator Example'),
      ),
      body: Center(
        child: GafaIndicator.custom(
          child: CircularProgressIndicator(),  // 自定义指示器
          size: 50.0,  // 指示器大小
          color: Colors.red,  // 指示器颜色
        ),
      ),
    );
  }
}

5. 控制指示器的显示与隐藏

你可以通过 GafaIndicatorController 来控制指示器的显示与隐藏：

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GafaIndicatorController _indicatorController = GafaIndicatorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gafa Indicator Controller Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GafaIndicator(
              controller: _indicatorController,
              type: GafaIndicatorType.circle,
              size: 50.0,
              color: Colors.green,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _indicatorController.start();  // 启动指示器
              },
              child: Text('Start Indicator'),
            ),
            ElevatedButton(
              onPressed: () {
                _indicatorController.stop();  // 停止指示器
              },
              child: Text('Stop Indicator'),
            ),
          ],
        ),
      ),
    );
  }
}