Cara Mengubah Nama dan Icon Aplikasi Flutter (Untuk di Android dan iOS)

Hello guys! Kembali lagi bersama Miniblog dari Inzaghi's Blog! Tutorial Singkat ini sangat membantu kamu dalam mengubah Nama dan Icon (Logo) Aplikasi Mobile Flutter untuk di Android dan iOS tanpa Ribet.

Sumber : Blog.Stackademic.com (Medium.com) dan Medium.com (@vaibhavi.rana99)

Hari ini saya akan menjelaskan bagaimana cara mengubah nama aplikasi default dan ikon launcher pada aplikasi Flutter.

Terkadang, ketika membuat sebuah aplikasi, kita memberikan nama secara sembarang atau menggunakan nama sementara. Namun, seiring proses pengembangan berjalan, kita mungkin menyadari bahwa nama aplikasi tersebut perlu diganti agar lebih sesuai dengan identitas atau tujuan aplikasi.

Hal yang sama juga berlaku untuk launcher icon. Secara default, ketika sebuah project Flutter dibuat, Flutter akan menggunakan ikon bawaan sebagai ikon aplikasi. Oleh karena itu, ikon tersebut biasanya perlu diganti dengan ikon yang sesuai dengan branding aplikasi yang sedang dikembangkan.

Tutorial ini akan membahas langkah demi langkah mengenai cara mengubah nama aplikasi sekaligus launcher icon pada project Flutter. Panduan ini juga mencakup konfigurasi untuk dua platform utama, yaitu Android dan iOS, sehingga perubahan dapat diterapkan pada kedua versi aplikasi tersebut.

1. Mengubah Nama Peluncur Aplikasi

Secara default, ketika aplikasi Flutter diinstal pada perangkat, nama aplikasi yang muncul pada launcher akan menggunakan nama project Flutter. Jika ingin menggantinya dengan nama aplikasi yang diinginkan, Anda perlu mengubah konfigurasi pada Android dan iOS secara terpisah, yaitu melalui file AndroidManifest.xml untuk Android dan Info.plist untuk iOS.

a. Android

Buka file berikut :

android/app/src/main/AndroidManifest.xml

Di dalamnya, cari elemen <application>. Kemudian, ubah nilai pada properti android:label menjadi nama aplikasi yang Anda inginkan.

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="your_app_name"
        android:icon="@mipmap/ic_launcher">

Contohnya :

<application
        android:label="My App Name"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

Properti android:label inilah yang menentukan nama aplikasi yang ditampilkan pada launcher Android.

b. iOS

Untuk iOS, konfigurasi nama aplikasi berada pada file :

ios/Runner/Info.plist

<key>CFBundleName</key>
<string>your_app_name</string>

Contohnya :

    <string>6.0</string>
    <key>CFBundleName</key>
    <string>My App Name</string>
    <key>CFBundlePackageType</key>

Di dalam file tersebut, cari konfigurasi yang berkaitan dengan nama aplikasi dan ubah nilainya sesuai dengan nama yang diinginkan.

Setelah perubahan tersebut dilakukan, aplikasi akan menampilkan nama baru pada launcher ketika diinstal pada perangkat Android maupun iOS.

Dengan demikian, konfigurasi untuk mengubah nama aplikasi Flutter sudah selesai. Selanjutnya, Anda dapat melanjutkan ke tahap berikutnya, misalnya mengganti launcher icon agar identitas aplikasi menjadi lebih sesuai dengan branding yang digunakan.

2. Ubah Ikon Peluncur Aplikasi (App Launcher Icon)

Sebelumnya, kita telah mengubah nama aplikasi sesuai dengan yang diinginkan. Sekarang, saatnya mengganti ikon aplikasi.

Sebagai developer Android, kita tentu mengetahui bahwa ikon aplikasi harus ditempatkan di dalam folder res. Selain itu, ikon aplikasi juga perlu disediakan dalam berbagai ukuran. Jika harus membuat dan menyiapkan semuanya secara manual, hal tersebut tentu cukup merepotkan.

Namun, tidak perlu khawatir! Di Flutter tersedia library khusus untuk mengganti launcher icon aplikasi.

Tentunya, untuk melakukan proses tersebut, setidaknya kita membutuhkan satu file ikon utama. Siapkan ikon aplikasi dengan resolusi tinggi, misalnya 1024×1024 piksel, kemudian gunakan layanan berikut untuk membuat berbagai ukuran launcher icon yang diperlukan :

Android: Android Asset Studio
iOS: MakeAppIcon

Untuk Flutter, tersedia dependency khusus untuk mengatur launcher icon yang dipublikasikan oleh fluttercommunity.dev.

Silakan lihat dokumentasi dependency tersebut untuk mendapatkan informasi lebih lengkap. Cara mengintegrasikan library tersebut ke dalam project juga dapat ditemukan pada halaman yang sama, khususnya dengan membuka bagian Installation.

pubspec.yaml

Langkah 1: Tambahkan baris berikut ke dalam file pubspec.yaml. Pastikan ikon launcher aplikasi sudah ditempatkan di folder assets yang sesuai, kemudian masukkan lokasi file gambar tersebut pada atribut image_path.

dev_dependencies: 
  flutter_launcher_icons: "latest version"
  
flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"

Contohnya seperti ini :

dev_dependencies: 
  flutter_launcher_icons: ^0.14.4
  
flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icons/inzaghis-app-icon-96x96.png"
  web:
    generate: true
    image_path: "assets/icons/inzaghis-app-icon-96x96.png"

Untuk melihat atribut lainnya, silakan kunjungi tautan pub.dev yang telah disediakan sebelumnya.

Langkah 2: Jalankan package tersebut menggunakan perintah berikut.

flutter pub get
  flutter pub run flutter_launcher_icons:main

3. Ubah Ikon Aplikasi secara Manual

Jika perintah dari package sebelumnya tidak berhasil digunakan atau kita membutuhkan lebih banyak opsi kustomisasi, kita juga dapat mengatur launcher icon secara manual.

a. Android

Buka folder :

android/app/src/main/res

Di dalamnya terdapat beberapa folder yang diawali dengan mipmap-*. Folder-folder tersebut mewakili berbagai kepadatan piksel (pixel density) pada perangkat.

Untuk menggunakan ikon aplikasi kustom, ganti file launcher_icon.png yang terdapat di masing-masing folder tersebut dengan ikon yang kita inginkan.

b. iOS

File Konfigurasi Ikon berada di dalam folder :

ios/Runner/Assets.xcassets/AppIcon.appiconset

Di dalam folder tersebut terdapat file Contents.json yang berisi daftar gambar ikon dengan berbagai ukuran dan skala. File-file gambar ikonnya juga berada di folder yang sama.

Sebelum mengganti ikon aplikasi dengan desain yang kita inginkan, disarankan untuk mengikuti panduan desain ikon iOS terlebih dahulu. Dengan mengikuti panduan tersebut, kita dapat mengurangi berbagai masalah atau kendala yang mungkin muncul ketika aplikasi nantinya dirilis.

c. Web (Bonus)

File Ikon Aplikasi tersebut biasanya juga terletak di Folder ini :

web/icons

Jika kalian ingin menguji Aplikasi Mobile Flutter tersebut secara Instan, di Web menggunakan Browser Chromium (Chrome atau Edge), bisa juga mengubah Favicon Aplikasi tersebut.

Berikut ini adalah Video Tutorial yang berkaitan di YouTube :