Friday, December 27, 2019

Cara Menambahkan Custom Font pada Flutter

Menggunakan Custom Font pada Flutter
Menggunakan Font Custom pada Style Flutter - Dalam membuat aplikasi mobile salah satu komponen yang mendukung UI/User Interface adalah pemilihan jenis font yang tepat. Pada pembuatan aplikasi mobile dengan Flutter baik untuk output Android (apk) ataupun iOS (ipa) akan menggunakan font default (bawaan) dari masing-masing device jika kita tidak mendefinisikan jenis font pada style text dari aplikasi yang kita buat.

Untuk itu agar mendapatkan output style text aplikasi sesuai standar yang kita inginkan, kita perlu mendefinsikan jenis font untuk aplikasi kita agar kita mendapatkan output tampilan yang seragam pada setiap device dimana aplikasi kita di jalankan. Hal ini tentu saja sangat penting, mengingat kita tidak bisa memprediksi atau memperkirakan jenis font apa saja yang dipakai oleh target device aplikasi kita.

Dengan demikian, mendefinisikan font khusus pada aplikasi kita akan dapat meningkatkan kualitas User Interface maupun User eXperience terhadap aplikasi yang kita buat. Tentu saja hal ini menjadi keuntungan tersendiri bagi kita dalam membuat sebuah aplikasi mobile.

Untuk itu, mari langsung saja kita praktikan bagaimanca cara menambahkan dan menggunakan font custom pada aplikasi Flutter kita.

Ikuti langkah-langkah berikut ini:

1. Mencari Font

Langkah pertama yang perlu sobat lakukan adalah mencari file true type font (biasanya berektensi ttf), pilihlah jenis font sesuai selera sobat. Untuk mencari font, sobat bisa kunjungi website-website penyedia font yang gratis, misalnya dafont, download file ttf yang sobat inginkan.

2. Menaruh di Projek Flutter

Setelah sobat memilih dan menentukan file ttf seperti pada langkah sebelumnya, selanjutnya sobat perlu menaruh file ttf tersebut ke dalam projek Flutter sobat. Masukan kedalam folder (misalnya) font (sobat perlu membuat foder ini terlebih dahulu, sejajar dengan folder lib).

3. Mendaftarkan font di pubspec.yaml

Agar jenis font / file ttf yang sobat masukan ke projek Flutter (seperti langkah sebelumnya) dikenali oleh projek Flutter, maka sobat perlu mendaftarkan file tersebut melalui file pubspec.yaml.
Untuk mendaftarkan jenis font pada file pubspec.yaml harus dilakukan dibawah section flutter, contoh formatnya seperti dibawah ini: 
flutter:
  fonts:
    - family: Schaeffer
      fonts:
        - asset: fonts/Schaeffer.ttf
Pada contoh di atas, kita menambahkan font dengan jenis Schaeffer dimana lokasi file ttf nya ada di folder fonts dengan nama file Schaeffer.ttf.

4. Mengimplementasikan pada kode

Setelah sobat menyelesaikan ke-tiga langah di atas, maka jenis font sudah bisa digunakan pada kode Flutter kita. Berikut adalah contoh kode untuk mengimplementasikan jenis font yang baru kita tambahkan seperti di atas.

Hasil Aplikasi
BerikutContoh hasil aplikasi, dengan menggunakan Custom font diatas
Hasil Aplikasi

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: