차근차근 배움터

overflow문제가 발생해서 스크롤로 핸드폰 길이보다 긴 아래를 보이게 하고 싶을 때는 어떻게 한다? 아주 간단하게 wrap with Widget을 눌러서 singChildScrollView로 감싸준다! 끝!

다음 강의를 들어가기 전에 문제가 생겼다. 일단은 두겠지만, 웹툰 썸네일을 클릭하면 애니메이션이 움직이는 것처럼 효과를 줬는데 그 움직이는 과정에서 이렇게 높이(?)넓이? 픽셀이 안 맞는다는 에러가 빠르게 지나간다. 다음에 해결하는 것으로 남겨두고 다음 강의를 진행해보자 해결되었다..........! 코드가 중간에 꼬였던 것 같아서 원본을 가져다가 복붙하다가 이리저리 하니 해결;;; 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..

CircularProgressIndicator(); 아래와 같은 코드는 효율적이지 않다, 이 ListView는 스크롤바도 제공한다. 문제는 최적화되지 않고 모든 값들을 화면에 출력하고 있다는 것이다. 다른 ListView 더 전문적인 더 많은 아이템에 최적화되어 있는 ListView를 사용해볼 것이다. 이 인덱스로 어떤 아이템이 build되는 지 알 수 있다. 바로 그것이 ListView.builder 좀 더 최적화된 것 사용자가 보고 있는 ITEM만 build하는 기능을 갖고 있다. 사용자가 보고 있지 않으면 메모리에서 삭제한다. ListView.seperated에서는 글자 간 간격을 준다. (첫번째 글자는 제외한!) body: FutureBuilder( future: webtoons, builder:..

간단하게 두 차이를 설명하면 상태가 변화하냐 그렇지 않느냐이다. 체크박스 처럼 상태가 변하는 위젯은 stateful 위젯의 하위 위젯인셈이다. 자세한 설명이 궁금하다면 stateful widget과 stateless widget 차이를 잘 설명한 블로그를 발견했으니 다들 참고하시기를! Flutter 강좌 03 - Flutter에서 StatefulWidget과 StatelessWidget의 차이 정리 Flutter에서 StatefulWidget과 StatelessWidget의 차이를 정리 했습니다. 2022. 5. 21 최초작성 2022. 6. 6 StatefulWidget과 State 역할 관련 내용 설명 수정 다음 웹문서들을 참고하여 작성했습니다. https://www.geeksforgee webnau..