차근차근 배움터

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..

State는 많이 사용하지 않는 것이 좋다. 많이 사용되지 않는다. state를 쓰지 않는 좋은 위젯과 프레임워크가 있다. 사실 ApiService 클래스를 만들지 않아도 된다. waitForWebtoons 함수 안에 넣어주어도 같은 결과를 받을 수 있다. Stateless위젯을 ful위젯으로 다시 변경 class HomeScreen extends StatelessWidget { const 뜻은 컴파일 전에 값을 알고 있다는 뜻이다. Builder는 UI를 그려주는 함수 그리고 Initial data도 전달해줄 수 있다. future도 전달 가능 snapshot을 이용하면 Future의 상태를 알 수 있다. = snapshot은 Future의 상태 Stateless means it never change..

Homescreen.dart 에서 Stateful위젯으로 변경한다. async 함수....... getTodaysToon()이 종료되는 것도 기다려야 한다. 가장 기본적인 데이터 fetching 방법을 알아봤고, 다음 시간에는 다른 방법을 보여주겠다고 한다. api_service.dart import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:toonflix/models/webtoon.dart'; class ApiService { static const String baseUrl = "https://webtoon-crawler.nomadcoders.workers.dev"; static const String today..

await을 사용하기 위해서는 비동기함수 async를 사용해야 한다. 그리고 비동기 함수로 지정하면 그 함수의 반환값 타입은 Future이다. 그리고 함수가 마무리 되었을 때의 반환할 타입을 적어주어야 한다.그리고 기다려야 하기 때문에 Future 타입을 적어주었다. 다음 시간에는 다음과 같은 Json 데이터를 어떻게 화면에 출력하는지 배울 것이다.

이제 서버로부터 받는 이 JSON 형식의 데이터를 Dart와 Flutter에서 쓸 수 있는 형태인 class 형태로 변경해야 한다. 웹툰 하나하나를 클래스로 만들어서 리스트로 변환하는 것이 우리의 미션이다. 그리고 response.body 의 형태가 String이기 때문에 우리는 JSON 형태로 Decode 해주어야 한다. Dart에서 생성자 만드는 법을 다시 기억해야 할 때...... webtoon.dart class WebtoonModel { final String title, thumb, id; WebtoonModel.fromJson(Map json) : title = json['title'], thumb = json['thumb'], id = json['id']; } api_service.dart..