This is the 30th day of my participation in the Wenwen Challenge

preface

Last article we talked about the use of various progress indicators, in the player scene, not only the progress bar should also have a slider to drag progress, and in other Settings, such as brightness Settings, etc., need to use the slider, today we will look at the use of various slider in Fluttter.

See the effect

Sliders

Simple to use

The simplest Slider here has two mandatory parameters, value (current progress) and onChange (drag changed progress)

// Current progress
double progress = 0.5;
// Slider Widget
Slider(
  value: progress,
  onChanged: (value) {
    // Drag to change the progress
    print('onChanged:$value'); setState(() { progress = value; }); },)Copy the code

📢 Note: the changed value needs to be updated to the UI, otherwise it cannot be dragged

  • Display effect

Parameters of the deployment

Here we are a default style, usually our brand design style is to need to customize, next let’s see which parameters can be deployed.

Look at the source code



Here we are concerned about the following parameters for the time being, and the specific effects will be shown later.

  • value(Current progress)Will pass parameters
  • min(Minimum value), value >= min
  • max(maximum value), value <= Max
  • onChanged(Drag-change callback)Will pass parameters
  • onChangedStartDrag to change the beginning of the callback.
  • onChangedEnd(Drag change end callback)Very useful oh
  • divisionsDivided into several parts
  • labelThe label
  • activeColorProgress of color
  • inactiveColorThe background color

Set the progress and maximum and minimum values

Look at the source code default progress range is between 0 and 1, of course, we can also customize

double progress2 = 0;
Slider(
  // Set the schedule
  value: progress2,
  // Set the minimum value
  min: 0.// Set the maximum value
  max: 100,
  onChanged: (value) {
    print('onChanged:$value'); setState(() { progress2 = value; }); },)Copy the code

Set splits and labels

Slider(
  value: progress2,
  min: 0,
  max: 100.// Set the number of splits
  divisions: 8.// Set the label
  label: '$progress2',
  onChanged: (value) {
    print('onChanged:$value'); setState(() { progress2 = value; }); },)Copy the code
  • According to the effect

The Divisions can only be displayed through the SliderTheme showValueIndicator Settings

Set the label to always be displayed

SliderTheme(
  data: SliderThemeData(
    showValueIndicator: ShowValueIndicator.always,
  ),
  child: Slider(
    value: progress2,
    min: 0,
    max: 100,
    label: '$progress2',
    onChanged: (value) {
      print('onChanged:$value'); setState(() { progress2 = value; }); },),)Copy the code

Here we’ll nest the SliderTheme widget and set it to always be displayed, again looking at the source code

Set the color

Slider(
  value: progress2,
  min: 0,
  max: 100.// Set the color
  activeColor: Colors.red,
  inactiveColor: Colors.green,
  label: '$progress2',
  onChanged: (value) {
    print('onChanged:$value'); setState(() { progress2 = value; }); },)Copy the code
  • According to the effect

More style changes can be set by nesting the SliderTheme

Range lider (RangeSlider)

This is used when we need the user to set a range value

Simple to use

RangeValues _rangeValues = const RangeValues(40.80);
RangeSlider(
  values: _rangeValues,
  max: 100, onChanged: (value) { setState(() { _rangeValues = value; }); },)Copy the code
  • Results show

Parameters of the deployment

The parameters here are almost the same as the individual ones above, so I won’t show them all.

// Set the minimum value, maximum value, split number, prompt label
RangeSlider(
  values: _rangeValues,
  max: 100,
  divisions: 10,
  labels: RangeLabels(
    'start:${_rangeValues.start}'.'the end:${_rangeValues.end}'), onChanged: (value) { setState(() { _rangeValues = value; }); },),// Set the color
RangeSlider(
  values: _rangeValues,
  max: 100, activeColor: Colors.orange, inactiveColor: Colors.grey, onChanged: (value) { setState(() { _rangeValues = value; }); },)Copy the code
  • Results show

In the Slider source has a lot of can draw lessons from the content, can read, for example CompositedTransformTarget and CompositedTransformFollower, we can refer to this to do an efficient drop-down menu, The current pub library dropdown menu, performance is very low.

Cupertino Oslider (iOS slider)

Flutter is a cross-platform framework. Many iOS users would prefer to use the native iOS component style. Here is a look at the iOS style slider

Look at the source code

Look at the source code is very simple, only a few parameters, and the above are about the same

Simple to use

CupertinoSlider(
  value: progress2,
  max: 100, onChanged: (value) { setState(() { progress2 = value; }); },)Copy the code
  • Display effect

Parameters of the deployment

This is almost the same as the Slider above, and I have added detailed comments to the 👇🏻 code below,

// Set constraints
SizedBox(
  width: double.infinity,
  child: CupertinoSlider(
    value: progress2,
    max: 100.// Set the split
    divisions: 5.// Set the progress color
    activeColor: Colors.purple,
    // Set the slider colorthumbColor: Colors.cyan, onChanged: (value) { setState(() { progress2 = value; }); },),)Copy the code
  • Display effect

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • Slider (Flutter Widget of the Week)
  • Flutter-Slider
  • Flutter-RangeSlider
  • Flutter-CupertinoSlider
  • Flutter-SliderTheme

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible