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

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

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

预览图

Light Dark
Flutter Advanced Progress Light Flutter Advanced Progress 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

1 回复

更多关于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插件来创建一个动态加载的圆形进度条。你可以根据需要调整参数来实现不同的进度条效果。插件还提供了其他类型的进度条，比如线性进度条，你可以查阅官方文档了解更多详细信息。

回到顶部