Flutter Design – Instalasi External Package (Font)

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Menampilkan Snackbar Pada Aplikasi

Pada artikel ini kita akan mempelajari cara untuk menggunakan font eksternal yang kita deklarasikan pada package aplikasi yang kita buat. Hal tersebut merupakan cara paling mudah apabila kita memiliki projek aplikasi yang berbeda namun ingin menggunakan font yang sama atau ketika developer ingin menerbitkan package mereka di pub.dev. Berikut langkah-langkah yang akan dibahas pada artikel ini:

1. Menambahkan external package pada dependencies.
2. Instalasi external package.
3. Import external package pada Dart code.

1. Menambahkan External Package pada Dependencies

Langkah pertama, buka pubspec.yaml pada folder projek aplikasi yang sedang kita buat dan tambahkan baris kode berikut :

dependencies:
  google_fonts: ^2.0.0 #the latest version at this time

2. Instalasi External Package

Selanjutnya install package tersebut dari command line pada terminal projek yang sedang dibuat menggunakan script berikut (Editor yang penulis gunakan yaitu Visual Studio Code):

$ flutter pub get

3. Import External Package pada Dart Code

Langkah terakhir, tambahkan cuplikan kode berikut pada file lib/main.dart:

import 'package:google_fonts/google_fonts.dart';

Cuplikan Lengkap Kode (11/03/2021)

pubspec.yaml

name: flutter_application_font
description: A new Flutter project.
publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  google_fonts: ^2.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

 lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Package Fonts',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default font.
      appBar: AppBar(title: Text('Package Fonts')),
      body: Center(
        // This Text widget uses the Raleway font.
        child: Text(
          'This is Google Fonts',
          style: GoogleFonts.lato(),
        ),
      ),
    );
  }
}

Jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya:

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://pub.dev/packages/google_fonts

Anton Prafanto

Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda

all author posts