How to Add Assets in Development Mode in Flutter?

Do you want to know how to include the assets in Flutter? Then, here is the answer. With the help of the assets, you can add images and much more to your application. These images are considered assets, and it is selected from the definitive directory. Hence, the files added with the web apps are identified under an assets subcategory of a portable UI toolkit section.

There are different assets such as configuration files, static data, images, icons, and much more. For example, images include GIF, PNG, WBMP, JPEG, BMP, etc. That’s why in this post, we’ll see a step-by-step process to add assets in development mode during the custom mobile app development. We also see thorough information about assets.

What is determining assets?

The open-source framework uses the pubspec.yaml file and located at the app development project root to find the asset your application needs.

Example:
flutter:
assets:
- assets/my_icon.png
- assets/background.png

The developer needs to identify the directory’s name through / character at the end to comprise all resources in the directory.

What are assets variants?
App development procedure supports asset variants concept, and several asset versions may display in various contexts. When the pathway of the asset is specified in the pubspec.yaml assets section, all file names are the same in an adjacent subdirectory in the building practice. Then, files are included in the asset package with recognized assets.

Consider these files in an application directory:

.../pubspec.yaml
.../graphics/my_icon.png
.../graphics/background.png
.../graphics/dark/background.png
...etc.

After that, the pubspec.yaml file consists of the following:

flutter:
assets:
- graphics/background.png

The graphics/dark/background.png and graphics/background.png are included in the bundle of assets. As for the former, it is measured as a key asset and the latter as a variant. Specify the definitive directory as follows:

flutter:
assets:
- graphics/

The graphics/my_icon.png, graphics/dark/background.png, and graphics/background.png files include.

If the developer selects the resolution-app images, Flutter uses asset variations. It extends to add variants for various areas and read directions in the future.

What are asset bundles?

Files included with the web application are listed under the Assets subcategory of the portable UI toolkit section. All assets qualified to the pubspec.yam1 file where asset files are positioned is recognized by explicit paths. It does not matter which type of asset is declared. Flutter locates assets into the exclusive archive during the development known as the assets bundle. Therefore the application reads from the runtime.

What are the loading assets?

The application can access its Flutter assets through the object of AssetBundle. The development team can load the string or text asset (image/binary asset (load ()) and (loadString()). An asset footpath was identified in pubspec.yam1 at construct time corresponding to the logical key sketch.

What are the loading text assets?

All Flutter applications have a rootBundle purpose for hassle-free access to an important asset bundle. With the help of rootBundle worldwide static from the package: flutter/services.dart, it loads assets straightforwardly. If you need to get AssetBundle for the present BuildContext, you can use DefaultAssetBundle rather than default asset bundles. This is because some default bundles are developed with a Flutter web application development.

This method lets the parental widget substitute various AssetBundle at the run time, which is helpful for testing situations. In addition, the developer will utilize DefaultAssetBundle. of () to load assets circuitously. For example, JSON files from the runtime rootBundle of an application. The expert can utilize rootBundle to load the asset sincerely in the top Flutter widget context exterior.

import 'package:flutter/services.dart' show rootBundle;
FutureloadAsset() async {
  return await rootBundle.loadString('assets/config.json');

What is package asset bundling?

It is bundled mechanically with the app when specific assets are identified in the package pubspec.yaml. Besides, the package’s Flutter asset should be recognized in its pubspec.yaml. You can pick the useful Flutter package with an asset in the lib/ file, which doesn’t identify in its pubspec.yam1. Files in the package fancy_backgrounds could include:

.../lib/backgrounds/background1.png
.../lib/backgrounds/background2.png
.../lib/backgrounds/background3.png

In addition, the application pubspec.yaml needs to identify it in the flutter asset section.

flutter:
assets:
- packages/fancy_backgrounds/backgrounds/background1.png
The lib/ implies; therefore, it does not include the asset’s pathway. When building the package to load a unique asset, identify it in the set pubspec.yaml.

flutter:
  assets:
    - assets/images/
By using the following script, you can load images in the package.

flutter:
return const AssetImage('packages/fancy_backgrounds/backgrounds/background1.png');

How to use the fundamental platform to share assets?

The Flutter asset is available to platform code with the NSBundle on the iOS app and AssetManage on Android. Let’s see how to load assets in iOS and Android.

How to load assets in iOS?

Through the mainBundle, the Flutter asset is available on iOS. Lookup keys are used in pathForResource: ofType:, which gets from lookupKeyForAsset:fromPackage: on FlutterViewController or lookupKeyForAsset on FlutterPluginRegistrar. While creating plugins, you can find FlutterPluginRegistrar which offers the best result. FlutterViewController is the best option for building the app with a platform view.

Use the following script to access icons/heart.png from your plugin code

NSString* key = [registrar lookupKeyForAsset:@"icons/heart.png"];
NSString* path = [[NSBundlemainBundle] pathForResource:keyofType:nil];

Pub.dev’siOS_platform_images plugin handles this logic easily. The Flutter developer can create as below:

Objective-C – [UIImageflutterImageWithName:@”icons/heart.png”];

Swift – UIImage.flutterImageNamed(“icons/heart.png”)

How to load assets in Android?

Flutter assets are available in the AssetManager API on the Android platform. Lookup key used in openFd that gets from the lookupkeyForAsset on PluginRegistry.Registrar.

Using PluginRegistry.Registrar is perfect for creating plugins. In addition, FlutterView is the best choice if you need to develop an application with a platform view. Let’s say pubspec.yaml includes the following parameters:

flutter:
  assets:
    - icons/heart.png
Flutter app should look like this:
.../pubspec.yaml
.../icons/heart.png
...etc.

Use the following code to fetch icons/heart.png from the Java source code:

AssetManagerassetManager = registrar.context().getAssets();

String key = registrar.lookupKeyForAsset(“icons/heart.png”);

AssetFileDescriptorfd = assetManager.openFd(key);

Example:

import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});
  @override
  State createState() => _SplashScreenState();
}
class _SplashScreenState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FlutterLogo(size: MediaQuery.of(context).size.height));
  }
}

Output:

Conclusion

So, it’s all about adding assets. In this article, we’ve covered information about assets and asset bundles in brief. There we learned about asset loading. Then, we’ve seen the complete process of loading assets in the android platform as well as the iOS platform. So, far we learned how to add assets in development mode in Flutter. I hope, I’ve covered all the information on this topic in the article. Thanks for reading or if you have any doubts let us know in the comment section. We are always happy to help.

If you are looking for consultation on adding the assets in the development mode in Flutter. As a leading Flutter app development company, we can help you in adding assets and loading assets on iOS and android platforms.

Frequently Asked Questions (FAQs)

1. How can you add all assets in Flutter development?

It is at the root of your Flutter project. You can even give the name whatever you want, but the assets are preferred. If you wish to also include other assets into your app, such as the fonts, then making another subfolder name as images is preferred.

2. How can I add the library to Flutter?

You can go into the pubspec.yaml file and can add the dependencies, and the packages will get to do the work. Else, you can run the flutter pub in the terminal.

3. What is the asset bundle in Flutter app development?

Asset bundles consist of the resources like images and strings that an app can use. Access to these resources is asynchronous as it can transparently load over the network or from a local file without blocking an app’s user interface.