Belajar Menggunakan Font di Flutter

Dhe997


Font

Dalam pengembangan suatu aplikasi, seorang User Interface desainer dapat menggunakan font berbeda dengan default font yang ada. Sebagai pengembang aplikasi kita diharuskan menambahkan font pada aplikasi yang dirancang oleh desainer agar sesuai dengan desain User Interface.

Pada pembelajaran kali ini kita akan belajar bagaimana menambahkan font pada Flutter. Sebelum kita memulai pembelajaran, kita akan mengunduh font yang ada di internet atau menggunakan font yang telah dimiliki. Pada contoh ini kita akan mengunduh salah satu font dari Google Fonts yaitu Oswald.

Menambahkan Font ke Project

Setelah mengunduh font, langkah selanjutnya kita akan memasukkan file-file font tersebut ke folder project. Pada contoh ini kita akan membuat folder fonts pada project kita, dan masukkan file-file font yang telah diunduh, seperti berikut:

20200615194557c0f63961b549064c8aa1bcde62857d41.jpeg   

Mendaftarkan Font di pubspec.yaml

Sama halnya dengan gambar, kita perlu mendaftarkan font pada berkas pubspec.yaml sebagai asset seperti berikut:

  1. flutter:

  2.  

  3.   uses-material-design: true

  4.   assets:

  5.     - images/

  6.  

  7.   fonts:

  8.     - family: Oswald

  9.       fonts:

  10. - asset: fonts/Oswald/Oswald-Regular.ttf





Sama halnya dengan gambar, font ada dalam bagian flutter. Untuk mendaftarkan font, kita membuat bagian fonts yang ada dalam blok flutter.
Untuk mendaftarkan font Oswald kita tuliskan Oswald pada bagian family yang nantinya akan menjadi nama font yang kita panggil pada kode dart. 
Lalu dalam family kita masukkan fonts yang di dalamnya terdapat asset yang nanti akan mengarah pada file font.ttf. Contoh di atas kita menambahkan asset fonts/oswald/Oswald-Regular.ttf.

Menggunakan Font pada Kode

Setelah kita mendaftarkan font pada pubspec.yaml kita akan gunakan font tersebut pada kode kita. Seperti contoh di bawah ini kita akan menggunakan font pada widget Text:

  1. Text('Custom Font', style: TextStyle(fontFamily: 'Oswald', fontSize: 30,),)




Pada kode di atas kita menambahkan fontFamily pada TextStyle. Kita cukup panggil nama font family yang telah kita daftarkan pada pubspec.yaml. Hasilnya akan seperti berikut:
2020061515033808bde98184696bc73348e5d30abb6b46.jpeg
Tulisan "Custom Font" akan berubah menjadi font Oswald sesuai dengan yang telah kita daftarkan. 
Jangan lupa! Setelah kita menambahkan package atau pun asset ke dalam pubspec.yaml kita perlu melakukan full restart agar asset yang baru dapat digunakan dalam aplikasi.

Mengubah Font Default

Selain kita dapat mengubah font family pada satu per satu widget Text, kita dapat membuat font yang kita daftarkan menjadi default
Caranya dengan menambahkan parameter fontFamily pada kelas ThemeData yang ada pada parameter theme di MaterialApp seperti berikut:

  1. class MyApp extends StatelessWidget {

  2.   // This widget is the root of your application.

  3.   @override

  4.   Widget build(BuildContext context) {

  5.     return MaterialApp(

  6.       title: 'Flutter Demo',

  7.       theme: ThemeData(

  8.         fontFamily: 'Oswald',

  9.         primarySwatch: Colors.blue,

  10.       ),

  11.       home: FirstScreen(),

  12.     );

  13.   }

  14. }




إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.