Jak zmienić ikonę uruchamiania aplikacji na Flutter?


197

Kiedy tworzę aplikację z flutter createpoleceniem, logo trzepotania jest używane jako ikona aplikacji na obu platformach.

Jeśli chcę zmienić ikonę aplikacji, czy powinienem przejść do obu katalogów platform i zamienić tam obrazy ?, katalogami platform mam na myśli myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetiOS i myapp/android/app/src/main/resAndroida.

Czy też można zdefiniować obraz jako Zasób trzepotania, a ikony generowane są w jakiś sposób?


możesz zaktualizować appicon na dwa sposoby, wspomniałem tutaj
sposobach

Odpowiedzi:


237

Ikony Flutter Launcher zostały zaprojektowane, aby pomóc w szybkim generowaniu ikon uruchamiania dla Androida i iOS: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Dodaj pakiet do pliku pubspec.yaml (w projekcie Flutter), aby go użyć
  • W pliku pubspec.yaml określ ścieżkę ikony, której chcesz używać w aplikacji, a następnie wybierz, czy chcesz używać ikony w aplikacji na iOS, na Androidzie, czy na obu tych urządzeniach.
  • Uruchom pakiet
  • Voila! Domyślne ikony programu uruchamiającego zostały teraz zastąpione ikoną niestandardową

Mam nadzieję, że dodam wideo do GITHub README, aby to zademonstrować

Film pokazujący, jak uruchomić narzędzie, można znaleźć tutaj .

Jeśli ktoś chce zaproponować ulepszenia / zgłosić błędy, dodaj go jako problem w projekcie GitHub .

Aktualizacja: Od środy 24 stycznia 2018 r. Powinieneś być w stanie tworzyć nowe ikony bez zastępowania starych istniejących ikon programu uruchamiającego w projekcie Flutter.

Aktualizacja 2: Od wersji 0.4.0 (8 czerwca 2018 r.) Możesz określić jeden obraz dla ikony Androida i osobny obraz dla ikony iOS.

Aktualizacja 3: Od wersji 0.5.2 (20 czerwca 2018 r.) Możesz teraz dodawać ikony uruchamiania adaptacyjnego dla aplikacji na Androida projektu Flutter


1
Czy jest jakiś wymóg dotyczący obrazu?
camino

1
Znalazłem tylko odniesienie do jednego rozmiaru 710x599. Jaki był powód tego wyboru? Tak 512x512czy 1000x1000inaczej bym się spodziewał .
Suragch,

1
@ Suragch właśnie przeprowadził szybkie wyszukiwanie ikony w Google, aby móc ją szybko przetestować. Podałem
Mark O'Sullivan

2
Czy mogę zasugerować, że pakiety read.me powinny zawierać zalecenia dotyczące rozmiarów obrazów.
Brett Sutton,

1
To jedna z najlepszych rzeczy, jakie kiedykolwiek znalazłem. Dziękuje!
oprócz

134

Ustawianie ikon programu uruchamiającego jak natywnego programisty

Miałem problemy z używaniem i zrozumieniem pakietu flutter_launcher_icons . Ta odpowiedź brzmi, jak byś to zrobił, gdybyś tworzył aplikację dla systemu Android lub iOS natywnie. Jest to dość szybkie i łatwe, jeśli zrobiłeś to kilka razy.

Android

Ikony uruchamiania Androida mają zarówno warstwę pierwszego planu, jak i warstwę tła.

wprowadź opis zdjęcia tutaj

(obraz na podstawie dokumentacji Androida )

Najłatwiejszym sposobem na utworzenie ikon uruchamiania dla Androida jest użycie Asset Studio, które jest dostępne bezpośrednio w Android Studio. Nie musisz nawet opuszczać projektu Flutter. (Użytkownicy VS Code, możesz rozważyć użycie Android Studio tylko na tym etapie. Jest to naprawdę bardzo wygodne i nie zaszkodzi zapoznać się z innym IDE.)

Kliknij prawym przyciskiem myszy androidfolder w konspekcie projektu. Przejdź do Nowy> Zasób obrazu . (Spróbuj kliknąć android/appfolder prawym przyciskiem myszy, jeśli nie widzisz opcji Zasób obrazu ). Teraz możesz wybrać obraz, z którego chcesz utworzyć ikonę programu uruchamiającego.

