워라밸을 꿈꾸는 사람

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으로 상태를 변경해야 함을 명심하자.그..

2024년 11월 기준, Nomad Coders님의 강의와 flutter 버전 차이에 의해서 조금 코드가 다르다는 점을 유념하자.main.dartimport 'package:flutter/material.dart';import 'package:toonflix/screens/home_screen.dart';void main() {  runApp(const App());}// 위젯 그 자체class App extends StatelessWidget {  const App({super.key});  @override  Widget build(BuildContext context) {    return MaterialApp(      theme: ThemeData(        scaffoldBackground..

StatefulWidget에게는 lifecycle이 있다.(이벤트에 반응한다.)MyLargeTitle 위젯을 StatefulWidget으로 바꿔보자.변수를 초기화 하려면...이전처럼 그냥 해도 되지만...  @override  void initState() {    // TODO: implement initState    super.initState();  }이렇게 하는 방법도 있다. 사실은 거의 대부분의 경우에서 필요 없다고 한다.하지만, 가끔 부모 요소에 의존하는 데이터를 초기화해야 하는 경우가 있다.ex) API를 통해서 구독 정보를 업데이트 하는 경우.initState는 항상 build보다 먼저 호출되어야 한다!그리고, 단 한번만 호출된다!initState가 실행되고 그 후에 build가 실행된다..