#4 Flutter Tutorial: Cara Membuat Custom Icon pada Projek Flutter
Hello sobatku, gimana kabar kalian nih? Semoga dalam keadan baik-baik saja. Ohh ya artikel ini aku tulis waktu Indonesia masih panas-panasnya nih. Demo masih dimana-mana. Semoga keputusan yang terbaik diberikan buat kita semua ya amin…
Oke lanjut ke pembahasan kita, pada artikel ini saya menulis tentang tutorial pada flutter. Saya rasa flutter merupakan teknologi baru yang banyak peminatnya, sehingga artikel seperti ini akan berguna bagi sobat yang sedang belajar flutter. Pada kali ini saya akan membahas tentang custom icon.
Kenapa kita harus membuat custom icon ?
Sebelum kita ke tutorial, sobat harus tau sebenarnya sudah ada icon material design bawaan pada flutter. Sehingga sobat tidak perlu membuat custom icon sendiri. Akan tetapi, sering kali designer itu sangat kreatif, hingga bisa membuat icon semau mereka. Alhasil icon hasil buatan designer tidak ada pada icon bawaan material design. Terus apa yang harus kita lakukan ? apakah kita perlu menyuruh designer untuk mengganti design mereka mengikuti icon pada material design ? awas jangan baku hantam haha
Tentu saja tidak sobatku, disinilah kita perlu menggunakan custom icon. Asalkan ada assetnya kita bisa menerapkannya di projek flutter. lalu seperti apa penerannya pada flutter?
Langkah Pertama: Pastikan Sobat Mempunyai Assets Image
Asset image yang biasa digunakan untuk custom icon adalah vektor image yang bisa berupa .svg file. Kita bisa me-exportnya melalui tools design seperti figma, xd dll atau sobat bisa mencari asset sendiri di flaticon.com. Pada tutorial ini saya menggunakan icon car yang saya dapatkan pada flaticon.
Langkah Kedua: Kunjungi Link Fluttericon.com Upload dan Download Icon
Pada website fluttericon diatas sobat tinggal drag and drop asset image tadi pada tempat yang telah disediakan. Setelah itu klik icon yang sudah di upload dan mulai mendownloadnya. Sobat bisa menambahkan lebih dari satu icon disini ya. Tampilan websitnya akan nampak seperti gambar dibawah ini.
Langkah Ketiga: Ekstrak Hasil Download-an Icon Generator dan Siap untuk Disetup Kedalam Projek Flutter kita
Setelah kita ekstrak maka sobat akan mempunyai 3 jenis file dan folder sama seperti gambar dibawah.
folder fonts: Berisi asset font yang diperlukan. kita nanti akan melakukan setup asset pada pubspec.yaml
config.joson: File ini berisi konfigurasi icon generator kita. kita tidak perlu menambahkannya pada projek flutter, akan tetapi file ini digunakan apabila di lain waktu kita ingin menambahkan custom icon lainnya. Kita tidak perlu me drag and drop satu persatu icon yang pernah kita pakai sebelumnya. Cukup menggunakan satu file ini makan otomatis icon yang pernah kita tambahkan bisa langsung kita gunakan.
my_flutter_app_icon.dart: File ini berupa class yang berisi semua custom icon yang ingin kita gunakan pada projek flutter.
Langkah-langkah setup file:
- Kita mulai setup folder fontnya dulu, buat directory baru pada bernama assets projek flutter kita.
- Copy paste folder fonts beserta file didalamnya ke dalam folder assets.
- Copy paste file my_flutter_app_icon.dart kedalam folder lib.
4. Setup font di pubspec.yaml, sobat bisa mengikuti langkah-langkah yang ada pada file my_flutter_app_icon.dart.
Langkah Keempat: Impimentasi Custom Icon pada Main.dart Projek Flutter
Pada impemntasi ini kita ingin membuat sebuah icon button dengan besar 128x128 dan letaknya ditengah-tengah layar. Custom Icon yang ingin kita gunakan adalah car yang berwarna teal. Sehingga code yang saya buat akan nampak seperti di bawah.
Run pada device dan boomm! kita telah selesai menerapkan custom icon pada projek flutter kita. hasil runingan akan seperti gambar dibawah ini.
Akhirnya kita telah bisa menggunkan custom icon sendiri. jadi jangan baku hantam dengan designer lagi ya hehe ;D Semoga artikel pada kali ini bermanfaat untuk sobat.
Jangan lupa tinggalkan jejak anda dengan clap, dan share apabila artikel ini bermanfaat .Ikuti saya untuk mendapatkan informasi tutorial flutter manarik lainnya.
keep learning ;)
Tutorial tentang flutter saya lainnya:
