资源管理

Flutter应用程序包含两个部分，代码和资源（asset）。资源可在运行时访问。资源通常包括配置文件、图标、图片、字体等。当我们需要使用资源时，需要在根目录下的pubspec.yaml文件中进行配置。

首先在根目录下创建images文件夹，然后将需要的图片拷贝到文件夹中，接着配置pubspec.yaml文件，最后执行flutter pub get命令更新依赖，或者在IDE中使用快捷方式更新。

   assets:
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

如果资源太多，可以直接配置到父目录，这样只需要配置一行语句就能访问所有图片

   assets:
    - images/

Flutter 中不同分辨率的图片资源是使用了类似于iOS的处理方式，分为1.0x、2.0x、3.0x，除了1.0x可以放在图片目录下，我们还需要在图片文件夹中再建两个文件夹2.0x和3.0x，将对应的切图放入文件夹中，在使用的时候，Flutter框架会自动根据当前分辨率选取图片

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

iPhone各种屏幕分辨率

需要注意的是，App的启动图片不能在Flutter体系下配置，需要到原生工程中配置，参见 文档

文本文件加载

• rootBundle 每个Flutter应用程序都有一个rootBundle对象， 通过它可以访问资源

  import 'package:flutter/services.dart' show rootBundle;
  
  Future<String> loadAsset() async {
    return await rootBundle.loadString('assets/config.json');
  }
  

• DefaultAssetBundle 获取当前BuildContext的AssetBundle

  DefaultAssetBundle.of(context).loadString('assets/config.json');
  

字体资源加载

虽然不太建议，但UI设计上仍可能需要加载一些特殊的字体，这里推荐使用谷歌的 开源字体平台 下载一些字体，避免一些版权问题（该平台需科学上网）。

拷贝

从网络上下载.ttf格式的字体文件，并拷贝到对应文件夹中

配置

配置完成后更新依赖，此时需注意，添加资源后，必须重新编译打包APP，而不能使用热更新。

fonts:
  - family: PTSans
    fonts:
      - asset: assets/fonts/PTSans-Regular.ttf
      - asset: assets/fonts/PTSans-Italic.ttf
        style: italic
      - asset: assets/fonts/PTSans-Bold.ttf
        weight: 700
      - asset: assets/fonts/PTSans-BoldItalic.ttf
        weight: 700
        style: italic

  - family: Piedra
    fonts:
      - asset: assets/fonts/Piedra-Regular.ttf

  - family: ZCOOLKuaiLe
    fonts:
      - asset: assets/fonts/ZCOOLKuaiLe-Regular.ttf

  - family: ZhiMangXing
    fonts:
      - asset: assets/fonts/ZhiMangXing-Regular.ttf

使用

Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("英文常规字体:Use of fonts",style: TextStyle(
                fontFamily: "PTSans"),),
            Text("英文常规斜体:Use of fonts",style: TextStyle(
                fontFamily: "PTSans",
                fontStyle: FontStyle.italic),),
            Text("英文粗体字体:Use of fonts",style: TextStyle(
                fontFamily: "PTSans",
                fontWeight: FontWeight.w700),),
            Text("英文粗斜体:Use of fonts",style: TextStyle(
                fontFamily: "PTSans",
                fontWeight: FontWeight.w700,
                fontStyle: FontStyle.italic),),
            Text("Piedra英文字体:Use of fonts",style: TextStyle(fontFamily: "Piedra"),),
            Text("ZCOOLKuaiLe:中文字体",style: TextStyle(fontFamily: "ZCOOLKuaiLe"),),
            Text("ZhiMangXing:中文字体",style: TextStyle(fontFamily: "ZhiMangXing"),),
          ],
        ),
      )

更新：

Flutter 1.17版本发布时，谷歌已经将这些字体以第三方库的形式封装，我们可以在项目中以库依赖的形式更加简便的使用。用法详见 google_fonts库

