微信交流群

【Flutter】仿 Element 样式 Progress 进度条

先看下整体效果

# 依赖

  1. pubspec.yaml 中依赖

    ele_theme:^version
    ele_progress:^version
    
    1
    2

    ele_theme 为所有 Flutter Element Widge 组件的主题,ele_theme可以全局设置。

    最新版本号在 pub 中查看:

    ele_theme 地址:https://pub.dev/packages/ele_theme

    ele_progress 地址:https://pub.dev/packages/ele_progress

  2. 导入

    import 'package:ele_progress/ele_progress.dart';
    import 'package:ele_theme/ele_theme_data.dart';
    
    1
    2

# 主题

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


Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: EleTheme(
      data: EleThemeData(),
      child: ProgressDemo(),
    ),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

# 属性

  • 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)
1

progress 表示进度,值的范围:0-100。

进度条支持4种形状,分别为:line(直线)、circle(圆环)、dashboard(仪表盘)、liquid(水波纹)。

EProgress(
  progress: 50,
  type: ProgressType.liquid,
)
1
2
3
4

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

EProgress(
  progress: _animation.value,
  strokeWidth: 20,
  colors: [
    Colors.blue,
    Colors.red,
    Colors.green,
  ],
)
1
2
3
4
5
6
7
8
9

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

EProgress(
  progress: 50,
  strokeWidth: 20,
  backgroundColor: Colors.grey,
)
1
2
3
4
5

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

EProgress(
  progress: 50,
  strokeWidth: 20,
)
1
2
3
4

strokeWidthtype=liquid(水波纹)样式时不起作用。

涉及进度文字的属性有

  • showText:是否显示,默认 true
  • textInside :进度文字是否显示在进度条内,默认 false,只在 type=line 和 liquid时可用。
    • true:表示跟随进度条移动。
    • false:type=line 而且direction=horizontal,文字显示在进度条右侧,其他情况文字显示在进度条中间。
  • format:自定义显示进度文字。
  • textStyle:字体样式。
EProgress(
  progress: _animation.value,
  strokeWidth: 20,
  textInside: true,
)
1
2
3
4
5

EProgress(
  progress: _animation.value,
  strokeWidth: 20,
  format: (progress) {
    return '自定义:$progress%';
  },
  textStyle: TextStyle(color: Colors.red),
)
1
2
3
4
5
6
7
8

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

此颜色会被 colors 覆盖。

EProgress(
  progress: 50,
  strokeWidth: 20,
  status: EleThemeStatus.success,
)
1
2
3
4
5

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

EProgress(
  progress: _animation.value,
  strokeWidth: 50,
  direction: Axis.vertical,
)
1
2
3
4
5

borderColorborderWidthradius 是设置边框样式的,type=liquid时起作用。

EProgress(
  progress: 50,
  type: ProgressType.liquid,
  borderColor: Colors.red,
  borderWidth: 5,
  radius: 30,
)
1
2
3
4
5
6
7