Uwaga: zwykle używam 1024x1024obrazu pikselowego, ale z pewnością nie powinieneś używać niczego mniejszego 512x512. Jeśli używasz Gimp lub Inkscape, powinieneś mieć dwie warstwy, jedną na pierwszym planie i jedną na tle. Obraz na pierwszym planie powinien zawierać przezroczyste obszary, przez które warstwa tła może się wyświetlać.

wprowadź opis zdjęcia tutaj

(lew clipart stąd )

Spowoduje to zastąpienie obecnych ikon programu uruchamiającego. Wygenerowane ikony można znaleźć w mipmapfolderach:

Jeśli wolisz ręcznie tworzyć ikony programu uruchamiającego, zapoznaj się z tą odpowiedzią, aby uzyskać pomoc.

Na koniec upewnij się, że nazwa ikony uruchamiania w AndroidManifest jest taka sama, jak nazwa powyżej ( ic_launcherdomyślnie):

application android:icon="@mipmap/ic_launcher"

Uruchom aplikację w emulatorze, aby potwierdzić, że ikona programu uruchamiającego została pomyślnie utworzona.

iOS

Zawsze ręcznie ręcznie zmieniałem rozmiar ikon iOS, ale jeśli masz komputer Mac, w Mac App Store jest bezpłatna aplikacja o nazwie Icon Set Creator . Dajesz mu obraz (co najmniej 1024x1024pikseli) i wypluwa wszystkie potrzebne rozmiary (plus Contents.jsonplik). Dzięki tej odpowiedzi za sugestię.

Ikony iOS nie powinny mieć żadnej przezroczystości. Zobacz więcej wskazówek tutaj .

Po utworzeniu zestawu ikon uruchom Xcode (zakładając, że masz komputer Mac) i użyj go, aby otworzyć iosfolder w projekcie Flutter. Następnie przejdź do Runner> Assets.xcassets i usuń element AppIcon.

wprowadź opis zdjęcia tutaj

Po tym prawym przyciskiem myszy i wybierz Importuj ... . Wybierz zestaw ikon, który właśnie utworzyłeś.

Otóż ​​to. Sprawdź, czy ikona została utworzona, uruchamiając aplikację w symulatorze.

Jeśli nie masz komputera Mac ...

Nadal możesz ręcznie tworzyć wszystkie obrazy. W swoim projekcie Flutter przejdź do ios/Runner/Assets.xcassets/AppIcon.appiconset.

Potrzebne rozmiary obrazów to pomnożone rozmiary w nazwie pliku. Na przykład Icon-App-29x29@3x.pngbędą to 29czasy 3, czyli 87piksele kwadratowe. Musisz zachować te same nazwy ikon lub edytować plik JSON.


1
jeśli starałeś się to zrozumieć, chętnie odpowiem na wszelkie pytania. Otwórz problem, a skontaktuję się z Tobą: github.com/fluttercommunity/flutter_launcher_icons
Mark O'Sullivan

2
@ MarkO'Sullivan, dziękuję. Domyślam się, że paczka jest w porządku. Po prostu dokumentacja była dla mnie trudna do naśladowania. Na przykład, jaki rozmiar należy zastosować dla obrazu początkowego, tworzone są warstwy tła dla systemu Android itp. Bardzo przydatny byłby szczegółowy samouczek, który przeprowadzi początkującego przez cały proces.
Suragch,

Dobra alternatywa dla pakietu, który nie jest oficjalny, wydaje się już nie działać i nie była aktualizowana przez 6 miesięcy ...
Yann39

1
To pomogło. W Android Studio nie ma opcji dodawania Zasobu obrazu . Obejście, którego nauczyłem się z problemu github / flutter, polega na otwarciu folderu / android (w projekcie trzepotania) jako standardowego projektu „Android” w Android Studio. Opcja pojawi się po kliknięciu prawym przyciskiem myszy folderu / res.
MwamiTovi

2
@MwamiTovi ma rację, jednak musisz poczekać na synchronizację stopni przed kliknięciem prawym przyciskiem myszy lub nawet zsynchronizować ręcznie, w przeciwnym razie „nowy -> zasób obrazu” nie zostanie wyświetlony.
Daniel

111

Wykonaj proste kroki:

  1. Dodaj flutter_launcher_iconswtyczkę dopubspec.yaml

na przykład

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. Przygotuj ikonę aplikacji dla określonej ścieżki. e.g. icon/icon.png

  2. Wykonaj polecenie na terminalu, aby utworzyć ikony aplikacji:

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

