Flutter滑动条控制插件flutter_seekbar的使用
Flutter滑动条控制插件flutter_seekbar的使用
flutter_seekbar
flutter 插件
flutter seekbar
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 | 默认进度值，最大值默认是100，指定了max，最大值是max |
| 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 | 气泡是否在进度条的中间显示，默认是 |
| isCanTouch | true | 是否响应触摸事件，默认是响应的，也就是可以拖拽显示进度的 |
示例
1、首先在pubspec.yaml中添加依赖
dependencies:
flutter:
sdk: flutter
flutter_seekbar:
git: https://github.com/LiuC520/flutter_seekbar.git
2、示例
import 'package:flutter/material.dart';
import 'package:flutter_seekbar/flutter_seekbar.dart' show ProgressValue, SectionTextModel, SeekBar;
class Home extends StatefulWidget {
[@override](/user/override)
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
List<SectionTextModel> sectionTexts = [];
[@override](/user/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](/user/override)
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.fromLTRB(0, 80, 0, 0),
child: Column(
children: [
Column(
children: [
Container(
width: 200,
child: SeekBar(
progresseight: 10,
indicatorRadius: 0.0,
value: 0, // 需要定义v变量或替换为实际值
isRound: false,
progressColor: Colors.red,
)),
GestureDetector(
onTap: () => {
setState(() {
v = 60;
})
},
child: Container(
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
width: 50,
height: 50,
color: Colors.blue,
child: Text(
"直角",
textDirection: TextDirection.ltr,
maxLines: 1,
style: TextStyle(fontSize: 10),
),
)),
],
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
width: 200,
child: SeekBar(
isCanTouch: false,
indicatorRadius: 0.0,
progresseight: 5,
value: 50,
hideBubble: false,
alwaysShowBubble: true,
bubbleRadius: 14,
bubbleColor: Colors.purple,
bubbleTextColor: Colors.white,
bubbleTextSize: 14,
bubbleMargin: 4,
bubbleInCenter: true)),
Text(
"圆角，气泡居中，始终显示气泡",
textDirection: TextDirection.ltr,
maxLines: 1,
style: TextStyle(fontSize: 10),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
width: 200,
child: SeekBar(
progresseight: 5,
value: 20,
)),
Text(
"圆角带指示器",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
width: 200,
child: SeekBar(
progresseight: 5,
value: 50,
sectionCount: 5,
)),
Text(
"带间隔带指示器",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
width: 200,
child: SeekBar(
progresseight: 5,
value: 50,
sectionCount: 4,
sectionRadius: 6,
sectionColor: Colors.red,
)),
Text(
"带间隔画间隔的指示器",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
textDirection: TextDirection.ltr,
children: [
Text(
'-10',
textDirection: TextDirection.ltr,
),
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 4),
width: 200,
child: SeekBar(
progresseight: 5,
value: 58,
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',
textDirection: TextDirection.ltr,
)
],
),
Text(
"带间隔带气泡的指示器，气泡",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
progresseight: 10,
value: 50,
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(
"带带刻度的指示器,可设置刻度的样式和选中的刻度的样式",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
progresseight: 10,
value: 50,
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(
"带带刻度的指示器,可设置刻度的样式和选中的刻度的样式，拖拽结束显示刻度值，拖拽开始显示气泡",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
min: -100,
max: 200,
progresseight: 10,
value: 50,
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(
"自定义刻度值显示，带带刻度的指示器,可设置刻度的样式和选中的刻度的样式，拖拽结束显示刻度值，拖拽开始显示气泡",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 40, 0, 0),
child: Column(
children: [
Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 40),
width: 200,
child: SeekBar(
progresseight: 10,
value: 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(
"自定义刻度值显示，带带刻度的指示器,可设置刻度的样式和选中的刻度的样式，拖拽结束显示刻度值，拖拽开始显示气泡",
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 10),
)
],
),
),
],
)),
);
}
}
更多关于Flutter滑动条控制插件flutter_seekbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter滑动条控制插件flutter_seekbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中使用flutter_seekbar插件来控制滑动条的示例代码。这个示例展示了如何集成flutter_seekbar插件，并实现基本的滑动条功能，包括监听滑动事件和更新UI。
首先，确保你的Flutter项目中已经添加了flutter_seekbar依赖。在你的pubspec.yaml文件中添加以下依赖：
dependencies:
flutter:
sdk: flutter
flutter_seekbar: ^0.14.0 # 请检查最新版本号
然后运行flutter pub get来安装依赖。
接下来，在你的Dart文件中使用flutter_seekbar。以下是一个完整的示例：
import 'package:flutter/material.dart';
import 'package:flutter_seekbar/flutter_seekbar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter SeekBar Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SeekBarExample(),
);
}
}
class SeekBarExample extends StatefulWidget {
@override
_SeekBarExampleState createState() => _SeekBarExampleState();
}
class _SeekBarExampleState extends State<SeekBarExample> {
double _value = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter SeekBar Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Current Value: $_value',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
FlutterSeekBar(
thumbColor: Colors.blue,
barColor: Colors.grey[300]!,
progressColor: Colors.blue,
min: 0,
max: 100,
initialValue: _value,
onChanged: (double value) {
setState(() {
_value = value;
});
},
),
],
),
),
);
}
}
在这个示例中：
FlutterSeekBar小部件用于创建一个滑动条。thumbColor、barColor和progressColor属性用于设置滑动条的颜色。min和max属性定义了滑动条的最小值和最大值。initialValue属性设置了滑动条的初始值。onChanged回调在滑动条的值改变时被调用，用于更新UI（在这个例子中，更新显示的当前值）。
运行这个示例，你会看到一个简单的UI，其中包含一个显示当前值的文本和一个可以滑动的进度条。当你滑动进度条时，显示的当前值会实时更新。
这个示例展示了flutter_seekbar插件的基本用法，你可以根据需要进一步自定义和扩展。
