Flutter Custom Font

Di Flutter, aplikasi diatur dengan berbagai cara pemasangan widget. Begitu juga “text” atau tulisan adalah widget. Widget teks memiliki properti-propertinya sendiri seperti gaya font, ukuran font, tebal font, dll. Flutter telah menetapkan beberapa properti default agar memudahkan pengguna untuk membuat aplikasi termasuk dalam penggunaan gaya font khusus. Kustomisasi font atau teks adalah mengedit properti-properti widget teks agar sesuai keinginan kita, untuk mendapatkan output yang diinginkan.

Sekarang, mari kita buat aplikasi Flutter dengan berbagai properti standar widget Teks yang tersedia.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
          backgroundColor: Colors.blue,
        ),
        body: const SafeArea(
          child: Center(
            child: Text(
              'Welcome to Nextgen Tutorial!',
              style: TextStyle(
                  fontSize: 40.0,
                  color: Colors.blue,
                  fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Custom Font pada Flutter

File font memiliki banyak detail yang diperlukan tentang informasi font family yang kita pakai, sehingga yang perlu dilakukan pertama kali adalah mengimpor font, setelah font diimpor, gaya font dapat digunakan di seluruh aplikasi. Situs web Google Fonts memiliki beragam font family yang dapat diunduh dan digunakan dalam aplikasi. Berikut adalah langkah-langkah untuk mengunduh file:

Langkah 1: buka Google Fonts dan cari font family di bilah pencarian (misal “Audiowide”).
Langkah 2: Pilih file font “Audiowide”.
Langkah 3: Untuk melakukan download, tekan tombol “Download Family”.

Untuk menggunakan font family yang telah diunduh, kita perlu mengimpor file font ke dalam root aplikasi Flutter. Berikut adalah langkah-langkah untuk mengimpor file font di Android Studio:

Langkah 1: Klik tombol “Project” di sudut kiri atas Android Studio.
Langkah 2: Klik kanan pada nama proyek, di sini “haloflutter”, dan pilih New + Directory.
Langkah 3: Beri nama direktori sebagai “fonts“.
Langkah 4: Ekstrak dan buka file zip “Audiowide” yang berisi font family yang diunduh sebelumnya.
Langkah 5: Pindahkan file font Audiowide Regular ke dalam direktori ini. Setelah dipindahkan, direktori font akan berisi berkas bernama “Audiowide-Regular.ttf“.

Setelah mengimpor file font, diperlukan untuk memberitahu Flutter dari mana file font tersebut diambil. Oleh karena itu, perlu mendeklarasikan font di dalam file yang spesifik bernama “pubspec.yaml”. Langkah-langkah untuk mendeklarasikan file font adalah sebagai berikut:

Langkah 1: Klik tombol “Project” dan klik nama proyek, di sini “haloflutter”.
Langkah 2: Dalam list, terdapat file bernama “pubspec.yaml“. Klik file ini.
Langkah 3: Tempelkan kode di bawah ini di dalam file pubspec.yaml.
Langkah 4: Tekan tombol “Pub get” di pojok kanan atas file.

name: haloflutter
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '>=2.19.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  fonts:
    - family: Audiowide
      fonts:
        - asset: fonts/Audiowide-Regular.ttf

Sekarang font family ini dapat digunakan untuk mengatur style pada widget teks di aplikasi di mana saja diperlukan. Bukan hanya satu, tetapi beberapa font family dapat diunduh dan digunakan dengan mengikuti langkah-langkah yang disebutkan di atas.

Catatan: Properti “family:” pada file “pubspec.yaml” harus unik untuk setiap font family yang berbeda.

Berikut ini adalah code lengkap dari aplikasi yang kita buat pada tutorial kali ini.

// main.dart file setelam menambahkan custom font
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
          backgroundColor: Colors.blue,
        ),
        body: const SafeArea(
          child: Center(
            child: Text(
              'Welcome to Nextgen Tutorial!',
              style: TextStyle(
                fontFamily: 'Audiowide',
                fontSize: 40.0,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter Staggered Grid View
Tutorial setelahnya : Skeleton Text Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Custom Font pada Flutter

Tinggalkan Balasan