flutter seekbar
wechat ：674668211 加微信进flutter微信群
掘金： https://juejin.im/user/581206302f301e005c60cd2f
简书：https://www.jianshu.com/u/4a5dce56807b
csdn：https://me.csdn.net/liu__520
github : https://github.com/LiuC520/
A beautiful flutter custom seekbar, which has a bubble view with progress appearing upon when seeking. 自定义SeekBar，进度变化更以可视化气泡样式呈现
效果图
screenshot.gif
引入:
dependencies:
flutter:
sdk: flutter
flutter_seekbar:
git: https://github.com/LiuC520/flutter_seekbar.git
属性
| Attribute 属性 | 默认值 | Description 描述 |
|---|---|---|
| min | 0.0 | 最小值 |
| max | 100.0 | 最大值 |
| value | 0.0 | 默认进度值 |
| backgroundColor | 页面配置的backgroundColor | 进度条背景颜色 |
| progressColor | accentColor | 当前进度的颜色 |
| progresseight | 5 | 进度条的高度 |
| sectionCount | 1 | 进度条分为几段 |
| sectionColor | 当前进度的颜色 | 进度条每一个间隔的圆圈的颜色 |
| sectionUnSelecteColor | 进度条的背景颜色 | 间隔未选中的颜色 |
| sectionRadius | 0.0 | 间隔圆的半径 |
| showSectionText | false | 是否显示刻度值 |
| sectionTexts | 空数组 | 自定义刻度值，是个数组，数组必须是SectionTextModel的实体 |
| sectionTextSize | 14 | 刻度值字体的大小 |
| afterDragShowSectionText | false | 是否在拖拽结束后显示刻度值 |
| sectionTextColor | 黑色 | 刻度值字体的颜色 |
| sectionSelectTextColor | 透明（Colors.transparent） | 选中的刻度值字体的颜色 |
| sectionDecimal | 0 | 刻度值的小数点位数 |
| sectionTextMarginTop | 4.0 | 刻度值距离进度条的间距 |
| indicatorRadius | 进度条的高度 + 2 | 中间指示器圆圈的半径 |
| indicatorColor | 进度条当前进度的颜色 | 中间指示器圆圈的颜色 |
| semanticsLabel | 这个是给盲人用的，屏幕阅读器的要读出来的标签 | |
| semanticsValue | 这个是给盲人用的，屏幕阅读器的要读出的进度条的值 | |
| onValueChanged | 默认是空方法 | 进度改变的回调，是ProgressValue的实体，里面包含了进度，0-1，还包含了当前的进度值 |
| isRound | true ( 圆角 ) | 圆角还是直角，圆角的默认半径是进度条高度的一半 |
| hideBubble | true | 是否显示气泡，默认是隐藏 |
| alwaysShowBubble | false | 是否一致显示气泡，默认是false，也就是只有在拖拽的时间才显示气泡，拖拽结束不显示 |
| bubbleRadius | 20 | 气泡的半径 |
| bubbleHeight | 60 | 气泡的总高度，包含顶部圆形的半径，默认是气泡半径的3倍 |
| bubbleColor | 当前进度条的颜色 | 气泡的背景颜色 |
| bubbleTextColor | 白色 | 气泡中当前进度值的字体颜色，默认是白色 |
| bubbleTextSize | 14 | 气泡中当前进度值的字体大小，默认是14 |
| bubbleMargin | 4 | 气泡底部距离进度条的高度，默认是4 |
| bubbleInCenter | false | 气泡是否在进度条的中间显示，默认是 |
Example
1、首先在pubspec.yaml中添加依赖
dependencies:
flutter:
sdk: flutter
flutter_seekbar:
git: https://github.com/flutter_marquee/flutter_seekbar.git
2、示例
import 'package:flutter_seekbar/flutter_seekbar.dart' show ProgressValue, SectionTextModel, SeekBar;
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
List<SectionTextModel> sectionTexts = [];
@override
void initState() {
super.initState();
sectionTexts.add(
SectionTextModel(position: 0, text: 'bad', progressColor: Colors.red));
sectionTexts.add(SectionTextModel(
position: 2, text: 'good', progressColor: Colors.yellow));
sectionTexts.add(SectionTextModel(
position: 4, text: 'great', progressColor: Colors.green));
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.fromLTRB(0, 80, 0, 0),
child: Column(
children: <Widget>[
Column(
children: <Widget>[
Container(
width: 200,
child: SeekBar(
progresseight: 10,
indicatorRadius: 0.0,
value: 0.2,
isRound: false,
)),
Text(
"直角",
style: TextStyle(fontSize: 10),
),
],
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
width: 200,
child: SeekBar(
indicatorRadius: 0.0,
progresseight: 5,
value: 0.6,
hideBubble: false,
alwaysShowBubble: true,
bubbleRadius: 14,
bubbleColor: Colors.purple,
bubbleTextColor: Colors.white,
bubbleTextSize: 14,
bubbleMargin: 4,
bubbleInCenter: true)),
Text(
"圆角，气泡居中，始终显示气泡",
style: TextStyle(fontSize: 10),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
width: 200,
child: SeekBar(
progresseight: 5,
value: 0.2,
)),
Text(
"圆角带指示器",
style: TextStyle(fontSize: 10),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
width: 200,
child: SeekBar(
progresseight: 5,
value: 0.5,
sectionCount: 5,
)),
Text(
"带间隔带指示器",
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
width: 200,
child: SeekBar(
progresseight: 5,
value: 0.5,
sectionCount: 4,
sectionRadius: 6,
sectionColor: Colors.red,
)),
Text(
"带间隔画间隔的指示器",
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('-10'),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 4),
width: 200,
child: SeekBar(
progresseight: 5,
value: 0.5,
min: -10,
max: 80,
sectionCount: 4,
sectionRadius: 6,
sectionColor: Colors.red,
hideBubble: false,
alwaysShowBubble: true,
bubbleRadius: 14,
bubbleColor: Colors.purple,
bubbleTextColor: Colors.white,
bubbleTextSize: 14,
bubbleMargin: 4,
onValueChanged: (v) {
print(
'当前进度：${v.progress} ，当前的取值：${v.value}');
})),
Text('80')
],
),
Text(
"带间隔带气泡的指示器，气泡",
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
progresseight: 10,
value: 0.5,
sectionCount: 4,
sectionRadius: 5,
sectionColor: Colors.red,
sectionUnSelecteColor: Colors.red[100],
showSectionText: true,
sectionTextMarginTop: 2,
sectionDecimal: 0,
sectionTextColor: Colors.black,
sectionSelectTextColor: Colors.red,
sectionTextSize: 14,
)),
Text(
"带带刻度的指示器,可设置刻度的样式和选中的刻度的样式",
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
progresseight: 10,
value: 0.5,
sectionCount: 4,
sectionRadius: 5,
sectionColor: Colors.red,
sectionUnSelecteColor: Colors.red[100],
showSectionText: true,
sectionTextMarginTop: 2,
sectionDecimal: 0,
sectionTextColor: Colors.black,
sectionSelectTextColor: Colors.red,
sectionTextSize: 14,
hideBubble: false,
bubbleRadius: 14,
bubbleColor: Colors.purple,
bubbleTextColor: Colors.white,
bubbleTextSize: 14,
bubbleMargin: 4,
afterDragShowSectionText: true,
)),
Text(
"带带刻度的指示器,可设置刻度的样式和选中的刻度的样式，拖拽结束显示刻度值，拖拽开始显示气泡",
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
min: -100,
max: 200,
progresseight: 10,
value: 0.75,
sectionCount: 4,
sectionRadius: 6,
showSectionText: true,
sectionTexts: [],
sectionTextMarginTop: 2,
sectionDecimal: 0,
sectionTextColor: Colors.black,
sectionSelectTextColor: Colors.red,
sectionTextSize: 14,
hideBubble: false,
bubbleRadius: 14,
bubbleColor: Colors.purple,
bubbleTextColor: Colors.white,
bubbleTextSize: 14,
bubbleMargin: 4,
afterDragShowSectionText: true,
)),
Text(
"自定义刻度值显示，带带刻度的指示器,可设置刻度的样式和选中的刻度的样式，拖拽结束显示刻度值，拖拽开始显示气泡",
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
progresseight: 10,
value: 0.75,
sectionCount: 4,
sectionRadius: 6,
showSectionText: true,
sectionTexts: sectionTexts,
sectionTextMarginTop: 2,
sectionDecimal: 0,
sectionTextColor: Colors.black,
sectionSelectTextColor: Colors.red,
sectionTextSize: 14,
hideBubble: false,
bubbleRadius: 14,
bubbleColor: Colors.purple,
bubbleTextColor: Colors.white,
bubbleTextSize: 14,
bubbleMargin: 4,
afterDragShowSectionText: true,
)),
Text(
"自定义刻度值显示，带带刻度的指示器,可设置刻度的样式和选中的刻度的样式，拖拽结束显示刻度值，拖拽开始显示气泡",
style: TextStyle(fontSize: 10),
)
],
),
),
],
)),
);
}
}
网友评论