Flutter'daki uygulama başlatıcısı simgesini nasıl değiştirebilirim?


200

Komutlu bir uygulama oluşturduğumda flutter create, flutter logosu her iki platform için bir uygulama simgesi olarak kullanılır.

Uygulama simgesini değiştirmek istersem myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset, iOS ve myapp/android/app/src/main/resAndroid için demek istediğim platform dizinlerine göre her iki platform dizinine gidip resimleri değiştirmeli miyim?

Ya da bir görüntüyü Çarpıntı Varlık olarak tanımlamak mümkün mü ve simgeler bir şekilde mi oluşturuluyor?


iki şekilde appicon güncelleyebilirsiniz, burada
Mayur Dabhi

Yanıtlar:


241

Flutter Launcher Icons, hem Android hem de iOS için hızlı bir şekilde launcher simgeleri oluşturmaya yardımcı olmak için tasarlanmıştır: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Kullanmak için paketi pubspec.yaml dosyanıza ekleyin (Flutter projeniz dahilinde)
  • Pubspec.yaml dosyasında, uygulama için kullanmak istediğiniz simgenin yolunu belirtin ve ardından simgeyi iOS uygulaması, Android uygulaması veya her ikisi için kullanmak isteyip istemediğinizi seçin.
  • Paketi çalıştırın
  • İşte bu kadar! Varsayılan başlatıcı simgeleri artık özel simgenizle değiştirildi

Göstermek için GitHub README'ye bir video eklemeyi umuyorum

Aracın nasıl çalıştırılacağını gösteren video burada bulunabilir .

Herhangi biri iyileştirme / rapor hataları önermek istiyorsa, lütfen GitHub projesine sorun olarak ekleyin .

Güncelleme: 24 Ocak 2018 Çarşamba gününden itibaren, Flutter projenizdeki eski başlatıcı simgelerini geçersiz kılmadan yeni simgeler oluşturabilmelisiniz.

Güncelleme 2: v0.4.0 (8 Haziran 2018) itibarıyla Android simgeniz için bir resim ve iOS simgeniz için ayrı bir resim belirleyebilirsiniz.

Güncelleme 3: v0.5.2 (20 Haziran 2018) itibarıyla artık Flutter projenizin Android uygulaması için uyarlanabilir başlatıcı simgeleri ekleyebilirsiniz


1
Görüntü için herhangi bir gereklilik var mı?
camino

1
Sadece bir boyuta referans buldum 710x599. Bunu seçmenizin nedeni neydi? Zaten beklerdim 512x512ya 1000x1000da kare bir şey.
Suragch

1
@Suragch, Google'da bir simge için hızlı bir arama yaptı, böylece hızlı bir şekilde test edebildim. İnsanların paketi deneyebilmesi için iki simge boyutu daha ekledim
Mark O'Sullivan

3
Paketlerin read.me öğesinin resim boyutları hakkında tavsiyelerde bulunmasını önerebilir miyim?
Brett Sutton

1
Bu şimdiye kadar bulduğum en iyi şeylerden biri. Teşekkür ederim dostum!
besil

136

Başlatıcı simgelerini yerel bir geliştirici gibi ayarlama

Flutter_launcher_icons paketini kullanma ve anlama konusunda sorun yaşıyordum . Bu yanıt, yerel olarak Android veya iOS için bir uygulama oluşturuyorsanız bunu nasıl yapacağınızdır. Birkaç kez yaptıktan sonra oldukça hızlı ve kolaydır.

Android

Android başlatıcısı simgelerinin hem ön planı hem de arka plan katmanı vardır.

resim açıklamasını buraya girin

(resim Android dokümanlarından uyarlanmıştır )

Android için başlatıcı simgeleri oluşturmanın en kolay yolu, doğrudan Android Studio'da bulunan Asset Studio'yu kullanmaktır. Flutter projenizden ayrılmak zorunda bile değilsiniz. (VS Code kullanıcıları, Android Studio'yu yalnızca bu adım için kullanmayı düşünebilirsiniz. Gerçekten çok kullanışlı ve başka bir IDE'ye aşina olmak acı vermiyor.)

