A material design slider and range slider with rtl support and lots of options and customization for flutter

Overview

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

!! Since version 3.4.0-dev.3, step type is no longer double, its FlutterSliderStep !!

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)
      ),
    ),
  ...
)

Central Widget

If you want to have a widget in the middle of your slider, you can use centralWidget

FlutterSlider(
  ...
    trackBar: FlutterSliderTrackBar(
        centralWidget: Container(
          decoration: BoxDecoration(
              color: trackBarColor,
            borderRadius: BorderRadius.circular(50)
          ),
          width: 9,
          height: 9,
        ),
    ),
  ...
)

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 Format

If you want to change the format of the value of tooltip you can use format method.

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      format: (String value) {
        return value + ' ! ';
      }
    ),
  ...
)

Tooltip Callback

If you want to fully change tooltip widget and use your own customized widget, you can use custom function.

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      custom: (value) {
        return Text(value.toString());
      }
    ),
  ...
)

Disable Tooltip

To disable tooltips, use disabled in FlutterSliderTooltip class

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

Tooltip Direction

To change the direction of the tooltip, you can use direction

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      direction: FlutterSliderTooltipDirection.right,
    ),
  ...
)

Tooltip Position Offset

By default tooltip alignment is center, but you can modify it's top, left, right and bottom by using positionOffset

FlutterSlider(
  ...
    tooltip: FlutterSliderTooltip(
      positionOffset: FlutterSliderTooltipPositionOffset(
        top: -100
      ),
    ),
  ...
)

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
  ...
)

if you want to move your handlers by touching and moving active TrackBar, you have to set this to false

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: FlutterSliderStep(step: 1),
  ...
)

Range Step

If you want to have a non-linear slider with different steps, simply use rangeStep feature.

FlutterSlider(
  min: 0,
  max: 1000000,
  ...
  step: FlutterSliderStep(
    step: 1, // default
    isPercentRange: true, // ranges are percents, 0% to 20% and so on... . default is true
    rangeList: [
      FlutterSliderRangeStep(from: 0, to: 20, step: 10000),
      FlutterSliderRangeStep(from: 20, to: 100, step: 200000),
    ]
  ),
  ...
)

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,
  ...
)

Locked Handlers

If you want to lock your handlers by a certain value, you can use lockHandlers and lockDistance properties

FlutterSlider(
  ...
    lockHandlers: true,
    lockDistance: 50,
  ...
)

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. linesDistanceFromTrackBar: The distance of lines from slider. can be negative

  2. bigLine: The widget of big lines in hatch mark

  3. smallLine: The widget of small lines in hatch mark

  4. linesAlignment: the direct of lines, right or left which works as top or bottom on horizontal slider

  5. density: The amount of lines per percent. 1 is default. any number less or more than 1 will decrease and increase lines respectively

  6. displayLines: to display lines. by default is false for the sake of optimization

  7. labels: If you want to display some label or text at certain percent in your hatch mark, you can use labels

  8. labelBox: The widget of label box, however, you can define a widget for each label and have it's own style

  9. labelsDistanceFromTrackBar: The distance of labels from slider. can be negative

  10. disabled: to disabled the whole hatchmark ( hide )

labels alignment is center

Here is an example:

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

Centered Origin

If you want the value of your slider originates from center of the slider, then you can use centeredOrigin property

FlutterSlider(
  ...
    centeredOrigin: true
  ...
  
  ...
    trackBar: FlutterSliderTrackBar(
      activeTrackBar: BoxDecoration(color: trackBarColor)
    ),
  ...
  
  ...
    onDragging: (handlerIndex, lowerValue, upperValue) {
        if (lowerValue > (max - min) / 2) {
          trackBarColor = Colors.blueAccent;
        } else {
          trackBarColor = Colors.redAccent;
        }
        setState(() {});
    })
  ...
)

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(() {});
  },
  ...
)

Working with Dates

Working with dates are simple and straightforward. just pass standard unix timestamp as values like so:

