Cara Gampang Mengubah Icon Launcher Aplikasi pada Project Flutter

Assalamualaikum Wr. Wb.

Kali ini saya akan membagikan tutorial Flutter yaitu cara mengubah icon Launcher Aplikasi pada Project Flutter. Seperti kita ketahui bahwa ketika kita membuat aplikasi dengan Flutter ketika di-run aplikasinya akan muncul logo Flutter. Maka dengan ini kita akan belajar mengganti logo aplikasi yang dibuat dengan logo aplikasi kita.

1. Cara Manual : Generate Logo App Launcher

Dengan menggunakan cara ini kita akan dibuatkan asset secara otomatis baik untuk android atau untuk ios. Akan tetapi kita perlu mengcopy asset tersebut kedalam masing masing directory asset app launcher untuk android dan ios.

Langkah : 1

Buka website https://appicon.co/ untuk generate app launcher untuk andoid / ios. Tampilannya awalnya akan seperti gambar dibawah ini.

Langkah : 2

Pilih Android dan Iphone kemudian upload app launcher/ icon yang dimiliki sobat. app launcher biasanya berupa file gambar berformat .png. Pada contoh kali ini saya menggunakan icon launcher bergambar logo AZ sehingga akan tampil seperti gambar dibawah.

Langkah : 3

Klik tombol generate dan biarkan assets akan di download dalam bentuk zip dan kemudian ekstrak file zip tersebut. Hasil ekstrak akan sama seperti gambar dibawah ini.

Langkah : 4

Copy masing-masing asset pada directory app launcher masing-masing(folder android untuk android dan folder Assets.xcassets untuk Ios)

directory launcher untuk android berada pada folder <nama_project>/android/app/src/main/res

Terus yang dicopykan apa saja? yang dicopykan seluruh folder mipmap yang berada pada folder android hasil ekstrasi tadi. Apabila ada dialog merge/replace klik ok saja dan apply all.

directory launcher untuk ios berada pada folder<nama_project>/ios/Runner/Assets.xcassets

Yang dicopykan adalah folder AppIcon.appiconset hasil eskstrasi tadi.

Langkah : 5

Jalankan Aplikasi dan lihat apa yang terjadi. Apabila launcher app sudah berganti berarti anda telah berhasil menggantinya dengan cara manual.

2. Cara Otomatis : Menggunakan library flutter_launcher_icons

Cara ini memang cara tergampang yang saya ketahui tanpa harus kita mengcopykan secara manual asset yang kita punya tersebut kedalam masing masing directory. Cara ini akan megenerate asset kedalam masing-masing direcory.

Langkah : 1

Setup library beserta asset pada pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

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

Yang perlu diperhatikan adalah image_path yaitu berisi path image launcher kita. Pada kasus ini saya menyimpan icon launcher pada directory <nama_project>/assets/icon/logo.png.

Langkah : 2

Jalankan perintah pub get untuk mengupdate library dan konfigurasi pubspec.yaml

Langkah : 3

Jalankan perintah dibawah pada terminal projek anda.

flutter pub run flutter_launcher_icons:main

Perintah ini akan secara otomatis menggenerate icon pada directory android dan ios.

Yang perlu diperhatikan adalah ukuran dari gambar asset kita akan mempengaruhi besar kecilnya app launcher. Dari dokumentasi flutter_app_launcher sendiri menyarankan ukuran image 432×432.