CODEWITHSUNDEEP
flutterflutter-layout
PJQuakJag
PJQuakJag

Reputation: 1247

How can I disable the Flutter slider class to prevent a user from moving it?

I'm hoping to render a flutter slider that is unmovable, meaning that I hope to pass the slider an initial value that the user will not be able to change purely for UI visualization?

Has anyone had any experience locking this slider in place?

Thanks for the help.

Upvotes: 13

Views: 14214

Answers (6)

aaronvargas
aaronvargas

Reputation: 14182

If you want to show the slider as 'active' with a single value, but not allow the user to change it, use an empty function

  return Slider(
    max: 20,
    value: 10,
    onChanged: (double value) {}, // not allowing seek, but shows as active color
  );

Similarly, to show the progress but not allow the user to change the value

double myUpdatingProgressValue = (update this every build() invocation)

return Slider(
    max: 20,
    value: myUpdatingProgressValue,
    onChanged: (double value) {}, // not allowing seek, but shows as active color
  );

For either of above scenarios, use onChanged: null for showing the inactive (usually gray) color.

Upvotes: 1

Fernando Lozada
Fernando Lozada

Reputation: 347

The same more detailed:

var _onChanged;
if (someVariable) {
  _onChanged = (value) => print(value);
}

child: Slider(
  onChanged: _onChanged,
  min: 0,
  max: 100,
  divisions: 10,
  value: 30,
),

Upvotes: -1

Vishnu Nair
Vishnu Nair

Reputation: 101

Just wrap an AbsorbPointer around your slider like so:

AbsorbPointer(
            child: Slider(
              onChanged: (value) => print(value),
              min: 0,
              max: 100,
              divisions: 10,
              value: 30,
            ),
          )

Upvotes: 9

Lulupointu
Lulupointu

Reputation: 3594

In order to have your SliderTheme affect a disabled slider you have to overwrite the disabled attributes.

Here is a quick example:

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    disabledActiveTrackColor: Colors.red[700],
    disabledInactiveTrackColor: Colors.red[100],
    disabledThumbColor: Colors.redAccent,
  ),
  child: Slider(
    value: 0.2,
    onChanged: null,
  ),
)

Upvotes: 3

umni4ek
umni4ek

Reputation: 375

Just use SliderTheme:

SliderTheme(data: SliderTheme.of(context).copyWith(
                                  disabledThumbColor:
                                      Theme.of(context).accentColor,
                                  disabledActiveTrackColor:
                                      Theme.of(context).accentColor),
                              child: Slider(
                                divisions: 10,
                                max: 100,
                                value: 10,
                                onChanged: null,
                              ),
                            )

Upvotes: 0

chemamolins
chemamolins

Reputation: 20558

Give it a value and then set the onChanged: property to null.

onChanged: null

This disables the Slider.

Otherwise, you could give max: and min: the same value. In this case, though, the slider is not greyed out but it stays at zero.

Upvotes: 27

Related Questions