Flutter _ Futures & Detail Screen Upgrade

230605

 

---

오늘은 저번 포스팅에서

만들었던 함수들을 활용하여

 

데이터를 불러와

디테일 페이지에 내용을 채워보자.

 

---

1. Futures

우선 가장 먼저

webtoon_detail_screen.dart 파일로 이동해서

 

위와 같이 webtoon을 정의하는데

중요한것은 getToonById()를

id로 받아야 한다는 것이다.

 

그런데 여기서 문제가 생긴다.

DetailScreen에 선언된 id는

생성자로써 초기화된 변수 id이기 때문에

 

ToonflixApiService의

getToonById의 id와 매칭이 안되는 것이다.

 

조금 다른 방법을 써야할것 같다.

 

우선 DetailScreen을

StatefulWidget으로 바꾼다.

 

그러면 위와 같은 변화가 생긴다.

우리가 잘쓰던 key값들에 widget이 붙는데,

이러한 이유는 StatefulWidget이 되었기 때문이다.

 

StatefulWidget이 된 이상

별 개의 class가 되었고

해당 key값들이 어디서 왔는지

정의해 줘야하는 것이다.

 

WebtoonWidget 클래스에서

우리는 Navigator.push를 이용하여

DetailScreen()으로

 

title, thumb, id를 전달하는데이러한 전달 받은 요소들을 State에서 사용하고 싶을때

 

widget을 붙여 사용한다.

 

즉 요약하면

State에서 사용하는 build에

위에서 받아온 값들을 사용하고 싶을 경우

widget을 붙여 사용해야하고

 

그때의 widget은 부모 클래스즉 DetailScreen을 의미한다.

 

이러한 State 클래스 안에

Future 타입의 값을 받고 싶다면

 

위와 같이 late로 Future 타입 변수를 선언한 다음

initState()를 이용해

webtoon을 초기화한다.

 

 

똑같이 WebtoonEpisodeModel에 전달할

episodes의 정의와

 

initState()를 이용해

episodes까지 초기화 해주자.

 

이제 우리는

Future로 받아올 모델의 값들에

특정 인자가 필요할 경우

 

StatefulWidget으로 변환하여

late로 변수를 선언하고

 

initstate()를 통해

초기화 한다는것을 알았다.

 

---

2. Create Detail UI

이제 값들도 잘 전달받았으니

UI를 만들어 보자.

 

본문의 메인 Column의 첫 번째 Row다음으로

FutureBuilder를 선언한다.

 

future로 받을 데이터는위에서 선언한getToonsById로 가져온id에 해당하는 정보.webtoon을 가져온다.

 

이제 드디어 해당 id에 해당하는

웹툰의 줄거리가 나온다.

 

조금 지저분하니 정리를 해주자.

 

우선 컨테이너 아래에

SizedBox를 삽입해주고

 

Padding과 Text 크기도 조정해 주었다.

 

훌륭한것 같다.

 

이제 우리는 snapshot.data에서

about만 가져오고 싶은게 아니라

다른 나머지 요소도 가져오고 싶기에

 

Padding 안의 Text를 Column으로 묶어주자.

 

위와 같이 Column으로 묶어주고

중간에 SizedBox로 여백을 준다음

위의 Text 코드를 복사해

about에서 genre(장르)를 출력해보면?

 

위와 같이 잘 출력된다.

 

이번에는 다른 요소들도 추가해보고

정렬도 시켜보자.

 

우선 요소들이 들어있는

Column을 CrossAxisAlignment.start로 정렬해준다.

 

그리고 text interpolation을 이용하여

위와 같이 2개의 데이터 genre와 age를 출력하고

bold 처리 해주면?

 

위와 같이 잘 출력된것을 확인할 수 있다.

 

다음 포스팅에서는

episode를 추가해 보겠다.

---