flutter seekbar
wechat ：674668211 加微信進flutter微信群 掘金： juejin.im/user/581206… 簡書：www.jianshu.com/u/4a5dce568… csdn：me.csdn.net/liu__520 github : github.com/LiuC520/
A beautiful flutter custom seekbar, which has a bubble view with progress appearing upon when seeking. 自定義SeekBar，進度變化更以視覺化氣泡樣式呈現
效果圖
引入:
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/LiuC520/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),
)
],
),
),
],
)),
);
}
}
複製程式碼