来自服务器 API 的数据未使用 flutter 显示在 Listview 上

Question

我正在从服务器 APIs 获取数据，已成功从服务器获取数据，但问题是当数据提供给 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], () {});
                    }),

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

Answer 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'];
  }

Write/Create 您的小部件：

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();
        },
      ),
    ),

你的屏幕看起来像

来自服务器 API 的数据未使用 flutter 显示在 Listview 上

No data from sever API's is not showing on Listview using flutter

flutter

dart

dart-pub

flutter-listview