Google Fonts Package

Introduction of Google Fonts Package

In Flutter, the google fonts package allows you to use fonts from the Google Fonts library in your Flutter applications. This package makes it easy to access a wide variety of fonts, providing a convenient way to enhance the typography of your app.

Using Google Fonts in Flutter

Installation: Add the google fonts package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^2.3.1  # Use the latest version

Run flutter pub get to install the package.

Importing the Package: Import the Google Fonts package in your Dart file:

import 'package:google_fonts/google_fonts.dart';

Applying Google Fonts: Use the Applying Google Fonts: Use the GoogleFonts class to apply a font to a Text widget. You can specify the font family and customize text style properties such as font size, weight, and color. class to apply a font to a Text widget. You can specify the font family and customize text style properties such as font size, weight, and color.

Text(
  'Hello, Flutter!',
  style: GoogleFonts.lato(
    textStyle: TextStyle(color: Colors.blue, letterSpacing: .5),
  ),
)

Properties of Google Fonts Package:

Font Family: Specify the font family you want to use from Google Fonts. For example, GoogleFonts.lato() or GoogleFonts.roboto().

style: GoogleFonts.roboto(),

TextStyle: Customize the text style properties such as font size, weight, and color using the textStyle property.

style: GoogleFonts.lato(
  textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),

Font Weight: Adjust the weight of the font (e.g., FontWeight.w400, FontWeight.w700).

style: GoogleFonts.lato(fontWeight: FontWeight.w700),

Font Size: Set the size of the font.

style: GoogleFonts.lato(fontSize: 24),

Font Style: Set the font style to italic or normal using the fontStyle property.

style: GoogleFonts.lato(fontStyle: FontStyle.italic),

Letter Spacing: Adjust the space between letters using the letterSpacing property.

style: GoogleFonts.lato(letterSpacing: 1.5),

Word Spacing: Adjust the space between words using the wordSpacing property.

style: GoogleFonts.lato(wordSpacing: 2.0),

Background Color: Set the background color for the text.

style: GoogleFonts.lato(backgroundColor: Colors.yellow),

Shadows: Add shadows to the text.

style: GoogleFonts.lato(
  shadows: [
    Shadow(
      offset: Offset(2.0, 2.0),
      blurRadius: 3.0,
      color: Color.fromARGB(255, 0, 0, 0),
    ),
  ],
),

Usage:

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Fonts Example', style: GoogleFonts.lato()),
        ),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: GoogleFonts.lato(
              textStyle: TextStyle(
                color: Colors.blue,
                letterSpacing: .5,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Final Code: This is the final code with the combination of some above Google Font package properties.

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'This is a Random text',
          style: GoogleFonts.calligraffitti(
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

In this example, the GoogleFonts.lato() method is used to apply the Lato font from Google Fonts to the Text widget. You can customize the text style properties to achieve the desired look and feel for your text elements in Flutter applications.

Thank for visiting Hybrid App Development
Posted by Hussam HM