Mostrar un ícono en Flutter
Los íconos son esenciales para una buena interfaz de usuario, ya que permiten identificar rápidamente la función de un elemento visual. El widget Icon, como su nombre indica, es un widget básico que te permite mostrar íconos en tu aplicación Flutter, ya sea desde la biblioteca integrada o desde una fuente externa.
Aquí tienes un ejemplo simple de cómo usar el widget Icon:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Íconos en Flutter'),
),
body: Center(
child: Icon(
Icons.favorite,
),
),
),
);
}
}Cambiar el color de un ícono
Modificar el color de un ícono en Flutter es muy sencillo. Solo necesitas especificar la propiedad color en el widget Icon. Aquí tienes un ejemplo:
Icon(
Icons.favorite,
color: Colors.red,
);Cambiar el tamaño de un ícono
De manera similar, puedes cambiar el tamaño de un ícono usando la propiedad size. Aquí te muestro cómo hacerlo:
Icon(
Icons.favorite,
size: 50.0,
);El tamaño de un ícono en Flutter se define en píxeles. En este ejemplo, el ícono tendrá una altura y un ancho de 50 píxeles.
Crear un botón a partir de un ícono
Los íconos permiten expresar ideas de manera más visual que el texto. Por lo tanto, se utilizan con frecuencia para diseñar los botones de una interfaz de usuario. Flutter tiene el widget IconButton, que te permite crear fácilmente un botón con un ícono.
Aquí tienes un ejemplo que muestra un texto en la consola cuando se hace clic en el botón:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Íconos en Flutter'),
),
body: Center(
//INICIO DEL BOTÓN
child: IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
// Acción cuando se presiona el botón
print("Me gusta");
},
color: Colors.red,
iconSize: 60.0,
),
//FIN DEL BOTÓN
),
),
);
}
}Lista de íconos en Flutter
Flutter no ofrece directamente en su sitio una lista de los íconos incluidos en su biblioteca, pero puedes encontrarlos en el sitio de Google Fonts con su visual y su «nombre de ícono» (Icon name).
Además, existen muchas otras bibliotecas de íconos que puedes utilizar después de importarlas en tu aplicación. Para obtener más información, te invito a leer mi artículo sobre paquetes de íconos en Flutter.
Conclusión
Ahora ya sabes cómo agregar íconos a tu aplicación Flutter para hacerla más intuitiva para los usuarios. ¿Por qué no aprender también a agregar imágenes para mejorar su apariencia?
