进度指示器和ele例子

Material 组件库中提供了两种进度指示器：LinearProgressIndicator和CircularProgressIndicator，它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况，比如文件下载；而模糊进度则用户任务进度无法准确获得的情况，如下拉刷新，数据提交等。

LinearProgressIndicator

LinearProgressIndicator是一个线性、条状的进度条，其构造：

const LinearProgressIndicator({
    super.key,
    super.value,//value表示当前的进度，取值范围为[0,1]；
    super.backgroundColor,//指示器的背景色
    super.color,
    super.valueColor,// 指定颜色动画
    this.minHeight,//最小高度
    super.semanticsLabel,//标签
    super.semanticsValue,//进度的信息
  }) 

例子：

 LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: const AlwaysStoppedAnimation(Colors.green),//模糊进度条动画
  value: .5,//进度条显示50%
  color: Colors.red,
  minHeight: 20,
  semanticsLabel: '匆匆那年.mp3',
  semanticsValue: '${0.5*100}%',
)

CircularProgressIndicator

圆形进度条，其构造：(跟条状的基本一样)

 const CircularProgressIndicator({
    super.key,
    super.value,
    super.backgroundColor,
    super.color,
    super.valueColor,
    this.strokeWidth = 4.0,
    super.semanticsLabel,
    super.semanticsValue,
  }) 

例子：

const CircularProgressIndicator(
  backgroundColor: Colors.red,
  valueColor: AlwaysStoppedAnimation(Colors.green),
)

默认情况下，CircularProgressIndicator的半径很小，但是如果要自定义大小，请将其放在SizedBox中。

 const SizedBox(
  width: 100,
  height: 100,
  child:  CircularProgressIndicator(
    strokeWidth: 10,
    backgroundColor: Colors.red,
    valueColor: AlwaysStoppedAnimation(Colors.green),
  ),
)

ele_progress

在pubspec.yaml安装ele_progress依赖

ele_progress: ^0.0.1

导入:

import 'package:ele_progress/ele_progress.dart';

构造：

const EProgress({
    Key? key,
    this.progress = 0,//进度，值的范围：0-100
    this.type = ProgressType.line,//进度条样式，支持4种，分别为 「line」（直线）、「circle」（圆环）、「dashboard」（仪表盘）、「liquid」（水波纹）
    this.strokeWidth = 6.0,//进度条的宽度，默认是6， type=liquid 时不起作用
    this.textInside = false,
    this.colors,//进度条的颜色，这是一个数组类型，设置一个颜色表示纯色，设置多个是渐变色
    this.backgroundColor,//进度条的背景颜色
    this.status,
    this.showText = true,//是否显示进度文字，默认 true
    this.strokeCap = StrokeCap.round,
    this.direction = Axis.horizontal,//进度条的方向，type=line和liquid时起作用
    this.borderColor,//边框颜色，type=liquid时起作用
    this.borderWidth = 3.0,//边框宽度，type=liquid时起作用
    this.radius = 0,//边框圆角，type=liquid时起作用
    this.format,//自定义显示进度文字
    this.textStyle,//进度文字字体样式
  })

• 「textInside」 ：进度文字是否显示在进度条内，默认 false，只在 type=line 和 liquid时可用。 「true」：表示跟随进度条移动。 「false」：type=line 而且direction=horizontal，文字显示在进度条右侧，其他情况文字显示在进度条中间。

• 「status」 ：控制进度条颜色，和「theme」配合使用的，主题中有「primary、success、info、warning、danger」 5种状态，对应5种颜色：primaryColor、successColor、infoColor、warningColor、dangerColor。但是此属性会被 「colors」 属性覆盖。 例子：

 EProgress(progress: 50)

表示进度条的颜色，这是一个数组类型，设置一个颜色表示纯色，设置多个是渐变色:

EProgress(
    progress: 50,
    strokeWidth: 20,
    colors: [
      Colors.blue,
      Colors.red,
      Colors.green,
    ],
 )

类似的还有ai_progress、simple_circular_progress_bar等