Flutter를 사용하여 서버 API의 데이터가 Listview에 표시되지 않습니다.

질문 제목:

Flutter를 사용하여 서버 API의 데이터가 Listview에 표시되지 않습니다.

질문 내용:

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

목록에 정적 데이터를 제공하면 목록 보기에 표시되지만 동적 데이터는 표시되지 않습니다.

해결 답변:

아래 코드를 시도하십시오. 문제가 해결되었습니다.

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

화면 모양