flutter
  1. flutter-slider
PreviousNext

Flutter Slider

A Slider is a UI component in Flutter that allows the user to change a value by dragging a draggable thumb across the width of a line. It is widely used in scenarios where a numeric value needs to be selected from a range, such as volume control and brightness control.

Syntax

Slider(
  value: _currentValue,
  min: _minValue,
  max: _maxValue,
  divisions: _divisions,
  label: _currentLabel,
  onChanged: (double value) {
    setState(() {
      _currentValue = value;
      _currentLabel = value.toStringAsFixed(2);
    });
  },
  activeColor: Colors.blue,
  inactiveColor: Colors.grey[300],
);

Example

Slider(
  value: _currentValue,
  min: _minValue,
  max: _maxValue,
  divisions: _divisions,
  label: _currentLabel,
  onChanged: (double value) {
    setState(() {
      _currentValue = value;
      _currentLabel = value.toStringAsFixed(2);
    });
  },
  activeColor: Colors.blue,
  inactiveColor: Colors.grey[300],
);

In this example, we use the constructor for the Slider widget to create a slider with the specified range of values and number of divisions. We bind the value of the slider to _currentValue, which is updated when the user moves the slider. We also use the onChanged callback to update the label of the current slider value.

Output

The output of the above example is a slider that the user can drag left or right to select a numeric value within the specified range. The current slider value is displayed on the slider thumb as well as the label.

Explanation

The Slider widget in Flutter is a simple way to allow the user to interactively select a value. The value, min, and max properties are required to define the range of the slider. The optional divisions property can be used to divide the range into discrete values.

The onChanged callback is used to respond to changes in the slider value. In this example, we update the _currentValue and _currentLabel properties and call setState to rebuild the widget with the new values.

Use

A Slider is a versatile UI component that can be used in many scenarios where the user needs to select a numeric value. Some examples of use cases include:

  • Volume control
  • Brightness control
  • Progress bars
  • Scrolling speed control

Important Points

  • The Slider widget is a standard component in Flutter and is easy to use.
  • Care should be taken to select appropriate ranges and divisions to provide a good user experience.
  • Sliders can also be customized using custom shapes and colors to fit specific design needs.

Summary

In summary, the Slider widget in Flutter is a flexible way to allow users to select a numeric value within a specified range. With simple syntax and customization options, it can be used in a wide variety of scenarios in addition to the standard use cases of volume and brightness control.

TooltipSwitch
Published on: