Flutter_资源管理

一、简介

Flutter APP 安装包中会包含代码和 assets（资源）两部分。Assets 是会打包到程序安装包中的，可在运行时访问。

二、常见类型的 assets 包括哪些

静态数据（例如JSON文件）、配置文件、图标和图片、字体等。

三、和包管理一样，Flutter 也使用pubspec.yaml文件来管理应用程序所需的资源

1、使用pubspec.yaml文件来管理应用程序所需的资源

举个例子:

flutter:
  assets: // assets指定应包含在应用程序中的文件
    - images/my_icon.png // 每个 asset 都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。
    - images/background.png // 每个 asset 都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。

assets指定应包含在应用程序中的文件， 每个 asset 都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。asset 的声明顺序是无关紧要的，asset的实际目录可以是任意文件夹（在本示例中是images文件夹）。
在构建期间，Flutter 将 asset 放置到称为 asset bundle 的特殊存档中，应用程序可以在运行时读取它们（但不能修改）。

2、Asset 变体（variant，这些文件包括静态数据（例如JSON文件）、配置文件、图标和图片、字体等）

构建过程支持“asset变体”的概念：在pubspec.yaml的assets 部分中指定 asset 路径后，构建过程中，会在相邻子目录中查找具有相同名称的任何文件。这些文件（包括静态数据（例如JSON文件）、配置文件、图标和图片、字体等）随后会与指定的 asset 一起被包含在 asset bundle 中。

1、例如，如果应用程序目录中有以下文件:

…/graphics/my_icon.png
…/graphics/background.png
…/graphics/dark/background.png

2、然后pubspec.yaml文件中只需包含:

flutter:
  assets:
    - graphics/background.png

那么这两个graphics/background.png和graphics/dark/background.png 都将包含在您的 asset bundle中。前者被认为是main asset （主资源），后者被认为是一种变体（variant）。

3、加载 assets

1、加载文本assets

• 通过rootBundle对象加载：每个Flutter应用程序都有一个rootBundle对象， 通过它可以轻松访问主资源包，直接使用package:flutter/services.dart中全局静态的rootBundle对象来加载 asset 即可。
• 通过 DefaultAssetBundle加载：建议使用 DefaultAssetBundle来获取当前 BuildContext 的 AssetBundle。 这种方法不是使用应用程序构建的默认 asset bundle，而是使用父级 widget 在运行时动态替换的不同的 AssetBundle，这对于本地化或测试场景很有用。

通常，可以使用DefaultAssetBundle.of()在应用运行时来间接加载asset（例如JSON文件），而在widget 上下文之外，或其它AssetBundle句柄不可用时，可以使用rootBundle直接加载这些 asset，例如：

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

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

2、加载图片assets

要加载图片，可以使用 AssetImage类。例如，我们可以从上面的 asset 声明中加载背景图片：

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

注意，AssetImage 并非是一个widget， 它实际上是一个ImageProvider，有些时候你可能期望直接得到一个显示图片的widget，那么你可以使用Image.asset()方法，如：

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

使用默认的 asset bundle 加载资源时，内部会自动处理分辨率等，这些处理对开发者来说是无感知的。 (如果使用一些更低级别的类，如 ImageStream (opens new window)或 ImageCache (opens new window)时你会注意到有与缩放相关的参数)

• 加载依赖包中的资源图片（包中的资源图片已经在包的pubspec.yaml中指定。包本身使用的资源必须在pubspec.yaml中指定。）

1、要加载依赖包中的图像，必须给AssetImage提供package参数。
假设您的应用程序依赖于一个名为“my_icons”的包，它具有如下目录结构：

…/icons/heart.png
…/icons/1.5x/heart.png
…/icons/2.0x/heart.png

2、想要加载图像，使用:

AssetImage('icons/heart.png', package: 'my_icons')
或
Image.asset('icons/heart.png', package: 'my_icons')

注意：包在使用本身的资源时也应该加上package参数来获取。

• 加载依赖包中的资源图片（包中的资源图片未在包的pubspec.yaml中指定。）

依赖包也可以选择在其lib/文件夹中包含未在其pubspec.yaml文件中声明的资源。在这种情况下，对于应用程序想要使用依赖包中未指定的图片，应用程序必须在自己的pubspec.yaml中指定包含哪些图像。 例如，一个名为“fancy_backgrounds”的包，可能包含以下文件：

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

应用程序要使用第一张图像，必须在自己的pubspec.yaml的assets部分中声明它：

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

lib/是隐含的，所以它不应该包含在asset路径中。

3、使用字体assets

在 Flutter 中使用字体分两步完成。首先在pubspec.yaml中声明它们，以确保它们会打包到应用程序中。

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

然后通过TextStyle (opens new window)属性使用字体。

// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);

• 使用依赖包中的字体文件（包中的字体文件已经在包的pubspec.yaml中指定。包本身使用的字体或自定义字体必须在pubspec.yaml中指定。）

1、要使用 依赖包 中定义的字体，必须提供package参数。
例如，假设上面的字体声明位于my_package包中。然后创建 TextStyle 的过程如下：

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
  package: 'my_package', //指定包名
);

2、想要加载图像，使用:

AssetImage('icons/heart.png', package: 'my_icons')
或
Image.asset('icons/heart.png', package: 'my_icons')

注意：包在使用本身的自定义字体时，也应该在创建文本样式时指定package参数。

• 使用依赖包中的字体文件（包中的字体文件未在包的pubspec.yaml中指定。）

依赖包也可以选择在其lib/文件夹中包含未在其pubspec.yaml文件中声明的字体文件。在这种情况下，对于应用程序想要使用依赖包中未指定的字体文件，应用程序必须在自己的pubspec.yaml中指定使用哪些字体文件。 假设一个名为my_package的包中有一个字体文件：

lib/fonts/Raleway-Medium.ttf

应用程序要使用这个字体文件，必须在自己的pubspec.yaml的assets部分中声明它：

flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf
           weight: 500

lib/是隐含的，所以它不应该包含在asset路径中。
在这种情况下，由于应用程序本地定义了字体，所以在创建TextStyle时可以不指定package参数：

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

4、设置默认全局字体的fontFamily属性:
这样，整个App的字体就统一了。