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.
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.
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 Guide, Flutter Projects, Code libs and etc.
