Flutter Exporting Fonts From A Package

We all know that,  we need a different fonts to use in App for better design for this we can use it in two different ways.

  1. declaring a font as part of an app.
  2. declare a font as part of a separate package

It is better to declare a font as part of a separate package  Rather than declaring a font as part of an app. This is a convenient way to share the same font across several different projects, or for coders publishing their packages.

 

Follow the below steps for Exporting Fonts From A Package in Flutter App:

  • Add a font to a package
  • Add the package and font to the app
  • Use the font

Adding fonts to a package:

If you want to export a font from a package, for this we need to import the font files into the lib folder of the package project. Place font files directly in the lib folder or in a sub directory, such as lib/fonts.

In this tutorial, We are creating a  awesome_package with fonts placed in a lib/fonts  folder.

awesome_package/
lib/
awesome_package.dart
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf

Adding the package and fonts to the app:

Now add the dependency package to pubspec.yaml file using below code. After adding dependency package run get method that imports all the required files other wise it will shows error.

 

 

dependencies:
awesome_package:

Declare the font assets:

After importing the package, we have to tell Flutter where to find the fonts from the awesome_package.

To declare package fonts, you  must prefix the path to the font with packages/awesome_package. This informs the Flutter to look in the lib folder of the package for the font.

flutter:
fonts:
- family: Raleway
fonts:
- asset: packages/awesome_package/fonts/Raleway-Regular.ttf
- asset: packages/awesome_package/fonts/Raleway-Italic.ttf
style: italic

Using the font in Flutter App:

using a TextStyle to change the appearance of text. If you want to use package fonts, you need to declare which font you’d like to use, you need to declare the package the font belongs to which fonts family.

Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
package: 'awesome_package',
),
);

Below is the Complete example for  Exporting Fonts From A Package in Flutter App:

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Package Fonts',
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// The AppBar uses the app-default Raleway font.
appBar: AppBar(title: Text('Package Fonts')),
body: Center(
// This Text Widget uses the RobotoMono font.
child: Text(
'Using the Raleway font from the awesome_package',
style: TextStyle(
fontFamily: 'Raleway',
package: 'awesome_package',
),
),
),
);
}
}

After Adding dependency package and fonts the pubspec.yaml  look like below example:

name: package_fonts
description: An example of how to use package fonts with Flutter

dependencies:
awesome_package:
flutter:
sdk: flutter

dev_dependencies:
flutter_test:
sdk: flutter

flutter:
fonts:
- family: Raleway
fonts:
- asset: packages/awesome_package/fonts/Raleway-Regular.ttf
- asset: packages/awesome_package/fonts/Raleway-Italic.ttf
style: italic
uses-material-design: true

Congratulations You Have Learned  Exporting Fonts From A Package to Flutter App….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories