Hello friends, Google Material Style fonts is one of the largest free font library available on internet via Google. All the fonts in Google fonts is freely available for developers. There are almost 977 type of different font family is with their sub variants available on Google fonts. Now the main part comes why we should use Google fonts in our flutter application. The reason is because using the Google Fonts Pub package, we don’t have to download each font one by one. All we have to do is import a single line in our pubspec.yaml file and we are ready to go with Google fonts without downloading them one by one. So in this tutorial we would learn about How to Use Google Material Style Fonts in Flutter iOS Android App Example.
Contents in this project Use Google Material Style Fonts in Flutter iOS Android Example:-
1. The first step is to download and install the Google Fonts Pub package in our flutter project. So open your pubspec.yaml file.
2. Now put below line under dependencies block. Currently their 2.1.0 version is available. But you can visit their Pub Package Page from here to see the latest version.
|
1 2 |
dependencies: google_fonts: ^2.1.0 |
Complete Source Code of my pubspec.yaml file after adding above line :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
name: myapp description: A new Flutter project. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: ">=2.12.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 google_fonts: ^2.1.0 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true |
3. Now we have to execute flutter pub get command in our flutter project Root directory in order to download and install the Google Fonts package from internet.
4. Now our project is ready to go, Next step is to start coding for the application. So open your project’s main.dart file and import material.dart and google_fonts.dart package.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; |
5. Creating void main runApp() method, here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
6. Creating our main MyApp class extends State Less Widget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
7. Creating Widget build area -> Material App -> Scaffold widget -> Center widget -> Column widget. Here we would make 7 Text widgets wrap inside Container widget. All the Text widgets has different type of Google fonts applied on them. You can find list of all available Google Fonts Here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Dancing Script', style: GoogleFonts.dancingScript( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font SigmarOne', style: GoogleFonts.sigmarOne( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font shadows Into Light', style: GoogleFonts.shadowsIntoLight( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Sacramento', style: GoogleFonts.sacramento( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Dm Serif Display', style: GoogleFonts.dmSerifDisplay( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Gayathri', style: GoogleFonts.gayathri( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Frijole', style: GoogleFonts.frijole( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), ])))); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
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( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Dancing Script', style: GoogleFonts.dancingScript( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font SigmarOne', style: GoogleFonts.sigmarOne( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font shadows Into Light', style: GoogleFonts.shadowsIntoLight( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Sacramento', style: GoogleFonts.sacramento( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Dm Serif Display', style: GoogleFonts.dmSerifDisplay( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Gayathri', style: GoogleFonts.gayathri( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), Container( margin: const EdgeInsets.all(5), child: Text( 'Google Font Frijole', style: GoogleFonts.frijole( textStyle: TextStyle(color: Colors.black, fontSize: 26), ), )), ])))); } } |
Screenshot:-
