AssetBundle Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
AssetBundle widget - Flutter widget Guide By Flutter Agency
AssetBundle widget - Flutter widget Guide By Flutter Agency

In this article, we will go through AssetBundle Widget with a detailed article and an example.

What is AssetBundle Widget in Flutter ?

AssetBundle Widget is nothing but a collection of resources used by the application.

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.

An asset is a file that is bundled and deployed with the application 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).

The two main methods of an AssetBundle Widget 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.

When working with packages users need to add assets under the lib directory as shown in the attached screenshot.

AssetBundle widget

Assets folder in Flutter 

 Then the user needs to register Asset like below in pubspec.yaml file.

assets:
- assets/flowers.jpg

Loading Assets

To add assets to your application, add an assets section, like below:

AssetImage('assets/flowers.jpg',);

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.

Adding custom fonts

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

AssetBundle widget font

fonts

The user needs to register this font like below in pubspec.yaml :

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 ',
  style: TextStyle(
    fontFamily: 'ProductSans',
  ),
);

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

Conclusion:

In this article, we have been through What is AssetBundle Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us on a Flutter Journey !!!

Keep Learning !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply