flutter_xlider 2.5.2

flutter_xlider #

(Flutter Slider) A material design slider and range slider, horizontal and vertical, with rtl support and lots of options and customizations for flutter

Version 2.4.4 and above, break functionality of older versions

Get Started #

Single Slider #

A single slider

FlutterSlider(
  values: [300],
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

To make slider Right To Left use rtl: true

 FlutterSlider(
  ...
  rtl: true,
  ...
)

Range Slider #

A simple example of range slider

FlutterSlider(
  values: [30, 420],
  rangeSlider: true,
  max: 500,
  min: 0,
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    setState(() {});
  },
)

Vertical Axis #

You can change the axis of your slider by setting axis to Axis.vertical. Default is horizontal

FlutterSlider(
  ...
  axis: Axis.vertical,
  ...
)

Handlers #

You can customize handlers using handler and rightHandler properties.
Both handler and rightHandler accept FlutterSliderHandler class which has following properties:

  1. child: is a widget
  2. disabled: to disable the handler
  3. decoration, foregroundDecoration and transform are come from Container() widget
FlutterSlider(
  ...
  handler: FlutterSliderHandler(
    decoration: BoxDecoration(),
    child: Material(
      type: MaterialType.canvas,
      color: Colors.orange,
      elevation: 3,
      child: Container(
          padding: EdgeInsets.all(5),
          child: Icon(Icons.adjust, size: 25,)),
    ),
  ),
  rightHandler: FlutterSliderHandler(
    child: Icon(Icons.chevron_left, color: Colors.red, size: 24,),
  ),
  ...
)

Handler Scale Animation #

You can control the scale animation type of your handlers, it's duration and it's scale size using handlerAnimation
handlerAnimation accepts a FlutterSliderHandlerAnimation class which has 4 properties as following

FlutterSlider(
  ...
    handlerAnimation: FlutterSliderHandlerAnimation(
      curve: Curves.elasticOut,
      reverseCurve: Curves.bounceIn,
      duration: Duration(milliseconds: 500),
      scale: 1.5
    ),
  ...
)

if you don't want scale animation, then just pass 1 to scale property
if you don't want reverseCurve, just ignore it. default is null

Trackbars #

To customize track bars you can use FlutterSliderTrackBar. You can see the details here

FlutterSlider(
  ...
    trackBar: FlutterSliderTrackBar(
      activeTrackBarHeight: 5,
    ),
  ...
)

inactiveTrackBarColor and activeTrackBarColor properties are removed. use inactiveTrackBar and activeTrackBar instead.

FlutterSlider(
  ...
    trackBar: FlutterSliderTrackBar(
      inactiveTrackBar: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.black12,
        border: Border.all(width: 3, color: Colors.blue),
      ),
      activeTrackBar: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        color: Colors.blue.withOpacity(0.5)
      ),
    ),
  ...
)

Tooltips #

In order to customize your tooltips, you can use FlutterSliderTooltip class. You can see all properties here

FlutterSlider(
  ...
  tooltip: FlutterSliderTooltip(
    textStyle: TextStyle(fontSize: 17, color: Colors.white),
    boxStyle: FlutterSliderTooltipBox(
      decoration: BoxDecoration(
        color: Colors.redAccent.withOpacity(0.7)
      )
    )
  ),
  ...
)

Here there is a range slider with customized handlers, trackbars and tooltips

Tooltip Prefix #

You can use leftPrefix, leftSuffix, rightPrefix, rightSuffix to add your desired widget around tooltip content.

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      leftPrefix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),
      rightSuffix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),
    ),
  ...
)

Tooltip Number Format #

You can customize tooltip numbers by using NumberFormat class
here is an example

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      numberFormat: intl.compact(),
      // numberFormat: intl.NumberFormat(),
    ),
  ...
)

You can find more about NumberFormat

Disable tooltip #

To disable tooltips, use disabled in FlutterSliderTooltip class

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      disabled: true,
    ),
  ...
)

Always Show Tooltips #

Tooltips always displayed if this property is set to true.

