如何将JSON资产加载到Flutter App中

Question

如何将JSON资产加载到我的Flutter应用程序中？

我的pubspec.yaml文件包含以下内容:

  assets:
    - assets/data.json

我一直试图加载数据.我试过了

final json = JSON.decode(
    DefaultAssetBundle.of(context).loadString("assets/data.json")
);

但是我得到了错误

参数类型'Future <String>'不能分配给参数类型'String'.

谢谢!

Answer 1

试用 :

String data = await DefaultAssetBundle.of(context).loadString("assets/data.json");
final jsonResult = json.decode(data);

Answer 2

您可以使用此代码:)

loadJson() async {
  String data = await rootBundle.loadString('assets/json/keyboard.json');
  jsonResult = json.decode(data);
  print(jsonResult);
}

可以在启动时加载:)

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await loadJson();
    });
  }

需要在资产上添加JSON

flutter:
  uses-material-design: true
  assets:
    - assets/json/keyboard.json

Answer 3

@Alexandre Beaudet的回答是正确的,但没有提供很多有关正在发生的事情的背景信息.

当你正在调用时loadString,它实际上是一个异步方法调用.你可以说,因为它返回的Future<value>不是一个而不是一个value.这意味着它不会立即产生String的结果,但会在将来的某个时刻产生.

在Dart中处理异步性有两种主要方式; 第一个是使用async和await,第二个是直接使用期货.请参阅异步编程的飞镖指南.

如果future.then直接使用,可以从普通函数(即从initState等)开始.您只需指定回调,并在回调中指定如何处理结果.

void printDailyNewsDigest() {
  final future = gatherNewsReports();
  future.then((news) => print(news));
}

如果你想用await@Alexandre作图,你需要标记你正在使用它的函数async,即:

Future<Void> printDailyNewsDigest() async {
  String news = await gatherNewsReports();
  print(news);
}

如果覆盖函数(即initState),还需要确保不更改返回值.这应该被dart 2的大部分时间打字所吸引,但无效 - > Future似乎不是.

最后要注意的一点是 - 如果您使用数据结果来构建小部件,您可能希望查看使用FutureBuilder.

Answer 4

我使用以下内容解析资产中的json：

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
//...
Future<Map<String, dynamic>> parseJsonFromAssets(String assetsPath) async {
    print('--- Parse json from: $assetsPath');
    return rootBundle.loadString(assetsPath)
        .then((jsonStr) => jsonDecode(jsonStr));
  }

用法异步：

parseJsonFromAssets(path)
    .then((dmap) => {
    // here you get json `dmap` as Map<String, dynamic>
    print(dmap);
}));

使用情况同步：

Map<String, dynamic> dmap = await parseJsonFromAssets('assets/test.json');