Flutter_ 당근마켓 (배열 객체화 시키기)

feed에 있는 데이터를 image와 title을 각각 불러오고 있다.
ListView의 itemBuilder로 context, index로 이미지와 타이틀을 뿌려주고 있는데, 데이터 구조 상 좋지 않아서 class로 객체를 설정해준 다음 하나로 묶을 것이다.

실제 데이터는 image, title뿐만 아니라 여러가지 정보가 한꺼번에 들어오기 때문에, 실전에서도 비슷한 구조로 사용될 것 같다.

우선, feed.dart에서의 아래와 같은 파일은,

 const Feed(
      {super.key,
      //required : 필수 전달 매개 변수로 만들어줌
      //this.imageUrl : Feed 인스턴스 중 현재 인스턴스의 imageUrl를 변수로 받음
      required this.imageUrl, required this.title});

  final String imageUrl;
  final String title;

 const Feed(
      {super.key,
      required this.catData});

  final CatData catData;

caData로 바꿔주고
home_page.dart에 CatData를 설정해주겠다.
catData가 어떻게 이루어져 있는지 CatData를 class로 설정해줄 것이다.

class CatData {
	final String imgUrl;
    final String title;
    
// 여기에 생성자를 만들어준다
CatData({
	required this.imgUrl;
    required this.title;
	})

}

Dart에서 생성자는 클래스와 동일한 이름을 사용해서 정의되고 객체를 초기화하는데 사용될 값을 수신하는 매개변수를 가진다. 위에서는 imgUrl과 title이 매개변수다.

그리고나서는 원래
List<String> images = ["https://cdn2.thecatapi.com/images/6bt.jpg",...]

이렇게 되어 있던 형식을
List<CatData> catDataLisg = [CatData(imageUrl: "https://ifh.cc/g/w913Hf.jpg", title: "샌드위치 팝니다",...]
CatData가 감싸고 있는 형식으로 바꿔주고
body 부분도 고쳐준다.

 padding: const EdgeInsets.symmetric(horizontal: 10),
        child: ListView.separated(
          itemCount: catDataList.length,
          itemBuilder: (context, index) {
//body 부분도 catData로 넣어준다.
            final catData = catDataList[index];
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Feed(
			//Feed에 catData로 넣어줌
                catData: catData,
              ),
            );
          },

그리고 feed.dart로 돌아와서는 image와 title에 hompage.dart에서 내려준 값을 required this.carData로 받고 있기 때문에 값을 그대로 내려주면 된다.

 child: Image.network(
            widget.catData.imageUrl,
            width: 100,
            height: 100,
            fit: BoxFit.cover,
          ),

Image.network는 state class에 속해있고, catData는 statefulWidget에서 변수로 저장되어 있기 때문에, 이 변수를 state class에서 사용하기 위해서는 앞에 widget을 붙여줘야한다.

완성화면! :^D