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

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

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

# pubspec.yamlflutter:    assets:        - assets/images/logo.png
// lib/main.dartImage.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.yamlflutter:    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("加载中..."),              );            }          },        ),      ),    );  }

成果如下：