El Widget Slider para definir rangos en Flutter

- Andrés Cruz

In english

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:

Slider configuración mínima en Flutter

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:

Slider configuración más personalizada en Flutter

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.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy