Flutter cuenta con un widget para incrustar iconos. Un icono es un apoyo visual con signos gráficos que nos apoya en la representación de mensajes.
Para mostrar un icono en la pantalla estaremos usando nuestro código base que creamos en el post “Conoce los principales componentes de tu aplicación”
Si queremos utilizar un icono lo hacemos mediante el widget Icon al que debemos ingresar como parámetro el nombre del icono que deseamos utilizar.
Icon("nombre_del_icono")Para este ejemplo colocaremos una estrella, quedando asà su configuración básica:
Icon(Icons.star)Flutter nos provee la clase Icons la cual contiene las constantes de todos los iconos disponibles que Flutter tiene precargados y que podemos utilizar rápidamente.
El archivo que muestra nuestro icono básico queda de la siguiente manera:
hello_app/lib/main.dart
body:
Center(
child: Icon(Icons.star)
)
Ahora exploremos las opciones de configuración que tenemos para el icono.
Modifiquemos el color.
Vamos a asignar el color amarillo a la estrella, para esto debemos de agregar la propiedad color: .
body: Center(
child: Icon(
Icons.star,
color: Colors.yellow[700]
)
)
Ahora, para crear un color personalizado, siempre he preferido hacerlo mediante RGB por su exactitud y facilidad de declaración. Para crear un color a partir de valores RGB necesitamos el comando Color.fromARGB(a, r, g, b) donde a es el valor de la transparencia del icono, siendo 0 el valor de transparencia total y 255 el valor de un color completamente sólido. r representa el color rojo, g el color verde y b el color azul, donde al igual que en la transparencia, los valores de cada uno van de 0 a 255 para determinar el tono deseado.
body: Center(
child: Icon(
Icons.star,
color: Color.fromARGB(255, 55, 55, 235)
)
)
Modifiquemos el tamaño.
El tamaño estandar de un icono es de 24 dp, para modificar este tamaño tenemos que asignarle un valor nuevo el cual realizamos mediante la propiedad size: .
body: Center(
child: Icon(
Icons.star,
size: 300,
color: Color.fromARGB(255, 55, 55, 235)
)
)
Una pasada rápida del resto de iconos disponibles.
La lista de iconos completos la puedes encontrar en: https://fonts.google.com/icons?selected=Material+Icons
Asà es como concluimos nuestro post para utilizar iconos en la app, en donde vimos el tipo lo de iconos disponibles para nuestro uso, asà como su personalización para Flutter.
¿Te está gustando este curso? Aquà hay más temas que otras personas están viendo en este momento.