Widget Slider para definir rangos en Flutter

Cuando desarrollas una app en Flutter tarde o temprano te topas con el Slider, ese control deslizante tan habitual en web, Android o iOS que te permite indicar un valor dentro de un rango. Algo que siempre me ha gustado del Slider en Flutter es que se autoexplica: lo declaras, le pasas value, min, max… y ya lo tienes funcionando.

El slider es un componente que puedes encontrar en múltiples tipos de plataformas, como en la web y por supuesto como base en los ambientes de desarrollo de aplicaciones en Android e iOS para indicar un rango de valores en base a una cuota inferior y superior.

Vamos a aprender a emplear el widget Slider en Flutter; es un plugin bastante sencillo de emplear y vamos a ir viendo cuales son sus propiedades fundamentales y otras muy interesante.

En esta guía te enseño todo: desde el uso básico hasta personalización avanzada con SliderTheme, pasando por trucos prácticos que yo mismo aplico cuando trabajo con sliders.

Recuerda que anteriormente nos quedamos en el Widget de tipo Carta en Flutter.

Qué es el Slider en Flutter y para qué sirve

Un Slider es un widget que permite seleccionar un valor continuo dentro de un rango. Lo verás en casos como:

• Elegir edad, nivel de volumen, brillo o intensidad.
• Ajustar parámetros numéricos sin escribir texto.
• Controlar filtros (precio mínimo/máximo, temperatura, etc.).

Y cuando necesitas seleccionar dos valores, el que entra en acción es el RangeSlider, ideal para rangos de precios o filtros dobles.

Algo que siempre destaco cuando explico esto es que Flutter integra Slider de forma nativa, sin necesidad de paquetes externos.

Cómo funciona el Slider: estructura básica

StatefulWidget y manejo de estado

Un Slider sí o sí requiere estado ya que, para que puedas ver cuando cambia de valor (cuando el usuario mueve el control), para redibujar el widget se usa el método de state:

double rating = 50;
return Slider(
 value: rating,
 min: 0,
 max: 100,
 onChanged: (newRating) {
   setState(() => rating = newRating);
 },
);

Lo clave aquí es ese setState(), que actualiza el valor internamente. Sin eso, el slider ni se mueve.

Propiedades esenciales (value, min, max, onChanged)

Otras propiedades que son muy pero muy recomendadas emplear junto con el Slider, sería el label, para mostrar un label o texto cada vez que el usuario esté actualizando el valor del Slider desde la interfaz; también puedes aplicarle divisiones para un mayor control del Slider:

   return Slider(
      label: "$raiting",
      value: raiting,
      divisions: 4,
      min: 0,
      max: 100,
      onChanged: (newRaiting) {
        setState(() {
          raiting = newRaiting;
        });
      }
    );

• value: el valor actual.
• min / max: límites del rango.
• onChanged: función que se ejecuta al mover el slider.
• label: (opcional) texto que aparece sobre el thumb.
• divisions: cuántos pasos intermedios hay.

Con el código anterior, obtenemos lo siguiente:

Configuración mínima del Slider de Flutter

Vamos a presentar el código fuente del primer ejemplo y luego vamos a analizarlo un poco:

   return Slider(
      value: raiting,
      min: 0,
      max: 100,
      onChanged: (newRaiting) {
        setState(() {
          raiting = newRaiting;
        });
      }
    );

Con este sencillo código que prácticamente se auto explica y eso es uno de los aspectos interesantes que tiene Flutter; obtenemos lo siguiente:

Statefulwidget para permitir actualizar el estado del slider

Lo primero que tienes que tener en cuenta, es que este widget para manejar los rangos tienes que establecer a fuerza un statefulwidget para poder actualizar el estado del widget cada vez que el usuario varía de valor; por tal motivo podrás ver la función de setState en el raiting

Propiedades obligatorias

También le tenemos que definir a fuerza la propiedad min y la propiedad max para indicar el valor mínimo y máximo del rango del slider; por supuesto, también tienes que indicarle el value para indicar el valor inicial del mismo.

Ejemplo básico de Slider en Flutter

Código y explicación paso a paso

Aquí tienes un ejemplo de selección de edad, uno de los usos más comunes:

double _age = 18;
Slider(
 value: _age,
 min: 10,
 max: 100,
 divisions: 90,
 label: _age.toInt().toString(),
 onChanged: (double newValue) {
   setState(() => _age = newValue);
 },
);

Qué ocurre internamente cuando el usuario mueve el slider

• El usuario mueve el thumb.
• Flutter ejecuta onChanged(newValue).
• Actualizas _age.
• setState() redibuja el widget.
• El slider refleja el nuevo valor.

