Flutter _ Detail Screen Upgrade2

230606

 

---

오늘은 지난 포스팅에 이어

Detail Screen에 내용을 더 추가해 볼건데

 

새로운 FutureBuilder를 만들어

episodes 데이터들을 앱에 출력해보자.

 

---

1. Episodes

 

우선 새로운 SizedBox를 생성하여

 

첫 번째 FutureBuilder와 여백을 준 후

두 번째 FutureBuilder를 선언하였다.

 

 

두 번째 FutureBuilder가 가져올

future는 episodes이고

 

snapshot에 데이터가 없다면

빈 Container를 출력한다.

 

이제 만약 데이터가 존재한다면

어떻게 출력할것인지 정해야하는데

 

Column을 출력하는 방법도 있고

ListView를 출력하는 방법도 있다.

 

ListView는 여러 요소를 다루는데 최적화 되어있지만

동시에 뭔가를 구현하는데는 까다롭기도 하고

좀 더 세부적인 작업을 하는데 좋다.

 

하지만 우리가 가져올 episodes는

약 10개정도의 데이터만 있으므로

이번에는 Column으로 구현해보자.

 

위와 같이 Column을 선언하고

Column안에 반복문을 통해episode.title를 출력해보았다.

 

 

위 사진과 같이

episode들이 화면 밖을 벗어났는데

 

SingleChildScrollView로 문제를 없애보자.

 

Wrap the Widget을 통해body의 첫 번재 Column을 SingleChildScrollView로 감싸주었다.

 

 

위와 같이 잘 나온다.

 

이제 episode를 버튼처럼 꾸며보자.

 

Text를 그냥 return하는게 아니라

 

Container를 return하고

Row를 만든 다음

Text와 Icon으로 구성해 주었다.

 

 

이제 또 Padding을 해주어야 하는데

뭔가를 생성할 때마다 Padding을 해주는것은 불편하니

 

첫 번째 FutureBuilder의 Padding을 빼고body의 Column을 Padding으로 감싸주자.

 

위와 같이 Padding을 주면?

 

깔끔하게 나온다.

 

좀 더 버튼처럼 보이게

꾸며보자.

 

 

Container에 배경색도 주고

 

모서리도 둥글게 만들고

 

Row에 Padding도 주었다.

 

그리고 Text와 Icon 색상을 흰색으로 바꿔주고

 

마지막으로 서로 떨어트려놓기 위해

 

Row에 spaceBetween을 주었다.

 

 

위와 같이

Container가 꾸며졌다.

 

그런데 컨테이너끼리

너무 붙어있어서 보기 않좋으니

 

조금 떨어트려보자.

 

Container에

margin을 주고 only(bottom)을 해주면?

 

훌륭하게 떨어졌다.

 

이렇게 오늘

Container와 FutureBuilder를 사용하여

멋진 episode 버튼을 만들어 보았다.

 

---

 

마지막으로 글씨 크기 및 굵기 조정하고

Container에 그림자까지 넣어서 완성!