如何在Flutter应用程序中获取JSON数据？

编程问答 2022-08-14

问题描述

我下面有从服务器获取的JSON数据，我需要在pageviewbuilder以及Flutter应用程序中的listview构建器中进行获取和配置。

“列表视图”构建器（垂直滚动）嵌套在“页面视图”构建器（水平滚动）中，这是我已经配置的

要显示的东西是这样的

页面----------订单项

第16项>>第16项，第1项，第16项，第2项

第18项>>第18项，第1项，第18项，第2项，第18项 项目3

我是不熟悉JSON的新手，请指导我如何获取数据并根据需要用于上述配置。

{
    "error": "false","content": [
        {
            "comp_code": "4","comp_name": "KMT OVERSEAS","order_no": "16","soh_pk": "23660","order_items": [
                {
                    "comp_code": "4","sod_pk": "31689",},{
                    "comp_code": "4","sod_pk": "31688",}
            ]
        },{
            "comp_code": "4","order_no": "18","soh_pk": "23702","sod_pk": "31749","sod_pk": "31742","sod_pk": "31743",]
        }
    ]
}

解决方法

要从服务器获取JSON：

  1. 添加Http包。
  2. 使用Http包发出网络请求。
  3. 将响应转换为列表
  4. 将这项工作移至单独的隔离区。

有关更多信息，请查看this链接

,

您必须遵循以下步骤，并根据自己的需要自定义给定代码：

1 将此插件放置在pubspec.yaml文件 http: ^0.12.0+4

中

2 导入“ package：http / http.dart”为http； /// http我在下面使用，您可以更改它

3 构建获取数据的功能：

  Future<Map> getNews() async {
  String apiurl = "https://your url/";
  http.Response response = await http.get(apiurl);
  return json.decode(response.body);
}

4 删除一个Map变量

Map data;

5 调用异步方法内部的函数，例如：

// Future<void> main() async {} you can call inside  initstate or any custom function 
 data = await getNews();

现在您的json数据位于data内，您可以根据需要使用任何方式。 6 在您的listview.builder内部使用，如下所示

new Center(
        child: new ListView.builder(
            itemCount: data.length,padding: EdgeInsets.all(8.0),itemBuilder: (BuildContext context,int position) {
              return new ListTile(
//here posts and title are json variables that are in json file
                title: new Text("${data["posts"][position]["title"]}"),subtitle: new Text(
                  parseHtmlString("${data["posts"][position]["content"]}"),maxLines: 18,),);
            }),
arraysarraysflutter-listviewflutter-pageviewjson