Menggunakan Custom Font

Untuk menggunakan custom font, kita perlu menyimpan font yang akan digunakan pada folder project. Masih menggunakan project expense tracker, kita buat folder baru ./assets/fonts (penamaan folder dan struktur tidak ada aturan baku, silakan berikan penamaan sesuai keperluan).

Lalu copykan font yang akan digunakan. Sebagai contoh bisa download disini. Font yang digunakan adalah OpenSans dan Quicksand.

Berikutnya, buka file pubspec.yaml, lalu tambahkan settingan dibawah. (Anda dapat uncomment contoh yang sudah disediakan didalam file pubsec.yaml, lalu ubah menjadi seperti settingan dibawah).

  fonts:
    - family: OpenSans
      fonts:
        - asset: assets/fonts/OpenSans-Regular.ttf
        - asset: assets/fonts/OpenSans-Bold.ttf
          weight: 700
    - family: Quicksand
      fonts:
        - asset: assets/fonts/Quicksand-Regular.ttf
        - asset: assets/fonts/Quicksand-Bold.ttf
          weight: 700

NOTE: Perhatian file pubsec.yaml memperhatikan spasi.

Setting font sudah selesai, langkah berikutnya adalah menggunakannya. Bisa digunakan dalam inline styling atau pada ThemeData. Agar aplikasi memiliki kesamaan desain, tentu lebih baik jika digunakan dalam ThemeData.

Berikut penggunaan fonts pada ThemeData pada main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expense Tracker',
      theme: ThemeData(
          primaryColor: Colors.red,
          accentColor: Colors.red[400],
          textTheme: TextTheme(
            bodyText2: TextStyle(
              color: Colors.red,
              fontFamily: 'OpenSans',
            ),
          ),
          fontFamily: 'Quicksand'),
      home: MyHomePage(),
    );
  }
}

Setelah kita definisikan warna dan font pada themedata, berikut cara menggunakannya.

Kita bisa gunakan warna yang sudah didefinisikan dengan perintah Theme.of(context).primaryColor atau Theme.of(context).accentColor

color: Theme.of(context).primaryColor, width: 2)),

Sementara untuk font kita tidak perlu definisikan, karena sudah otomatis, font yang digunakan adalah font dari theme.

                      Container(
                        padding: EdgeInsets.all(6),
                        margin: EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 15,
                        ),
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Theme.of(context).primaryColor,
                                width: 2)),
                        child: Text(
                          // 'Rp. ${trx.amount}',
                          NumberFormat.currency(
                                  symbol: 'Rp. ', decimalDigits: 0)
                              .format(_trans[idx].amount),
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 14,
                              color: Theme.of(context).accentColor),
                        ),
                      ),

Dapat kita lihat pada gambar diatas,

Title Apps, yaitu text Expense Tracker menggunakan font Quick Sand
Text di body app, yaitu text Wacom menggunakan font Opensans
Untuk warna box dari amount menggunakan accentColor
Untuk warna text dari body text menggunakan primaryColor