Bagaimana cara mengubah ikon peluncur aplikasi di Flutter?

200

Saat saya membuat aplikasi dengan flutter createperintah, logo flutter digunakan sebagai ikon aplikasi untuk kedua platform.

Jika saya ingin mengubah ikon aplikasi, apakah saya harus pergi ke direktori kedua platform dan mengganti gambar di sana ?, dengan direktori platform yang saya maksud myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetuntuk iOS dan myapp/android/app/src/main/resuntuk Android.

Atau mungkinkah untuk mendefinisikan gambar sebagai Aset Bergetar dan ikon dihasilkan entah bagaimana?

flutter  application-icon 
— RobertoAllende
sumber
Anda dapat memperbarui appicon dengan dua cara, saya telah menyebutkan kedua cara periksa di sini
— Mayur Dabhi

Jawaban:

240

Flutter Launcher Icons telah dirancang untuk membantu dengan cepat menghasilkan ikon peluncur untuk Android dan iOS: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Tambahkan paket ke file pubspec.yaml Anda (dalam proyek Flutter Anda) untuk menggunakannya
  • Dalam file pubspec.yaml tentukan lintasan ikon yang ingin Anda gunakan untuk aplikasi dan kemudian pilih apakah Anda ingin menggunakan ikon untuk aplikasi iOS, aplikasi Android atau keduanya.
  • Jalankan paket
  • Voila! Ikon peluncur default kini telah diganti dengan ikon khusus Anda

Saya berharap dapat menambahkan video ke README GitHub untuk mendemonstrasikannya

Video yang menunjukkan cara menjalankan alat dapat ditemukan di sini .

Jika ada yang ingin menyarankan perbaikan / laporkan bug, harap tambahkan itu sebagai masalah pada proyek GitHub .

Pembaruan: Pada hari Rabu, 24 Januari 2018, Anda harus dapat membuat ikon baru tanpa mengabaikan ikon peluncur lama yang ada di proyek Flutter Anda.

Pembaruan 2: Pada v0.4.0 (8 Juni 2018) Anda dapat menentukan satu gambar untuk ikon Android Anda dan gambar terpisah untuk ikon iOS Anda.

Pembaruan 3: Mulai v0.5.2 (20 Juni 2018) kini Anda dapat menambahkan ikon peluncur adaptif untuk aplikasi Android proyek Flutter Anda

— Mark O'Sullivan
sumber
1
Apakah ada persyaratan untuk gambar?
— camino
1
Saya hanya menemukan referensi untuk satu ukuran 710x599,. Apa alasan memilih itu? Saya akan mengharapkan 512x512atau 1000x1000atau sesuatu persegi pula.
— Suragch
1
@ Suragch baru saja melakukan pencarian cepat untuk ikon di Google sehingga saya dapat dengan cepat mengujinya. Saya menyertakan dua ukuran ikon lain sehingga orang dapat mencoba paket (1024x1024 dan 128x128), Anda dapat menemukannya di sini: github.com/fluttercommunity/flutter_launcher_icons/tree/master/…
— Mark O'Sullivan
3
Dapatkah saya menyarankan bahwa paket read.me harus memberikan rekomendasi tentang ukuran gambar.
— Brett Sutton
1
Ini adalah salah satu hal terbaik yang pernah saya temukan. Terima kasih kawan!
— Besil
135

Mengatur ikon peluncur seperti pengembang asli

Saya mengalami masalah dalam menggunakan dan memahami paket flutter_launcher_icons . Jawaban ini adalah bagaimana Anda akan melakukannya jika Anda membuat aplikasi untuk Android atau iOS secara asli. Ini cukup cepat dan mudah setelah Anda melakukannya beberapa kali.

Android

Ikon peluncur Android memiliki lapisan latar depan dan latar belakang.

masukkan deskripsi gambar di sini

(gambar diadaptasi dari dokumentasi Android )

Cara termudah untuk membuat ikon peluncur untuk Android adalah dengan menggunakan Asset Studio yang tersedia tepat di Android Studio. Anda bahkan tidak harus meninggalkan proyek Flutter Anda. (Pengguna VS Code, Anda dapat mempertimbangkan menggunakan Android Studio hanya untuk langkah ini. Ini benar-benar sangat nyaman dan tidak ada salahnya untuk terbiasa dengan IDE lain.)

Klik kanan pada androidfolder dalam garis besar proyek. Buka Baru> Aset Gambar . (Coba klik kanan android/appfolder jika Anda tidak melihat Aset Gambar sebagai opsi.) Sekarang Anda dapat memilih gambar untuk membuat ikon peluncur Anda.