FlutterSlider(
  ...
  values: [
    new DateTime(2019,6,1,0,0,0).millisecondsSinceEpoch.toDouble(), // lower date : 2019-06-01
    new DateTime(2019,9,1,0,0,0).millisecondsSinceEpoch.toDouble(), // upper date : 2019-09-01
  ],
  min: new DateTime(2019,1,1,0,0,0).millisecondsSinceEpoch.toDouble(), // start date : 2019-01-01
  max: new DateTime(2020,1,1,0,0,0).millisecondsSinceEpoch.toDouble(), // finish date : 2020-01-01
  step: FlutterSliderStep(step: 86400), // 1 day
  ...

  ...
  tooltip: FlutterSliderTooltip(
    custom: (value) {
      DateTime dtValue = DateTime.fromMillisecondsSinceEpoch(value.toInt());
      String valueInTime = dtValue.year.toString() + '-' + dtValue.month.toString() + '-' + dtValue.day.toString();
      
      return Text( valueInTime );
    }
  )
  ...

)

Showcase

It's exciting to see what you've build using this package.
Open wiki tab, create a page and share your code and image of your slider with us. Thank you

Here are some examples of what you can make using this package:

Alphabet Range
Waves
Dirty Dial
Alone in the Dark

You can find the source code in the wiki tab.