androidProje taslağında klasörü sağ tıklayın . Git Yeni> Görüntü Varlık . ( Seçenek olarak Görüntü Varlığı'nıandroid/app görmüyorsanız klasörü sağ tıklamayı deneyin .) Artık başlatıcı simgenizi oluşturmak için bir görüntü seçebilirsiniz.

Not: Genellikle bir 1024x1024piksel görüntüsü kullanıyorum, ancak kesinlikle daha küçük bir şey kullanmamalısınız 512x512. Gimp veya Inkscape kullanıyorsanız, biri ön plan, diğeri arka plan için olmak üzere iki katmanınız olmalıdır. Ön plan görüntüsü, arka plan katmanının gösterebileceği saydam alanlara sahip olmalıdır.

resim açıklamasını buraya girin

(Aslan clipart buradan )

Bu, geçerli başlatıcı simgelerinin yerini alacaktır. Oluşturulan simgeleri mipmapklasörlerde bulabilirsiniz:

Başlatıcı simgelerini manuel olarak oluşturmayı tercih ediyorsanız yardım için bu cevaba bakın .

Son olarak, AndroidManifest'teki başlatıcı simge adının yukarıda belirttiğinizle aynı olduğundan emin olun ( ic_launchervarsayılan olarak):

application android:icon="@mipmap/ic_launcher"

Başlatıcı simgesinin başarıyla oluşturulduğunu onaylamak için uygulamayı emülatörde çalıştırın.

iOS

Her zaman iOS simgelerimi tek tek yeniden boyutlandırırdım, ancak Mac'iniz varsa Mac App Store'da Icon Set Creator adlı ücretsiz bir uygulama var . Ona bir görüntü verirsiniz (en az 1024x1024pikselden) ve ihtiyacınız olan tüm boyutları (artı Contents.jsondosyayı) tükürecektir . Öneri için bu cevaba teşekkürler .

iOS simgelerinin saydamlığı olmamalıdır. Burada daha fazla yönergelere bakın .

Simge kümesini oluşturduktan sonra, Xcode'u başlatın (Mac'iniz olduğunu varsayarak) ve iosFlutter projenizdeki klasörü açmak için kullanın . Ardından Runner> Assets.xcassets'e gidin ve AppIcon öğesini silin.

resim açıklamasını buraya girin

Bundan sonra sağ tıklayın ve İçe Aktar ... 'ı seçin . Yeni oluşturduğunuz simge kümesini seçin.

Bu kadar. Simülatörde uygulamayı çalıştırarak simgenin oluşturulduğunu doğrulayın.

Mac'iniz yoksa ...

Yine de tüm görüntüleri el ile oluşturabilirsiniz. Flutter projenizde adresine gidin ios/Runner/Assets.xcassets/AppIcon.appiconset.

İhtiyacınız olan görüntü boyutları dosya adındaki çarpılan boyutlardır. Örneğin, Icon-App-29x29@3x.pngolurdu 29kez 3olduğunu, 87kare piksel. Aynı simge adlarını tutmanız veya JSON dosyasını düzenlemeniz gerekir.


1
anlamaya çalışıyorsanız, sorularınızı yanıtlamaktan mutluluk duyarım. Bir sorun açın ve size bu konu hakkında geri döneceğim: github.com/fluttercommunity/flutter_launcher_icons
Mark O'Sullivan

2
@ MarkO'Sullivan, teşekkür ederim. Benim tahminim paket iyi. Sadece dokümantasyonun takip edilmesi benim için zor oldu. Örneğin, ilk görüntü için hangi boyutta kullanılacak, Android için oluşturulan arka plan katmanlarıdır, vb.
Suragch

Resmi olmayan pakete iyi bir alternatif, artık çalışmıyor gibi görünüyor ve 6 ay boyunca güncellenmedi ...
Yann39

1
Bu yardımcı oldu. Android Studio'da, Görüntü Varlığı ekleme seçeneği yoktur . Bir github / flutter sorunundan öğrendiğim iş, / android klasörünü (flutter projesi içinde) Android Studio'da standart bir "Android" projesi olarak açmaktır. / Res klasörünü sağ tıklattığınızda seçenek görünür.
MwamiTovi

2
@MwamiTovi doğrudur, ancak sağ tıklamadan veya manuel olarak senkronize etmeden önce kademeli senkronizasyonu beklemeniz gerekir, aksi takdirde "yeni -> resim varlığı" gösterilmez.
Daniel

111

Basit adımları izleyin:

  1. flutter_launcher_iconsEklenti Eklepubspec.yaml

Örneğin

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. Belirtilen yol için bir uygulama simgesi hazırlayın. e.g. icon/icon.png

  2. Uygulama simgeleri oluşturmak için terminalde komut çalıştırın:

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

Tüm mevcut seçenekleri kontrol kontrol etmek ve android ve iOS bakınız için farklı simgeler ayarlamak için bu

