Flutter Google Fonts Tutorial for Beginners

Flutter Google Fonts :

Flutter Google Fonts implementation is explained in this part of the tutorial we can directly use the fonts in the app rather than integrating them by adding them manually and specifying them.

We can make use of the google fonts dependency and make the fonts customized in our app by just specifying the font name.

Fonts are used to provide a customized look and feel to the app it provides look and feel to the text and makes it a bit more attractive for the user to read.

There are different variants in text stle like bold, regular, italic and so on depending upon the font variants the appearance also changes.

Following this tutorial will make fonts implementation much easier as we need not download the fonts, add them in assets folder and specify them in pubspec file everything is automated with the help of this package.

pubspec.yaml :

Add google fonts dependency to the pubspec file and adjust the version accordingly.

dependencies:
  flutter:
    sdk: flutter
  google_fonts: 1.1.0

main.dart :

Initialize with void main() we have considered a default class MyApp()

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

Return a MaterialApp inside which we can provide title, theme & home

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(title: 'Google Fonts'),
);

Create a state for MyHomePage class extending a StatefulWidget so that we can refresh the state as the font is fetched every time.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Define a Scaffold with a AppBar and provide a title

Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),

);

Here we are providing a text widget with a sample text and providing the styles for it.

Text(
  'Welcome to www.androidcoding.in',
  style: GoogleFonts.shadowsIntoLight(textStyle: display1),
),

Need to specify the Text Widget inside a Column where we provide main axis alignment to center under Center Widget assigned to body.

Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Welcome to www.androidcoding.in',
          style: GoogleFonts.shadowsIntoLight(textStyle: display1),
        ),
      ],
    ),
  ),
);

FullCode :

Providing the full code for google fonts integration in your flutter app

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Google Fonts'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    final TextStyle display1 = Theme.of(context).textTheme.headline4;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Welcome to www.androidcoding.in',
              style: GoogleFonts.shadowsIntoLight(textStyle: display1),
            ),
          ],
        ),
      ),
    );
  }
}

Output :

This video tutorial depicts the usage of flutter google font

If you have any query’s do let me know in the comment section below, share like and subscribe for more interesting tutorials.