Flutter SDK es un kit de desarrollo de software de código abierto para crear una hermosa interfaz de usuario compilada de forma nativa. Cuando creamos un proyecto de Flutter, viene con el ícono predeterminado de Flutter. Para que la aplicación se publique en tiendas como Google Play Store, Apple App Store, etc., se puede cambiar el ícono predeterminado. En este artículo, analizaremos algunos enfoques posibles para lograr lo mismo.
Hay dos formas de cambiar el icono de la aplicación:
- Cambiando manualmente los archivos del ícono en la carpeta de Android e IOS cargando todos los tamaños requeridos del ícono.
2. Usar el paquete que agregará automáticamente todos los tamaños de íconos en las carpetas de Android e IOS.
Enfoque 1: Cambio manual de iconos
Paso 1: Generación de iconos de diferentes tamaños
Vaya a https://appicon.co/ y cargue la imagen del icono y marque las opciones de iPhone y Android y haga clic en Generar. Este sitio genera íconos de diferentes tamaños para Android e IOS al mismo tiempo.
Descargará el archivo Zip llamado AppIcons con las carpetas denominadas android y Assets.xcassets junto con imágenes para la tienda de aplicaciones y la tienda de juegos que se pueden cargar directamente como un ícono en ambas tiendas.
Ahora, abra su Proyecto en Vs Code.
Paso 2: agregar íconos en Android
Navegue a android/app/src/main/res y haga clic derecho en la carpeta res y haga clic en «revelar en Explorer». Ahora elimine todas las carpetas mipmap en la carpeta res y pegue las carpetas mipmap de la carpeta AppIcon/android que ha descargado.
Iconos cambiados en la carpeta res
Paso 3: agregar íconos en IOS
Ahora navegue a ios/Runner/Assets.xcassets. Ahora, una vez que esté en la carpeta Runner , haga clic con el botón derecho en la carpeta Runner y haga clic en «mostrar en Explorer». Ahora elimine la carpeta Assets.xcassets y pegue la carpeta Assets.xcassets de AppIcon/Assets.xcassets que ha descargado.
Assets.xcassets cambiado en la carpeta Runner
Paso 4: Ejecute la aplicación
Después de cambiar manualmente las imágenes en las carpetas de Android e IOS, ahora vaya a lib/main.dart y ejecute el proyecto flutter usando el siguiente comando en la consola flutter.
flutter run
Enfoque 2: uso del paquete «Iconos de Flutter Launcher»
Al usar el paquete, podemos generar íconos de diferentes tamaños a la vez para Android e IOS.
Paso 1: navegue hasta el archivo pubspec.yaml.
Abra su proyecto en Vs Code y vaya al archivo pubspec.yaml .
Paso 2: actualice dev_dependencies.
Vaya a dev_dependencies y agregue flutter_launcher_icons: dependencia “^0.8.0” y guarde el archivo. Obtendrá la dependencia.
Agregar dependencia en dev_dependencies
Paso 3: Agregar la dependencia.
Ahora agrega flutter_icons: y guarda.
Paso 4: agregue los activos
Ahora cree la carpeta de activos -> cree la carpeta de iconos -> agregue el archivo icon.png
Nota: Si no tiene una imagen .png , cambie el formato de la imagen en image_path: como se muestra en la imagen de arriba.
Paso 5: Descarga las dependencias.
Abra la Terminal en Vs Code y ejecute
flutter pub get
Después de que el comando se ejecute correctamente, ejecute
flutter pub run flutter_launcher_icons:main
Después de que ambos comandos se ejecuten con éxito, vaya al archivo lib/main.dart y ejecute la aplicación
flutter run
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitkhedkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA