반응형

DART 46

Flutter - 6.6 FutureBuilder

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

Flutter - 6.5 waitForWebToons

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

Flutter - 6.3 from Json

이번에는 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 ..

Flutter - 6.2 Data Fetching

일단 ./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: ..

Flutter - 6.1 AppBar

이제부터는 웹툰앱을 만드는 프로젝트가 시작되었다.니꼬쌤이 직접 만든 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..

Flutter - 5.4 Code Challenge

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

Flutter - 5.3 Date Format

이번에는 시간이 다 줄어들면 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 -..

Flutter - 5.2 Pause Play

단순하다. 일시정지/실행 기능을 넣으려고 한다.  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으로 상태를 변경해야 함을 명심하자.그..

Dart - 4.9 Mixins

단순하게, 그냥 여러 클래스에서 재활용하기 위해서 만드는 것이라고 생각하면 편하다.mixin Strong {  final double strengthLevel = 1500;}mixin QuickRunner {  void runQuick() {    print("Ruuuuuuuuun");  }}mixin Tall {  final double height = 1.80;}이렇게 정의한다. 원래 class로 선언할 수 있지만, 버전이 바뀌면서 mixin이라고 명시적으로 선언해야 하는 것 같다.어떻게 쓰냐고?class Player with Strong, QuickRunner, Tall {  final Team team;  Player({    required this.team,  });}with으로 쓰면 된다.상..

Dart - 4.8 Inheritance(상속)

이번에는 Inheritance. 상속.python같은 다른 언어와 비슷하다고 하는데...사실 나는 코드를 직접 배워본 적이 없고 야매로 하는 사람이라 잘 몰랐다...Human이라는 이름을 갖는 class가 있다고 하자.class Human {  final String name;  Human(this.name);  void sayHello() {    print("Hi my name is $name");  }}이제 Player이라는 이름을 갖는 class를 만들 것이다.그런데, Player도 사람일테니 Human class를 그대로 가져오고 싶다.(상속)class Player extends Human {  final Team team;  Player({    required this.team,    req..

반응형