Menggunakan Kustom Font di Flutter

Flutter memungkinkan pengembang mengintegrasikan Google Font ke dalam aplikasi Flutter. Selain Google Font, kita juga bisa menggunakan font kustom lain dengan cara menambahkan dan mendeklarasikannya di proyek kita.

Sebelum menambahkan font, kita harus tahu jenis format font yang didukung Flutter:

• OpenType font collections: .ttc
• TrueType fonts: .ttf
• OpenType fonts: .otf

Pada tutorial kali ini kita akan mengunduh beberapa font family yaitu Abel, Caveat, Miltonian Tattoo dan Silk Screen dari situs berikut Google fonts.

Mengunduh File Font

Pada website pilih salah satu font yang diinginkan lalu pilih Get Font dan Download. Jika file dalam zip maka ekstraksi file zip tersebut untuk dapat mengambil file font.

Deklarasikan font di file pubspec.yaml

Berikut ini salah satu font yang akan kita gunakan yaitu Abel dan setelah diunduh pastikan anda dapat menemukan file Abel-Regular.ttf. Tambahkan sebuah folder bernama fonts di folder utama proyek anda dan kemudian tambahkan file .ttf ke dalam folder.

Lalu tambahkan di file pubspec.yaml dibawah flutter. Tambahkan asset fonts

Menggunakan font di widget tertentu dalam aplikasi

Berikut ini kita akan menggunakan font tersebut di dalam aplikasi. Disini kita menggunakan widget Text untuk menampilkan tulisan dengan salah satu font yang sudah kita download.

Text('This is custom font',
     style: TextStyle(
                  fontFamily: 'Abel',
                  fontSize: 30,
                  fontWeight: FontWeight.w400
             ),
     )

Berikut ini adalah kode lengkapnya

import 'package:flutter/material.dart';

void main() {
  runApp(const myApp());
}

class myApp extends StatelessWidget {
  const myApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GOOGLE FONTS'),
          backgroundColor: Colors.lightBlue.shade200,
        ),
        body: const Column(
          children: [
            Center(
                child: Text(
              'This is custom font',
              style: TextStyle(
                  fontFamily: 'Abel',
                  fontSize: 30,
                  fontWeight: FontWeight.w400),
            )),
            Center(
                child: Text(
              'This is custom font',
              style: TextStyle(
                  fontFamily: 'Caveat',
                  fontSize: 30,
                  fontWeight: FontWeight.w400),
            )),
            Center(
                child: Text(
              'This is custom font',
              style: TextStyle(
                  fontFamily: 'MiltonianTattoo',
                  fontSize: 30,
                  fontWeight: FontWeight.w400),
            )),
            Center(
                child: Text(
              'This is custom font',
              style: TextStyle(
                  fontFamily: 'Silkscreen',
                  fontSize: 30,
                  fontWeight: FontWeight.w400),
            )),
          ],
        ),
      ),
    );
  }
}

See on next tutorial