无法在Flutter中加载本地JSON文件

时间:2020-06-24 18:47:10

标签: android json flutter dart flutter-layout

我正在开发一个Flutter个人项目,其中包含一些本地存储的JSON文件

这是代码

class CCategory extends StatefulWidget {
  @override
  _CCategory createState() => _CCategory();
}
class Prod {
  String Name;
  String Image;
  Prod({ this.Name, this.Image});
  factory Prod.fromJson(Map<String, dynamic> parsedJson) {
    return Prod(
        Name: parsedJson['Name'],
        Image: parsedJson['Image']);
  }
}
Future<String> _loadProdAsset() async {
  return await rootBundle.loadString('assets/data/Dabur.json');
}
Future<Prod> loadProd() async {
  String jsonString = await _loadProdAsset();
  final jsonResponse = json.decode(jsonString);
  return new Prod.fromJson(jsonResponse);
}

class _CCategory extends State<CCategory> {

  Prod _prod;
  bool _loaded = false;
  @override
  void initState() {
    super.initState();
    loadProd().then((s) => setState(() {
      _prod = s;
      _loaded = true;
    }));
  }
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,

    ]);
    return MaterialApp(
        title: "Dabur Products",
        theme: ThemeData(
          primaryColor: Colors.black,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text("Dabur Products",
              ),
            ),
            body: _loaded?Center(

                child: ListView(

                    children: <Widget>[
                ListTile(
                leading: Image.asset('${_prod.Image}'),
                  title: Text('${_prod.Name}'),
    )
    ]

    )
    )
                : new Center(
              child: new CircularProgressIndicator(),
            )
        ),
    );

    }

    }

未加载JSON文件的内容,这是我在调试中遇到的错误

[ERROR:flutter / lib / ui / ui_dart_state.cc(157)]未处理的异常:类型“列表”不是类型“ Map ”的子类型

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

我不知道您的JSON文件的外观如何,但是看着您的错误代码,json.decode(jsonString)似乎在给您List而不是Map。我猜您的JSON文件实际上是一个列表:

[ 
  ... content ...
]

相反,您的JSON文件应如下所示(使用{ }):

{ 
  "Name": ...,
  "Image": ...
}