Post Detail

Outputnya ketika fonts berjalan menjadi seperti ini :

Supaya fonts terload pada flutter langkah-langkahnya adalah sebagai berikut :

Siapkan aplikasi baru atau project baru untuk Nama project bebas :

$ flutter create load-fonts

Buat directory baru didalam directory aplikasi yang dimana nanti akan kita gunakan untuk menyimpan fonts yang akan kita download.

load-fonts/fonts

Download fonts yang akan kita gunakan, disini saya menggunakan fonts MarckScript yang kalian bisa download di Fonts Google Setelah di download, di extract filenya lalu pindahkan file MarckScript-Regular.ttf ke folder fontsnya.

Setelah tahapan tersebut selesai selanjutnya baru kita lakukan load fonts nya, bisa diload lewat pubspec.yaml dengan codingan seperti berikut ini :

  fonts:
    - family: MarckScript
      fonts:
        - asset: fonts/MarckScript-Regular.ttf
          weight: 400

Untuk proses load fonts sudah selesai lalu cara menggunakannya disini saya menggunakan main.dart untuk load fonts dan masukan kodingan seperti berikut ini :

import 'package:flutter/material.dart';

void main() => runApp(HelloApp());

class HelloApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo Flutter'),
      ),
      body: Center(
        child: Text(
          'Hello World Flutter',
          textDirection: TextDirection.ltr,
          style: TextStyle(
              fontSize: 45.0,
              decoration: TextDecoration.none,
              fontFamily: 'MarckScript',
              fontWeight: FontWeight.w400),
        ),
      ),
    );
  }
}

Nama fontfamily yang tertera di main.dart harus sama dengan nama font yang ada di pubspec.yaml biar terload, karena Dart ini casesensitive maka penamaan hurup besar dan kecil sangat berpengaruh. Demikian artikel tentang flutter, semoga bermanfaat bagi yang sedang belajar.