[웹툰 앱 만들기] 웹툰의 회차 정보 불러오기

웹툰의 에피소드를 상세 화면에 나타내는 방법을 기록한다. 방법은 대체로 웹툰의 포스터, 제목, 연령대 등을 불러오는 방법과 같다.

 

1. model 및 api service 만들기

https://soaringwave.tistory.com/220

[웹툰 앱 만들기] 웹툰 상세 화면 정보 불러오기

이전 글에서 에피소드들의 정보를 가져와 저장하는 방법을 작성해뒀다.

 

2. 상세화면으로 정보 가져오기

class _DetailScreenState extends State<DetailScreen> {
  late Future<WebtoonDetailModel> webtoon;
  late Future<List<WebtoonEpisodeModel>> episodes;

  @override
  void initState() {
    super.initState();
    webtoon = ApiService.getToonInfoById(widget.id);
    episodes = ApiService.getEpisodesInfoById(widget.id);
  }
  
  // ...

 

3. 가져온 정보 FutureBuilder를 통해 나타내기

우선 가져오는 에피소드의 양이 적고 한정되어 있기 때문에 Column 위젯의 children으로 에피소드들을 나타낸다. 그러다 보면 에피소드가 많아 스크롤을 해야 하기 때문에 화면을 SingleChildScrollView로 변경한다.

https://github.com/soaringwave/Flutter-studying/commit/1a26251b8128799afe4bacc2816e94e2f539022d

Show episodes' title and change structure · soaringwave/Flutter-studying@1a26251

 

4. 스타일 설정하기

나중에 해당 제목과 아이콘을 클릭하면, 해당 회차의 url로 이동하는 설정을 넣기 위해 개별 회차마다 Container로 나타냈다. 그리고 padding, margin, boxdecoration을 이용해 꾸몄다.

https://github.com/soaringwave/Flutter-studying/commit/202dc1ac771a6bb60f51a65388dc0a43b9d50377

https://github.com/soaringwave/Flutter-studying/commit/8dcaaf26d13b44d80087c7654609d9d3e6d790d7

Set margin and padding between episodes · soaringwave/Flutter-studying@8dcaaf2

---

https://nomadcoders.co/flutter-for-beginners/lectures/4174

All Courses – 노마드 코더 Nomad Coders