Dan cara memperbaiki masalah umum yang mungkin Anda hadapi

Saya baru-baru ini mengerjakan proyek Flutter di mana saya memerlukan tugas sederhana untuk menambahkan ikon peluncur aplikasi.

Saat itu, saya baru memulai Flutter. Oleh karena itu, saya memulai dengan mencari cara terbaik untuk mencapai, menerapkan, dan mendokumentasikan tugas ini.

Hasilnya, saya membuat artikel ini.

Hari ini, Anda akan mempelajari dua cara menambahkan ikon peluncur aplikasi di Flutter dan cara memperbaiki masalah umum yang mungkin Anda hadapi dalam prosesnya.

Persyaratan

  • ios.png

  • background.png (harus sepenuhnya buram, 110x110 piksel).

1. Gunakan Paket flutter_launcher_icons

Cara pertama untuk menambahkan ikon peluncur ke aplikasi iOS dan Android adalah dengan paket flutter_laucher_icons. Mari ikuti dua langkah sederhana berikutnya untuk menerapkan ini.

Siapkan file konfigurasi awal

  • dev_dependencies: flutter_launcher_icons: “0.9.0”: Ini adalah versi paket yang ingin Anda instal. Jika Anda ingin menginstal yang terbaru, Anda bisa melakukan hal seperti ini.
...
dev_dependencies:  
    flutter_launcher_icons:

Pada cuplikan kode di atas, kami tidak menentukan versi plugin. Ini akan mendapatkan yang terakhir.

  • android: true and ios: true: Mengganti ikon peluncur Flutter default yang ada untuk setiap platform.
  • image_path_ios: Lokasi file gambar ikon yang ingin Anda gunakan sebagai ikon peluncur aplikasi di iOS.
  • image_path_android: Lokasi file gambar ikon yang ingin Anda gunakan sebagai ikon peluncur aplikasi di iOS.

Jalankan paket dan buat aplikasinya

flutter pub get
flutter pub run flutter_launcher_icons:main
flutter run

Jika Anda telah mengikuti langkah-langkah ini, Anda akan mendapatkan hasil seperti ini untuk iOS dan Android. Di iOS, ikonnya terlihat bagus. Tapi di Android, tidak. Apakah Anda memperhatikan hal itu?

Masalah Umum di Android

Mari tunjukkan beberapa masalah yang mungkin Anda hadapi saat menambahkan ikon peluncur dan yang lebih penting cara memperbaikinya.

1. Ikon berada di tengah dengan bantalan

Solusi: Gunakan desain ikon adaptif dengan flutter_launcher_icons properti plugin berikut.

Mari ubah file pubspec.yaml dan tambahkan properti baru. Sekarang kita akan memiliki:

Dengan melakukan itu, Anda akan mendapatkan output di bawah ini. Kelihatannya jauh lebih baik, tapi masih ada masalah — itu melar.

2. Ikon adaptif meregang

Ada “utas GitHub” yang panjang di mana mereka membicarakan hal ini.

Solusi #1: Buat gambar dengan spesifikasi berikut. Logo ini hanya untuk Android. Untuk iOS, kami perlu memiliki satu lagi yang kami rujuk di awal artikel ini.

Solusi #2: Solusi lain adalah menskalakan gambar sesuai dengan menggunakan Android Studio.

  • Buka File-›Baru-›Aset Gambar.

Anda akan melihat sesuatu seperti ini. Android Studio akan memuat ikon adaptif default.

Sekarang, di bagian Source Asset, cari logo Anda — lokasi Anda. Dalam kasus saya, itu terletak di folder download.

Anda hanya perlu membuatnya ~60-70% dari ukuran aslinya untuk ikon adaptif. Dengan melakukan itu, Anda akan melihat sesuatu seperti ini:

Jika Anda mengikuti solusinya, Anda akan mendapatkan output untuk iOS dan Android seperti berikut. Sekarang iOS dan Android terlihat lebih bagus.

2. Manual (Tidak Direkomendasikan)

Saya dulu pernah mengikuti ini. Itu adalah ide yang buruk karena saya melewatkan lebih dari satu ikon dalam sebuah proyek karena kesibukan dan ekspektasi klien. Aku mengacaukan segalanya.

Ini bukan cara yang disarankan untuk menambahkan ikon peluncur. Ini melibatkan pekerjaan manual. Ini berarti Anda harus membuat setiap ikon untuk setiap platform untuk setiap resolusi layar.

Ini adalah tugas yang berat untuk kemudian menambahkan nama yang tepat dan menyalin dan menempelkannya ke folder yang tepat. Ini sangat memakan waktu dan berisiko tinggi.

Anda dapat melakukannya jika Anda mau, tetapi saat ini, hal itu tidak ada gunanya.

Pikiran Terakhir

Menambahkan ikon peluncur ke aplikasi Flutter Anda mungkin tampak seperti tugas yang sederhana. Dan itu benar.

Namun, seperti yang mungkin Anda sadari di seluruh artikel ini, Anda mungkin menghadapi beberapa masalah yang perlu Anda atasi.

Disarankan untuk menggunakan paket flutter_launcher_icons untuk menghasilkan ikon secara otomatis untuk setiap platform. Ini juga membantu Anda menggunakan desain ikon adaptif untuk aplikasi Android.

Terakhir, cara manual tidak disarankan karena semua risiko yang kami uraikan. Ini juga merupakan tugas yang berat.

Saya harap artikel ini bermanfaat. Sampai jumpa di bagian berikutnya.