차근차근 배움터

하트 버튼을 클릭해서 좋아하는 웹툰을 저장하는 기능을 마지막으로 담을 것이다. 어떻게 하면 핸드폰 저장소에 데이터를 담을 수 있을까? shared_preferences라는 패키지를 이용하면 된다. shared_preferences | Flutter Package Flutter plugin for reading and writing simple key-value pairs. Wraps NSUserDefaults on iOS and SharedPreferences on Android. pub.dev $ flutter pub add shared_preferences 버튼을 누를 때마다 웹툰의 ID를 가져와보자 일단 새로운 class member를 만들어야 한다. class _DetailScreenState e..

지난 시간 버튼에 outline 주는 challenger가 있었는데, 그림자까지 넣어보았다 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 DetailScreen({ super.key, require..

WebtoonEpisodeModel 여기에서 아래 코드를 빼먹는 바람에 return episodesInstances; 에러가 생겼었다. 지금은 찾아서 해결 detail_screen.dart에서 stateful위젯으로 변경한 이유는 initState메서드가 필요하기 때문이다. 그래야 getToonById와 getLatestEpisodesById가 필요하기 때문이다. ListView는 목록이 길 때 최적화에 좋게 사용하면 된다. 우리는 10개의 목록만 출력하기 때문에 Column을 이용할 것이다. 만약에 길이를 몰랐다면 ListView를 사용하는 게 맞지만 우리는 10개의 길이를 알기 때문에 Column으로 고. Collection for를 이용하고 있는데 (for문을 보고 있음) List 안에서 List를..

다음 강의를 들어가기 전에 문제가 생겼다. 일단은 두겠지만, 웹툰 썸네일을 클릭하면 애니메이션이 움직이는 것처럼 효과를 줬는데 그 움직이는 과정에서 이렇게 높이(?)넓이? 픽셀이 안 맞는다는 에러가 빠르게 지나간다. 다음에 해결하는 것으로 남겨두고 다음 강의를 진행해보자 해결되었다..........! 코드가 중간에 꼬였던 것 같아서 원본을 가져다가 복붙하다가 이리저리 하니 해결;;; WebtoonDetailModel 파일에서 w를 소문자로 작성해버렸다. 그 부분 수정 완료 class WebtoonDetailModel { final String title, about, genre, age; WebtoonDetailModel.fromJson(Map json) : title = json['title'], ab..

한 번 더 돌려야겠다......... 헷갈리는 것 투성이 ㅠㅠ 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 DetailScreen({ super.key, required this.title, re..

api_service.dart import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:toonflix/models/webtoon.dart'; import 'package:toonflix/models/webtoon_detail_model.dart'; import 'package:toonflix/models/webtoon_episode_model.dart'; class ApiService { static const String baseUrl = "https://webtoon-crawler.nomadcoders.workers.dev"; static const String today = "today"; static Futur..

gesture detector 탭 마우스 이동, 드래그, 줌 등을 감지할 수 있다. 우리가 감지하려는 건 탭 동작이고 사용자가 Webtoon widget에 탭을 누르면 Navigator.push()를 한다. Navigator는 클래스인데, 이것도 StatefulWidget이다. 이 Navigator는 우리가 만든 Detail_widget을 home 화면의 위에 올려준다. 그리고 그건 MaterialPageRoute를 사용하기에 가능하다. 스크린을 맨 위에 나타나게 할 수도 있고 x를 눌러서 자동으로 뒤로 갈 수 있다. 이게 MaterialPageRoute을 사용하는 이유다. 사실 새로운 widget을 띄우고 있을 뿐이다. Detail Screen Widget은 Scaffold를 렌더링하는데, 그 녀석이 ..

포스터를 감싸고 있는 Container를 Hero 위젯으로 감싼 후에 tag: id 값을 리스트에서의 화면과 클릭했을 때의 화면에 설정하면 아주 스무스하게 목록에서의 화면을 끌어다 중앙으로 이동하는 듯한 애니메이션 효과가 일어난다. 플러터 프레임워크에서 이런 세세한 기능까지 넣어주다니....... 프로....!

webtoon_widget.dart import 'package:flutter/material.dart'; class Webtoon extends StatelessWidget { final String title, thumb, id; const Webtoon({ super.key, required this.title, required this.thumb, required this.id, }); @override Widget build(BuildContext context) { return Column( children: [ Container( width: 250, clipBehavior: Clip.hardEdge, decoration: BoxDecoration(boxShadow: [ BoxShadow( ..

복습 ListView.builder는 한 번에 모든 item들을 보여주지 않고, 최적화해서 화면에 보이는 부분만 출력하게 한다. itemBuilder는 listview의 아이템을 만드는 역할을 한다. 그리고 이는 만들어야 하는 아이템의 위치(숫자)를 받는다. 그리고 아이템 title 을 가진 widget을 리턴한다. 그 다음에는 ListView.separated separatorBuilder 구분자를 넣어주는 기능 간격이얼마나될지만 SizedBox() 로 입력 이모티콘, 아이콘도 가능하다. builder가 너무 많다고 생각한다면 메서드로 따로 만들어낼 수 있다. return 하위에 있는 부분에 마우스를 대고 extract Method 를 클릭한다. 자식이 부모영역을 침범할 때 clipBehavior: C..