Begini Cara ubah Icon Aplikasi Flutter — mu

Photo by William Hook on Unsplash

Hallo teman teman kembali lagi bersama saya tedo, kali ini kita akan membahas bagaimana cara mengubah icon pada project flutter yang kalian buat. Disini kita akan ajarkan bagaimana cara termudah untuk kalian … dengan menggunakan library.

Oke tanpa berpanjang lebar langsung saja menuju tutorial nya …

Pertama yang harus kalian pastikan adalah kalian sudah membuat project flutter nya ya … Bagaimana cara nya ? Tinggal ketik “ flutter create <nama_project_kalian> ” dan biarkan flutter mengerjakan tugasnya.

Setelah itu buka project yang sudah kalian buat sebelumnya, buka bagian pubspec.yaml. Nah di pubspec.yaml ini adalah main configuration untuk flutter project kita. Nantinya disini lah library yang akan kita gunakan di pasang, lalu disini jugalah kita akan mengatur folder yang digunakan sebagai asset.

Contoh Tampilan File pubspec.yaml

Setelah itu silahkan kunjungi website pub.dev disinilah kita akan mencari packages untuk project flutter kita. Disini kita akan mencari packages dengan nama flutter_launcher_icons

Packages flutter_launcher_icons (versi packages adalah versi dimana penulis menuliskan artikel ini)

Lalu kita pasang flutter_launcher_icons ini dengan menekan tab Installing lalu copy code untuk installasi seperti contoh di bawah ini :

flutter_launcher_icons: ^0.11.0

Nah kita copykan ke dalam pubspec.yaml dibagian bawah cuppertino_icons seperti gambar di bawah ini :

Copykan packages flutter_launcher_icon di dalam pubspec.yaml

Lalu save file pubspec.yaml dengan menekan ctrl + s (untuk windows) sampai muncul flutter pub get running disisi kanan code editor kalian seperti ini

Indikasi untuk flutter pub get: running

(Catatan fitur ini otomatis akan muncul jika kita sudah memasang extensions untuk flutter dan dart di code editor kalian pastikan kalian sudah memasang kedua extensions ini ya)

Contoh extension pada Visual Studio Code

Jika kalian tertarik maka kita akan membahas extension apa saja yang perlu dipersiapkan oleh flutter dev kedepannya. Oke lanjut, jika pop up flutter pub get tidak muncul maka buka terminal code editor kalian lalu ketikan “ flutter pub get “ dan tunggu hingga selesai.

Proses ini menjadi penting dikarenakan proses ini adalah proses flutter dalam mendownload dan memasang packages ke dalam project nya. Jadi pastikan kalian terkoneksi dengan internet pada saat melakukan proses ini.

Setelah itu maka kita akan membuat folder yang bernama Assets digunakan untuk menyimpan gambar yang akan menjadi icon kita pada project kita kali ini

Membuat Folder baru bernama Assets pada project kita

Lalu setelah itu kembali ke file pubspec.yaml lalu ubah kode yang memiliki tampilan seperti ini

 # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

Lalu ubah menjadi seperti ini

# To add assets to your application, add an assets section, like this:
  assets:
    - assets/

Setelah itu kalian harus melakukan proses Flutter pub get sama seperti sebelumnya ya … Setiap kali kalian lakukan perubahan pada Pubspec.yaml maka kalian harus melakukan flutter pub get.

Oke persiapan kita sudah selesai maka marilah kita melakukan terlebih dahulu uji coba aplikasi yang kita buat ke dalam real-device. Buka emulator kalian atau siapkan real device kalian untuk menjalankan aplikasi yang sudah kita buat. Tinggal ketikan “flutter run” .

Setelah sudah berhasil melakukan running aplikasi flutter kalian coba cek untuk icon aplikasi yang sudah terinstall. Pasti icon nya adalah menggunakan bawaan dari flutter.

Aplikasi flutter terinstall masih menggunakan Icon bawaan flutter

Lalu bagaimana cara mengubah icon nya ? Oke langsung saja kita mulai. Pertama siapkan asset image yang akan kalian jadikan icon dari aplikasi kalian. Contohnya adalah seperti di bawah ini :

Contoh Icon yang akan digunakan

Lalu copy kan icon tersebut ke folder assets yang sudah kita buat sebelumnya. Setelah itu, maka kita akan menuju ke file pubspec.yaml lalu ketikan code di bawah ini

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon.png"
  web:
    generate: true
    image_path: "assets/icon.png"
    background_color: "#hexcode"
    theme_color: "#hexcode"
  windows:
    generate: true
    image_path: "assets/icon.png"
    icon_size: 48 # min:48, max:256, default: 48
  macos:
    generate: true
    image_path: "assets/icon.png"

Nah kode di atas dapat dipilih sesuai dengan kebutuhan aplikasi kalian jika hanya digunakan untuk android dan ios maka tinggal kita tuliskan saja yang android dan ios nya saja.

Setelah itu jangan lupa jalankan flutter pub getpada terminal code editor kalian, Setelah proses selesai jalankan lagi code flutter pub run flutter_launcher_icons

Nah jika proses berhasil maka akan menghasilkan tampilan seperti di bawah ini.

Launcher Icon success

Setelah itu coba uninstall aplikasi yang sudah terinstall sebelumnya, pada emulator atau device smartphone kalian. Lalu coba install lagi aplikasi kalian. Maka hasil icon nya maka berubah menjadi sesuai yang kalian inginkan.

Hasil terakhir Icon kalian

Nah aplikasi kita sukses berganti icon, nah bagaimana ? Gampang bukan ? Semoga bermanfaat untuk artikel kali ini. Terimakasih.