Umarım bu başkalarına yardımcı olur.


4
Bu benim için çalıştı; sadece son çizgiyi çalıştırdığımda flutter pub pub run flutter_launcher_icons:main. Bahşiş için teşekkürler!
olisteadman

3
Hata alıyorum android.dart: 164: 25: Hata: Çok fazla konum argümanı: 1'e izin verildi, ancak 4 bulundu.
ir2pid

Darkmode etkinse simge değiştirebilir miyim?
Maximiliano Sosa

1
@ ir2pid hatayı çözmek için flutter_launcher_icons olarak sürümü güncellemeniz gerekiyor: 0.7.5
Gökçer Gökdal

Meraklı bir soru: neden pub pubyerine pub?
ch271828n


20

Bu web sitesini kullanmanızı öneririm

Uygulama Simgesi Oluşturucu

Adım-1: Resmi yükleyin,

Adım-2: Gerekli Değişiklikleri Yapın ve İndirmeye tıklayın (dosya adını değiştirmeyin)

Adım-3: İndirilen Zip Dosyasını ilgili klasöre çıkarın

android/app/src/main/res

3
bu öneri
IOS'ta

2
bu çözüm benim için çalıştı (yalnızca Android'i hedefliyor)
dark_ruby

1
Çok güzel bir çözüm.
Mayank M.

17

Aşağıdaki adımlarda değiştirdim:

1) lütfen bu bağımlılığı pubspec.yaml sayfanıza ekleyin

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) projenize başlatıcı simgesi olarak görmek istediğiniz bir resim / simge yüklemeniz gerekir. (Bir klasör adı oluşturdum: projemdeki görüntü sonra görüntü klasörüne logo.png yükleyin). Şimdi aşağıdaki kodları eklemeniz ve resim yolunuzu image_path: pubspec.yaml sayfasına yapıştırmanız gerekiyor.

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

3) Terminale gidin ve şu komutu yürütün:

flutter pub get

4) Komutu uyguladıktan sonra aşağıdaki komutu girin:

flutter pub run flutter_launcher_icons:main

5) Yapıldı

Not: (tabii ki aşağıdakilerden güncellenmiş bir bağımlılık ekleyin:

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

)


4

Flutter'da Uygulama Simgesini ayarlamanın en iyi ve önerilen yolu.

“Flutter_launcher_icons” adlı çırpıda uygulama simgesini ayarlamak için bir eklenti buldum. Uygulama simgesini çırpıda ayarlamak için bu eklentiyi kullanacağız.

  1. Bu eklentiyi proje kök dizinindeki pubspec.yaml dosyasına ekleyin. Lütfen aşağıdaki kodu kontrol edin,

    bağımlılıklar:
    çarpıntı:
    sdk: çarpıntı
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Dosyayı kaydedin ve terminalde flutter pub olsun çalıştırın.

  1. Klasör varlıklarında projenin kökünde bir klasör varlıkları oluşturun ayrıca bir klasör simgesi oluşturur ve uygulama simgenizi bu klasörün içine yerleştirin. Kullanıcıya 1024x1024 uygulama simge boyutu önereceğim. Uygulama simgesini simge klasörünün içine yerleştirdim ve şimdi varlık / simge / icon.png olarak uygulama simge yolum var

  2. Şimdi, pubspec.yaml dosyasına aşağıdaki kodu ekleyin,

    flutter_icons:
    android: "launcher_icon"
    ios: gerçek
    image_path: "asset / icon / icon.png"

  3. Dosyayı kaydedin ve terminalde flutter pub olsun çalıştırın. Komutu çalıştırdıktan sonra aşağıdaki gibi ikinci komutu çalıştırın

    flutter pub run flutter_launcher_icons: ana -f pubspec.yaml

Ardından Uygulamayı Çalıştırın


Aynı eski doğru cevabı vermiş olmanıza rağmen, en azından bunun ana noktalarını vurguladınız.
Felipe Augusto

0

En iyi yol, hem iOS hem de Android için başlatıcı simgelerini ayrı ayrı değiştirmektir.

İOS ve Android modülündeki simgeleri ayrı ayrı değiştirin. Eklenti, aynı simgeden bozuk olan farklı boyut simgeleri üretir.

Bu bağlantıyı takip edin: https://flutter.dev/docs/deployment/android


-5

pubspec.yaml dosyasında flutter_launcher_icons kullanarak bunu başarabilirsiniz

başka bir yol android için diğerini iOS için kullanmaktır

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.