# 3 Flutter Tutorial: Cara Gampang Mengubah Icon Launcher Aplikasi pada Projek Flutter

Photo by Aditya Wardhana on Unsplash

Assalamualaikum wr.wb

Senang kali bisa menulis lagi dimedium blog setelah sekian lama. Ohh ya artikel ini saya tuliskan pada saat pandemi covid belum berakhir yaa. Jadi sehat- sehat ya sobat. Semoga saja kedepan yang membaca artikel ini sudah berada pada kehidupan yang normal lagi dan semoga saja kita bisa melewati ini semua.

Jadi pada artikel kali ini ada sedikit hubungan dengan artikel yang saya tulis kemaren yaitu menambahkan asset kedalam projek flutter. Apabila sobat belum membaca silakan bisa kunjungi link dibawah.

#2 Flutter Tutorial : Menambahkan Asset (Gambar, Suara dan Font) kedalam Projek Flutter

Salah satu implementasi assets kedalam projek flutter adalah kita bisa mengganti icon applikasi yang ada pada projek flutter kita. Dengan cara tersebut pengguna akan dengan mudah mencari aplikasi kita pada handphone mereka. Lalu bagaimana kah caranya? untuk sobat yang baru belajar flutter pasti akan membutuhkannya.

Oke jadi sampai saat ini ada 2 cara yang saya ketahui untuk mengganti icon launcher kedalam projek flutter. Cara pertama saya sebut cara manual / sulit dan cara yang kedua saya sebut dengan cara magic/gampang.

# 1 Cara Manual: Menggunkan bantuan website untuk generate 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.

Gambar 1. Tampilan website app icon generator

Langkah 2 : Pilih Android dan Iphone kemudian upload app launcher/ icon yang dimiliki sobat. app launcher biasanya berupa file gambar berformat .png Apabila sobat belum mempunyai icon sobat bisa mendownloadnya di https://www.flaticon.com/. Pada contoh kali ini saya menggunakan icon launcher bergambar mobil sehingga akan tampil seperti gambar dibawah.

Gambar 2. Apabila telah berhasil upload icon

Langkah 3: Klik tobol generate dan biarkan assets akan di downlaod dalam bentuk zip dan kemudian ekstrak file zip tersebut. Hasil ekstrak akan sama seperti gambar dibawah ini.

Gambar 3. hasil ekstrak file appicon

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_projek>/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_projek>/ios/Runner/Assets.xcassets

Yang dicopykan adalah folder AppIcon.appiconset hasil eskstrasi tadi.

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

Gambar 4. Hasil running dengan app launcher telah berganti

#2 Cara Magic: Menggunakan library flutter_launcher_icons

Cara ini memang cara tergampang yang saya ketahui tanpa kita harus nengcopykan secara manual asset yang kita punya tersebut kedalam masing masing directory. Cara ini akan megenerate asset kedalam masing-masing direcory. Mungkin ada yang bertanya “Wahh kalo gitu percuma dong tadi saya sudah copy-copy assetnya?” sebelum dapet yang enak-enak harus lalui dulu yang susahnya kayak gimana donggg haha

Anda bisa membaca dokumentasi nya di link dibawah ini untuk lebih lengkapnya.

flutter_launcher_icons | Dart Package

Langkah 1: setup library beserta asset pada pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: "^0.8.0"

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

yang perlu diperhatikan adalah image_path yaitu berisi path image launcher kita. pada kasus ini saya menaruh icon lancher pada directory <nama_projek>/assets/icon/car.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 kan secara otomatis mengenerate icon pada directory android dan ios sobat yaa. apabila telah sukses maka akan ada tampilan pada terminal seperti dibwah ini.

Langkah 4 : Langsung Run dan hasilnya kan sama saja seperti langkah manual.

note: yang perlu diperhatikan adalah ukuran dari gambar asset kita akan mempengaruhi besar kecilnya app launcher. Dari dokumentasi flutter_app_launcher sendiri menyarankan ukuran image 432x432.

Selesai sudah artikel pada kali ini semoga bisa bermanfaat buat sobat semua. Jangan lupa apabila artikel ini bermanfaat bisa klik clap dan share. Dan apabila ada kesulitan sobat bisa berdiskusi dengan saya. barangkali kita bisa saling bertukar pikiran hehe;)

Referensi :

• Big thanks to https://www.appbrewery.co/ and my trainer Angela Yu for the course about Introduction to Flutter Development Using Dart. It helps for me to deep knew the flutter development
• documentation flutter_app_icons