FlutterSlider(
  ...
  tooltip: FlutterSliderTooltip(
    alwaysShowTooltip: true,
  ),
  ...
)

Controls #

Handlers width and height #

By default both handlers size are 35 width and height, but you can change this by handlerWidth and handlerHeight

FlutterSlider(
  ...
  handlerWidth: 30,
  handlerHeight: 30,
  ...
)

Select By Tap #

You can tap on the slider to select it's value.
if slider is range-slider, then the closest handler to the selected point will move to that point

FlutterSlider(
  ...
  selectByTap: true, // default is true
  ...
)

Jump #

By default slider handlers move fluently, if you set jump to true, handlers will jump between intervals

FlutterSlider(
  ...
  jump: true,
  ...
)

Step #

The amount the slider changes on movement can be set using step option

FlutterSlider(
  ...
  step: 100,
  ...
)

Ignore Steps #

If your configurations requires that some steps are not available, you can use ignoreSteps property.
this property accepts a simple class to define from and to ranges.

FlutterSlider(
  ...
    ignoreSteps: [
      FlutterSliderIgnoreSteps(from: 8000, to: 12000),
      FlutterSliderIgnoreSteps(from: 18000, to: 22000),
    ],
  ...
)

Fixed Values #

If you want to have an array of fixed items and slide through it, you can use fixedValues property. use FlutterSliderFixedValue to add your fixed values.
FlutterSliderFixedValue has following properties:

  1. percent: (int) ( between 0..100 inclusive). the position of fixed item
  2. value: (dynamic) the value of fixed item
  • when using fixedValues, values of values property, must be within 0..100
FlutterSlider(
  ...
    values: [ 10, 50 ],
    fixedValues: [
      FlutterSliderFixedValue(percent: 0, value: "1000"),
      FlutterSliderFixedValue(percent: 10, value: "10K"),
      FlutterSliderFixedValue(percent: 50, value: 50000),
      FlutterSliderFixedValue(percent: 80, value: "80M"),
      FlutterSliderFixedValue(percent: 100, value: "100B"),
    ],
  ...
)

using above example, you get (string) 10K as upperValue or lowerValue (depends on handler), when you reach to 10 percent of the slider, you get (int) 50000 when you reach 50 percent of the slider and so on...

when using fixedValues, min and max are ignored

Minimum Distance #

When using range slider, the minimum distance between two handlers can be defined using minimumDistance option

FlutterSlider(
  ...
    minimumDistance: 300,
  ...
)

Maximum Distance #

This is the opposite of minimum distance, when using range slider, the maximum distance between two handlers can be defined using maximumDistance option

FlutterSlider(
  ...
    maximumDistance: 300,
  ...
)

Hatch Mark #

You can display a Hatch Mark underneath or beside of your slider based on axis. In order to display hatch mark you must
use FlutterSliderHatchMark class which has following properties:

  1. distanceFromTrackBar: The distance between slider and hatch mark
  2. density: The amount of lines per percent. 1 is default. any number less or more than 1 will decrease and increase lines respectively
  3. labels: If you want to display some label or text at certain percent in your hatch mark, you can use labels
  4. labelTextStyle: The style of the label text
  5. smallLine: The widget of small lines in hatch mark
  6. bigLine: The widget of big lines in hatch mark
  7. labelBox: The widget of label box

Here is an example:

FlutterSlider(
  ...
    hatchMark: FlutterSliderHatchMark(
       distanceFromTrackBar: 10,
       density: 0.5, // means 50 lines, from 0 to 100 percent
       labels: [
         FlutterSliderHatchMarkLabel(percent: 0, label: 'Start'),
         FlutterSliderHatchMarkLabel(percent: 10, label: '10,000'),
         FlutterSliderHatchMarkLabel(percent: 50, label: '50 %'),
         FlutterSliderHatchMarkLabel(percent: 80, label: '80,000'),
         FlutterSliderHatchMarkLabel(percent: 100, label: 'Finish'),
       ],
     ),
  ...
)

