프로젝트/웹툰 앱 만들기12 [웹툰 앱 만들기] 웹툰 상세 화면 정보 불러오기 여러 웹툰의 포스터 중 특정 포스터를 선택하면 해당 웹툰의 정보를 표시하는 상세 페이지를 다음과 같이 설정했다. 추후에 에피소드에 관한 정보들도 화면에 나타낼 예정이기 때문에 에피소드의 정보를 불러오는 과정도 이 글에 포함하였다. 순서는 크게 3가지로 나뉜다. 1. 웹툰 정보 불러오는 모델 및 api service 구현하기 이전에 웹툰의 정보를 불러와 썸네일(포스터)을 표시했던 것처럼, 정보의 model과 api service를 구현해야 한다. class WebtoonDetailModel { final String title, about, genre, age; WebtoonDetailModel.fromJson(Map json) : title = json['title'], about = json['abou.. 2023. 10. 19. [웹툰 앱 만들기] Hero flutter에서 Hero라는 위젯을 이용해서 다음 영상처럼 특정 요소가 연결되는 것처럼 보이게 만들 수 있다. 방법은 다음과 같다. Hero( tag: id, child: Container( clipBehavior: Clip.hardEdge, width: 260, // ... child: Image.network( thumb, ), ), ), 여러 웹툰이 나와 있는 화면의 특정 웹툰 포스터에 해당하는 위젯을 Hero 위젯으로 감싼다. Hero 위젯의 경우 tag가 필수이기 때문에 json으로 전달받은 정보 중 하나인 id로 설정해준다. Hero( tag: id, child: Container( clipBehavior: Clip.hardEdge, // ... child: Image.network( thu.. 2023. 10. 15. [웹툰 앱 만들기] ApiService로 웹툰 정보 받기 먼저 flutter에서 ApiService를 통해 데이터를 받아올 수 있도록 http를 다운받는다. https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 위 공식 페이지에서 Installing의 설명을 참고해 터미널에서 명령어를 입력하거나 pubspec.yaml 파일에 특정 문구를 작성하고 저장하면 된다. import 'package:http/http.dart' as http; class ApiService { final String baseUrl = 'https://webtoon-crawler.nomadcoders.workers.dev'.. 2023. 10. 14. [웹툰 앱 만들기] GestureDetector과 detail screen 먼저 이전에 만들었던 웹툰 정보를 바탕으로 웹툰의 포스터, 제목을 나타내는 위젯을 따로 Webtoon 파일로 분리했다. https://github.com/soaringwave/Flutter-studying/commit/5b3e02f3606329a68b939e57b6f543faac71506b Make Webtoon model and use it · soaringwave/Flutter-studying@5b3e02f soaringwave committed Oct 14, 2023 github.com 이젠 웹툰 정보를 클릭했을 때 클릭한 웹툰의 정보를 더 볼 수 있는 detail screen으로 이동할 수 있도록 설정한다. 먼저 웹툰 정보가 클릭되었음을 감지하고자 웹툰 Column을 GestureDetector로.. 2023. 10. 14. 이전 1 2 3 다음
