The Flutter APP installation package contains both code and assets. Assets are packaged into the installation package and can be accessed at run time. Common types of assets include static data (such as JSON files), configuration files, ICONS, and images (JPEG,WebP,GIF, animated WebP/GIF,PNG,BMP, and WEMP)

Specify the assets

Just like package management,Flutter has a pubspec.yaml file to manage the resources required by the application. For example:

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
Copy the code

Assets specify the files that should be included in the application, and each asset identifies its own path relative to the file system path where the pubspec.yaml file resides. The order in which assets are declared is irrelevant; the actual directory of the asset can be any folder (in this case, assets).

Loading text Assets

  • throughrootBundleObject loading: Each Flutter application has onerootBundleObject, through which you can easily access the main resource bundle, directly usedpackage:flutter/services.dartGlobal static inrootBundleObject to loadassetCan.
  • throughDefaultAssetBundleLoad: RecommendedDefaultAssetBundleTo get the currentBuildContexttheAssetBundle. This approach is not the default for building with applicationsasset bundleInstead, the parent widget is dynamically replaced at run timeAssetBundleThis is useful for localization or test scenarios.

In general, you can use DefaultassetBundle.of () to load assets (such as JSON files) indirectly at application runtime, and you can use rootBundle to load these assets directly outside of the widget context, or when other AssetBundle handles are not available. Such as:

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

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

Loading pictures

Similar to native development, Flutter can also load images at the appropriate resolution for the current device.

Declare resolution relative to picture assets

AssetImage maps asset’s request logic to the asset closest to the current device pixel ratio (DPI). For this mapping to work, the asset must be saved according to a specific directory structure:

... / image. PNG... / Mx/image. PNG... / Nx/image. PNG... etc.Copy the code

Where M and N are numeric identifiers that correspond to the resolution of the image contained therein, that is, they specify a picture with a pixel ratio for different devices. The main resource corresponds to a 1.0 x resolution image by default. Look at an example:

... / my_icon. PNG... / 2.0 x/my_icon. PNG... / 3.0 x/my_icon. PNGCopy the code

On a device with a device pixel ratio of 1.8… /2.0x/my_icon.png will be selected. For a device pixel ratio of 2.7,… /3.0x/my_icon.png will be selected.

If you do not specify the width and height of the rendered Image on the Image Widget, the Image Widget will take up the same amount of screen space as the main resource. That is, if… /my_icon. PNG is 72px by 72px, so… /3.0x/my_icon.png should be 216px by 216px; But if width and height are not specified, they will both be rendered as 72 pixels by 72 pixels (in logical pixels).

Each item in the asset section of pubspec.yaml should correspond to the actual file, except for the main resource item. When a resource is missing from the main resource, it is selected in order of resolution from lowest to highest, that is, if it is not in 1x, it is found in 2X, and if it is not in 2x, it is found in 3X.

Loading pictures

To load images, use the AssetImage class. For example, we could load the background image from the asset declaration above:

Widget build(BuildContext context) {
  return new DecoratedBox(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage('graphics/background.png'),
      ),
    ),
  );
}
Copy the code

Note that AssetImage is not a widget, it is actually an ImageProvider. Sometimes you might want to get a widget that displays an Image directly, so you can use the image.asset () method, for example:

Widget build(BuildContext context) {
  return Image.asset('graphics/background.png');
}
Copy the code

When a resource is loaded using the default Asset bundle, the resolution is automatically handled internally, which is insensitive to the developer. (If you use lower-level classes like ImageStream or ImageCache, you’ll notice that there are scaling parameters.)

Platform specific Assets

These assets are available only after the Flutter framework is running. To set the APP icon or add a startup image to our application, we must use assets of a particular platform.

Set the APP icon

Update the Flutter app startup icon in the same way that you update the Flutter startup icon in your native Android or iOS app.

  • Android

In the root directory of the Flutter project, navigate to… / android/app/SRC/main/res directory, which contains various resources folder (such as mipmap – hdpi placeholder image is included in the “ic_launcher. PNG”). Just follow the instructions in the Android Developer’s guide, replace it with the resources you need, and follow the recommended icon size standards for each screen density (DPI).

Note: If you rename the.png file, you must also update the name in the Android :icon property of your androidmanifest.xml tag.

  • iOS

In the root directory of the Flutter project, navigate to… / ios/Runner. Assets in the directory. Xcassets/AppIcon. Appiconset already contains a placeholder images, only need to replace them to the appropriate size of picture, keep the original file name.

Update startup page

When the Flutter frame is loaded, the Flutter uses the local platform mechanism to draw the startup page. This launch page lasts until the first frame of the Flutter rendering application.

  • Android

To add a splash screen to your Flutter application, navigate to… / android/app/SRC/main. In res/drawable/ launch_background-xml, you can customize the launcher screen by customizable drawable (you can also change the image directly).

  • iOS

To add an image to the center of the Splash Screen, navigate to… / ios/Runner. In Assets. Xcassets/LaunchImage. Imageset, into the image, and named LaunchImage. PNG, [email protected], [email protected]. If you’re using a different file name, you’ll also have to update the Contents. Json file in the same directory. See Apple’s official standards for image sizes.

You can also fully customize the storyboard by opening Xcode. Navigate to Runner/Runner in the Project Navigator and drag in the image by opening assets.xcassets, or customize by using Interface Builder in launchscreen.storyboard