Flutter进度条展示插件 shiny_striped_progress_bar 的使用

shiny_striped_progress_bar 是一个开源的 Flutter 包，提供了带有条纹和闪耀效果的动画进度条。以下是该插件的详细使用指南。

特性

• 进度变化时平滑的动画。
• 可自定义颜色和角度的条纹设计。
• 可配置的闪耀效果以增强视觉吸引力。
• 完全可定制的高度、颜色、圆角半径等属性。
• 响应动态变化的 targetProgress 并带有动画效果。

开始使用

安装

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  flutter:
    sdk: flutter
  shiny_striped_progress_bar: ^1.1.0

然后在 Dart 代码中导入包：

import 'package:shiny_striped_progress_bar/shiny_striped_progress_bar.dart';

基本示例

自定义颜色

设置进度条的颜色、背景色和条纹颜色：

ShinyStripedProgressBar(
  targetProgress: 0.7,
  backgroundColor: Colors.grey.shade300,
  progressColor: Colors.blue,
  stripeColor: Colors.white,
);

自定义条纹角度

调整条纹的角度来创建独特的设计。可以选择三个预定义的角度：45°, 90° 和 135°。

ShinyStripedProgressBar(
  targetProgress: 0.6,
  stripeAngle: StripeAngle.angle30,
  stripeColor: Colors.orange,
);

闪耀效果

闪耀效果会在进度条上动态移动：

ShinyStripedProgressBar(
  targetProgress: 0.5,
  stripeColor: Colors.cyan,
);

圆角半径

调整圆角半径来创建圆角进度条：

ShinyStripedProgressBar(
  targetProgress: 0.9,
  borderRadius: BorderRadius.circular(10),
);

参数描述

示例 Demo

以下是一个完整的示例 demo，展示了如何使用 shiny_striped_progress_bar 包：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shiny Striped Progress Bar Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.greenAccent),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Shiny Striped Progress Bar Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _progress = 0.2;

  void _increaseProgress() {
    setState(() {
      _progress += 0.2;
      if (_progress > 1.0) _progress = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ShinyStripedProgressBar(
              targetProgress: _progress,
              backgroundColor: Colors.grey.shade300,
              progressColor: Colors.blue,
              stripeColor: Colors.white,
              stripeAngle: StripeAngle.angle45,
              enableShineEffect: true,
              borderRadius: BorderRadius.circular(10),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _increaseProgress,
              child: const Text('Increase Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

这个示例演示了如何创建一个带有自定义颜色、条纹角度、闪耀效果和圆角半径的进度条，并且可以通过按钮动态改变进度。希望这对你有所帮助！