【Flutter】仿 Element 样式 Progress 进度条

先看下整体效果

依赖

1. 在 pubspec.yaml 中依赖

   ele_progress:^version
   

   最新版本号在 pub 中查看：ele_progress 地址：https://pub.dev/packages/ele_progress

2. 导入

   import 'package:ele_progress/ele_progress.dart';
   

主题

全局设置 ele_progress 的样式需要使用 EleTheme，代码如下：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: EleTheme(
      data: EleThemeData(),
      child: ProgressDemo(),
    ),
  );
}

库中自带一套默认的样式。

属性

• progress：进度，值的范围：0-100。
• colors ：进度条的颜色，这是一个数组类型，设置一个颜色表示纯色，设置多个是渐变色。
• backgroundColor ：进度条的背景颜色。
• type：进度条样式，支持4种，分别为 line（直线）、circle（圆环）、dashboard（仪表盘）、liquid（水波纹）。
• strokeWidth ：进度条的宽度，默认是6， type=liquid 时不起作用。
• showText：是否显示进度文字，默认 true
• textInside ：进度文字是否显示在进度条内，默认 false，只在 type=line 和 liquid时可用。
  • true：表示跟随进度条移动。
  • false：type=line 而且direction=horizontal，文字显示在进度条右侧，其他情况文字显示在进度条中间。
• format：自定义显示进度文字。
• textStyle：进度文字字体样式。
• status ：控制进度条颜色，和theme配合使用的，主题中有primary、success、info、warning、danger 5种状态，对应5种颜色：primaryColor、successColor、infoColor、warningColor、dangerColor。但是此属性会被 colors 属性覆盖。
• direction ：进度条的方向，type=line和liquid时起作用。
• borderColor ：边框颜色，type=liquid时起作用。
• borderWidth：边框宽度，type=liquid时起作用。
• radius ：边框圆角，type=liquid时起作用。

使用

最简单的用

EProgress(progress: 50)

progress 表示进度，值的范围：0-100。

进度条支持4种形状，分别为：line（直线）、circle（圆环）、dashboard（仪表盘）、liquid（水波纹）。

EProgress(
  progress: 50,
  type: ProgressType.liquid,
)

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

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

backgroundColor ：表示进度条的背景颜色。

EProgress(
  progress: 50,
  strokeWidth: 20,
  backgroundColor: Colors.grey,
)

strokeWidth 进度条的宽度，默认是6。

EProgress(
  progress: 50,
  strokeWidth: 20,
)

strokeWidth 在 type=liquid（水波纹）样式时不起作用。

涉及进度文字的属性有

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

EProgress(  progress: _animation.value,  strokeWidth: 20,  textInside: true,)

​

EProgress(  progress: _animation.value,  strokeWidth: 20,  format: (progress) {    return '自定义：$progress%';  },  textStyle: TextStyle(color: Colors.red),)

status 属性是和theme配合使用的，主题中有primary、success、info、warning、danger 5种状态，对应5种颜色

此颜色会被 colors 覆盖。

EProgress(  progress: 50,  strokeWidth: 20,  status: EleThemeStatus.success,)

direction 表示进度条的方向，type=line和liquid时起作用。

EProgress(  progress: _animation.value,  strokeWidth: 50,  direction: Axis.vertical,)

borderColor 、borderWidth、radius 是设置边框样式的，type=liquid时起作用。

EProgress(  progress: 50,  type: ProgressType.liquid,  borderColor: Colors.red,  borderWidth: 5,  radius: 30,)

结束语

这是仿 Element 样式组件的第一个，后面还会有很多个，其他组件请到我这里查看：http://laomengit.com/element/ele_progress.html。