Flutter高级进度条插件flutter_advanced_progress的使用

flutter_advanced_progress 是一个高度可定制的进度条组件，通过一系列参数可以完全自定义其外观。您可以尝试使用它，并享受其中的乐趣！

预览图

Light	Dark

AdvancedProgress 参数

参数名	描述	类型	默认值
`primaryValue`	主进度的值	`double`	无
`secondaryValue`	次进度的值	`double`	无
`secondaryWidth`	次进度宽度	`double`	10.0
`radius`	整个组件的半径	`double`	无
`startAngle`	进度开始的角度	`double`	120.0
`maxDegrees`	从 `[startAngle]` 开始的进度角度	`double`	300.0
`progressGap`	主进度与次进度之间的间距	`double`	0.0
`division`	主进度的分割数	`int`	10
`levelAmount`	主进度上的层级数量	`int`	无
`levelLowWidth`	低层级在主进度上的宽度	`double`	1.0
`levelLowHeight`	低层级在主进度上的高度	`double`	8.0
`levelHighWidth`	高层级在主进度上的宽度	`double`	2.0
`levelHighHeight`	高层级在主进度上的高度	`double`	16.0
`levelHighBeginEnd`	是否需要以高层级开始和结束	`bool`	false
`primaryColor`	主进度使用的颜色（作为渐变的第一种颜色）	`Color`	无
`secondaryColor`	次进度使用的颜色（作为渐变的最后一种颜色）	`Color`	无
`tertiaryColor`	不活跃部分使用的颜色	`Color`	无
`child`	子部件	`Widget`	无

完整示例

以下是一个完整的示例，展示如何使用 flutter_advanced_progress 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  double _primaryValue = 0.7;
  double _secondaryValue = 0.5;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Advanced Progress Example'),
      ),
      body: Center(
        child: AdvancedProgress(
          primaryValue: _primaryValue,
          secondaryValue: _secondaryValue,
          secondaryWidth: 10.0,
          radius: 100.0,
          startAngle: 120.0,
          maxDegrees: 300.0,
          progressGap: 0.0,
          division: 10,
          levelAmount: 5,
          levelLowWidth: 1.0,
          levelLowHeight: 8.0,
          levelHighWidth: 2.0,
          levelHighHeight: 16.0,
          levelHighBeginEnd: true,
          primaryColor: Colors.blue,
          secondaryColor: Colors.green,
          tertiaryColor: Colors.grey,
          child: Text('Progress'),
        ),
      ),
    );
  }
}

更多关于Flutter高级进度条插件flutter_advanced_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•5 天前

更多关于Flutter高级进度条插件flutter_advanced_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_advanced_progress插件的一个简单示例。这个插件提供了多种高级的进度条组件，可以极大地丰富你的用户界面。

首先，确保你已经在pubspec.yaml文件中添加了flutter_advanced_progress依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_advanced_progress: ^1.0.0  # 请检查最新版本号

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

接下来，我们来看一个使用flutter_advanced_progress中的CircularProgressIndicatorAdvanced组件的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Advanced Progress Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Advanced Progress Demo'),
        ),
        body: Center(
          child: CircularProgressIndicatorAdvancedExample(),
        ),
      ),
    );
  }
}

class CircularProgressIndicatorAdvancedExample extends StatefulWidget {
  @override
  _CircularProgressIndicatorAdvancedExampleState createState() => _CircularProgressIndicatorAdvancedExampleState();
}

class _CircularProgressIndicatorAdvancedExampleState extends State<CircularProgressIndicatorAdvancedExample> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

  @override
  void initState() {
    super.initState();
    _startProgress();
  }

  void _startProgress() {
    Timer.periodic(Duration(milliseconds: 100), (Timer timer) {
      setState(() {
        if (_progress < 1.0) {
          _progress += 0.01;
        } else {
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicatorAdvanced(
      value: _progress,
      animationDuration: 1500,
      backgroundColor: Colors.grey[200]!,
      borderRadius: 25.0,
      child: Center(
        child: Text(
          '$_progress',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
      progressColor: Colors.blue,
      width: 150.0,
      height: 150.0,
    );
  }
}

在这个示例中，我们创建了一个CircularProgressIndicatorAdvancedExample组件，它包含一个自定义的CircularProgressIndicatorAdvanced。我们使用Timer.periodic来模拟进度条的加载过程，每100毫秒更新一次进度值。

主要参数说明：

value: 进度值，范围在0到1之间。
animationDuration: 动画持续时间（毫秒）。
backgroundColor: 进度条背景颜色。
borderRadius: 进度条圆角半径。
child: 进度条中间的子组件，这里我们显示当前的进度值。
progressColor: 进度条颜色。
width 和 height: 进度条的宽度和高度。

这个示例展示了如何使用flutter_advanced_progress插件来创建一个动态加载的圆形进度条。你可以根据需要调整参数来实现不同的进度条效果。插件还提供了其他类型的进度条，比如线性进度条，你可以查阅官方文档了解更多详细信息。