Tutorial Flutter Cara Mudah Custom Fonts

Tutorial Flutter Cara Mudah Custom Fonts
Tutorial Flutter Cara Mudah Custom Fonts
Codingtive.com - Font atau typografi merupakan rupa huruf yang memiliki ukuran, berat, dan gaya tertentu. Untuk melakukan custom pada aplikasi flutter yang kita buat sangatlah mudah, pada tutorial ini kita akan belajar untuk melakukan custom fonts pada flutter.

Pertama buatlah project baru dengan menggunakan Android Studio, atau teman-teman dapat menggunakan versi CLI. Jika belum tau cara membuat project flutter dapat mempelajarinya dokumentasi flutter.

1. Download Fonts

Download fonts yang akan kalian gunakan, untuk contoh pada tutorial ini menggunakan fonts Nunito, kalian dapat mengunduhnya disini. Ekstrak fonts yang sudah didownload, kemudian pilih beberapa saja sesuai kebutuhan. Contoh tutorial ini yang akan digunakan fonts Nunito dengan style bold, regular, light, dan semi bold.
Buat folder baru pada project flutter yang sudah dibuat, beri nama assets, dan buat folder lagi didalamnya dengan nama fonts. Pindahkan fonts yang dipilih ke folder tersebut.
Custom Fonts Flutter
Custom Fonts Flutter

2. Registrasi Fonts

Untuk dapat mengakses fonts pada folder assets perlu diregistrasi pada file pubspec.yaml, buka file tersebut. Flutter sudah menyediakan dokumentasi cara melakukan registrasi fonts yang dapat kalian lihat pada kode berikut :
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
#   - family: Schyler
#     fonts:
#       - asset: fonts/Schyler-Regular.ttf
#       - asset: fonts/Schyler-Italic.ttf
#         style: italic
#   - family: Trajan Pro
#     fonts:
#       - asset: fonts/TrajanPro.ttf
#       - asset: fonts/TrajanPro_Bold.ttf
#         weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.io/custom-fonts/#from-packages
Hapus komentar pada fonts, dan tambahkan kode seperti berikut untuk registrasi semua fonts yang sudah ditambahkan :
fonts:
    - family: NunitoLight
      fonts:
        - asset: assets/fonts/Nunito-Light.ttf
    - family: Nunito
      fonts:
        - asset: assets/fonts/Nunito-Regular.ttf
    - family: NunitoSemiBold
      fonts:
        - asset: assets/fonts/Nunito-SemiBold.ttf
    - family: NunitoBold
      fonts:
        - asset: assets/fonts/Nunito-Bold.ttf
Pastikan fonts berada pada folder assets/fonts

3. Mengganti fonts pada theme

Selanjutnya buka file main.dart pada folder lib, hapus semua kodenya. Pertama tambahkan import dan buat fungsi main untuk memanggil class yang pertama kali ditampilkan pada aplikasi. Kodenya seperti berikut :
void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Custom Fonts',
    theme: ThemeData(
      fontFamily: 'Nunito',
    ),
    home: HomePage(),
  ));
}
Pada bagian theme kita sudah mengganti fonts tema yaitu Nunito, selanjutnya kita akan membuat class HomePage.
Buat class HomePage dibawahnya untuk mencoba semua style fonts yang sudah kita tambahkan. Kodenya seperti berikut :
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Fonts'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Ini font Nunito Light',
              style: TextStyle(
                fontFamily: 'NunitoLight'
              ),
            ),
            Text(
              'Ini font Nunito Regular',
              style: TextStyle(
                fontFamily: 'Nunito'
              ),
            ),
            Text(
              'Ini font Nunito Semi Bold',
              style: TextStyle(
                fontFamily: 'NunitoSemiBold'
              ),
            ),
            Text(
              'Ini font Nunito Bold',
              style: TextStyle(
                fontFamily: 'NunitoBold'
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Kode diatas kita sudah menampilkan text dengan fonts yang berbeda-beda, sebelum dijalankan projectnya buka terlebih dahulu file widget_test.dart pada folder test. Tambahkan komentar untuk kode berikut :
//import 'package:first_app/main.dart';
//await tester.pumpWidget(MyApp());
Tujuan ditambahkan komentar yaitu karena kita tidak menggunakan class MyApp, sehingga ketika dijalankan tidak ada error class MyApp tidak ditemukan.

Full source code main.dart

Untuk kode lengkap pada file main.dart seperti berikut :
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Custom Fonts',
    theme: ThemeData(
      fontFamily: 'Nunito',
    ),
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Fonts'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Ini font Nunito Light',
              style: TextStyle(
                fontFamily: 'NunitoLight'
              ),
            ),
            Text(
              'Ini font Nunito Regular',
              style: TextStyle(
                fontFamily: 'Nunito'
              ),
            ),
            Text(
              'Ini font Nunito Semi Bold',
              style: TextStyle(
                fontFamily: 'NunitoSemiBold'
              ),
            ),
            Text(
              'Ini font Nunito Bold',
              style: TextStyle(
                fontFamily: 'NunitoBold'
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Sekarang coba jalankan di emulator atau hp kalian, hasilnya seperti berikut :
Tutorial Flutter Custom Fonts
Tutorial Flutter Custom Fonts
Demikian Tutorial Flutter Cara Mudah Custom Fonts, jika teman-teman ada pertanyaan atau kendala dapat mengisi form dibawah. Jangan lupa untuk subscribe supaya mendapatkan update tutorial menarik lainnya, semoga bermanfaat. 
Jika kalian ingin belajar lebih lanjut lagi, ikuti Tutorial Membuat Form Login dan Register Keren dengan Flutter. 

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Cara Mudah Custom Fonts"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel