[Flutter] 클론 코딩(당근) 마무리 - ( week 2 )

이제 생성되는 Feed들이 서로 다른 것들이 출력되도록 수정한다.

 

Image

생성되는 각 피드들이 서로 다른 이미지가 출력되도록 해본다.

다른 이미지가 출력되기 위해서는 생성되는 Feed의 정보 중에 이미지의 url에 대한 정보가 달라야 한다.

url의 정보를 저장할 변수를 선언하고 해당 변수를 통해서 Feed가 생성될 때 불러올 이미지의 url로 사용되도록 한다.

final 키워드는 값이 한번 할당된 이후에 상수로 취급된다. 따라서 반드시 한 번의 값의 할당이 필요하다. 따라서 Feed 생성자 내부에 required this.imageUrl로 값을 할당해 준다.

 

Feed 생성자에서 받아온 imageUrl은 이미지 위젯에서 사용하도록 가져와야 하는데 이 변수를 사용하기 위해서는 _FeedState에서 widget.으로 접근할 수 있다.

 

이제 Feed가 생성될 때 imgUrl을 받아야 하기 때문에 home_page.dart 파일에서 에러가 발생한다.

 

Url List

URL 정보를 담은 리스트를 만들고 그 리스트를 순회하면서 이미지를 가져오도록 한다.

 

class HomePage extends StatelessWidget {

  const HomePage({super.key});

 

  @override

  Widget build(BuildContext context) {

    final List<String> images = [

      // "URL~"

    ];

images 변수는 문자열을 저장하는 List 타입으로 선언하며 final을 사용해서 반드시 한 번의 값 할당이 이루어지도록 하는 상수로 만든다. 

 

이 images 변수를 사용해서 Feed를 생성해 본다.

child: ListView.separated(

          itemCount: images.length, // 이미지 개수만큼 보여주기

          itemBuilder: (context, index) {

            final image = images[index]; // index에 해당하는 이미지

            return Padding(

              padding: const EdgeInsets.symmetric(vertical: 12),

              child: Feed(imageUrl: image), // imageUrl 전달

            );

          },

          separatorBuilder: (context, index) {

            return Divider(); // 가로 구분선

          },

        ),

images 리스트의 개수만큼 리스트가 생성되도록 itemCount 값을 리스트의 길이만큼 반복하도록 정해준다.

Feed에 전달할 url 값은 images리스트에서 하나씩 순회하면서 보여줄 것 기이기 때문에 image 변수를 생성하고 하나씩 값을 받아오도록 한다.

 

마지막으로 Feed생성자가 초기화될 때 인자값을 image로 넘겨주어 리스트 내부에 있는 url 개수만큼 Feed가 생성되면서 서로 다른 이미지가 출력되도록 할 수 있다.

 

 

추가학습)

동일한 방법으로 내부에 들어가는 텍스트 또한 피드별로 다르게 생성이 가능하다.

 

 

여기서 필요한 정보들의 리스트의 경우 하나의 ItemInfo 구조체나 클래스로 만들어서 변수를 관리하는 게 더 코드를 간소화시킬 수 있을 것 같다.

 

지금까지 만든것들은 실제로 데이터는 담고있지않은 껍데기인데이러한 것들을 View라고한다. 이 View와 데이터를 구분해놓고 작업을하면 View의 재사용이 가능하기 때문에 중요하다.