Aby sprawdzić, sprawdź wszystkie dostępne opcje i ustawić różne ikony dla Androida i iOS, zapoznaj się z tym

Mam nadzieję, że to pomoże innym.


4
To zadziałało dla mnie; tylko raz uruchomiłem ostatnią linię flutter pub pub run flutter_launcher_icons:main. Dzięki za wskazówkę!
olisteadman

3
Pojawiają się błędy android.dart: 164: 25: Błąd: Zbyt wiele argumentów pozycyjnych: 1 dozwolony, ale 4 znalezione.
ir2pid

Czy mogę zmienić ikonę, jeśli tryb ciemny jest włączony?
Maximiliano Sosa

1
@ ir2pid, aby rozwiązać błąd, musisz zaktualizować wersję jako flutter_launcher_icons: 0.7.5
Gökçer Gökdal


19

Sugeruję skorzystanie z tej strony. Link poniżej

Kreator ikon aplikacji

Krok 1: prześlij obraz,

Krok 2: Wprowadź niezbędne zmiany i kliknij pobierz (nie zmieniaj nazwy pliku)

Krok 3: Wyodrębnij pobrany plik zip w odpowiednim folderze

android/app/src/main/res

3
ta sugestia nie pomoże w IOS
ewaluuje

2
to rozwiązanie działało dla mnie (tylko na Androida)
dark_ruby

1
Bardzo fajne rozwiązanie.
Mayank M.

17

Zmieniłem to w następujących krokach:

1) dodaj tę zależność na swojej stronie pubspec.yaml

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) musisz załadować obraz / ikonę do swojego projektu, który chcesz zobaczyć jako ikonę programu uruchamiającego. (Utworzyłem nazwę folderu: obraz w moim projekcie, a następnie załaduj logo.png w folderze obrazów). Teraz musisz dodać poniższe kody i wkleić ścieżkę obrazu na image_path: na stronie pubspec.yaml.

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

3) Przejdź do terminala i wykonaj następujące polecenie:

flutter pub get

4) Po wykonaniu polecenia wpisz poniżej polecenie:

flutter pub run flutter_launcher_icons:main

5) Gotowe

Uwaga: (oczywiście dodaj zaktualizowaną zależność od

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

)


4

Najlepszy i zalecany sposób na ustawienie ikony aplikacji we Flutter.

Znalazłem jedną wtyczkę do ustawienia ikony aplikacji w trzepocie o nazwie „flutter_launcher_icons”. Użyjemy tej wtyczki, aby ustawić ikonę aplikacji na trzepotanie.

  1. Dodaj tę wtyczkę do pliku pubspec.yaml w katalogu głównym projektu. Sprawdź poniższy kod,

    zależności:
    trzepotanie:
    SDK: trzepotanie
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Zapisz plik i uruchom flatter pub get on terminal.

  1. Utwórz zasoby folderu w katalogu głównym projektu w zasobach folderu również utwórz ikonę folderu i umieść ikonę aplikacji w tym folderze. Polecę użytkownikowi rozmiar ikony aplikacji 1024x1024. Umieściłem ikonę aplikacji w folderze ikon, a teraz mam ścieżkę ikony aplikacji jako asset / icon / icon.png

  2. Teraz w pubspec.yaml dodaj poniższy kod,

    flutter_icons:
    android: „launcher_icon”
    ios: true
    ścieżka_obrazu: „resources / icon / icon.png”

  3. Zapisz plik i uruchom flatter pub get on terminal. Po uruchomieniu polecenia uruchom drugie polecenie, jak poniżej

    uruchom flutter pub flutter_launcher_icons: main -f pubspec.yaml

Następnie uruchom aplikację


Chociaż odpowiedziałeś na tę samą starą poprawną odpowiedź, przynajmniej podkreśliłeś jej główne punkty.
Felipe Augusto,

0

Najlepszym sposobem jest osobna zmiana ikon programu uruchamiającego zarówno dla systemu iOS, jak i Androida.

Zmień ikony w module iOS i Android osobno. Wtyczka wytwarza ikony o różnych rozmiarach z tej samej ikony, które są zniekształcone.

Kliknij ten link: https://flutter.dev/docs/deployment/android


-5

możesz to osiągnąć za pomocą flutter_launcher_icons w pubspec.yaml

innym sposobem jest użycie jednego dla Androida, a drugiego dla iOS

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.