Flutter进度指示插件percent_indicator_premium的使用

这是一个简单且高度可定制的包，适用于各种用户。

特性

• 🛠️ 圆形进度指示器：创建具有可自定义颜色、大小和百分比的视觉上吸引人的圆形进度指示器。
• 🔢 垂直进度指示器：构建简洁现代的垂直进度指示器以用于各种场景。
• 🔢 水平进度指示器：构建简洁现代的水平进度指示器以用于各种场景。
• 🔢 方形进度指示器：构建简洁现代的方形进度指示器以用于各种场景。
• ⌨️ 自定义小部件：轻松将图标、文本或其他小部件嵌入到您的指示器中心。
• 🔐 轻量级且快速：优化性能，确保在应用程序中无缝使用。

安装

在pubspec.yaml文件中添加以下行：

dependencies:
  percent_indicator_premium: ^0.0.1  // 运行 `flutter pub get` 来安装包。

使用

这里有一个快速入门的例子：

水平进度指示器

HorizontalPercentIndicator(
    this.height = 30,
    this.width,
    this.borderRadius = 8,
    required this.loadingPercent,
    this.inactiveTrackColor = MyColor.inActiveColor,
    this.child,
    this.activeTrackColor = const [MyColor.skyPrimary, MyColor.skySecondary],
),

垂直进度指示器

VerticalPercentIndicator(
    this.height = 120,
    this.width = 30,
    this.borderRadius = 8,
    required this.loadingPercent,
    this.inactiveTrackColor = MyColor.inActiveColor,
    this.child,
    this.activeTrackColor = const [MyColor.skyPrimary, MyColor.skySecondary],
),

圆形进度指示器

CircularPercentIndicator(
    this.height = 150,
    this.width = 150,
    required this.loadingPercent,
    this.inActiveTrackColor = MyColor.inActiveColor,
    this.child,
    this.activeTrackColor = const [
      Colors.deepOrangeAccent,
      Colors.greenAccent,
      Color(0xFF913A84),
      Colors.deepOrangeAccent
    ],
),

方形进度指示器

SquarePercentIndicator(
    this.height = 150,
    this.width = 150,
    required this.loadingPercent,
    this.borderRadius = 12,
    this.indicatorColor = MyColor.skyPrimary,
    this.backColor = MyColor.inActiveColor,
    this.child
),

参数

// 对于水平进度指示器
HorizontalPercentIndicator{
    final double height;
    final double? width;
    final double borderRadius;
    final double loadingPercent;
    final Color inactiveTrackColor;
    // 你想放在进度指示器前面的小部件，默认显示百分比文本
    final Widget? child;
    // 如果你想要可以设置多种颜色
    final List<Color> activeTrackColor;
}
// 对于垂直进度指示器
VerticalPercentIndicator{
    final double height;
    final double width;
    final double borderRadius;
    final double loadingPercent;
    final Color inactiveTrackColor;
    // 你想放在进度指示器前面的小部件，默认显示百分比文本
    final Widget? child;
    // 如果你想要可以设置多种颜色
    final List<Color> activeTrackColor;
}
// 对于圆形进度指示器
CircularPercentIndicator{
   final double height;
   final double width;
   final double loadingPercent;
   final Color inActiveTrackColor;
   // 你想放在进度指示器前面的小部件，默认显示百分比文本
   final Widget? child;
   // 如果你想要可以设置多种颜色
   final List<Color> activeTrackColor;
}
// 对于方形进度指示器
SquarePercentIndicator{
    final double height;
    final double width;
    final double loadingPercent;
    final double borderRadius;
    final Color indicatorColor;
    final Color backColor;
    // 你想放在进度指示器前面的小部件，默认显示百分比文本
    final Widget? child;
}

示例

查看完整的示例代码：

import 'package:flutter/material.dart';
import 'package:percent_indicator_premium/config/theme/theme.dart';
import 'package:percent_indicator_premium/percent_indicator_premium.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Percent Indicator Premium',
      debugShowCheckedModeBanner: false,
      theme: AppTheme.light(),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});
  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 3000));
    if (mounted) _controller.repeat();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("加载百分比"),
        centerTitle: true,
      ),
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, _) => SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(12),
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(height: 20),
                  HorizontalPercentIndicator(loadingPercent: _controller.value),
                  const SizedBox(height: 20),
                  VerticalPercentIndicator(loadingPercent: _controller.value),
                  const SizedBox(height: 20),
                  CircularPercentIndicator(loadingPercent: _controller.value),
                  const SizedBox(height: 20),
                  SquarePercentIndicator(loadingPercent: _controller.value),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

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