Flutter - Using Google fonts

Any UI developer that builds an application has to deal with fonts. Google Fonts provides a wide range of fonts that can be used to improve the fonts of the User Interface. Flutter provides a Google fonts package that can be used to implements various available fonts.

Some fonts that are available for use through the Google fonts package are listed below:

• Roboto
• Open sans
• Lato
• Oswald
• Raleway

Steps to Implement Google fonts in Flutter

Step 1 : Adding Dependency

Use the Google fonts dependency in the pubspec.yaml as shown below:

dependencies:
 google_fonts: ^6.2.1

Now run the below command in terminal.

flutter pub get

Step 2 : Importing Dependency

To import the dependency in the main.dart file as below:

import 'package:google_fonts/google_fonts.dart';

Step 3 : Creating the application structure

Use the StatelessWidget to give a simple structure to the application as shown below:

Step 4 : Designing the Homepage

To design, the homepage for the application makes use of the StatefulWidget. Initiate the state at 0 that counts the number of clicks on the button that we will be adding to the homepage.

Step 5 : Implementing the fonts

The font that we will be Oswald font and Lato font. In the TextStyle property you can add the same as shown below:

To know more about Column in flutter refer this article: Flutter – Row and Column Widgets

Complete Source Code (main.dart)

Output: