How to Use Custom Fonts & Images in Flutter Package

source: https://willowtreeapps.com/

Flutter apps can include both code and assets (sometimes called resources). An asset is a file that is bundled and deployed with your app, and is accessible at runtime. Common types of assets include static data (for example, JSON files), configuration files, icons, and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP).

Introduction

In this article we will learn how to use custom fonts & images in flutter packages. When working with flutter packages that might contain their own set of assets, Flutter does not make it very intuitive to manage those assets.

For example, in a normal Flutter application, you would usually include your assets in an assets folder, and then those assets would be registered in the pubspec.yaml, either by adding the full path of the asset, or by adding a relative path that will include all the assets under that directory. This is not true when working with packages.

Adding Assets & Images to a Package

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app. Your app can access its assets through an AssetBundle object.

The two main methods of an asset bundle allow you to load a string/text asset (loadString()) or an image/binary asset (load()) out of the bundle, given a logical key. The logical key maps to the path to the asset specified in the pubspec.yaml file at build time.

Specifying Assets

When working with packages you need to add assets under thelib directory, as shown in a screenshot below:

and then register them as:

# To add assets to your application, add an assets section, like this:
assets:
- packages/receipt_widget/assets/icons/ic_appicon.png

in your pubspec.yaml file.

where receipt_widget is the name of the package and ic_appicon.png represents the name of an image.

Loading Assets

To load assets used by package itself, the package argument must be provided to AssetImage.

AssetImage('assets/icons/ic_appicon.png', package: 'receipt_widget')

Bundling of Package Assets

If the desired asset is specified in the pubspec.yaml file of the package, it’s bundled automatically with the application. In particular, assets used by the package itself must be specified in its pubspec.yaml.

A package can also choose to have assets in its lib/ folder that are not specified in its pubspec.yaml file. In this case, for those images to be bundled, the application has to specify which ones to include in its pubspec.yaml. For instance, a package named receipt_widget could have the following files:

.../lib/assets/images/background1.png
.../lib/assets/images/background2.png
.../lib/assets/images/background3.png

To include, say, the first image, the pubspec.yaml of the application should specify it in the assets section:

flutter:
  assets:
  - packages/receipt_widget/assets/images/background1.png

The lib/ is implied, so it should not be included in the asset path.

Adding Custom Fonts to a Package

When working with flutter packages you have to place font files directly in the lib folder or in a subdirectory, such as lib/assets/fonts.

and then register them as:

fonts:
- family: ProductSans
  fonts:
    - asset: packages/receipt_widget/fonts/Product-Sans-Regular.ttf
    - asset: packages/receipt_widget/fonts/Product-Sans-Italic.ttf
      style: italic
    - asset: packages/receipt_widget/fonts/Product-Sans-Bold.ttf
      weight: 700

Use the Font

Use a TextStyle to change the appearance of text. To use package fonts, declare which font you’d like to use and which package the font belongs to.

Text(
  'Using the ProductSans font from the receipt_widget',
  style: TextStyle(
    fontFamily: 'ProductSans',
    package: 'receipt_widget',
  ),
);

Restart Your App

Finally, whenever you add a new asset in your pubspec.yaml file, don’t forget to run $ flutter packages get and restart your app.

Useful resources

Export fonts from a package

Adding assets and images

Thats it for this article, if you liked this article, don’t forget to clap your hands 👏 as many times as you can to show your support, leave your comments and share it with your friends.