RangeSlider

 

RangeSlider

Un RangeSlider en Flutter es una extensión del widget Slider, pero en lugar de permitir seleccionar un solo valor, te permite seleccionar un rango de valores dentro de un conjunto definido. Visualmente, se representa como una barra deslizante con dos pulgares que el usuario puede mover de forma independiente para establecer los límites inferior y superior del rango.

¿Para qué sirve?

El RangeSlider es ideal para situaciones en las que necesitas que el usuario seleccione un intervalo o un rango de valores, como:

• Filtrar datos: Por ejemplo, filtrar productos por un rango de precios.
• Seleccionar un rango de fechas: En un calendario.
• Ajustar niveles de audio: Con un mínimo y un máximo.

¿Cómo se usa un RangeSlider?

Para utilizar un RangeSlider, primero debes importar la librería material.dart y luego crear una instancia del widget RangeSlider. Aquí tienes un ejemplo básico:

Dart

import 'package:flutter/material.dart';

class MyRangeSliderExample extends StatefulWidget {
  @override
  _MyRangeSliderExampleState createState() => _MyRangeSliderExampleState();
}

class _MyRangeSliderExampleState extends State<MyRangeSliderExample> {
  RangeValues _currentRangeValues = const RangeValues(40, 80);

  @override
  Widget build(BuildContext context) {
    return RangeSlider(
      values: _currentRangeValues,
      min: 0,
      max: 100,   
      divisions: 10,
      onChanged: (RangeValues newRange) {
        setState(() {
          _currentRangeValues = newRange;
        });
      },
    );
  }
}

Explicación del código:

• values: Un objeto RangeValues que representa los valores mínimo y máximo del rango seleccionado actualmente.
• min: El valor mínimo del rango.
• max: El valor máximo del rango.
• divisions: El número de divisiones en el slider.
• onChanged: Una función que se llama cuando el usuario cambia el rango.

Propiedades importantes del RangeSlider

• activeColor: El color de la parte activa del slider.
• inactiveColor: El color de la parte inactiva del slider.
• labels: Una función que permite personalizar las etiquetas de los valores.
• semanticFormatterCallback: Una función para formatear los valores del slider para su uso por lectores de pantalla.

Ejemplo más avanzado: RangeSlider con etiquetas personalizadas

Dart

RangeSlider(
  values: _currentRangeValues,
  min: 0,
  max: 100,
  divisions: 10,
  labels: RangeLabels(
    _currentRangeValues.start.round().toString(),
    _currentRangeValues.end.round().toString(),
  ),
  onChanged:    (RangeValues newRange) {
    setState(() {
      _currentRangeValues = newRange;   
    });
  },
)

En este ejemplo, se muestran las etiquetas personalizadas con los valores redondeados del rango seleccionado.

En resumen

El RangeSlider es una herramienta versátil en Flutter que te permite seleccionar un rango de valores de una manera intuitiva. Es ideal para aplicaciones que requieren un mayor control sobre los valores seleccionados por el usuario.