Slider

 

Slider 

Un Slider en Flutter es un widget que permite a los usuarios seleccionar un valor numérico dentro de un rango específico. Visualmente, se representa como una barra deslizante que el usuario puede mover hacia la izquierda o hacia la derecha para ajustar el valor. Es comúnmente utilizado para configurar niveles de volumen, brillo, zoom o cualquier otro valor que varíe de forma continua.

¿Cómo se usa un Slider?

El widget Slider es bastante sencillo de utilizar. Aquí tienes un ejemplo básico:

Dart

import 'package:flutter/material.dart';

class MySliderExample extends StatefulWidget {
  @override
  _MySliderExampleState createState() => _MySliderExampleState();
}

class _MySliderExampleState extends State<MySliderExample> {
  double _currentSliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentSliderValue,
      min: 0,
      max: 100,
      divisions: 10,
      label: _currentSliderValue.toString(),   
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value;
        });
      },
    );
  }
}

Explicación del código:

• value: El valor actual del slider.
• min: El valor mínimo del rango.
• max: El valor máximo del rango.
• divisions: El número de divisiones en el slider.
• label: Una etiqueta que muestra el valor actual del slider.
• onChanged: Una función que se llama cuando el usuario cambia el valor del slider.

Propiedades importantes del Slider

• activeColor: El color de la parte activa del slider.
• inactiveColor: El color de la parte inactiva del slider.
• thumbColor: El color del pulgar del slider.
• semanticFormatterCallback: Una función para formatear el valor del slider para su uso por lectores de pantalla.

Usos comunes de Slider

• Ajustar el volumen: En reproductores de música o video.
• Controlar el brillo: En aplicaciones de cámara o visualización de imágenes.
• Ajustar el zoom: En aplicaciones de mapas o visualización de imágenes.
• Seleccionar un valor numérico: En cualquier situación donde el usuario necesite seleccionar un valor dentro de un rango.

Ejemplo más avanzado: Slider con un valor inicial y etiqueta personalizada

Dart

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  divisions: 10,
  label: 'Valor: ${_currentSliderValue.toInt()}',
  onChanged: (double value) {
    setState(() {
      _currentSliderValue = value;
    });
  },
)

En este ejemplo, se establece un valor inicial de 50, se muestra una etiqueta personalizada con el valor redondeado y se formatea la etiqueta para que sea más legible.

En resumen

El Slider es un widget muy útil en Flutter para permitir a los usuarios seleccionar valores numéricos de forma intuitiva. Es altamente personalizable y se puede adaptar a una gran variedad de escenarios.