Flutter _ Webtoon Card

230602

 

 

 

---

 

오늘은 우리가 출력한

웹툰 제목 위에 썸네일을 삽입해 보자.

 

---

1.  Webtoon Card

 

우선 썸네일을 삽입할 공간을 만들기 전에

코드를 좀 정리해보자.

 

snapshot에 대한

조건문의 return값인

ListView.separated 코드 로직을

 

코드 작업 표시의

Extract method를 사용하여

추출해 정리하면 깔끔해질것 같다.

 

makeList라는 이름으로

method로 추출하였고

 

하단에 위와같이

추출된 method가 생성되었다.

 

그리고 return 자리에

위와 같이 Column을 만들고

children으로 SizedBox와 makeList(snapshot)을

선언해 주었더니

 

위와 같이 error가 뜬다.

 

해당 error가 뜨는 이유는

현재 Column에는

SizedBox와 ListView(makeList)가 구성되어있는데

 

이 ListView의 높이가 정해져 있지 않아

제한 없는 높이값(unbounded height)이 넘어왔다는 것이다.

 

따라서 error를 해결하기 위해

ListView의 높이를 정해주도록 하자.

 

---

 

1-1. Expanded

 

Expanded를 살펴보면

위의 설명과 같이

 

Row나 Column 또는 Flex의 child를 확장하여

그 child가 남는 공간을 채우게 하는 기능을 제공한다.

 

위와 같이 Expaded의 child를

makeList(snapshot)으로 선언하면?

 

 

위와 같이 아주 잘 나오는것을 확인할 수 있다.

 

---

1-2. Image.network

 

자 이제 썸네일을 넣을 준비가 끝났다.

 

makeList()로 가주자.

 

makeList()의 return값을

위와 같이 Column으로 정의해주고

 

children에

Image.network()와 Text를 넣어주었다.

 

Image.network()는 url을 필요로 하는데

우리의 webtoon.thumb의 값들은

해당 웹툰의 썸네일의 이미지 주소이므로

출력이 가능하다.

 

---

 

❗ headers의 userAgent는

 

네이버에서 썸네일을 가져올때

브라우저 값을 정의 하지 않으면

 

이미지가 404 error가 뜨기 때문에

선언해 주었다.

 

var userAgent = const {
          "User-Agent":
              "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
        };

 

---

이제 위와 같이 썸네일 까지 가져오는데

이미지가 너무 커서 화면이 잘린다.

 

scroll 위젯을 추가해 볼 수는 있겠지만

깔끔하게 하기 위해

 

Container를 사용해 보자.

 

위와 같이 이미지를

적당한 크기의

Container로 감싸주면?

 

완벽하게 나오는것을 확인할 수 있다.

 

이제 텍스트의 크기좀 키우고

이미지와 텍스트 사이에 공간도 좀 넣어주자.

 

Sizedbox는 높이 10

fontSize는 22정도 주었다.

 

훨씬 괜찮아 졌다.

 

이제 우리는 Api에서 Future로 가져오는 데이터 중

thumb와 title을 동시에 보여줄 수 있다.

 

---

 

1-3. Container Decorate

 

이제 이미지가 들어있는

Container를 좀 다듬어 보자.

 

우선 clipBehavior를 통해

자식이 부모영역 침범을 제어하게 하고

 

BoxDecoration의

BorderRadius 위젯을 사용하여

모서리를 둥글게 만들었다.

그리고 그림자도 줘봤다.

 

---

현재 우리의 Container는

위의 사진과 같이 화면에 딱 붙어 있다.

 

즉 데이터의 리스트에 Padding이 없어서

바로 데이터부터 나오는데

 

이것도 해결해보자.

 

ListView.separated()의 

padding을 이용하여

 

위와 같이 수평과 수직에 padding을 주면?

 

위와 같이 Sizedbox아래에

padding이 생긴다.