Bismillah, baik disini kita akan belajar flutter tentang penggunaan GoogleFonts dalam aplikasi flutter kita. Jadi kenapa kita menggunakan googlefonts itu karena terddapat fitur-fitur dimana teman-teman bisa menggunakan font yang diperlukan tanpa harus import satu-satu.

Langkah pertama silahkan buat proyek flutternya lalu di pubspec.yaml nya

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  google_fonts: ^2.0.0

Oke, di file main.dart nya kita buat jangan lupa untuk di import packagenya

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Font"),
      ),
      body: SizedBox(
        child: Column(
          children: <Widget>[
            Text(
              'Hallo aku adalah font  yang di set secara langsung',
              style: GoogleFonts.lobster(color: Colors.red, fontSize: 25),
            ),
            // style: GoogleFonts.pacifico(fontSize: 30, color: Colors.red)),
          ],
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Maka hasilnya akan seperti ini

Kemudian ketika kita ingin mengatur semua font nya jadi satu font bisa ditambahkan di kelas materialApp nya, jadi nanti semua font yang tidak di set oleh GoogleFonts maka akan mengikuti font di themenya ini

theme: ThemeData(textTheme: GoogleFonts.flavorsTextTheme()

Kemudian ketika kita ingin nihh memilih suatu text agar tidak ikut ke set di theme nya caranya dengan di property theme nya kita tambahin .copyWith dan bodyText1 ini ibartnya sebagai kunci nya yang akan kita pilih nantinya teks mana saja yang perlu kita kasih kunci tersebut

 theme: ThemeData(
        textTheme: GoogleFonts.flavorsTextTheme().copyWith(
            bodyText1:
                GoogleFonts.fascinate(fontSize: 20, color: Colors.blueAccent)),
      ),

Cara ambil kunci nya dengan

 Text(
              'Hallo aku adalah font yang di set sesuai bodytext1',
              style: Theme.of(context)
                  .textTheme
                  .bodyText1 //diambil dari main.dart
                  .copyWith(),
            ),

            Text(
              'Hallo aku adalah font yang di set sesuai bodytext1 dan di set warnanya',
              style: Theme.of(context)
                  .textTheme
                  .bodyText1 //diambil dari main.dart
                  .copyWith(color: Colors.yellow[600]),
            ),

Untuk full source codenya seperti ini

// import 'dart:html';

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        textTheme: GoogleFonts.flavorsTextTheme().copyWith(
            bodyText1:
                GoogleFonts.fascinate(fontSize: 20, color: Colors.blueAccent)),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Font"),
      ),
      // drawer: Drawerku(),
      body: SizedBox(
        child: Column(
          children: <Widget>[
            Text(
              'Hallo aku adalah font yang di set sesuai bodytext1',
              style: Theme.of(context)
                  .textTheme
                  .bodyText1 //diambil dari main.dart
                  .copyWith(),
            ),

            Text(
              'Hallo aku adalah font yang di set sesuai bodytext1 dan di set warnanya',
              style: Theme.of(context)
                  .textTheme
                  .bodyText1 //diambil dari main.dart
                  .copyWith(color: Colors.yellow[600]),
            ),

            Text('Hallo aku adalah font yang di set di texttheme nya'),
            SizedBox(
              height: 10,
            ),
            Text(
              'Hallo aku adalah font yang di set di texttheme nya dan saya kasih warna sendiri',
              style: TextStyle(color: Colors.deepPurpleAccent),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              'Hallo aku adalah font  yang di set secara langsung',
              style: GoogleFonts.lobster(color: Colors.red, fontSize: 25),
            ),
            // style: GoogleFonts.pacifico(fontSize: 30, color: Colors.red)),
          ],
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Catatan Penting : font ini akan bekerja jika si emulator itu terhubung ke internet ya hehehh, sekian terima kasih, Wassalamualaikum….