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.
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 propieda 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.
Otras propiedades interesantes para el Slider
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;
});
}
);
El raiting simplemente es una variable que está en el rango que nosotros definimos el Slider:
double raiting = 50.0;
Y con el código anterior, obtenemos lo siguiente:
Desarrollar apps en Flutter y nativas en Android e iOS
Recuerda que en el curso más completo para desarrollar tus apps web con la Rest Api y apps nativas en Android e iOS y con flutter podrás encontrarlo al mejor precio en este Blog; aquí aprenderás a trabajar con widgets como estos y muchos más.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter