Flutter _ ListView

230601

 

---

오늘은 지난 포스팅에 이어서

Toonflix_home_screen에서

작업을 이어가겠다.

 

---

만약 snapshot에 Text를 대신할 무언가를 넣고 싶다면

위와 같이 CircularProgressIndicator()도 넣을 수 있다.

 

위와 같이

Loading 텍스트 대신로딩 아이콘이 뜬다.

 

그리고 우리의 Json 데이터와 같이

여러 항목을 나열하고 싶은 경우

ListView를 사용할 수 있다.

 

---

1. ListView

 

현재 snapshot에는

Json 데이터를 리스트로 변환한

데이터들이 들어있는데,

 

ListView를 사용하여반복문으로 webtoon에 snapshot.data!를 넣어준다.

 

이때 !가 들어가는 이유는

snapshot에 데이터가 들어있지 않으면ListView가 성립이 되지 않고

 

Dart에게 우리는 확실하게 snapshot에 데이터가 들어있다는것을확인했으니

 

불안해 하지 않게 nullsafety를 선언해 주는것이다.

 

그리고 Text를 이용해

webtoon의 title을 출력해보면?

 

기본적으로 scroll view까지 제공해주고

title이 잘 출력된다.

 

---

문제는 위와 같이 반복문으로 출력하면

전체의 데이터를 한번에 출력한다는 점이다.

 

한번에 출력하게 되면

메모리를 굉장히 많이 사용하는 문제가 발생하기 때문에

 

좀 더 최적화된 ListView를 사용해보자.

 

---

2. ListView.builder

 

ListView를 최적화하기 위해

사용되는것 중 하나로

ListView.builder가 있다.

 

ListView.builder에는 많은 기능들을 가진 위젯이 있는데

 

위의 사진처럼 scrollDirection을 사용하여

스크롤 방향을 설정할 수 있다.

 

itemCount는 Dart가 몇 개의 아이템을 build 할건지 정할 수 있다.

 

위와 같이 snapshot은

현재 우리가 Api에서 받아온 데이터이고

그 데이터는 우리가 알고 있기 때문에

data에 !( Null safety )를 붙여주고

length로 선언해 주었다.

 

그럼에도 불구하고

ListView.builder는

불평을 하는데

 

위와 같이

필수 요소 itemBuilder를

정의해 줘야하기 때문이다.

 

itemBuilder는

FutureBuilder의 builder와

상당히 유사한 구조인데

 

 

다른점은 0,1,2와 같은

Index에만 접근할 수 있다

 

이 Index로 어떤 아이템이

build 되는지 알 수 있다.

 

현재 우리의 데이터는

리스트 타입으로 변환되어서 쉽다.

 

위와 같이 webtoon 이라는

itemBuilder의

지역 변수를 하나 선언하고

data의 index로 정의가 가능하다.

 

정리를 하자면

 

ListView.builder는 모든 아이템을 한 번에 만드는 대신만들려는 아이템에 itemBuilder 함수를 실행한다.

 

그리고 실행된 itemBuilder 함수의 index 인자를 활용해

 

build 되는 아이템의 인덱스에 접근 할 수 있게 하는것이다.

 

그리고 마지막으로

ListView.builder의 return을

Text(webtoon.title)로 선언한다.

 

이제 위와 같이

오늘의 웹툰의 제목이

가로로 스크롤 되고

 

만약 itemBuilder에 

index를 중간에 프린트 하게 하면

 

스크롤 할때마다

보이는 제목의 index 번호가 출력되는것을

확인할 수 있다.

 

즉, 보여지는 아이템만 build를 하는것이다.

 

---

2-1. ListView.separated

 

현재 너무 제목끼리 붙어 있어

가독성이 떨어진다.

 

조금 개선을 해보자.

 

ListView에는 separated라는게 있는데,

위 사진과 같이 3개의 required를 요구한다.

 

하지만 builder로 선언했을때

itemBuilder와 itemCount를 선언했기에

separatorBuilder만 선언 해보자.

 

separatorBuilder을 선언하고

SizedBox로 정의해서 결과를 보면?

 

위 화면과 같이

각 item 사이에 SizedBox가 들어가

가독성이 좋아진것을 확인할 수 있다.