Tutorial Flutter Cara Gampang Custom Fonts

Tutorial Flutter Cara Praktis Custom Fonts

 - Font atau typografi merupakan rupa karakter yang mempunyai ukuran, berat, dan gaya tertentu. Untuk melaksanakan custom pada aplikasi flutter yang kita buat sangatlah mudah, pada tutorial ini kita akan mencar ilmu untuk melaksanakan custom fonts pada flutter.

Pertama buatlah project gres dengan memakai Android Studio, atau teman-teman sanggup memakai versi CLI. Jika belum tau cara menciptakan project flutter sanggup mempelajarinya dokumentasi flutter.

1. Download Fonts

Download fonts yang akan kalian gunakan, untuk pola pada tutorial ini memakai fonts Nunito, kalian sanggup mengunduhnya disini. Ekstrak fonts yang sudah didownload, lalu pilih beberapa saja sesuai kebutuhan. Contoh tutorial ini yang akan dipakai fonts Nunito dengan style bold, regular, light, dan semi bold.

Buat folder gres 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

2. Registrasi Fonts

Untuk sanggup mengakses fonts pada folder assets perlu diregistrasi pada file pubspec.yaml, buka file tersebut. Flutter sudah menyediakan dokumentasi cara melaksanakan pendaftaran fonts yang sanggup kalian lihat pada aba-aba 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 aba-aba ibarat berikut untuk pendaftaran 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 ibarat berikut :

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

Pada bab theme kita sudah mengganti fonts tema yaitu Nunito, selanjutnya kita akan menciptakan class HomePage.

Buat class HomePage dibawahnya untuk mencoba semua style fonts yang sudah kita tambahkan. Kodenya ibarat 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 aba-aba berikut :

//import 'package:first_app/main.dart'; //await tester.pumpWidget(MyApp()); 

Tujuan ditambahkan komentar yaitu alasannya yaitu kita tidak memakai class MyApp, sehingga dikala dijalankan tidak ada error class MyApp tidak ditemukan.

Full source code main.dart

Untuk aba-aba lengkap pada file main.dart ibarat 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, risikonya ibarat berikut :

Tutorial Flutter Custom Fonts

Demikian Tutorial Flutter Cara Praktis Custom Fonts, bila teman-teman ada pertanyaan atau hambatan sanggup mengisi form dibawah. Jangan lupa untuk subscribe supaya mendapat update tutorial menarik lainnya, biar bermanfaat. 

Jika kalian ingin mencar ilmu lebih lanjut lagi, ikuti Tutorial Membuat Form Login dan Register Keren dengan Flutter. 

Share this post