Como alterar o ícone do iniciador de aplicativos no Flutter?

199

Quando crio um aplicativo com flutter createcomando, o logotipo flutter é usado como um ícone de aplicativo para ambas as plataformas.

Se eu quiser mudar o ícone do aplicativo, devo ir para os diretórios de ambas as plataformas e substituir as imagens lá ?, por diretórios de plataformas que quero dizer myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetpara iOS e myapp/android/app/src/main/resAndroid.

Ou é possível definir uma imagem como um ativo de vibração e os ícones são gerados de alguma forma?

RobertoAllende
fonte
você pode atualizar o appicon em dois sentidos, mencionei os dois sentidos aqui
Mayur Dabhi

Respostas:

239

O Flutter Launcher Icons foi projetado para ajudar a gerar rapidamente ícones do iniciador para Android e iOS: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Adicione o pacote ao seu arquivo pubspec.yaml (dentro do seu projeto Flutter) para usá-lo
  • No arquivo pubspec.yaml, especifique o caminho do ícone que você deseja usar para o aplicativo e escolha se deseja usar o ícone para o aplicativo iOS, Android ou ambos.
  • Execute o pacote
  • Voila! Os ícones padrão do iniciador agora foram substituídos pelo seu ícone personalizado

Espero adicionar um vídeo ao GitHub README para demonstrá-lo

Vídeo mostrando como executar a ferramenta pode ser encontrado aqui .

Se alguém quiser sugerir melhorias / relatar bugs, adicione-o como um problema no projeto GitHub .

Atualização: a partir de quarta-feira, 24 de janeiro de 2018, você poderá criar novos ícones sem substituir os ícones antigos do iniciador existentes no seu projeto Flutter.

Atualização 2: a partir da v0.4.0 (8 de junho de 2018), você pode especificar uma imagem para o ícone do Android e uma imagem separada para o ícone do iOS.

Atualização 3: a partir da v0.5.2 (20 de junho de 2018), agora você pode adicionar ícones do iniciador adaptável para o aplicativo Android do seu projeto Flutter

Mark O'Sullivan
fonte
1
Existe algum requisito para a imagem?
Camino
1
Eu só encontrei uma referência para um tamanho 710x599,. Qual foi o motivo da escolha disso? Eu teria esperado 512x512ou 1000x1000ou algo quadrado de qualquer maneira.
Suragch 25/01/19
1
O @Suragch fez uma pesquisa rápida por um ícone no Google para que eu pudesse testá-lo rapidamente. Eu incluí dois outros tamanhos de ícones que as pessoas pudessem experimentar o pacote (1024x1024 e 128x128), você pode encontrá-los aqui: github.com/fluttercommunity/flutter_launcher_icons/tree/master/...
Mark O'Sullivan
3
Posso sugerir que os pacotes read.me forneçam recomendações sobre o tamanho das imagens.
Brett Sutton
1
Esta é uma das melhores coisas que eu já encontrei. Obrigado cara!
besil
135

Definindo os ícones do iniciador como um desenvolvedor nativo

Estava com problemas para usar e entender o pacote flutter_launcher_icons . Esta resposta é como você faria se estivesse criando um aplicativo para Android ou iOS nativamente. É bem rápido e fácil depois que você o faz algumas vezes.

Android

Os ícones do iniciador do Android têm uma camada de primeiro e de segundo plano.

insira a descrição da imagem aqui

(imagem adaptada da documentação do Android )

A maneira mais fácil de criar ícones do iniciador para Android é usar o Asset Studio, disponível no Android Studio. Você nem precisa sair do seu projeto Flutter. (Usuários do VS Code, considere usar o Android Studio apenas para esta etapa. É realmente muito conveniente e não faz mal estar familiarizado com outro IDE.)

Clique com o botão direito do mouse na androidpasta no esboço do projeto. Vá para Novo> Ativo da imagem . (Tente clicar com o botão direito do mouse na android/apppasta se não vir o recurso de imagem como uma opção.) Agora você pode selecionar uma imagem para criar o ícone do iniciador.

