使用flutter的Listview上没有显示来自服务器API的数据答案

【问题标题】：No data from sever API's is not showing on Listview using flutter使用flutter的Listview上没有显示来自服务器API的数据
【发布时间】：2021-10-05 03:46:13
【问题描述】：

我正在从服务器 API 获取数据，正在从服务器成功获取数据，但问题是当数据提供给 Listview 时，它无法显示。如何在 Flutter/dart 中显示 Listview 上的数据？

以下是从服务器 API 获取数据的代码

  List<String> jobTitles = [];
  List officeNames = [ ];
  List officeLocations = [ ];
  List jobTypes = [ ];

  Future getJobsData() async {
    var response = await http
        .get(Uri.https('hospitality92.com', 'api/jobsbycategory/All'));
    Map<String, dynamic> map = json.decode(response.body);
    List<dynamic> jobData = map["jobs"];

    if (jobTitles.length != 0) {
      officeNames.clear();
      jobTitles.clear();
      officeLocations.clear();
      jobTypes.clear();
    }
    for (var i = 0; i < jobData.length; i++) {
      jobTitles.add(jobData[i]["title"]);
      officeNames.add(jobData[i]["company_name"]);
      officeLocations.add(jobData[i]["company_name"]);
      jobTypes.add(jobData[i]["type"]);
    }

    /* print(jobTitles);
    print(officeNames);
    print(officeLocations);
    print(jobTypes);*/
  }

这是我想展示的设计代码：


  Widget listCard(jobTitle, officeName, location, jobType, onPress) {
    return Container(
      child: InkWell(
        onTap: onPress,
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Card(
                child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Color(0xC000000), Color(0xC000000)])),
                  child: ListTile(
                    leading: CircleAvatar(
                      radius: 30,
                      child: Image.asset(
                        "assets/ic_login.png",
                        height: 28,
                        width: 28,
                      ),
                    ),
                    title: Text(
                      jobTitle,
                      style: TextStyle(
                          fontSize: 16,
                          color: Colors.lightBlue,
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w500),
                    ),
                    subtitle: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Row(
                          children: [
                            Icon(
                              Icons.home_outlined,
                              color: Colors.black,
                              size: 16,
                            ),
                            Text(
                              officeName,
                              style: TextStyle(fontSize: 10),
                            ),
                          ],
                        ),

                        SizedBox(
                          width: 10,
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.location_pin,
                              color: Colors.blueGrey,
                              size: 16,
                            ),
                            SizedBox(
                              width: 2,
                            ),
                            Text(
                              location,
                              style: TextStyle(fontSize: 10),
                            ),
                          ],
                        ),
                        SizedBox(
                          width: 10,
                        ),

                        Row(
                          children: [
                            Container(
                              margin: const EdgeInsets.fromLTRB(0, 4, 0, 0),
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(colors: [
                                Colors.lightBlueAccent,
                                Colors.lightBlueAccent
                              ])),
                              child: Padding(
                                padding: const EdgeInsets.all(4.0),
                                child: Text(
                                  jobType,
                                  style: TextStyle(
                                      fontSize: 10,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white),
                                ),
                              ),
                            ),
                          ],
                        )

                        //ElevatedButton(onPressed: () { }, child: Text("Full Time", style: TextStyle(fontSize: 10),),),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

这是列表视图代码

ListView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: jobTitle.length,
                    itemBuilder: (context, index) {
                      return listCard(jobTitles[index], officeNames[index],
                          officeLocations[index], jobTypes[index], () {});
                    }),

如果我将静态数据提供给列表，它将显示在列表视图中，但不会显示动态数据。

【问题讨论】：

如果您想获取数据，请在此处关注我的回答stackoverflow.com/a/68533647/13997210
@RavindraS.Patil 我试过这种方式，但仍然没有得到回应。我的 JSON 格式是这样的：{ "jobs": [ { "title": "Laravel SENIOR DEVELOPER", "company_name": "Envato", "type": "Full Time", }, ], "jobcount": 2, "category": "All" }
你能告诉我你在 FutureBuilder 中使用 snapshot 打印你的 json 数据吗
看我下面的回答，你的问题已经解决了
在以下 url 中，您可以添加 img url 并获取 img url 并使用 NetworkImage 小部件并在该 NetworkImage 小部件中传递 url 或在此 API 中添加图像 url 如果您不这样做，我会以正确的方式得到答案了解

标签： flutter dart dart-pub flutter-listview

【解决方案1】：

尝试下面的代码你的问题已经解决了：

创建 API 调用函数：

  Future<List<dynamic>> getJobsData() async {
    String url = 'https://hospitality92.com/api/jobsbycategory/All';
    var response = await http.get(Uri.parse(url), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    return json.decode(response.body)['jobs'];
  }

编写/创建您的小部件：

Center( 
    child: FutureBuilder<List<dynamic>>(
        future: getJobsData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  var title = snapshot.data[index]['title'];
                  var company = snapshot.data[index]['company_name'];
                  var skills = snapshot.data[index]['skills'];
                  var description = snapshot.data[index]['description'];
                  var positions = snapshot.data[index]['positions'];
                  return Card(
                    shape: RoundedRectangleBorder(
                      side: BorderSide(
                        color: Colors.green.shade300,
                      ),
                      borderRadius: BorderRadius.circular(15.0),
                    ),
                    child: ListTile(
                      leading: Text(skills),
                      title: Text(title),
                      subtitle: Text(
                        company + '\n' + description,
                      ),
                      trailing: Text(positions),
                    ),
                  );
                },
              ),
            );
          }
          return CircularProgressIndicator();
        },
      ),
    ),

你的屏幕看起来像

【讨论】：