Flutter – Using Google fonts

21 Oct, 2020
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
In this article, we will build a simple app and implement some Google fonts to it. To do so follow the below steps:
Add the google_fonts dependency to the pubspec.yaml file.
Import the dependency to the main.dart file.
Use the StatelessWidget to give the structure to the application
Use a StatefulWidget to design the homepage for the application
Add a text to the body of the app body and apply the fonts
Use the Google fonts dependency in the pubspec.yaml as shown below:
To import the dependency in the main.dart file as below:
import 'package:google_fonts/google_fonts.dart';

Use the StatelessWidget to give a simple structure to the application as shown below:
Dart
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'GeeksForGeeks'),    );  }}
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. To do so use the below:
Dart
class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);    final String title;    @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;    void _incrementCounter() {    setState(() {      _counter++;    });  }
The font that we will be Oswald font and Lato font. In the TextStyle property you can add the same as shown below:
Dart
    children: <Widget>[      Text(        'You have pushed the button this many times:',        style: GoogleFonts.oswald(textStyle: display1),      ),      Text(        '$_counter',        style: GoogleFonts.lato(fontStyle: FontStyle.italic),      ),    ],  ),),
Complete Source Code:
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: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'GeeksForGeeks'),    );  }}  class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);    final String title;    @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;    void _incrementCounter() {    setState(() {      _counter++;    });  }    @override  Widget build(BuildContext context) {    final TextStyle display1 = Theme.of(context).textTheme.headline4;    return Scaffold(      appBar: AppBar(        title: Text(widget.title),        backgroundColor: Colors.green,      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[            Text(              'You have pushed the button this many times:',              style: GoogleFonts.oswald(textStyle: display1),            ),            Text(              '$_counter',              style: GoogleFonts.lato(fontStyle: FontStyle.italic),            ),          ],        ),      ),      floatingActionButton: FloatingActionButton(        onPressed: _incrementCounter,        tooltip: 'Increment',        child: Icon(Icons.play_arrow),      ),    );  }}
Output:
android
Flutter
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.