Catatan: Saya biasanya menggunakan 1024x1024gambar piksel tetapi Anda tentu harus menggunakan yang lebih kecil dari itu 512x512. Jika Anda menggunakan Gimp atau Inkscape, Anda harus memiliki dua lapisan, satu untuk latar depan dan satu untuk latar belakang. Gambar latar depan harus memiliki area transparan untuk lapisan latar belakang untuk ditampilkan.

masukkan deskripsi gambar di sini

(singa clipart dari sini )

Ini akan menggantikan ikon peluncur saat ini. Anda dapat menemukan ikon yang dihasilkan di mipmapfolder:

Jika Anda lebih suka membuat ikon peluncur secara manual, lihat jawaban ini untuk bantuan.

Terakhir, pastikan bahwa nama ikon peluncur di AndroidManifest sama dengan apa yang Anda sebut di atas ( ic_launchersecara default):

application android:icon="@mipmap/ic_launcher"

Jalankan aplikasi di emulator untuk mengonfirmasi bahwa ikon peluncur telah berhasil dibuat.

iOS

Saya selalu terbiasa mengubah ukuran ikon iOS saya secara manual, tetapi jika Anda memiliki Mac, ada aplikasi gratis di Mac App Store yang disebut Icon Set Creator . Anda memberinya gambar (setidaknya 1024x1024piksel) dan itu akan memuntahkan semua ukuran yang Anda butuhkan (plus Contents.jsonfile). Berkat jawaban ini untuk sarannya.

Ikon iOS seharusnya tidak memiliki transparansi. Lihat panduan lebih lanjut di sini .

Setelah Anda membuat set ikon, mulai Xcode (dengan asumsi Anda memiliki Mac) dan menggunakannya untuk membuka iosfolder dalam proyek Flutter Anda. Lalu pergi ke Runner> Assets.xcassets dan hapus item AppIcon.

masukkan deskripsi gambar di sini

Setelah itu klik kanan dan pilih Impor ... . Pilih set ikon yang baru saja Anda buat.

Itu dia. Konfirmasikan bahwa ikon itu dibuat dengan menjalankan aplikasi di simulator.

Jika Anda tidak memiliki Mac ...

Anda masih dapat membuat semua gambar dengan tangan. Dalam proyek Flutter Anda, pergi ke ios/Runner/Assets.xcassets/AppIcon.appiconset.

Ukuran gambar yang Anda butuhkan adalah ukuran yang dikalikan dalam nama file. Sebagai contoh, Icon-App-29x29@3x.pngakan menjadi 29kali 3, yaitu, 87piksel persegi. Anda harus menyimpan nama ikon yang sama atau mengedit file JSON.

— Suragch
sumber
1
jika Anda berjuang untuk memahaminya, saya senang menjawab pertanyaan yang Anda miliki. Buka masalah dan saya akan menghubungi Anda mengenai hal ini: github.com/fluttercommunity/flutter_launcher_icons
— Mark O'Sullivan
2
@ MarkO'Sullivan, terima kasih. Dugaan saya adalah bahwa paket tersebut baik-baik saja. Hanya saja dokumentasinya sulit bagi saya untuk diikuti. Misalnya, ukuran apa yang digunakan untuk gambar awal, adalah lapisan latar belakang yang dibuat untuk Android, dll. Akan sangat membantu jika Anda memiliki tutorial terperinci untuk memandu pemula melalui proses.
— Suragch
Alternatif yang baik untuk paket, yang tidak resmi, tampaknya tidak berfungsi lagi, dan belum diperbarui selama 6 bulan ...
— Yann39
1
Ini membantu. Di dalam Android Studio, tidak ada opsi untuk menambahkan Aset Gambar . Pekerjaan yang saya pelajari dari masalah github / flutter adalah membuka folder / android (dalam proyek flutter) sebagai proyek standar "Android" saja di Android Studio. Opsi akan muncul ketika Anda mengklik kanan pada folder / res.
— MwamiTovi
2
@MwamiTovi benar, namun Anda harus menunggu sinkronisasi bertahap sebelum mengklik kanan atau bahkan menyinkronkan secara manual, jika tidak, "baru -> aset gambar" tidak akan ditampilkan.
— Daniel
111

Ikuti langkah-langkah sederhana:

  1. Tambahkan flutter_launcher_iconsPlugin kepubspec.yaml

misalnya

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true

  1. Siapkan ikon aplikasi untuk jalur yang ditentukan. e.g. icon/icon.png

  2. Jalankan perintah pada terminal untuk Membuat ikon aplikasi:

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

