¿Cómo cambiar el ícono del iniciador de aplicaciones en Flutter?
Cuando creo una aplicación con un flutter createcomando, el logotipo de Flutter se usa como ícono de la aplicación para ambas plataformas.
Si quiero cambiar el ícono de la aplicación, ¿debo ir a los directorios de ambas plataformas y reemplazar las imágenes allí? Por directorios de plataformas me refiero myapp/ios/Runner/Assets.xcassets/AppIcon.appiconseta iOS y myapp/android/app/src/main/resAndroid.
¿O es posible definir una imagen como Flutter Asset y los íconos se generan de alguna manera?
Flutter Launcher Icons ha sido diseñado para ayudar a generar rápidamente íconos de iniciador tanto para Android como para iOS: https://pub.dartlang.org/packages/flutter_launcher_icons
- Agregue el paquete a su
pubspec.yamlarchivo (dentro de su proyecto Flutter) para usarlo - Dentro del
pubspec.yamlarchivo, especifique la ruta del ícono que desea usar para la aplicación y luego elija si desea usar el ícono para la aplicación de iOS, la aplicación de Android o ambas. - Ejecute el paquete
- ¡Voilá! Los íconos del iniciador predeterminado ahora han sido reemplazados por su ícono personalizado
Espero agregar un video al README de GitHub para demostrar lo anterior.
Puede encontrar un vídeo que muestra cómo ejecutar la herramienta aquí .
Si alguien quiere sugerir mejoras/informar errores, agréguelo como un problema en el proyecto GitHub .
Actualización: a partir del miércoles 24 de enero de 2018, debería poder crear nuevos íconos sin anular los antiguos íconos del iniciador existentes en su proyecto Flutter.
Actualización 2: a partir de la versión 0.4.0 (8 de junio de 2018), puede especificar una imagen para su ícono de Android y una imagen separada para su ícono de iOS.
Actualización 3: a partir de la versión 0.5.2 (20 de junio de 2018), ahora puede agregar íconos de inicio adaptables para la aplicación de Android de su proyecto Flutter.
Configurar los íconos del iniciador como un desarrollador nativo
Estaba teniendo problemas para usar y comprender el paquete flutter_launcher_icons . Esta respuesta es cómo lo harías si estuvieras creando una aplicación para Android o iOS de forma nativa. Es bastante rápido y fácil una vez que lo has hecho varias veces.
Androide
Los íconos del iniciador de Android tienen una capa de primer plano y otra de fondo.
(imagen adaptada de la documentación de Android )
La forma más sencilla de crear íconos de inicio para Android es usar Asset Studio que está disponible directamente en Android Studio. Ni siquiera tienes que abandonar tu proyecto Flutter. (Usuarios de VS Code, podrían considerar usar Android Studio solo para este paso. Es realmente muy conveniente y no está de más estar familiarizado con otro IDE).
Haga clic derecho en la androidcarpeta en el esquema del proyecto. Vaya a Nuevo > Recurso de imagen . (Intente hacer clic derecho en la android/appcarpeta si no ve Recursos de imagen como una opción. Consulte también los comentarios a continuación para obtener más sugerencias). Ahora puede seleccionar una imagen para crear su icono de iniciador.
Nota: normalmente uso una
1024x1024imagen en píxeles, pero ciertamente no debes usar nada más pequeño que512x512. Si estás usando Gimp o Inkscape, siempre debes tener dos capas, una para el primer plano y otra para el fondo. La imagen de primer plano debe tener áreas transparentes para que se vea la capa de fondo.
(clipart de león desde aquí )
Esto reemplazará los íconos del iniciador actual. Puede encontrar los iconos generados en las mipmapcarpetas:
Si prefiere crear los íconos del iniciador manualmente, consulte esta respuesta para obtener ayuda.
Finalmente, asegúrese de que el nombre del icono del iniciador en AndroidManifest sea el mismo que lo llamó anteriormente ( ic_launcherde forma predeterminada):
application android:icon="@mipmap/ic_launcher"
Ejecute la aplicación en el emulador para confirmar que el icono del iniciador se creó correctamente.
iOS
Siempre solía cambiar el tamaño de mis íconos de iOS individualmente a mano, pero si tienes una Mac, hay una aplicación gratuita en la Mac App Store llamada Icon Set Creator . Le das una imagen (de al menos 1024x1024píxeles) y te mostrará todos los tamaños que necesitas (más el Contents.jsonarchivo). Gracias a esta respuesta por la sugerencia.
Los iconos de iOS no deben tener transparencia. Vea más pautas aquí .
Después de haber creado el conjunto de iconos, inicie Xcode (suponiendo que tenga una Mac) y úselo para abrir la ioscarpeta en su proyecto Flutter. Luego vaya a Runner > Assets.xcassets y elimine el elemento AppIcon.
Después de eso, haga clic derecho y elija Importar .... Elija el conjunto de iconos que acaba de crear.
Eso es todo. Confirme que el ícono se creó ejecutando la aplicación en el simulador.
Si no tienes una Mac...
Aún puedes crear todas las imágenes a mano. En tu proyecto Flutter, ve a ios/Runner/Assets.xcassets/AppIcon.appiconset.
Los tamaños de imagen que necesita son los tamaños multiplicados en el nombre del archivo. Por ejemplo, [email protected]serían 29veces 3, es decir, 87píxeles cuadrados. Debe mantener los mismos nombres de iconos o editar el archivo JSON.
Siga pasos simples:
1. Agregar flutter_launcher_iconscomplemento apubspec.yaml
p.ej
dev_dependencies:
flutter_test:
sdk: flutter
flutter_launcher_icons: "^0.9.0"
flutter_icons:
image_path: "icon/icon.png"
android: true
ios: true
# optionally, as transparency is not allowed on app store
# remove_alpha_ios: true
2. Prepare un ícono de aplicación para la ruta especificada.
e.g. icon/icon.png
3. Ejecute el comando en la terminal para crear íconos de aplicaciones:
$ flutter pub get
$ flutter pub run flutter_launcher_icons:main
Para verificar todas las opciones disponibles y configurar diferentes íconos para Android e iOS, consulte esto
Actualizar:
flutter_launcher_icons 0.8.0La versión (12 de septiembre de 2020) tiene compatibilidad con sabores agregados
Los tipos se utilizan normalmente para crear su aplicación para diferentes entornos, como devyprod
La comunidad ha escrito algunos artículos y paquetes que pueden resultarle útiles. Estos artículos abordan versiones tanto para iOS como para Android.
Lo he cambiado en los siguientes pasos:
- agregue esta dependencia en su página pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
flutter_launcher_icons: ^0.7.4
- tienes que cargar una imagen/icono en tu proyecto que quieras ver como un ícono de inicio. (He creado un nombre de carpeta: imagen en mi proyecto y luego cargué el logo.png en la carpeta de imágenes). Ahora debe agregar los siguientes códigos y pegar la ruta de su imagen en image_path: en la página pubspec.yaml.
flutter_icons:
image_path: "images/logo.png"
android: true
ios: true
Vaya a la terminal y ejecute este comando:
pub aleteo obtener
Después de ejecutar el comando, ingrese el siguiente comando:
Flutter pub ejecuta flutter_launcher_icons: principal
Hecho
NB: (por supuesto, agregue una dependencia actualizada de
https://pub.dev/packages/flutter_launcher_icons#-installing-tab-
)
Le sugiero que utilice este sitio web vinculado a continuación
Creador de iconos de aplicaciones
Paso 1: cargue la imagen,
Paso 2: realice los cambios necesarios y haga clic en descargar (no cambie el nombre del archivo)
Paso 3: extraiga el archivo zip descargado en la carpeta respectiva
android/app/src/main/res
