本文已参与「新人创作礼」活动，一起开启创作之路。

这是【Flutter 问题系列第 31 篇】，如果觉得有用的话，欢迎关注专栏。

在 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: <Widget>[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: <Widget>[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 文件，便介绍到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语

Google 的 Flutter 越来越火，截止 2021年7月12日 GitHub 标星已达 124K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到稀土博客中，希望自己学习的同时，也可以帮助更多的人。