차근차근 배움터

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

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

api service 파일에는 일반적인 class를 작성할 것이다. Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs. pub.dev 설치하는 방법에는 여러가지 방법이 있다. 첫번째 설치하는 방법 두번째는 VS Code 터미널에 flutter pub add http 입력 Error: No pubspec.yaml file found. This command should be run from the root of your Flutter project. 이런 에러가 떴다 그 원인은 ro..

AppBar const App({super.key}); ID 기능을 하는 것 같은 key가 있고, 이 key는 stateless widget인 super class로 전달된다. 위젯은 가끔 키가 있고, 아이디 같은 기능이고, identify하기 위한 위젯이다. home_screen.dart 파일이랑 main.dart 파일 어떻게 연결하는 지 까먹었는데 Container() child: 안에 HomeScreend을 입력해주면 된다! home_screen.dart import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(B..

해당 강의에서는 아래와 같은 더 많은 것을 배울 것이다. 데이터 패칭, 다른 패키지, 인터넷, api of the phone, how to store the data on the phone disk 네이버 웹툰 어플처럼 요일별 웹툰을 확인할 수 있게 만들 것이고 실제 클릭했을 때는 네이버 웹툰으로 연결하는 기능을 만들 것이다. 이 데이터를 이용할 것이다.

코드 챌린지 지금까지 만든 화면에는 존재하지 않는 Restart 하는 기능을 넣어보자! when we want to make our screen changed.... we have to put inside of setState() TextButton( style: ButtonStyle( shadowColor: MaterialStateProperty.all(Colors.red), backgroundColor: MaterialStateProperty.all( Theme.of(context).cardColor, )), onPressed: resetTimer, child: Text( 'RESET', style: TextStyle( color: Theme.of(context) .textTheme .headline..

format 함수를 만들어서, 숫자를 시간으로 변환하는 기능을 만들었다. 확실히 보기 좋아진 모습! import 'dart:async'; import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => HomeScreenState(); } class HomeScreenState extends State { static const twentyFiveMinutes = 1500; int totalSeconds = twentyFiveMinutes; bool isRunning = false; late Timer time..