¿Por qué usar el widget Slider?
El widget Slider es útil en varios casos de uso dentro de tu aplicación Flutter. Por ejemplo:
- Selección de valores numéricos, permitiendo al usuario elegir su edad, la temperatura deseada o un nivel de sonido.
- Ajuste de parámetros, como el brillo, el volumen o la intensidad de un efecto.
- Control de un rango de valores, cuando el usuario necesita ajustar un valor entre un mínimo y un máximo sin ingresar texto manualmente.
¿Cómo usar el widget Slider?
Aquí tienes un ejemplo básico del uso de Slider (en este caso, para seleccionar una edad):
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: AgeSelector(),
);
}
}
class AgeSelector extends StatefulWidget {
@override
_AgeSelectorState createState() => _AgeSelectorState();
}
class _AgeSelectorState extends State<AgeSelector> {
double _age = 18;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Selecciona tu edad")),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Edad seleccionada: ${_age.toInt()} años", style: const TextStyle(fontSize: 20)),
Slider(
value: _age,
min: 10,
max: 100,
divisions: 90,
label: _age.toInt().toString(),
onChanged: (double newValue) {
setState(() {
_age = newValue;
});
},
),
],
),
);
}
}
Explicación de las principales propiedades:
- value: Valor actual del Slider.
- min y max: Definen el rango de valores posibles.
- divisions: Número de divisiones (aquí 90, permitiendo pasos de 1 entre 10 y 100).
- label: Muestra el valor actual sobre el cursor.
- onChanged: Función llamada cuando se mueve el cursor, permitiendo actualizar el estado.
¿Cómo personalizar el Slider?
Puedes personalizar el Slider de varias formas. Aquí te muestro algunas.
Cambiar el color del cursor y la barra
Flutter permite personalizar la apariencia del Slider usando las propiedades activeColor (barra activa) e inactiveColor (barra inactiva):
Slider(
value: _age,
min: 10,
max: 100,
activeColor: Colors.blue,
inactiveColor: Colors.grey,
onChanged: (double newValue) {
setState(() {
_age = newValue;
});
},
)Modificar el color según el valor seleccionado
También es posible cambiar el color de la barra dependiendo del valor seleccionado con este truco:
Slider(
value: _age,
min: 10,
max: 100,
activeColor: _age < 30 ? Colors.green : (_age < 60 ? Colors.orange : Colors.red),
onChanged: (double newValue) {
setState(() {
_age = newValue;
});
},
)Personalizar la forma del cursor
Para modificar la forma del cursor, usa SliderTheme con la propiedad thumbShape:
SliderTheme(
data: SliderTheme.of(context).copyWith(
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
),
child: Slider(
value: _age,
min: 10,
max: 100,
onChanged: (double newValue) {
setState(() {
_age = newValue;
});
},
),
)Modificar la apariencia de la barra
Puedes cambiar el grosor y estilo de la barra con trackHeight y trackShape:
SliderTheme(
data: SliderTheme.of(context).copyWith(
trackHeight: 8.0,
),
child: Slider(
value: _age,
min: 10,
max: 100,
onChanged: (double newValue) {
setState(() {
_age = newValue;
});
},
),
)Agregar un tooltip sobre el cursor
Finalmente, puedes usar showValueIndicator para mostrar un tooltip con el valor seleccionado:
SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
),
child: Slider(
value: _age,
min: 10,
max: 100,
label: _age.toString(),
onChanged: (double newValue) {
setState(() {
_age = newValue;
});
},
),
)