Ese comportamiento tan natural es parte de lo que hace al widget muy fácil de integrar.

Personalización del Slider

Aquí es donde la mayoría de tutoriales se quedan cortos. Flutter permite personalizar prácticamente todo.

Cambiar colores (activeColor, inactiveColor)

Slider(
 value: _age,
 min: 10,
 max: 100,
 activeColor: Colors.blue,
 inactiveColor: Colors.grey,
 onChanged: (newValue) => setState(() => _age = newValue),
)

Yo suelo usar esto cuando quiero que el color del slider combine con el branding de la app.

Añadir divisiones y label con el valor

Siempre recomiendo usar divisions cuando quieres control más preciso:

divisions: 4,
label: "$rating",

Esto mejora muchísimo la UX cuando no quieres valores flotantes raros.

Personalizar el thumb (cursor)

Puedes modificar tamaño, forma o estilo:

SliderTheme(
 data: SliderTheme.of(context).copyWith(
   thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12),
 ),
 child: Slider(...),
)

Modificar el track y su grosor

SliderTheme(
 data: SliderTheme.of(context).copyWith(trackHeight: 8),
 child: Slider(...),
)

Mostrar tooltip o indicador de valor

SliderTheme(
 data: SliderTheme.of(context).copyWith(
   showValueIndicator: ShowValueIndicator.always,
 ),
 child: Slider(
   value: _age,
   label: _age.toString(),
   onChanged: (newValue) => setState(() => _age = newValue),
 ),
)

Esto es de lo mejor al usar sliders interactivos ya que, siempre ayuda al usuario a saber exactamente qué está seleccionando.

RangeSlider: seleccionar un rango de valores

Ejemplo básico de RangeSlider

RangeValues _range = const RangeValues(40, 80);
RangeSlider(
 values: _range,
 min: 0,
 max: 100,
 divisions: 5,
 labels: RangeLabels(
   _range.start.round().toString(),
   _range.end.round().toString(),
 ),
 onChanged: (values) {
   setState(() => _range = values);
 },
)

Diferencias clave entre Slider y RangeSlider

Característica    Slider    RangeSlider
Selección    1 valor    2 valores
Cuándo usarlo    Edad, volumen    Precios, filtros dobles
Complejidad    Baja    Media

SliderTheme: personalización avanzada

Con SliderTheme podemos sobrescribir los estilos que se usan por defecto en la app.

Estilos globales vs estilos locales

• Local: afecta solo un slider.
• Global: cambia el estilo para toda la app.

Ejemplo usando SliderTheme:

SliderTheme(
 data: SliderTheme.of(context).copyWith(
   activeTrackColor: Colors.deepPurple,
   inactiveTrackColor: Colors.deepPurple.shade100,
   thumbColor: Colors.purple,
   overlayColor: Colors.purple.withOpacity(0.2),
 ),
 child: Slider(
   value: value,
   min: 0,
   max: 100,
   onChanged: (v) => setState(() => value = v),
 ),
)

Buenas prácticas al usar Slider en apps reales

Cuándo usar Slider y cuándo evitarlo

Úsalo si:

• La precisión no es extrema.
• El usuario necesita seleccionar rápido.
• El valor es intuitivo al deslizar.
• Evítalo si necesitas precisión quirúrgica (allí conviene un TextField o Stepper).
• Límites, divisiones y experiencia de usuario
  • Al principio yo dejaba sliders sin divisiones y me generaba valores raros como 72.48321.
    • Hoy en día siempre pienso en divisiones según el caso de uso.
  • Consejos basados en experiencia real
    • Agrega un label cuando quieras que el usuario vea el valor exacto.
    • Usa RangeSlider en filtros complejos, no intentes “simularlo” con dos sliders normales.
    • Si el slider controla algo crítico (por ejemplo, potencia), usa colores dependientes del valor.

Preguntas frecuentes sobre Slider en Flutter

• ¿Cómo cambiar el color del Slider?
  • Con activeColor y inactiveColor.
• ¿Cómo personalizar completamente el Slider?
  • Con SliderTheme.
• ¿Cómo mostrar el valor encima del thumb?
  • Usa label: y activa el valor indicador con SliderTheme.
• ¿Cuál es la diferencia entre Slider y RangeSlider?
  • Uno selecciona un único valor; el otro, un rango completo.

Conclusión

El widget Slider en Flutter es tan sencillo como potente. Con unas pocas líneas ya tienes algo funcional, pero con SliderTheme y un buen uso de estados puedes construir controles deslizantes totalmente personalizados. A mí siempre me ha gustado lo intuitivo que es este widget, y espero que esta guía te deje listo para integrarlo en cualquier app con estilo propio.

El siguiente widget, el de tipo Dismissible en Flutter.