Saltar al contenido

Cambiar el icono de una aplicación en Flutter

septiembre 20, 2021

Cuando creamos una aplicación en cualquier plataforma o framework, una de las tareas indispensables es cambiar el ícono de nuestra aplicación con el que corresponde al diseño o identidad.

Cuando creamos una aplicación en cualquier plataforma o framework, una de las tareas indispensables es cambiar el icono de nuestra aplicación con el que corresponde al diseño o identidad. En Flutter no es la excepción, en este artículo vamos a ver las formas más sencillas y un pequeño acercamiento a la forma profesional de hacerlo.

Debo aclarar hay muchas formas de hacerlo y después de leer este artículo tu puedes elegir cual usar y cual te viene bien o si necesitas una forma más profesional de hacerlo y no te da miedo tocar archivos xml de Android me lo haces saber y hago un artículo de como hacerlo de forma profesional y controlar el 100% tu icono.

Antes de empezar también recomiendo que tengas tu icono en formato PNG y en buena calidad, al menos 1200px cuadrados para asegurar que el resultado será adecuado para dispositivos con buena resolución. Si ya lo tienes, podemos comenzar.

Como lo menciono en el vídeo, hay varias formas de hacerlo, aprenderemos 2 de ellas. La primera es la forma manual en la que debes ir a las carpetas y reemplazar los iconos que viene por defecto en nuestra aplicación y la segunda es usando un paquete dedicada a esto y que se usa como una dependencia de desarrollo. Comencemos con el análisis de cada una.

1. Forma manual de cambiar el icono

Para realizar esta tarea debemos reemplazar los archivos PNG que viene por defecto cuando creamos un proyecto nuevo de Flutter. En el caso de Android debemos ir a la dirección: Mi_Proyecto_Flutter > android > app > src > main > res aquí encontraremos algunas carpetas que inician con mipmap que contiene los archivos PNG para cada medida de dispositivos. Debemos reemplazarlos con nuestro icono, manteniendo el nombre que ya tiene los iconos por defecto.

Una vez que ha hayas hecho el cambio en todas las carpetas ejecutas la aplicación y cuando compile, Flutter irá a esa dirección usara la nueva imagen para asignar el icono de la aplicación y ya estará listo.

Para hacerlo en iOS es prácticamente igual. Solo debes tener en cuenta las instrucciones que hay en el vídeo. Básicamente debes asegurarte de reemplazar cada icono que viene por defecto con un icono de exactamente la misma medida. Con eso la próxima vez que ejecutes la aplicación ya podrás ver tu nuevo icono en uso.

2. Usando un paquete (Flutter Launcher Icons)

Una forma más sencilla de generar el icono de nuestra aplicación hecha en Flutter es usando un package que fue creado específicamente para cumplir esa función. Esta la considero la opción más recomendable y más eficiente. Sin embargo es la que menos control nos da. Pero bueno, como asignar el icono a tu primera aplicación es más que suficiente.

El paquete que usaremos se llama Flutter Launcher Icons y fue desarrollado por @MarkOSullivan94 (muchas gracias héroe). El funcionamiento es muy sencillo, básicamente consiste en instalar el paquete como dependencia de desarrollo, asignar los valores de configuración y mandarlo a llamar con un comando.

dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

Este código debe ir en el archivo pubspec.yarml que vienen en nuestro proyecto de Flutter. Si te fijas, debe incluirse en las dev_dependencies: para decirle a Flutter que es solo una dependencia de desarrollo y no se ejecutará cuando la aplicación este corriendo.

La siguiente parte del código es la configuración, el nombre que tendrá el icono en Android y si quieres generar los iconos para iOS también, si tienes una Mac podrás ver los resultados. La última línea de código es la ruta de la imagen que quieres que sea el icono, es recomendable guardar un PNG de tu logo en tu proyecto en la dirección que así se específica.

Una vez que tengas esto en tu archivo, guardas los cambios y te vas a la terminal. Debes ejecutar la obtención de paquetes de flutter, el típico flutter pub get, sin embargo este comando se ejecuta automáticamente cuando guardas cambios en el archivo .yarml pero solo si estás en VSCode. Si no se ha ejecutado debes hacerlo manualmente en la terminal. Luego ejecuta el comando:

flutter pub run flutter_launcher_icons:main

Con ese comando se ejecutará el package tomando la imagen en la dirección que elegiste y generando a partir de ella los iconos para la aplicación. Así en unos pocos segundos tienes la aplicación con icono nuevo y sin tener que crear diferentes versiones a mano como en la opción anterior.

3. La forma PRO

La forma más profesional de hacer esto es tocando los archivos XML de Android de forma nativa. Pero eso será para otro artículo o para otro vídeo. Si no tienes miedo de tocar los archivos nativos de Android puedes dejarlo en los comentarios y con gusto voy a crear una guía explicando paso a paso cómo funciona este proceso.

Sin más que agregar, nos vemos a la próxima.