Nota: Eu normalmente uso uma 1024x1024imagem de pixel, mas você certamente não deve usar nada menor que isso 512x512. Se você estiver usando o Gimp ou o Inkscape, deverá ter duas camadas, uma para o primeiro plano e outra para o segundo plano. A imagem em primeiro plano deve ter áreas transparentes para mostrar a camada de segundo plano.

insira a descrição da imagem aqui

(clipart de leão daqui )

Isso substituirá os ícones atuais do iniciador. Você pode encontrar os ícones gerados nas mipmappastas:

Se você preferir criar os ícones do iniciador manualmente, consulte esta resposta para obter ajuda.

Por fim, verifique se o nome do ícone do iniciador no AndroidManifest é igual ao que você chamou acima ( ic_launcherpor padrão):

application android:icon="@mipmap/ic_launcher"

Execute o aplicativo no emulador para confirmar que o ícone do iniciador foi criado com sucesso.

iOS

Eu sempre costumava redimensionar meus ícones do iOS manualmente, mas se você tem um Mac, há um aplicativo gratuito na Mac App Store chamado Icon Set Creator . Você fornece uma imagem (de pelo menos 1024x1024pixels) e ela cuspirá todos os tamanhos necessários (mais o Contents.jsonarquivo). Obrigado a esta resposta pela sugestão.

Os ícones do iOS não devem ter nenhuma transparência. Veja mais diretrizes aqui .

Depois de criar o conjunto de ícones, inicie o Xcode (supondo que você tenha um Mac) e use-o para abrir a iospasta no seu projeto Flutter. Em seguida, vá para Runner> Assets.xcassets e exclua o item AppIcon.

insira a descrição da imagem aqui

Depois disso, clique com o botão direito e escolha Import ... . Escolha o conjunto de ícones que você acabou de criar.

É isso aí. Confirme se o ícone foi criado executando o aplicativo no simulador.

Se você não tem um Mac ...

Você ainda pode criar todas as imagens manualmente. No seu projeto Flutter, vá para ios/Runner/Assets.xcassets/AppIcon.appiconset.

Os tamanhos de imagem necessários são os tamanhos multiplicados no nome do arquivo. Por exemplo, [email protected]seriam 29tempos 3, ou seja, 87pixels quadrados. Você precisa manter os mesmos nomes de ícones ou editar o arquivo JSON.

Suragch
fonte
1
se você estava tentando entender, fico feliz em responder a todas as perguntas que você tiver. Abra um problema e eu retornarei para você: github.com/fluttercommunity/flutter_launcher_icons
Mark O'Sullivan
2
@ MarkO'Sullivan, obrigado. Meu palpite é que o pacote está bom. É que a documentação foi difícil para eu seguir. Por exemplo, qual tamanho usar para a imagem inicial, são as camadas de plano de fundo criadas para o Android etc. Seria realmente útil ter um tutorial detalhado para orientar um iniciante no processo.
Suragch 12/04/19
Boa alternativa para o pacote, que não é oficial, não parece mais trabalhar, e não foi atualizado por 6 meses ...
Yann39
1
Isso ajudou. No Android Studio, não há opção para adicionar recurso de imagem . A solução alternativa que aprendi com um problema no github / flutter é abrir a pasta / android (dentro do projeto flutter) como um projeto "Android" sozinho no Android Studio. A opção aparecerá quando você clicar com o botão direito do mouse na pasta / res.
MwamiTovi
2
O @MwamiTovi está certo, no entanto, é necessário aguardar a sincronização gradle antes de clicar com o botão direito do mouse ou até sincronizar manualmente, caso contrário "novo -> recurso de imagem" não será exibido.
Daniel
111

Siga etapas simples:

  1. Adicionar flutter_launcher_iconsplug-in aopubspec.yaml

por exemplo

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. Prepare um ícone de aplicativo para o caminho especificado. e.g. icon/icon.png

  2. Execute o comando no terminal para Criar ícones de aplicativos:

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

Para verificar, verificar todas as opções disponíveis e definir ícones diferentes para Android e iOS, consulte este

Espero que isso ajude os outros.

