워라밸을 꿈꾸는 사람

FutureBuilder 부분을 다음과 같이 바꾸자.      body: FutureBuilder(        future: webtoons,        builder: (context, snapshot) {          if (snapshot.hasData) {            return ListView(              children: [                for (var webtoon in snapshot.data!) Text(webtoon.title)              ],            );          }          return const Center(            child: CircularProgressIndicator(),     ..

6.5강에서 했던 길었던 비동기 방식을 이용한 것을 이번에는 매우 간단하게 바꿀 수 있다고 한다.FutureBuilder를 이용해서.심지어 StatelessWidget으로 바꿀 수도 있다../screens/home_screen.dartimport 'package:flutter/material.dart';import 'package:toonflix/models/webtoon_model.dart';import 'package:toonflix/services/api_service.dart';class HomeScreen extends StatelessWidget {  HomeScreen({super.key});  // 6.5 waitForWebToons를 대체할 방법은?  FutureListWebtoonMod..

(6.4는 Recap 이었다.)static을 이용해서 getTodaysToons()에 들어가는 공통적인 인수들을 로드 할 때 빠르게 하도록 한다../services/api_services.dart  static const String baseUrl = "https://webtoon-crawler.nomadcoders.workers.dev";  static const String today = "today";  static FutureListWebtoonModel>> getTodaysToons() async {이렇게 세 부분에서 static을 선언해준다.static이 뭘까?참고 : https://velog.io/@tygerhwang/FlutterDart-Singleton-Static-Class-%EC%B0..

이번에는 API로 받은 Json 데이터를 flutter내부에서 사용할 수 있는 형태로 바꿔야 한다.API의 데이터는 어떻게 되어 있을까?[{...}, {...}, ... , {...}] 이렇게 되어 있다. List 안에 여러 요소가 있는 형태이다. 그리고 String이다.(주로 이렇게 되어 있는 것 같다.)그러면 각 요소를 담는 '그릇'부터 만들어보자../models/webtoon_model.dartclass WebtoonModel {  final String title, thumb, id;   WebtoonModel.fromJson(MapString, dynamic> json)      : title = json['title'],        thumb = json['thumb'],        id ..

일단 ./services/api_service.dart를 만들자.그리고, http 패키지를 사용해야 한다.https://pub.dev/ The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.dev이 링크에서 dart 패키지를 검색할 수 있다. http를 검색해서 적절한 버전을 찾아보자.그 후에 pubsec.yaml 파일에 들어가서 dependencies 밑에다가 두면 된다. 이렇게.dependencies: ..

이제부터는 웹툰앱을 만드는 프로젝트가 시작되었다.니꼬쌤이 직접 만든 api를 이용해서 만들 것이라고 함.이번에는 AppBar를 이용해서 제목을 만들었다.AppBar에는 아주 많은 옵션이 있으니... 나중에 사용할 때마다 대충 찾아보자.딱히 특별한 것은 없어서 전체 코드를 첨부한다.main.dartimport 'package:flutter/material.dart';import 'package:toonflix/screens/home_screen.dart';void main() {  runApp(const App());}class App extends StatelessWidget {  // 이 위젯의 key를 stateless widget이라는 슈퍼클래스에 보낸 것임.  const App({super.key..

'실행'버튼 밑에 '정지'버튼을 만들어서 시간 초기화를 하는기능을 추가하는 code challenge가 주어졌다.어렵지 않다.  void reset() {    timer.cancel();    setState(() {      isRunning = false;      totalSeconds = twentyFiveMinutes;    });  }이렇게 reset 함수를 추가해주고...실행하고 있는 것들을 모두 멈춰줘야 한다는 사실을 잊지 말자.                Center(                  child: IconButton(                      iconSize: 60,                      color: Theme.of(context).cardCo..

이번에는 시간이 다 줄어들면 Pomodoros밑에 있는 숫자가 하나씩 커지도록 할 것이다.1.  void onTick(Timer timer) {    // 0초가 되면...    if (totalSeconds == 0) {      // Pomodoro 숫자 증가 + 초기화      setState(() {        totalPomodoros = totalPomodoros + 1;        isRunning = false;        totalSeconds = twentyFiveMinutes;      });      timer.cancel();    } else {      // state 변경      setState(() {        totalSeconds = totalSeconds -..

단순하다. 일시정지/실행 기능을 넣으려고 한다.  bool isRunning = false;이 변수를 이용해서(false로 초기화) 실행중인지, 실행중이 아닌지 구분한다.  void onStartPressed() {    timer = Timer.periodic(const Duration(seconds: 1), onTick);    setState(() {      isRunning = true;    });  }   void onPausePressed() {    timer.cancel();    setState(() {      isRunning = false;    });  }이렇게 두 함수를 이용해서 실행하는 함수와 일시정지하는 함수를 만들었다.setState으로 상태를 변경해야 함을 명심하자.그..

import 'dart:async';이 패키지에서 가져와야 한다.  int totalSeconds = 1500;  // 사용자가 버튼을 누를 때만 타이머가 생성되게 할 예정이라 late로 초기화를 미루자.  late Timer timer;  void onTick(Timer timer) {    setState(() {      totalSeconds = totalSeconds - 1;    });  }  void onStartPressed() {    timer = Timer.periodic(const Duration(seconds: 1), onTick);  }start 버튼을 누르면...Timer.periodic이 정해진 간격에 한번씩 함수를 실행하도록 한다.여기에서는 1초 간격으로 함수 onTick을..