There are unlimited type of font family type available freely for web and mobile developers and some of them is quite awesome. Sometimes flutter application developer wants to download and Use Custom External Fonts in Flutter Android iOS application. We can easily display external downloaded fonts in our flutter app by making some changes in pubspec.yaml file. The pubspec.yaml contains all the major information about flutter project like App name, flutter version and which dependencies we are using in Flutter project etc. So let’s get started 🙂 .
Note: All the fonts we are using in current tutorial is downloaded free from fonts.google.com.
Contents in this project Add Use Custom External Fonts in Flutter Android iOS App Example Tutorial:
1. To use custom external fonts in your project, i preferred you to create new Flutter project or Upgrade the current project into Latest version to make the project more responsive to external fonts.
2. Download External font family type into your computer. I am downloading fonts from fonts.google.com, You can download from any website or source according to your requirement.
3. Open your flutter project Root folder and make a Folder named as fonts inside it.
5. Now go back to your Flutter project’s Root folder and Open pubspec.yaml file in Code editor.
6. Find flutter: section in pubspec.yaml file and put fonts there using family: type like i did in below code. You have to put here your own downloaded fonts name path.
- The first fonts: is used to set the Font declaration scope.
- Family: is used to determine the font family name which we would use to call the font family in Flutter mobile app code.
- assets: is used to set the complete font path.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
fonts: - family: AbrilFatface fonts: - asset: fonts/AbrilFatface-Regular.ttf - family: Lobster fonts: - asset: fonts/Lobster-Regular.ttf - family: LuckiestGuy fonts: - asset: fonts/LuckiestGuy-Regular.ttf - family: Montserrat fonts: - asset: fonts/Montserrat-Regular.ttf |
Complete Source code for my pubspec.yaml 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 |
name: project description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true fonts: - family: AbrilFatface fonts: - asset: fonts/AbrilFatface-Regular.ttf - family: Lobster fonts: - asset: fonts/Lobster-Regular.ttf - family: LuckiestGuy fonts: - asset: fonts/LuckiestGuy-Regular.ttf - family: Montserrat fonts: - asset: fonts/Montserrat-Regular.ttf |
7. Now all the configuration has been done. It’s time to start coding for app. So open your project’s main.dart file.
8. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
9. Create flutter’s default void main runApp() method and call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
10. Create our main class named as MyApp extends StatelessWidget. This would be our main View class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
11. Create MaterialApp -> Scaffold widget -> Column widget in Widget build area in MyApp class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Custom fonts in Flutter App"), ), body: Column( children: <Widget>[ ] ) ) ); } } |
12. Create 4 Text widget wrapping in Padding widget in Column widget.
- fontFamily : Here we would call the font family we declared in pubspec.yaml file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Center(child:Container( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'AbrilFatface')))), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'Lobster'))), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'LuckiestGuy'))), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'Montserrat'), textAlign: TextAlign.center,)), |
13. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Custom fonts in Flutter App"), ), body: Column( children: <Widget>[ Center(child:Container( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'AbrilFatface')))), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'Lobster'))), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'LuckiestGuy'))), Padding( padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Flutter App With Custom Fonts', style: TextStyle(fontSize: 25, fontFamily: 'Montserrat'), textAlign: TextAlign.center,)), ] ) ) ); } } |
Screenshot:
