Flutter – Control deslizante y RangeSlide

Un control deslizante es un widget para seleccionar un valor de un rango determinado en la aplicación. Podemos deslizarnos por el valor y seleccionar el valor deseado de él. No necesitamos instalar ninguna dependencia para implementar un control deslizante.

Un control deslizante de rango es muy similar a un widget de control deslizante, pero en lugar de seleccionar un solo valor, podemos seleccionar un rango continuo de valores de un rango determinado. 

Implementación:

Control deslizante:

El control deslizante se puede implementar simplemente usando el control deslizante y proporcionando los valores de rango. Este widget toma dos parámetros requeridos:

1. valor: aquí debemos pasar el valor predeterminado cada vez que se inicia la aplicación y debe ser del tipo doble.
2. onChanged: esta función se activa cada vez que se cambia el valor del control deslizante y obtenemos un valor doble que podemos usar para continuar con el proceso.

Esta es la sintaxis de Slider.

Slider(
  value: value,
  onChanged: (value) {    
  },
),

Control deslizante de rango:

El widget RangeSlider se implementa mediante el uso del widget llamado RangeSlider. Este widget toma dos parámetros requeridos:

1. valores: Aquí necesitamos pasar el tipo de datos RangeValues ​​que tiene un inicio y un final.
2. onChanged: esta función se activa cada vez que se cambian los valores del rango y obtenemos un valor de RangeValue.

RangeSlider(
  values: RangeValues(start, end),
  onChanged: (value) {},
)

Ejemplo 1: widget de control deslizante

Aquí hemos creado un control deslizante selector de edad. El usuario puede deslizar el control deslizante y seleccionar un valor.

import 'package:flutter/material.dart';
  
class SliderTutorial extends StatefulWidget {
  const SliderTutorial({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _SliderTutorialState createState() => _SliderTutorialState();
}
  
class _SliderTutorialState extends State<SliderTutorial> {
  int age = 10;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Slider(
            label: "Select Age",
            value: age.toDouble(),
            onChanged: (value) {
              setState(() {
                age = value.toInt();
              });
            },
            min: 5,
            max: 100,
          ),
          Text(
            "Your Age: " + age.toString(),
            style: const TextStyle(
              fontSize: 32.0,
            ),
          ),
        ],
      ),
    );
  }
}

Producción:

Ejemplo 2: Widget RangeSlider

En este ejemplo, implementaremos el widget RangeSlider. Necesitaremos crear dos valores dobles, inicio y fin respectivamente para implementar el RangeSlider. Aquí está el código.

import 'package:flutter/material.dart';
  
class RangeSliderTutorial extends StatefulWidget {
  const RangeSliderTutorial({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _RangeSliderTutorialState createState() => _RangeSliderTutorialState();
}
  
class _RangeSliderTutorialState extends State<RangeSliderTutorial> {
  double start = 30.0;
  double end = 50.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          RangeSlider(
            values: RangeValues(start, end),
            labels: RangeLabels(start.toString(), end.toString()),
            onChanged: (value) {
              setState(() {
                start = value.start;
                end = value.end;
              });
            },
            min: 10.0,
            max: 80.0,
          ),
          Text(
            "Start: " +
                start.toStringAsFixed(2) +
                "\nEnd: " +
                end.toStringAsFixed(2),
            style: const TextStyle(
              fontSize: 32.0,
            ),
          ),
        ],
      ),
    );
  }
}

Producción: