Flutter apps bundle and deploy assets such as JSON files, configuration files, icons, and various image formats, enhancing user experiences with diverse content accessible at runtime.

Adding Assets and Images

In Flutter, assets and images are integral components of app development, enhancing both visual appeal and functionality. Let's delve into how to effectively add assets and images to your Flutter app.

Specifying Assets in Flutter

Flutter utilizes the pubspec.yaml file, located at the root of your project, to identify assets required by your app. Here is an example:

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

You can also include all assets under a directory by specifying the directory name with the / character at the end:

flutter:
  assets:
    - directory/
    - directory/subdirectory

It's important to note that only files located directly in the directory are included, with resolution-aware asset image variants being the exception. To include files located in subdirectories, create an entry per directory.

Asset Bundling Process

The assets subsection of the flutter section in pubspec.yaml specifies files that should be included with the app. During the build process, Flutter places these assets into a special archive called the asset bundle, which the app reads from at runtime.

The order in which assets are declared doesn't matter, and the actual directory name used (assets in the example) is arbitrary. Flutter handles the bundling of assets automatically, ensuring they are available for use within the app.

Loading Assets into Your Flutter App

Once assets are specified in the pubspec.yaml file and bundled with the app, your Flutter app can access them through an AssetBundle object. There are two main methods for loading assets: loadString() for loading text assets and load() for loading images or binary assets.

Loading text assets

In Flutter, the rootBundle object provides easy access to the main asset bundle for each app. While it's possible to load assets directly using the rootBundle from package:flutter/services.dart, it's recommended to obtain the AssetBundle for the current DefaultAssetBundle.

This approach allows for runtime substitution of asset bundles, beneficial for localization or testing scenarios. Typically, DefaultAssetBundle.of() is used to indirectly load assets like JSON files. Outside Widget contexts or without access to an tAssetBundle handle, rootBundle can be utilized to load assets directly.

import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

Loading images

For loading images, use the AssetImage class in a widget's build() method:

return const Image(image: AssetImage('assets/background.png'));

Flutter also supports resolution-aware image assets, allowing the app to load images appropriate for the device's pixel ratio.

Resolution-Aware Image Assets

Flutter supports resolution-aware image assets, ensuring optimal image quality across various device pixel ratios. By organizing images into directories with specific identifiers, Flutter automatically selects the appropriate asset based on the device's pixel ratio.

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc

Images should be organized in a directory structure that includes variants for different pixel ratios, such as 1.5x, 2.0x, 3.0x, etc.

In Flutter, specifying the main asset or its parent directory in the pubspec.yaml assets section bundles resolution-aware image variants automatically. The main asset entry, if not a real file, defaults to the lowest resolution variant for devices. Utilizing the default asset bundle ensures resolution awareness when loading images.

Asset Images in Package Dependencies

When loading images from package dependencies, Flutter requires specifying the package argument with AssetImage. This ensures the proper resolution of assets from the package directory structure.

Suppose your application relies on a package named my_icons, with the following directory layout:

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc

To load the image, use:

  return const AssetImage('icons/heart.png', package: 'my_icons');
}

Sharing Assets with the Underlying Platform

Flutter assets are accessible to platform code using platform-specific APIs, such as AssetManager on Android and NSBundle on iOS.

Loading Flutter Assets in Android and iOS

On Android and iOS platforms, Flutter assets can be accessed through platform-specific APIs. For example, on Android, assets are available through the AssetManager API, while on iOS, they are accessible via NSBundle.

flutter:
  assets:
    - icons/heart.png

This reflects the following structure in your Flutter app.

.../pubspec.yaml
.../icons/heart.png
...etc

To access icons/heart.png from your Java plugin code:

AssetManager assetManager = registrar.context().getAssets();
String key = registrar.lookupKeyForAsset("icons/heart.png");
AssetFileDescriptor fd = assetManager.openFd(key);

Updating the App Icon and Launch Screen

Flutter apps can customize their app icons and launch screens using platform-specific mechanisms. On Android, you can update the app icon by replacing the placeholder images in the res directory, while on iOS, you can customize the launch screen by modifying the LaunchImage.imageset directory. These customizations enhance the branding and user experience of your Flutter app.