[Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (3)

이전 포스팅에서 데이터 모델(DataModel)을 만들고 API 서비스(apiService)를 설정하여 데이터를 가져오는 작업을 마쳤습니다. 이제 이 데이터를 사용자에게 친숙한 방식으로 표시하기 위해 UI를 만들어야 합니다. 먼저, 이전 포스팅에서 설정한 apiService를 FutureBuilder 위젯에 연결해야 합니다.

FutureBuilder(future: DataApiService().getData(),),

FutureBuilder는 Flutter에서 비동기 작업의 결과를 기반으로 UI를 구축하는 데 사용되는 중요한 위젯 중 하나입니다. 주로 Future 객체와 함께 사용되며, Future 작업이 완료될 때 해당 결과를 기반으로 다양한 UI를 생성하도록 도와줍니다.

비동기 작업을 FutureBuilder와 연결하면 이 작업의 진행 상황 및 완료 후의 결과를 간단하게 처리할 수 있습니다. FutureBuilder의 주요 역할 중 하나는 비동기 작업이 완료되면 builder 함수를 사용하여 UI를 업데이트하는 것입니다.

이번 포스팅에서는 ListView.builder를 사용할 예정이며, builder 함수 내에서 ListView.builder를 구현하고, 데이터를 효율적으로 불러와서 화면에 표시할 수 있도록 data라는 변수를 사용할 것입니다.

'!' 연산자를 사용하는 이유는 변수가 데이터가 있다는 확신이 있는 경우입니다. 그러나 '!'를 사용하기 전에 항상 데이터가 null이 아닌지 확인해야 합니다. 데이터가 null인 경우 '!'를 사용하면 런타임 오류가 발생할 수 있으므로 주의가 필요합니다.

FutureBuilder(
     future: DataApiService().getData(),
     builder: (context, snapshot) {
     	var data = snapshot.data!;
        return ListView.builder(
          		
        )
     }
 )

 

ListView.builder를 사용하려면 먼저 출력할 데이터의 갯수를 itemCount 속성으로 지정해야 합니다.

이를 위해 data 변수의 length(데이터의 갯수)를 사용하면 됩니다.

그런 다음, 사용자에게 데이터를 어떻게 표시할지를 지정하기 위해 itemBuilder 속성을 사용합니다.

ListView.builder(
    itemCount: data.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(data[index].title),
        subtitle: Text(data[index].singer),
      );
    },
  );

위의 코드에서는 ListView.builder를 사용하여 데이터를 효율적으로 출력하는 방법중 하나를 보여주고 있습니다.

itemCount를 통해 데이터의 갯수를 지정하고, itemBuilder를 사용하여 각 데이터를 ListTile로 표시하고 있습니다.

 

---

Flutter에서 DataModel 및 ApiService, http 라이브러리, FutureBuilder, ListView.builder를 사용하여 데이터를 앱에 출력하는 방법에 대해 알아보았습니다. 포스팅에 사용된 API 데이터는 실제 서비스 중인 앱의 데이터 중 일부를 가져온 것이며, 공유가 불가능하다는 점을 양해 부탁드립니다. 이번 포스팅을 통해 API에서 데이터를 가져와 앱에 표시하는 기능을 만들 때 어려움을 겪지 않기를 바랍니다!

 

DataModel을 사용하여 api 데이터 화면에 보여주기 1편 -

[Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (1)

DataModel을 사용하여 api 데이터 화면에 보여주기 2편 -

[Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (2)