Flutter 读取应用资源并显示

在 flutter 中，如果需要加载资源的话，需要在 pubspec.yaml 指定 APP 所需要的资源。

这样的话，指定的每个 Asset （资源）都会被打包在 APP 中，并且在 APP 运行时可以访问到这些资源。

最常见的 Asset 类型就是图片，指定图片资源后即可以在 APP 页面使用图片控件加载资源了。

# pubspec.yaml

flutter:
    assets:
        - assets/images/logo.png

// lib/main.dart

Image.asset('assets/images/logo.png')

使用 rootBundle 对象访问资源

APP 可以通过引入 services 包使用 rootBundle 对象来访问资源。

import 'package:flutter/services.dart';

比如访问文件 test.txt，txt 文件内容是 测试文字，可以使用 rootBundle 对象的 loadString 方法。

当然，前提也是需要在 pubspec.yaml 中指定资源才能访问的到。

rootBundle.loadString('assets/txt/test.txt').then((data){
    print(data);
});

// 测试文字

因为 loadString() 返回的是 Future<String>，所以需要用 then() 接受返回的 String 类型的数据。Future 类似于 ES6 中的 Promise，当异步任务执行完成后会把结果返回给 then()。

使用 FutureBuilder 控件配合加载资源

FutureBuilder 控件可以根据 Future （异步）任务的进度进行不同的处理。

FutureBuilder 有三个子属性，分别是：

• future 异步任务获得数据的代码
• initialData 初始化数据加载
• builder 回调函数，处理异步处理中的快照，即异步处理的每一步状态变化都会触发回调函数

具体回调参数对象的属性可以自行网上查询。

下面是一段配合 FutureBuilder 控件实现的加载 markdown 文件并使用 markdown_widget 包进行解析显示到页面的代码。

同样是需要在 pubspec.yaml 进行资源指定，可以使用指定文件夹的形式，当前文件夹的资源都会被放进 AssetBundle。

# pubspec.yaml

flutter:
    assets:
        - assets/md/

加载并显示 markdown 文件：

// 引入必要的包

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:markdown_widget/markdown_widget.dart';

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('文本组件'), centerTitle: true),
      body: Container(
        margin: EdgeInsets.all(15),
        child: FutureBuilder(
          future: rootBundle.loadString('assets/md/text.md'),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              // 判断已经返回数据则让 markdown 解析控件进行解析显示
              return MarkdownWidget(data: snapshot.data);
            } else {
              return Center(
                child: Text("加载中..."),
              );
            }
          },
        ),
      ),
    );
  }

效果如下：

markdown.png