Each Label(FlutterSliderHatchMarkLabel) in labels property, has it's own textStyle which overrides labelTextStyle property

You MUST define width or height for the parent container of your slider to display hatchMark properly.

Touch Size #

You can control how big a handler's touch area could be. by default touch size is 25 The range is between 5 to 50

FlutterSlider(
  ...
  touchSize: 25,
  ...
)

To see the touchable area for handlers, set visibleTouchArea to true and test your slider

FlutterSlider(
  ...
  visibleTouchArea: true,
  ...
)

Disabled #

to disable your slider, you can use disabled.

FlutterSlider(
  ...
  disabled: true,
  ...
)

RTL #

makes the slider Right To Left

FlutterSlider(
  ...
  rtl: true,
  ...
)

Events #

There are 3 events

onDragStarted: fires when drag starts
onDragCompleted fires when drag ends
onDragging keeps firing when dragging

All three of above functions returns three values.

(int handlerIndex, dynamic lowerValue, dynamic upperValue)

First value is handlerIndex, which determines the handler. 0 is Left Handler and 1 refers to Right Handler

FlutterSlider(
  ...
  onDragging: (handlerIndex, lowerValue, upperValue) {
    _lowerValue = lowerValue;
    _upperValue = upperValue;
    
    if(handlerIndex == 0)
        print(" Left handler ");
    
    setState(() {});
  },
  ...
)

If you use selectByTap, then only onDragStarted and onDragCompleted will fire.

if you found this library helpful, and want to say thanks, consider buying me a cup of coffee

My Bitcoin Address: 1PRejtdqsVNfJk9Hzr9WKfH3fTwfSWgn7U

[0.1.1] - 02/22/2019

  • Uploaded and updated documents

[0.1.3] - 02/23/2019

  • added minimum and maximum distance options between handlers

[0.1.5] - 02/24/2019

  • added handler scale animation

[1.0.0] - 02/24/2019

  • added prefix and suffix for tooltip
  • some cleanups
  • bug fix
  • rename some classes and change input types
  • this version will break functionality of older versions

[1.0.1] - 02/26/2019

  • scroll layouts bug fixed
  • disabled tooltip feature added
  • initial handlers z-index positions bug fixed

[1.0.2] - 02/26/2019

  • tab view and any other scrollable widget bug fixed

[2.0.0] - 03/05/2019

  • handlers can have double values
  • divisions changed with step. step can be double
  • handlers can be modified.

[2.0.1] - 03/07/2019

  • handlers drag improved

[2.1.0] - 03/08/2019

  • bug fix
  • vertical axis support

[2.1.1] - 03/17/2019

  • trackbar positions bug fixed

[2.2.0] - 03/30/2019

  • selectByTap feature added
  • some options ( values, max, min, step, ... ) can be updated by setState

[2.3.1] - 04/04/2019

  • removed TouchZone
  • leftInactiveTrackBar and rightInactiveTrackBar changed to inactiveTrackBar
  • each handler can now be disabled
  • trackbar disabled color feature added
  • More accurate handlers movement

[2.4.2] - 04/05/2019

  • hatchMark feature added
  • bug fix

[2.4.3] - 04/11/2019

  • hatchMark label textStyle added

[2.4.4] - 07/14/2019

  • hatchMark label position bug fixed
  • trackbar style changed to BoxDecoration

[2.4.5] - 07/15/2019

  • min and max validation check while changing slider values manually

[2.5.0] - 07/18/2019

  • fixed values feature added

[2.5.1] - 07/18/2019

  • bug fix

[2.5.2] - 08/06/2019

  • orientation bug fix

example/example.dart

