Bagaimana cara mengatur Font di Flutter?

Hallo teman”, kali ini kita akan membahas tentang Font di flutter 😀

Di setiap aplikasi yang kita buat, tentu kita akan menggunakan berbagai jenis Font tergantung dengan kebutuhan. Lalu bagaimana cara mengatur Font di Flutter? Langsung saja, Yuk Ngoding 😀

Kunjungi link berikut ini, jika kamu belum mensetup Flutter di laptop mu:

1. Menambahkan Font ke project

Kita akan menambahkan Font yang akan digunakan ke project kita. Lokasinya? Dimana aja bisa sebenarnya, tapi kalau mimin biasanya kayak gini:

2. Daftarkan Font yang akan digunakan di pubspec.yaml

Kita akan menambahkan 2 Font di pubspec.yaml (sesuai dengan screenshot tahap pertama). Kita bisa melakukannya dengan cara seperti berikut:

name: cartenz_djp
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.3.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  #Library yang akan digunakan

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  #Untuk mendaftarkan image yang digunakan
  assets:
    - assets/images/

  #Untuk mendaftarkan font yang digunakan
  fonts:
    - family: FontLato
      fonts:
        - asset: assets/fonts/Lato-Regular.ttf
        - asset: assets/fonts/Lato-Italic.ttf
          style: italic
        - asset: assets/fonts/Lato-Bold.ttf
          weight: 700
        - asset: assets/fonts/Lato-BoldItalic.ttf
          style: italic
          weight: 700
    - family: FontPoppins
      fonts:
        - asset: assets/fonts/Poppins-Regular.otf
        - asset: assets/fonts/Poppins-Bold.otf
          weight: 700

Di code diatas kita menambahkan 2 Font baru, yaitu FontLato dan FontPoppins. Family digunakan untuk memberi penamaan pada font yang akan digunakan. Jadi ketika kita membutuhkan suatu font, kita akan menggunakan nama yang terdaftar pada bagian family.

Terdapat 2 opsi tambahan yaitu style dan weight

1. Opsi style terhubung dengan properti fontStyle pada TextStyle. Seperti contoh di atas, kita menambahkan font untuk italic.
2. Opsi weight (Ketebelan) terhubung dengan properti fontWeight pada TextStyle. Nilai weight adalah int kelipatan 100 dengan range 100 – 900.

3. Menggunakan Font secara default

Cara penggunaan pertama adalah menggunakan font secara default. Jadi kita cukup mendaftarkan font kita di MaterialApp, seperti berikut

MaterialApp(
  title: 'Custom Fonts',
  // Set Lato as the default app font.
  theme: ThemeData(fontFamily: 'FontLato'),
  home: MyHomePage(),
);

Kita juga bisa menggunakan size, color dan properti lainnya secara default, seperti berikut

MaterialApp(
   title: 'Custom Fonts',
   // Set Lato as the default app font.
   theme: ThemeData(
          appBarTheme:
            AppBarTheme(textTheme: TextTheme(title: 
              TextStyle(
                 fontFamily: FontLato,
                 fontWeight: FontWeight.w700,
                 fontSize: 14,
                 color: Colors.Black)
            )),
           textTheme: TextTheme(
             title: TextStyle(
                       fontFamily: FontLato,
                       fontWeight: FontWeight.w700,
                       fontSize: 14,
                       color: Colors.Black), 
             body1: TextStyle(
                       fontFamily: FontLato,
                       fontSize: 14,
                       color: Colors.Grey),),
   home: MyHomePage(),
 ))

4. Menggunakan Font untuk widget tertentu

Tentusaja kita juga bisa menggunakan font langsung di widget yang kita inginkan. Cara sebelumnya digunakan agar kita mengurangi deklrasi di widget yang sering kita gunakan. Berikut sample code berdasarkan font yang telah kita daftarkan pada pubspec.yaml sebelumnya.

import 'package:flutter/material.dart';

class FontActivity extends StatelessWidget {
  final String FontLato = 'FontLato';
  final String FontPoppins = 'FontPoppins';

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text("Font"),
      ),
      body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        Container(
          margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Text(
            "Sample Text - Standart",
            style: TextStyle(
              fontFamily: FontLato,
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Text(
            "Sample Text - Italic",
            style: TextStyle(fontFamily: FontLato, fontStyle: FontStyle.italic),
          ),
        ),
        Container(
          margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Text(
            "Sample Text - Bold - FontWeight.w700",
            style: TextStyle(
                fontFamily: FontLato,
                fontWeight: FontWeight.w700),
          ),
        ),
        Container(
          margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Text(
            "Sample Text - Bold & italic - FontWeight.w700",
            style: TextStyle(
                fontFamily: FontLato,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w700),
          ),
        ),
        Container(
          margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
          child: Text(
            "Sample Text - Bold & italic - FontWeight.w900",
            style: TextStyle(
                fontFamily: FontLato,
                fontStyle: FontStyle.italic,
                fontWeight: FontWeight.w900),
          ),
        ),
      ]));

}

Berikut merupakan hasil dari code kita sebelumnya

# Tambahan

Jika diperhatikan di code sebelumnya, kita sama sekali tidak menambahkan Font Lato dengan FontStyle.italic dan FontWeight.900. Tapi di screensho hasil kita menemukan output yang cukup sesuai dengan yang kita inginkan. Kenapa bisa seperti itu?

” If a TextStyle object specifies a weight or style for which there is no exact font file, the engine uses one of the more generic files for the font and attempts to extrapolate outlines for the requested weight and style. “

Intinya, flutter akan menggunakan salah satu font untuk disesuaikan dengan style dan weight yang diinginkan. Hal ini cukup bagus, tapi bukankah lebih bagus jika kita menggunakan font berasal dari assets?

Nah, cukup segitu dulu untuk postingan kali ini. Kita masih punya postingan menarik lainnya loh 😀

• Membuat ListView di Flutter
• WorkManager untuk Background Task

Jika ada tanggapan silahkan berkomentar di bawah, atau hubungi mimin melalui kontak yang tersedia. Terimakasih 😀