Untuk memeriksa periksa semua opsi yang tersedia dan untuk mengatur ikon yang berbeda untuk Android dan iOS silakan merujuk ini

Semoga ini bisa membantu orang lain.

— Rahul Mahadik
sumber
4
Ini bekerja untuk saya; hanya sekali saya menjalankan baris terakhir itu flutter pub pub run flutter_launcher_icons:main. Terima kasih atas tipnya!
— olisteadman
3
Saya mendapatkan kesalahan android.dart: 164: 25: Kesalahan: Terlalu banyak argumen posisi: 1 diizinkan, tetapi 4 ditemukan.
— ir2pid
Saya dapat mengganti ikon jika darkmode diaktifkan?
— Maximiliano Sosa
1
@ ir2pid untuk menyelesaikan kesalahan, Anda perlu memperbarui versi sebagai flutter_launcher_icons: 0.7.5
— Gökçer Gökdal
Hanya pertanyaan yang ingin tahu: mengapa pub pubalih - alih pub?
— ch271828n
19

Saya menyarankan Anda untuk menggunakan situs web ini Tertaut di Bawah Ini

Ikon Pencipta Aplikasi

Langkah-1: unggah Gambar,

Langkah-2: Lakukan Perubahan yang Diperlukan Dan Klik unduh (jangan ubah nama file)

Langkah-3: Ekstrak File Zip yang Diunduh di folder masing-masing

android/app/src/main/res
— Nitish Patel
sumber
3
saran ini tidak akan membantu di iOS
— evals
2
solusi ini bekerja untuk saya (hanya menargetkan Android)
— dark_ruby
1
Solusi yang sangat bagus.
— Mayank M.
17

Saya telah mengubahnya di langkah-langkah berikut:

1) silakan tambahkan ketergantungan ini pada halaman pubspec.yaml Anda 

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) Anda harus mengunggah gambar / ikon pada proyek Anda yang ingin Anda lihat sebagai ikon peluncur. (saya telah membuat nama folder: gambar di proyek saya lalu unggah logo.png di folder gambar). Sekarang Anda harus menambahkan kode di bawah ini dan menempelkan jalur gambar Anda di image_path: di halaman pubspec.yaml.

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

3) Pergi ke terminal dan jalankan perintah ini:

flutter pub get

4) Setelah menjalankan perintah kemudian masukkan perintah di bawah ini:

flutter pub run flutter_launcher_icons:main

5) Dilakukan

NB: (tentu saja menambahkan ketergantungan yang diperbarui dari

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

)

— paul polash
sumber
4

Cara Terbaik & Disarankan untuk mengatur Ikon Aplikasi dalam Flutter.

Saya menemukan satu plugin untuk mengatur ikon aplikasi di flutter bernama "flutter_launcher_icons". Kami akan menggunakan plugin ini untuk mengatur ikon aplikasi dalam bergetar.

  1. Tambahkan plugin ini dalam file pubspec.yaml di direktori root proyek. Silakan periksa kode di bawah ini,

    dependensi:
    flutter:
    sdk: flutter
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Simpan file dan jalankan flutter pub di terminal.

  1. Membuat aset folder di root proyek dalam aset folder juga membuat ikon folder dan menempatkan ikon aplikasi Anda di dalam folder ini. Saya akan merekomendasikan kepada pengguna ukuran ikon aplikasi 1024x1024. Saya telah menempatkan ikon aplikasi di dalam folder ikon dan sekarang saya memiliki jalur ikon aplikasi sebagai aset / ikon / ikon.png

  2. Sekarang, di pubspec.yaml tambahkan kode di bawah ini,

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

  3. Simpan file dan jalankan flutter pub di terminal. Setelah menjalankan perintah jalankan perintah kedua seperti di bawah ini

    flutter pub menjalankan flutter_launcher_icons: main -f pubspec.yaml

Kemudian Jalankan Aplikasi

— Parth Patel
sumber
Meskipun Anda menjawab jawaban yang benar lama yang sama, setidaknya Anda menyoroti poin utama itu.
— Felipe Augusto
0

Cara terbaik adalah mengubah ikon peluncur secara terpisah untuk iOS dan Android.

Ubah ikon di modul iOS dan Android secara terpisah. Plugin menghasilkan ikon ukuran yang berbeda dari ikon yang sama yang terdistorsi.

Ikuti tautan ini: https://flutter.dev/docs/deployment/android

— Raj Yadav
sumber
-5

Anda dapat mencapainya dengan menggunakan flutter_launcher_icons di pubspec.yaml

cara lain adalah menggunakan satu untuk android dan satu lagi untuk iOS

— Malik A. Abualzait
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.