Flutter- 在 Flutter 中如何获取本地的 json 文件并解码

文章目录
方式一 : rootBundle.loadString
方式二 : DefaultAssetBundle.of(context).loadString
两种方式的区别
在 Flutter 中获取本地的 json 文件，博文中提供两种方式。这里先在路径 "assets/config/anime.json" 下新建本地的 json 文件，如下图所示

然后在 pubspec.yaml 配置文件中添加如下内容 

接下来是如何获取本地 json 文件。

方式一 : rootBundle.loadString

可以使用 rootBundle.loadString 的方式获取本地 json 文件。如下代码所示

 List _animes = []; // 动漫列表

  @override
  void initState() {
    rootBundle.loadString("assets/config/anime.json").then((value) {
      var map = json.decode(value); // 解码
      _animes = map["animes"]; // 列表赋值
    });
    super.initState();
  }

然后直接遍历数组即可，如下代码所示（已省去无关代码）

 ..._animes.map(
   (e) => Row(
     children: [Text("${e['id']}"), Text(e['name'])],
   ),
 )

效果图如下所示

方式二 : DefaultAssetBundle.of(context).loadString

使用 DefaultAssetBundle.of(context).loadString 的方式获取本地 json 文件。

最终的效果和方式一是一样的，直接上代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("加载本地json文件")),
      body: FutureBuilder(
        future: DefaultAssetBundle.of(context).loadString("assets/config/anime.json"),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          var map = json.decode(snapshot.data.toString());
          _animes = map["animes"]; // 列表赋值
          // 因为获取 json 文件是异步的，如果还没有获取到数据，则显示 loading 组件
          if (snapshot.connectionState != ConnectionState.done) {
            return Center(child: CircularProgressIndicator());
          }
          return Card(
            child: Column(
              children: _animes
                  .map((e) => Row(children: [Text("${e['id']}"), Text(e['name'])]))
                  .toList(),
            ),
          );
        },
      ),
    );
  }

两种方式的区别
关于这两种加载本地 json 文件的区别，以下两条是我找到的相关资料，仅供参考

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

原文链接：https://blog.csdn.net/qq_42351033/article/details/118669642