Rahul Mahadik
fonte
4
Isso funcionou para mim; apenas uma vez eu corri a última linha flutter pub pub run flutter_launcher_icons:main. Obrigado pela dica!
21419 olisteadman
3
Eu recebo erros android.dart: 164: 25: Erro: Muitos argumentos posicionais: 1 permitido, mas 4 encontrados.
ir2pid 8/06/19
Posso mudar o ícone se o modo escuro estiver ativado?
Maximiliano Sosa
1
@ ir2pid para resolver o erro, você precisa atualizar a versão como flutter_launcher_icons: 0.7.5
Gökçer Gökdal
29

Você precisa substituir os arquivos de ícone do Flutter por suas próprias imagens. Este site ajudará você a transformar seu png em ícones do iniciador de vários tamanhos:

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Collin Jackson
fonte
2
O seu link só produz os tamanhos corretos para ícones Android
Mark O'Sullivan
19

Eu sugiro que você use este site.

App Icon Creator

Etapa 1: faça upload da imagem,

Etapa 2: Faça as alterações necessárias e clique no download (não altere o nome do arquivo)

Etapa 3: Extrair o arquivo zip baixado na respectiva pasta

android/app/src/main/res
Nitish Patel
fonte
3
esta sugestão não ajudará no IOS
evals
2
esta solução funcionou para mim (visando apenas o Android) #
dark_ruby 22/11/19
1
Uma solução muito boa.
Mayank M.
17

Eu mudei nas seguintes etapas:

1) adicione essa dependência à sua página pubspec.yaml

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) você deve enviar uma imagem / ícone no seu projeto que deseja ver como um ícone do iniciador. (Criei um nome de pasta: imagem no meu projeto e depois carregue o logo.png na pasta da imagem). Agora você deve adicionar os códigos abaixo e colar o caminho da imagem no caminho da imagem: na página pubspec.yaml.

flutter_icons:
  image_path: "images/logo.png"
  android: true
  ios: true

3) Vá para o terminal e execute este comando:

flutter pub get

4) Após executar o comando, digite o comando abaixo:

flutter pub run flutter_launcher_icons:main

5) Feito

NB: (é claro, adicione uma dependência atualizada de

https://pub.dev/packages/flutter_launcher_icons#-installing-tab-

)

Paul Polash
fonte
4

Melhor e recomendada maneira de definir o ícone do aplicativo no Flutter.

Encontrei um plug-in para definir o ícone do aplicativo no flutter chamado "flutter_launcher_icons". Usaremos este plug-in para definir o ícone do aplicativo rapidamente.

  1. Adicione este plug-in no arquivo pubspec.yaml no diretório raiz do projeto. Verifique o código abaixo,

    dependências:
    flutter:
    sdk: flutter
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Salve o arquivo e execute o flutter pub no terminal.

  1. Crie recursos de uma pasta na raiz do projeto em ativos de pasta também crie um ícone de pasta e coloque o ícone do aplicativo dentro dessa pasta. Vou recomendar ao usuário o tamanho do ícone do aplicativo 1024x1024. Coloquei o ícone do aplicativo na pasta icon e agora tenho o caminho do ícone do aplicativo como assets / icon / icon.png

  2. Agora, em pubspec.yaml, adicione o código abaixo,

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

  3. Salve o arquivo e execute o flutter pub no terminal. Após executar o comando, execute o segundo comando como abaixo

    flutter pub run flutter_launcher_icons: main -f pubspec.yaml

Em seguida, execute o aplicativo

Parth Patel
fonte
Embora você tenha respondido a mesma resposta correta antiga, pelo menos você destacou os pontos principais disso.
Felipe Augusto
0

A melhor maneira é alterar os ícones do iniciador separadamente para iOS e Android.

Altere os ícones no módulo iOS e Android separadamente. O plug-in produz ícones de tamanhos diferentes do mesmo ícone, distorcidos.

Siga este link: https://flutter.dev/docs/deployment/android

Raj Yadav
fonte
-5

você pode conseguir isso usando flutter_launcher_icons em pubspec.yaml

outra maneira é usar um para android e outro para iOS

Malik A. Abualzait
fonte