Comments
  • Exception when i let go of scrolling

    Exception when i let go of scrolling

    When i let go of the scroller i get this exception

    ════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
    The following assertion was thrown while finalizing the widget tree:
    _FlutterSliderState#30df9(tickers: tracking 4 tickers) was disposed with an active Ticker.
    
    _FlutterSliderState created a Ticker via its TickerProviderStateMixin, but at the time dispose() was called on the mixin, that Ticker was still active. All Tickers must be disposed before calling super.dispose().
    
    Tickers used by AnimationControllers should be disposed by calling dispose() on the AnimationController itself. Otherwise, the ticker will leak.
    
    The offending ticker was: _WidgetTicker(created by _FlutterSliderState#30df9(lifecycle state: created, tickers: tracking 0 tickers))
    The stack trace when the _WidgetTicker was actually created was:
    #0      new Ticker.<anonymous closure> (package:flutter/src/scheduler/ticker.dart:66:40)
    #1      new Ticker (package:flutter/src/scheduler/ticker.dart:68:6)
    #2      new _WidgetTicker (package:flutter/src/widgets/ticker_provider.dart:237:80)
    #3      TickerProviderStateMixin.createTicker (package:flutter/src/widgets/ticker_provider.dart:168:34)
    #4      new AnimationController (package:flutter/src/animation/animation_controller.dart:245:21)
    #5      _FlutterSliderState.initMethod (package:flutter_xlider/flutter_xlider.dart:342:46)
    #6      _FlutterSliderState.initState (package:flutter_xlider/flutter_xlider.dart:253:5)
    #7      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4355:58)
    #8      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #9      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #10     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #11     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5445:14)
    #12     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #13     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #14     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #15     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #16     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
    #17     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #18     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #19     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #20     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5445:14)
    #21     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #22     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #23     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #24     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #25     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
    #26     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #27     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #28     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #29     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #30     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #31     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
    #32     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #33     ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4617:11)
    #34     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #35     MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5551:32)
    #36     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #37     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #38     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5445:14)
    #39     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #40     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #41     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #42     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #43     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
    #44     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #45     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #46     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #47     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5445:14)
    #48     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #49     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #50     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #51     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #52     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
    #53     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #54     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #55     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #56     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5445:14)
    #57     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #58     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #59     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #60     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #61     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4206:5)
    #62     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4201:5)
    #63     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3194:14)
    #64     Element.updateChild (package:flutter/src/widgets/framework.dart:2988:12)
    #65     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5219:32)
    #66     MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5561:17)
    #67     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #68     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14)
    #69     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #70     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14)
    #71     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #72     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #73     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #74     StatelessElement.update (package:flutter/src/widgets/framework.dart:4298:5)
    #75     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #76     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5161:32)
    #77     MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5561:17)
    #78     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #79     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14)
    #80     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #81     RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:5161:32)
    #82     MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5561:17)
    #83     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #84     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #85     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #86     StatefulElement.update (package:flutter/src/widgets/framework.dart:4413:5)
    #87     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #88     SingleChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:5452:14)
    #89     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #90     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #91     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #92     StatelessElement.update (package:flutter/src/widgets/framework.dart:4298:5)
    #93     Element.updateChild (package:flutter/src/widgets/framework.dart:2977:15)
    #94     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4243:16)
    #95     Element.rebuild (package:flutter/src/widgets/framework.dart:3947:5)
    #96     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2432:33)
    #97     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:773:20)
    #98     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:283:5)
    #99     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1102:15)
    #100    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1041:9)
    #101    SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:957:5)
    #105    _invoke (dart:ui/hooks.dart:259:10)
    #106    _drawFrame (dart:ui/hooks.dart:217:3)
    (elided 3 frames from package dart:async)
    
    When the exception was thrown, this was the stack: 
    #0      TickerProviderStateMixin.dispose.<anonymous closure> (package:flutter/src/widgets/ticker_provider.dart:185:13)
    #1      TickerProviderStateMixin.dispose (package:flutter/src/widgets/ticker_provider.dart:203:6)
    #2      StatefulElement.unmount (package:flutter/src/widgets/framework.dart:4435:12)
    #3      _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1748:13)
    #4      _InactiveElements._unmount.<anonymous closure> (package:flutter/src/widgets/framework.dart:1746:7)
    ...
    
    opened by febg11 14
  • how to display tooltip for irregular interval value?

    how to display tooltip for irregular interval value?

    I have a pretty unusual situation, my app need a slider like below:

    bar

    Is there a way I can customize the tooltip to display the value I want? Maybe from an array like the HatchMark?

    enhancement 
    opened by SonQBChau 12
  • Unable to drag to last value

    Unable to drag to last value

    Hi, thanks for this amazing plugin!

    I skimmed through the open issues but i didn't figure out a way to fix this. The problem is that it''s very tricky to be able to select the last value of a set, this is a gif of my case:

    ezgif com-video-to-gif

    It doesn't matter if i'm starting the drag from 1, or if its already locked at 9 and i try lo scroll further. The first value is always correctly reachable.

    Thanks a lot again!

    bug fixed 
    opened by davidBarbieri 8
  • Very hard to drag slider to max value

    Very hard to drag slider to max value

    Somehow it's very hard to drag to max value. (tested on ios simulator and device, haven't tried on android).

    Here is the vid in ios simulator (i'm clicking the mouse and drag it, however it cannot reach max value) 1

    FlutterSlider(
        jump: true,
        tooltip: FlutterSliderTooltip(
            disabled: true,
        ),
        trackBar: FlutterSliderTrackBar(
            activeTrackBarColor: Colors.blue[500],
        ),
        handler: FlutterSliderHandler(
            child: Container(
                width: 32,
                height: 32,
                decoration: new BoxDecoration(
                    border: Border.all(color: Colors.blue, width: 3),
                    color: Colors.white,
                    shape: BoxShape.circle,
                ),
            ),
        ),
        values: [500000],
        min: 100000,
        max: 1000000,
        step: 100000,
        onDragging: (handlerIndex, lowerValue, upperValue) {
        },
    )
    
    bug fixed 
    opened by dexcell 8
  • _drawHatchMark throws exception at some edge case

    _drawHatchMark throws exception at some edge case

    Hi there, I believe I found out an issue, when using the slider. It is quite an edge case and I cannot isolate it in minimum reproducing sample, however, I debugged it and I will try to explain the case:

    The issue appears in case hatchMark is set.

    In case the slider is on app home page, at some point _drawHatchMark is called. Within it however, at lines 461 to 465, the slider uses _constraintMaxHeight and _constraintMaxWidth for its internal calculations. These two class members however are initialized at lines 605 and 606 within build method.

    In my edge case, however, _drawHatchMark is called from didUpdateWidget which as I believe you are familiar is actually called prior build method. In summary - when _drawHatchMark is called the above two class members are null, hence the calculations failed.

    I hope the above will give you an idea about the case and how to fix it.

    Thanks for the excellent widget and I look forward to hearing from you!

    Updated Actually commented out _drawHatchMark call from didUpdateWidget (line 592) seems to fix the issue, I would however leave to you to decide if this is the ulitmate fix.

    bug 
    opened by angel1st 7
  • FlutterSliderHatchMark keeps moving

    FlutterSliderHatchMark keeps moving

    Every time the FlutterSliderHatchMark disappears from the view (by scrolling), the next time it appears is 10/15px below from where it was previously.

    Video of the behaviour

    Code

    bug fixed 
    opened by joaorpalma 7
  • Set state inside xlider  isn't happening when [values] are set to same value as xlider was created

    Set state inside xlider isn't happening when [values] are set to same value as xlider was created

    Thanks for awesome library. Great job.

    I want to report an issue.

    When xLider is created it is created with default value (50 in my case). When you use external buttons to setState with new value - xLider isn't rebuilding when reaches 50. Let's say you were on 50 and tap on + button. Value becomes 51 - xLider rebuilds - everything is fine. But if you tap on - then - value becomes 50 again (same as initial value). xLider isn't rebuilt. You can see dot stays on 51 value

    Let me explain and show in video. https://take.ms/k4dcX

    Code snippet (I've removed everything unnecessary and still reproduced)

    class FuturesLeverageBody extends StatefulWidget {
      @override
      _FuturesLeverageBodyState createState() => _FuturesLeverageBodyState();
    }
    
    class _FuturesLeverageBodyState extends State<FuturesLeverageBody> {
      double value = 50;
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                FlatButton(
                  child: Text('-'),
                  onPressed: () {
                    setState(() {
                      value--;
                    });
                  },
                ),
                Spacer(),
                FlatButton(
                  child: Text('+'),
                  onPressed: () {
                    setState(() {
                      value++;
                    });
                  },
                ),
              ],
            ),
            FlutterSlider(
              values: [value],
              min: 0,
              max: 125,
              jump: true,
              selectByTap: true,
              step: 25,
            ),
          ],
        );
      }
    }
    
    

    p.s. you mentioned showcases are welcomed. You can see this showcase from my app. if you want I can extract whole code for showing as an example in you about pages. Again thanks for awesome widget.

    bug enhancement 
    opened by AlexBacich 6
  • "The method 'toDouble' was called on null" when using fixedValues

    Here is the code where the error occured. Does this is a bug or i am using on wrong way?

      void didUpdateWidget(FlutterSlider oldWidget) {
        bool lowerValueNotEquality = oldWidget.values[0] != widget.values[0];
        bool upperValueNotEquality =
            (widget.values.length > 1 && oldWidget.values[1] != widget.values[1]);
    
        _widgetMax = widget.max;
        _widgetMin = widget.min;
    
        /// _widgetMax and _widgetMin are null
        bool lowerValueValidation =
            (widget.values[0] >= _widgetMin && widget.values[0] <= _widgetMax);
        ...
    }
    

    The code where i am using fluter_xlider widget:

    FlutterSlider(
       jump: false,
       values: const [20],
       tooltip: FlutterSliderTooltip(
          alwaysShowTooltip: true,
       ),
       fixedValues: [
        FlutterSliderFixedValue(percent: 0, value: 1),
        FlutterSliderFixedValue(percent: 10, value: 2),
        FlutterSliderFixedValue(percent: 20, value: 3),
        FlutterSliderFixedValue(percent: 30, value: 4),
      ],
       onDragging: (handlerIndex, lowerValue, upperValue) => validDays = lowerValue as int,
     )
    
    bug fixed 
    opened by Doflatango 6
  • [Question] - How to reduce slider padding

    [Question] - How to reduce slider padding

    Hi there, First of all - thanks for the excellent package you have developed! I have a question though - I am using the slider vertically, and since the screen width is limited, I would like to reduce the slide horizontal padding - is it possible to achieve this?

    opened by angel1st 6
  • xlider for Flutter web

    xlider for Flutter web

    This is more of a request than an issue. I would like to use flutter_xlider for the Flutter web too.

    Currently, when compiled, it gives the error: Another exception was thrown: RangeError (index): Index out of range: index should be less than 1: 1 The same code works fine on mobile.

    bug fixed 
    opened by praharshbhatt 5
  • Slider Tap to select value doesn't trigger onDragCompleted event

    Slider Tap to select value doesn't trigger onDragCompleted event

    Currently, only the onDragging event is triggered when tapping the slider to select the value, is it possible to add the tap to trigger the onDragCompleted event? I am using the call back to update a list count after an API call and don't want to add the onDragging event to constantly keep calling the API? Love the package so far!

    opened by adentutton 5
  • fix: clear warnings from Flutter 3.0.0

    fix: clear warnings from Flutter 3.0.0

    In Flutter 3.0.0, the instance of WidgetsBinding is no longer nullable, so forcing that instance to not null with ! is no longer necessary.

    Tested also on the latest Flutter hotfix 3.0.5.

    More insights: In my case throwing warning had a significant impact on running tests. With warning, I observed 30-40% more time needed to execute all tests.

    opened by dmkasperski 0
  • How can we animate one value point to another value point smoothly?

    How can we animate one value point to another value point smoothly?

    Hi,

    I have achieved everything using this package but i am struggling in one thing, which is kind of minor but very important. I want to animate the sliderHandler to another point in kind of animation, like if my current value is 1 and it become 40 then the SliderHandle should move to point 40 smoothly, not just hump on the point.

    I ll really appriciate someone help me out

    opened by jawwad-iqbal22 0
  • flutter_xlider: ^3.4.0 - Compile error with Flutter 3.0.0

    flutter_xlider: ^3.4.0 - Compile error with Flutter 3.0.0

    Hello everyone,

    I'm getting the following error many Errors: Error: No named parameter with the name 'overflow'. and Context: Found this candidate, but the arguments don't match. once I upgraded to Flutter 3.0.0 today:

    
    /home/user/snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_xlider-3.4.0/lib/flutter_xlider.dart:322:19: Error: No named parameter with the name 'overflow'.
                      overflow: Overflow.visible,
                      ^^^^^^^^
    /home/user/snap/flutter/common/flutter/packages/flutter/lib/src/widgets/basic.dart:3708:3: Context: Found this candidate, but the arguments don't match.
      Stack({
    
      ^^^^^
    

    Hopefully it's something that can get addressed soon!

    Thank you, Ravinder

    opened by ravinder-bb 4
  • feature: fixed unmounted exception

    feature: fixed unmounted exception

    ======== Exception caught by scheduler library =====================================================

    This widget has been unmounted, so the State no longer has a context (and should be considered defunct).

    opened by efraespada 0
  • Migrate the package to null safty

    Migrate the package to null safty

    your flutter package "flutter_xlider" has many likes and usages and it has very popularity on pub.dev as you know so it's a good value for you to migrate to null safety to keep numbers rising I was using this package in my apps and it's very easy to use but now i upgraded flutter to 2.5.2 and I need to migrate my code

    opened by mohamad97-alhomsi 2
Owner
FullStack Developer. Flutter, Dart. Master of Computer Science (ImamReza University) Looking for a remote job Full Stack Web Developer + Flutter
null
Sleek circular slider/progress bar & spinner for Flutter

Sleek circular slider/progress bar & spinner for Flutter A highly customizable circular slider/progress bar & spinner for Flutter. Getting Started Ins

Mat Nuckowski 474 Nov 21, 2022
RangeSlider Widget for Flutter

RangeSlider An extension of the Flutter Material Slider to allow selection of a range of values via 2 thumbs. Step by step explanation A full explanat

Didier Boelens 356 Nov 8, 2022
MindInventory 15 Sep 5, 2022
Flutter fluid slider - A fluid design slider that works just like the Slider material widget

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design s

Jay Raj 2 Feb 18, 2022
An animated menu with both RTL and LTR direction support

animated_menu A new Flutter package project. Getting Started This project is a starting point for a Dart package, a library module containing code tha

Persian Flutter Community 5 Jan 31, 2022
A flutter package which makes it easier to plot different types of charts with lots of customization, made purely in dart

multi_charts It is a library that provides different types of charts to plot data points. Currently it supports only Radar Chart, but will support mor

Intkhab Ahmed 28 Nov 9, 2022
Flutter date range pickers use a dialog window to select a range of date on mobile.

[Deprecated] Date Range Picker Currently Flutter has supported date range picker, so I think my mission is done. Thanks for using my lib. Link: https:

null 227 Oct 17, 2022
A fluid design slider that works just like the Slider material widget.

Fluid Slider for Flutter Inspired by a dribbble by Virgil Pana. A fluid design slider that works just like the Slider material widget. Used to select

Vamsi Krishna 307 Nov 3, 2022
A sophisticated tool for managing queues of asynchronous tasks, with a stream interface, strong typing and lots of helpful options.

Secretary A sophisticated task manager. Secretary is a tool for keeping your futures in check. It's useful for managing queues of asynchronous tasks,

Alex Baker 4 Aug 9, 2022
A UI library for easily adding audio waveforms to your apps, with several customization options

A UI library for easily adding audio waveforms to your apps, with several custom

RutvikTak 56 Oct 31, 2022
Flutter custom carousel slider - A carousel slider widget,support custom decoration suitable for news and blog

flutter_custom_carousel_slider A carousel slider Flutter widget, supports custom

Emre 38 Oct 3, 2022
PaperOnboarding is a material design slider made by @Ramotion

PAPER ONBOARDING Android library Paper Onboarding is a material design UI slider written on Java We specialize in the designing and coding of custom U

Ramotion 2.5k Nov 17, 2022
A counter widget for flutter that support different kinds of customization.

Customizable Counter A counter widget that support different kinds of customization. Installation From pubspec.yaml Add the following line to pubspec.

Md. Imam Hossain 2 Sep 6, 2022
A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or vertically.

Juxtapose A flutter widget for comparing two stacked widgets by dragging a slider thumb to reveal either sides of the slider horizontally or verticall

Leslie Arkorful 75 Dec 12, 2021
Open source geo based video sharing social app created with Flutter, Supabase and lots of love 💙💙💙

Spot Take a virtual journey around the world with Spot. Spot is a geo-tagged video sharing app, meaning every video recorded in Spot is saved on a loc

Tyler 276 Nov 14, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
Pokedex app built with Flutter (with lots of animations) using Clean Architecture

Flutter Pokedex Pokedex app built with Flutter App preview Video demo Installation Add Flutter to your machine Open this project folder with Terminal/

Pham Sy Hung 1.7k Nov 20, 2022
Pokedex app built with Flutter (with lots of animations) using Clean Architecture

Flutter Pokedex Pokedex app built with Flutter App preview Video demo Installation Add Flutter to your machine Open this project folder with Terminal/

Hung Pham Sy 1.7k Nov 14, 2022
Pokedex app built with Flutter (with lots of animations) using Clean Architecture.

Flutter Pokedex Pokedex app built with Flutter App preview Video demo Installation Add Flutter to your machine Open this project folder with Terminal/

null 2 Nov 14, 2022
A Horizontal List view With Lots of modification including a scaled current item.

Pub.dev Scaled List A Horizontal List view With Lots of modification including a scaled current item. Provided with curved custom painting and Dots in

Hosain Mohamed 35 Nov 5, 2022