SVG 资源加载

SVG 是一种用XML定义的用来描述二维矢量及矢量/栅格图形文件格式。使用SVG 资源，可以减小包的体积大小，更好的适配各种屏幕。

在Flutter中，有两种使用SVG资源的方式

• 将SVG转为字体文件
• 使用第三方库加载SVG图片

将SVG转为字体文件的使用方式，参考我之前的博客 Flutter 中使用svg资源

项目实际开发过程中，为了简便，通常会使用第三方库 flutter_svg 来加载SVG图片，使用方式与我们使用image类似

首先配置资源

 assets:
    - assets/close.svg

使用资源

Center(
  child: SvgPicture.asset(
    "assets/close.svg",
    color: Colors.grey,
  ),
)

使用iconfont资源

https://www.iconfont.cn/ 为我们提供了海量的矢量图标资源，在Flutter中使用这些资源也还方便，但是在下载大量资源后，仍然需要手动做一些事情，这不符合程序员能偷懒就偷懒的精神，所以我这里做了一个简单工具。

flutter_iconfont 传送门

使用说明

1. 使用git clone 或者直接download zip文件到本地

2. 进入iconfont网站，选取想要的icon到购物车，最后【下载代码】

3. 将下载的压缩包解压到任意目录，或者解压到flutter_iconfont工程的tool目录下，如下图所示。注意，如解压到其他任意目录下，在第4步运行生成工具时，需要传入解压路径

4. 进入tool目录，执行python generate.py，生成dart文件。注意，如解压到其他目录，执行时需带上解压的目录 python generate.py "dir path"。 关于Python环境的问题，generate.py同时兼容py2和py3，通常Mac os都自带有Python环境，但可能未安装BeautifulSoup库，在运行脚本前，可以通过以下命令安装python -m pip install beautifulsoup4; Windows用户如从未安装过Python环境，建议直接使用我编译好的exe程序，下载解压后将generate.exe拷贝至tool目录下点击即可执行。如需要指定资源目录，在tool目录下打开cmd命令行，执行generate "dir path"指定下载的icon资源目录

5. 进入lib目录下查看flutter_iconfont.dart文件，如下例子所示，将变量修改为适当的名字，这一步很重要，如果在iconfont中搜索的icon资源都是中文名，则生成的变量也是中文名，应修改为英文字母，还应当检查是否存在变量同名情况，确认IconFonts类无误即可。建议打开解压资源包中的html文件，对照图标进行变量命名

   class IconFonts{
    IconFonts._();
   
    static const IconData arrow_down = const IconDataEx(0xe623);
    static const IconData arrow_down = const IconDataEx(0xe61a);
    static const IconData arrow_down = const IconDataEx(0xe776);
    static const IconData Arrow_down = const IconDataEx(0xe62e);
    static const IconData Arrow_down_1 = const IconDataEx(0xe6bd);
    static const IconData Arrow_down_4 = const IconDataEx(0xe6be);
    static const IconData Arrow_down_3 = const IconDataEx(0xe6bf);
    static const IconData Arrow_down_2 = const IconDataEx(0xe6c1);
   }
   

6. 本地离线库已准备妥当，在项目工程的pubspec.yaml中添加本地库即可使用。将 path 指向你下载的flutter_iconfont库的实际路径，更新一下yaml配置文件

   dependencies:
    flutter_iconfont:
      path: F:\git_code\flutter_iconfont
   

7. 代码使用

   import 'package:flutter_iconfont/flutter_iconfont.dart';
   
   return Center(child:Icon(IconFonts.Arrow_down))
   

报错处理

需要注意，有时候pubspec.yaml文件可能会报错，那么我们应仔细检查该文件，注意它的大小写是敏感的，并使用缩进代表层级，这里的缩进应使用2个空格，而不应该是Tab 键，除非你将Tab键设置为2个空格。

公众号“编程之路从0到1”