How to use Google Fonts in Flutter
Google Fonts is a free and open-source font library that can enhance the typography and design of our Flutter applications. Using Google Fonts, we can easily access a wide range of font styles and weights, making our app visually appealing and unique. In this Answer, we'll walk through the steps to integrate Google Fonts into our Flutter project.
To add the Google Fonts to our Flutter project, we need to follow the following steps:
Adding dependency
Adding import package statement
Using google fonts in
Textwidget
Adding dependency
To begin using Google fonts, we must install the necessary package. For this purpose, we will open the pubspec.yaml in our dart project and add the following line under the "dependencies" section:
dependencies
google_fonts:
Leaving the version number empty will automatically install the latest version of the package.
After making the changes, we can install the package in two ways:
Right-click the
pubspec.yamlfile and click on "get packages."Write the following command in the terminal.
flutter pub get
We can skip all the above steps and just run the following command, which will automatically install the latest version of google_fonts package.
flutter pub add google_fonts
Adding import package statement
Now we can import the package into the Dart file by adding the following line of code in the Dart file where we want to implement the google_fonts function:
import 'package:google_fonts/google_fonts.dart';
We can use Google fonts in our project, but there are multiple methods. We will explore them one by one.
Using Google fonts in Text widget
We can add Lobster font as the style for our Text widget using the following lines of code:
Text('Welcome to Educative.io',style: GoogleFonts.Lobster(),),
Or, if we want to load the font dynamically:
Text('Welcome to Educative.io',style: GoogleFonts.getFont('Lobster'),),
After running the above code, we will be able to see the following output:
Using Google fonts at app level
We can use an entire text theme for our project to use a specific Google font using the following lines of code.
...return MaterialApp(theme: _buildTheme(Brightness.dark),);}ThemeData _buildTheme(brightness) {var baseTheme = ThemeData(brightness: brightness);return baseTheme.copyWith(textTheme: GoogleFonts.latoTextTheme(baseTheme.textTheme),);}
After defining the font theme at the app level, we can simply define Text widgets as:
Text('Welcome to Educative.io',),
Code example
In the code below, we have declared the Google fonts at app level using the code we have explained above. We have used a Column to display two Text widgets whose font style we haven't declared as it is already declared on the app level.
name: flutter_simple_web_app
description: A simple web app with Flutter
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0" # Upgraded to the latest Flutter SDK version
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
google_fonts: ^3.0.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
After running the above code, we will be able to see the following output:
In this Answer, we have used the "Lobster" Google font. We can also explore multiple other font styles by clicking here!
Conclusion
Integrating Google fonts in our Flutter project offers a world of possibilities for enhancing our application's visual appeal and design. With its vast collection of fonts and easy-to-use package, we can effortlessly boost the typography in our app, making it stand out with unique and captivating text elements.
Free Resources