import 'package:flutter/material.dart';
import 'package:flutter_xlider/flutter_xlider.dart';
import 'package:intl/intl.dart' as intl;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        //
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _lowerValue = 50;
  double _upperValue = 180;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 50, left: 50, right: 50),
            alignment: Alignment.centerLeft,
            child: FlutterSlider(
              values: [60, 160],
//              ignoreSteps: [
//                FlutterSliderIgnoreSteps(from: 120, to: 150),
//                FlutterSliderIgnoreSteps(from: 160, to: 190),
//              ],
              max: 200,
              min: 50,
              maximumDistance: 300,
              rangeSlider: true,
              rtl: true,
              handlerAnimation: FlutterSliderHandlerAnimation(
                  curve: Curves.elasticOut,
                  reverseCurve: null,
                  duration: Duration(milliseconds: 700),
                  scale: 1.4),
              onDragging: (handlerIndex, lowerValue, upperValue) {
                _lowerValue = lowerValue;
                _upperValue = upperValue;
                setState(() {});
              },
            ),
          ),
          Container(
              margin: EdgeInsets.only(top: 50, left: 20, right: 20),
              alignment: Alignment.centerLeft,
              child: FlutterSlider(
                values: [1000, 15000],
                rangeSlider: true,
//rtl: true,
                ignoreSteps: [
                  FlutterSliderIgnoreSteps(from: 8000, to: 12000),
                  FlutterSliderIgnoreSteps(from: 18000, to: 22000),
                ],
                max: 25000,
                min: 0,
                step: 100,

                jump: true,

                trackBar: FlutterSliderTrackBar(
                  activeTrackBarHeight: 5,
                ),
                tooltip: FlutterSliderTooltip(
                  textStyle: TextStyle(fontSize: 17, color: Colors.lightBlue),
                  numberFormat: intl.NumberFormat(),
                ),
                handler: FlutterSliderHandler(
                  decoration: BoxDecoration(),
                  child: Material(
                    type: MaterialType.canvas,
                    color: Colors.orange,
                    elevation: 10,
                    child: Container(
                        padding: EdgeInsets.all(5),
                        child: Icon(
                          Icons.adjust,
                          size: 25,
                        )),
                  ),
                ),
                rightHandler: FlutterSliderHandler(
                  child: Icon(
                    Icons.chevron_left,
                    color: Colors.red,
                    size: 24,
                  ),
                ),
                disabled: false,

                onDragging: (handlerIndex, lowerValue, upperValue) {
                  _lowerValue = lowerValue;
                  _upperValue = upperValue;
                  setState(() {});
                },
              )),
          Container(
              margin: EdgeInsets.only(top: 50, left: 20, right: 20),
              alignment: Alignment.centerLeft,
              child: FlutterSlider(
                values: [3000, 17000],
                rangeSlider: true,
//rtl: true,

//                ignoreSteps: [
//                  FlutterSliderIgnoreSteps(from: 8000, to: 12000),
//                  FlutterSliderIgnoreSteps(from: 18000, to: 22000),
//                ],
                max: 25000,
                min: 0,
                step: 100,
                jump: true,
                trackBar: FlutterSliderTrackBar(
                  inactiveTrackBarHeight: 2,
                  activeTrackBarHeight: 3,
                ),

                disabled: false,

                handler: customHandler(Icons.chevron_right),
                rightHandler: customHandler(Icons.chevron_left),
                tooltip: FlutterSliderTooltip(
                  numberFormat: intl.NumberFormat(),
                  leftPrefix: Icon(
                    Icons.attach_money,
                    size: 19,
                    color: Colors.black45,
                  ),
                  rightSuffix: Icon(
                    Icons.attach_money,
                    size: 19,
                    color: Colors.black45,
                  ),
                  textStyle: TextStyle(fontSize: 17, color: Colors.black45),
                ),

                onDragging: (handlerIndex, lowerValue, upperValue) {
                  _lowerValue = lowerValue;
                  _upperValue = upperValue;
                  setState(() {});
                },
              )),
          Container(
            margin: EdgeInsets.only(top: 20, left: 20, right: 20),
            alignment: Alignment.centerLeft,
            child: FlutterSlider(
              key: Key('3343'),
              values: [300000000, 1600000000],
              rangeSlider: true,
              tooltip: FlutterSliderTooltip(
                alwaysShowTooltip: true,
                numberFormat: intl.NumberFormat.compact(),
              ),
              max: 2000000000,
              min: 0,
              step: 20,
              jump: true,
              onDragging: (handlerIndex, lowerValue, upperValue) {
                _lowerValue = lowerValue;
                _upperValue = upperValue;
                setState(() {});
              },
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 50, left: 50, right: 50),
            alignment: Alignment.centerLeft,
            child: FlutterSlider(
              values: [30, 60],
              rangeSlider: true,
              max: 100,
              min: 0,
              visibleTouchArea: true,
              trackBar: FlutterSliderTrackBar(
                inactiveTrackBarHeight: 14,
                activeTrackBarHeight: 10,
                inactiveTrackBar: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.black12,
                  border: Border.all(width: 3, color: Colors.blue),
                ),
                activeTrackBar: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    color: Colors.blue.withOpacity(0.5)),
              ),
              onDragging: (handlerIndex, lowerValue, upperValue) {
                _lowerValue = lowerValue;
                _upperValue = upperValue;
                setState(() {});
              },
            ),
          ),



          /*Fixed Values*/
          Container(
            height: 80,
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: FlutterSlider(
              jump: true,
              values: [10],
              fixedValues: [
                FlutterSliderFixedValue(percent: 0, value: "1000"),
                FlutterSliderFixedValue(percent: 10, value: "10K"),
                FlutterSliderFixedValue(percent: 50, value: 50000),
                FlutterSliderFixedValue(percent: 80, value: "80M"),
                FlutterSliderFixedValue(percent: 100, value: "100B"),
              ],
              onDragging: (handlerIndex, lowerValue, upperValue) {
                _lowerValue = lowerValue;
                setState(() {

                });
              },
            ),
          ),

          /*Hatch Mark Example*/
          Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 10),
            child: FlutterSlider(
              handlerWidth: 15,
              hatchMark: FlutterSliderHatchMark(
                distanceFromTrackBar: 5,
                density: 0.5,
                labels: [
                  FlutterSliderHatchMarkLabel(percent: 0, label: 'Start'),
                  FlutterSliderHatchMarkLabel(percent: 10, label: '10,000'),
                  FlutterSliderHatchMarkLabel(percent: 50, label: '50 %'),
                  FlutterSliderHatchMarkLabel(percent: 80, label: '80,000'),
                  FlutterSliderHatchMarkLabel(percent: 100, label: 'Finish'),
                ],
              ),
              jump: true,
              trackBar: FlutterSliderTrackBar(),
              handler: FlutterSliderHandler(
                decoration: BoxDecoration(),
                child: Container(
                  decoration: new BoxDecoration(
                    color: Colors.blue,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              rightHandler: FlutterSliderHandler(
                decoration: BoxDecoration(),
                child: Container(
                  decoration: new BoxDecoration(
                    color: Colors.blue,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
              values: [30000, 70000],
              visibleTouchArea: true,
              min: 0,
              max: 100000,
              touchSize: 15,
              rangeSlider: true,
              step: 1000,
              onDragging: (handlerIndex, lowerValue, upperValue) {},
            ),
          ),
          SizedBox(
            height: 50,
          ),
          Text('Lower Value: ' + _lowerValue.toString()),
          SizedBox(height: 25),
          Text('Upper Value: ' + _upperValue.toString())
        ],
      ),
    );
  }

  customHandler(IconData icon) {
    return FlutterSliderHandler(
      decoration: BoxDecoration(),
      child: Container(
        child: Container(
          margin: EdgeInsets.all(5),
          decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.3), shape: BoxShape.circle),
          child: Icon(
            icon,
            color: Colors.white,
            size: 23,
          ),
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          boxShadow: [
            BoxShadow(
                color: Colors.blue.withOpacity(0.3),
                spreadRadius: 0.05,
                blurRadius: 5,
                offset: Offset(0, 1))
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_xlider: ^2.5.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_xlider/flutter_xlider.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
93
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
94
Learn more about scoring.

We analyzed this package on Sep 13, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.51 points)

119 out of 121 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (intl).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
intl ^0.15.8 0.15.8 0.16.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test