Enabled and disabled states in Flutter Slider (SfSlider)

5 May 202111 minutes to read

This section helps to learn about the enabled and disabled state in the Flutter slider.

Enabled state

The slider will be in enabled state if onChanged is set.

Horizontal

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSlider(
                min: 0.0,
                max: 10.0,
                value: _value,
                onChanged: (dynamic newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              )
          )
      )
  );
}

Enabled state

Vertical

double _value = 5.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSlider.vertical(
                min: 0.0,
                max: 10.0,
                value: _value,
                onChanged: (dynamic newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              )
          )
      )
  );
}

Enabled state

Disabled state

The slider will be in disabled state if onChanged is null.

Horizontal

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSlider(
                min: 0.0,
                max: 10.0,
                value: 5.0,
              )
          )
      )
  );
}

Disabled slider

Vertical

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSlider.vertical(
                min: 0.0,
                max: 10.0,
                value: 5.0,
              )
          )
      )
  );
}

Disabled slider

Disabled color

You can change,

NOTE

You must import the theme.dart library from the Core package to use SfSliderTheme.

Horizontal

double _value = 6.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  disabledActiveTrackColor: Colors.orange,
                  disabledInactiveTrackColor: Colors.orange[200],
                  disabledActiveTickColor: Colors.orange,
                  disabledInactiveTickColor: Colors.orange[200],
                  disabledActiveMinorTickColor: Colors.orange,
                  disabledInactiveMinorTickColor: Colors.orange[200],
                  disabledActiveDivisorColor: Colors.purple,
                  disabledInactiveDivisorColor: Colors.purple[200],
                  disabledThumbColor: Colors.orange,
                ),
                child: SfSlider(
                  min: 2.0,
                  max: 10.0,
                  interval: 2,
                  showTicks: true,
                  minorTicksPerInterval: 1,
                  showDivisors: true,
                  value: _value,
                ),
              )
          )
      )
  );
}

Disabled color support

Vertical

double _value = 6.0;

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSliderTheme(
                data: SfSliderThemeData(
                  disabledActiveTrackColor: Colors.orange,
                  disabledInactiveTrackColor: Colors.orange[200],
                  disabledActiveTickColor: Colors.orange,
                  disabledInactiveTickColor: Colors.orange[200],
                  disabledActiveMinorTickColor: Colors.orange,
                  disabledInactiveMinorTickColor: Colors.orange[200],
                  disabledActiveDivisorColor: Colors.purple,
                  disabledInactiveDivisorColor: Colors.purple[200],
                  disabledThumbColor: Colors.orange,
                ),
                child: SfSlider.vertical(
                  min: 2.0,
                  max: 10.0,
                  interval: 2,
                  showTicks: true,
                  minorTicksPerInterval: 1,
                  showDivisors: true,
                  value: _value,
                ),
              )
          )
      )
  );
}

Disabled color support