코딩강의/Flutter 로 웹툰 앱 만들기(플러터-노마드코더) (29) 썸네일형 리스트형 웹툰 만들기 - Favorites 1. 자체 저장기능을 활용하여 Favorites를 만들어보자. 모바일 자체 저장을 할 수 있다. --> 다운 https://pub.dev/packages/shared_preferences - detail_screen.dart initState() 부분에서 초기에 모바일 자체에 해당 값 유무를 확인 하고 화면에 보여주는 로직이다. 내용을 천천히 보면 이해 할 수 있다. import 'package:flutter/material.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:toonflix/models/webtoon_detail_model.dart'; import 'package:toonflix/model.. 웹툰 만들기 - Url Launcher 1. 버튼을 누르면 https를 사용한 다른 화면으로 넘어가보자. 각 에피소드들에 대한 naver웹툰 화면으로 바로 가게 하자. 먼저 다음 파일 다운, https://pub.dev/packages/url_launcher 해당 위젯은 아래와 같이 사전 세팅이 필요하다. 해당 앱에서는 https만 사용하기 때문에 sms, tel은 삭제 하고 https를 추가. - detail_screen.dart Episode 위젯을 별도로 때어냈다. import 'package:flutter/material.dart'; import 'package:toonflix/models/webtoon_detail_model.dart'; import 'package:toonflix/models/webtoon_episode_model... 웹툰 만들기 - Episodes 1. Episodes를 detail 화면에 보여주자. Episodes는 데이터가 여러개라 ListView로 보여줘도되는데, 갯수가 많지 않아서 이번에는 그냥 Column 안에 Container로 버튼모양으로 데이터를 쭉 나열할 것이다. - detail_screen.dart import 'package:flutter/material.dart'; import 'package:toonflix/models/webtoon_detail_model.dart'; import 'package:toonflix/models/webtoon_episode_model.dart'; import 'package:toonflix/services/api_service.dart'; class DetailScreen extends Stat.. 웹툰 만들기 - Detail Info 1. Detail 화면에 들어가는 세부 내용을 더 넣어보자. home screen 과 마찬가지로 FutureBuilder를 통해 보여주면 된다. - detail_screen.dart import 'package:flutter/material.dart'; import 'package:toonflix/models/webtoon_detail_model.dart'; import 'package:toonflix/models/webtoon_episode_model.dart'; import 'package:toonflix/services/api_service.dart'; class DetailScreen extends StatefulWidget { final String title, thumb, id; const D.. 웹툰 만들기 - Futures 1. Detail 스크린에 받아온 Detail 정보 값을 보여주자 - detail_screen.dart 아래와 같이 이전에 만든 Apiservice 클래스의 getToonByid 메소드에 id를 넣어주려고 할 때 에러가 생긴다. 이유는 받아온 property인 id값이 초기화 되기 때문이다. 방법은 stateless를 stateful로 바꿔 주고 별도의 class를 하나더 만들어줌으로써 가능하다. 여기서 widget.id나 widget.thumb처럼 widget이 붙는 이유는, 이전에 statelss 상태였을 때는 초기화에 쓰일 인자를 다이렉트로 쓰일 경우 (다른 곳으로 보내지 않고)에는 widget이 안붙어도 되었으나, 지금은 stateful 상태이기 때문에 별도의 class가 생성되어 해당 class.. 웹툰 만들기 - ApiService 1. 추가적으로 detail api와 episode api 값을 받아오자 (detail은 id값을 입력했을 때 해당 id의 세부내용 정보를 가져오고, episode는 id값을 입력했을 때 해당 id의 최신 여러 에피소드 관련 정보들을 가져온다) model과 api부분을 추가해주자. - webtoon_detail_model.dart class WebtoonDetailModel { final String title, about, genre, age; WebtoonDetailModel.fromJson(Map json) : title = json['title'], about = json['about'], genre = json['genre'], age = json['age']; } - webtoon_episod.. ★ 웹툰 만들기 - Hero 1. 애니메이션 기능 미쳤다. 플러터는 애니메이션이나 앱에 진짜 특화된 것 같다. 이전에는 같은 컨테이너 (같은 이미지)가 네비게이션을 통해 다른 화면으로 이동했을 때, 다시 새롭게 나오는 형식인데 Hero 위젯을 사용하게 되면 동일 컨테이너(이미지)가 애니메이션 효과로 자연스럽게 다른화면으로 이동되는 모습으로 보인다. (개인적으로 앞으로의 기술시장에서는 지금도 그렇지만, 디자인의 영향력이 점차 커질 것 같다.) -webtoon_widget.dart webtoon위젯의 컨테이너 (이미지 부분)에 Hero 위젯으로 감싸주고 tag를 넣어준다. 이때 id는 home screen에서 받아온 id값이고 Navigator를 통해 Detail screen에 id 값을 다시 넘겨준다. child: Column( ch.. 웹툰 만들기 - Detail Screen 1. Card 이미지를 터치하면 Detail Screen으로 이동하는 방법을 배워보자. (Detail Screen은 애니메이션을 통해 화면이 이동하는 것 처럼 보이지만 사실 그냥 렌더링 하는 것이다.) 지금까지 파일 트리 -home_screen.dart makeList 함수 부분에서 코드가 너무 길어져서 Webtoon 위젯으로 만들어 주었다. ListView makeList(AsyncSnapshot snapshot) { return ListView.separated( scrollDirection: Axis.horizontal, itemCount: snapshot.data!.length, padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),.. 웹툰 만들기 - Webtoon Card 1. 받아온 api 값을 card 형식으로 리스트 뷰로 보여줘보자 naver 이미지 값을 가져오는데 시뮬레이터에서 403에러가 났다 . 아래 해결 방법 참조 https://gist.github.com/preinpost/941efd33dff90d9f8c7a208da40c18a9 -main.dart import 'dart:io'; import 'package:flutter/material.dart'; import 'package:toonflix/screens/home_screen.dart'; class MyHttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext? context) { return sup.. 웹툰 만들기 - ListView 1. ListView를 통해 api 값에서 가져온 값을 화면에 리스트 형식으로 쭈우우욱 보여주자. ListView 위젯만 사용하면, 모든 값이 한번에 나오고, ListView.builder를 사용하면 내가 보는 화면에서의 값만 보여주고 스크롤 하면 추가로 데이터를 가져오는 식으로 된다. 여기서 ListView.separated를 사용하면 각 값 사이에 간격도 추가해줄 수 있다. - home_screen.dart import 'package:flutter/material.dart'; import 'package:toonflix/models/webtoon_model.dart'; import 'package:toonflix/services/api_service.dart'; class HomeScreen ext.. 이전 1 2 3 다음
