使用 flutter 在 Listview 上未显示来自服务器 API 的数据 [英] No data from sever API's is not showing on Listview using flutter

问题描述

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

I'm fetching data from server APIs, The data is being successfully fetched from the server but the issue is that when the data is provided to Listview it cant be shown. How can I show the data on Listview in a flutter/dart?

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

Following is the code for fetching data from server API's

  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);*/
  }

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

Here is the design code that I wanted to show:

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

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

If I provide the static data to list it will show on listview, but dynamic data is not being shown.

推荐答案

Try To below Code 你的问题已经解决:

Try To below Code Your problem has been solved:

创建 API 调用函数:

Create API Call Function :

  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 your Widget :

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 + '
' + description,
                      ),
                      trailing: Text(positions),
                    ),
                  );
                },
              ),
            );
          }
          return CircularProgressIndicator();
        },
      ),
    ),

你的屏幕看起来像

这篇关于使用 flutter 在 Listview 上未显示来自服务器 API 的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！