flutter_seekbar

flutter 插件

flutter seekbar

A beautiful flutter custom seekbar, which has a bubble view with progress appearing upon when seeking. 自定义SeekBar,进度变化更以可视化气泡样式呈现

效果图

flutter_seekbar

引入:

dependencies:
  flutter:
    sdk: flutter
  flutter_seekbar:
    git: https://github.com/LiuC520/flutter_seekbar.git

属性

Attribute 属性默认值Description 描述
min0.0最小值
max100.0最大值
value0默认进度值,最大值默认是100,指定了max,最大值是max
backgroundColor页面配置的backgroundColor进度条背景颜色
progressColoraccentColor当前进度的颜色
progresseight5进度条的高度
sectionCount1进度条分为几段
sectionColor当前进度的颜色进度条每一个间隔的圆圈的颜色
sectionUnSelecteColor进度条的背景颜色间隔未选中的颜色
sectionRadius0.0间隔圆的半径
showSectionTextfalse是否显示刻度值
sectionTexts空数组自定义刻度值,是个数组,数组必须是SectionTextModel的实体
sectionTextSize14刻度值字体的大小
afterDragShowSectionTextfalse是否在拖拽结束后显示刻度值
sectionTextColor黑色刻度值字体的颜色
sectionSelectTextColor透明(Colors.transparent)选中的刻度值字体的颜色
sectionDecimal0刻度值的小数点位数
sectionTextMarginTop4.0刻度值距离进度条的间距
indicatorRadius进度条的高度 + 2中间指示器圆圈的半径
indicatorColor进度条当前进度的颜色中间指示器圆圈的颜色
semanticsLabel这个是给盲人用的,屏幕阅读器的要读出来的标签
semanticsValue这个是给盲人用的,屏幕阅读器的要读出的进度条的值
onValueChanged默认是空方法进度改变的回调,是ProgressValue的实体,里面包含了进度,0-1,还包含了当前的进度值
isRoundtrue ( 圆角 )圆角还是直角,圆角的默认半径是进度条高度的一半
hideBubbletrue是否显示气泡,默认是隐藏
alwaysShowBubblefalse是否一致显示气泡,默认是false,也就是只有在拖拽的时间才显示气泡,拖拽结束不显示
bubbleRadius20气泡的半径
bubbleHeight60气泡的总高度,包含顶部圆形的半径,默认是气泡半径的3倍
bubbleColor当前进度条的颜色气泡的背景颜色
bubbleTextColor白色气泡中当前进度值的字体颜色,默认是白色
bubbleTextSize14气泡中当前进度值的字体大小,默认是14
bubbleMargin4气泡底部距离进度条的高度,默认是4
bubbleInCenterfalse气泡是否在进度条的中间显示,默认是
isCanTouchtrue是否响应触摸事件,默认是响应的,也就是可以拖拽显示进度的

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: v,
                        isRound: false,
                        progressColor: Colors.red,
                      )),
                  GestureDetector(
                      onTap: () => {
                            this.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: <Widget>[
                    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: <Widget>[
                    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: <Widget>[
                    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: <Widget>[
                    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: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      textDirection: TextDirection.ltr,
                      children: <Widget>[
                        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: <Widget>[
                    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: <Widget>[
                    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: <Widget>[
                    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: <Widget>[
                    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),
                    )
                  ],
                ),
              ),
              ],
            )),
      );

  }
}

License

   Copyright 2018 LiucCheng

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

contact me

qq: 674668211 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/

Libraries

flutterseekbar
get_text_width
progress_value
section_text_model
seekbar