코딩강의/Flutter 로 웹툰 앱 만들기(플러터-노마드코더) (29) 썸네일형 리스트형 웹툰 만들기 - FutureBuilder 1. FutureBuilder 위젯을 통해 더 쉽게 api 값을 데이터를 가져와보자. 바로 이전에 다룬 내용에서는 stateful로 화면을 업데이트 해주고 데이터를 가져오는 식으로 했는데, 너무 번거롭다. 이번 FutureBuilder를 사용하게 되면 stateless로 초간단하게 api 값을 가져올 수 있다. - home_screen.dart api값을 webtoons 변수에 담은 후, FutureBuilder 위젯을 통해 보여주는 방식 (async await 할 필요 없음) import 'package:flutter/material.dart'; import 'package:toonflix/models/webtoon_model.dart'; import 'package:toonflix/services/a.. 웹툰 만들기 - waitForWebToons 1. fetch해온 데이터를 build화면까지 보여주자 - api_service.dart 여기서 static을 사용하는 이유는, 클래스 선언 없이 바로 프로퍼티나 메소드를 호출 할 수 있다. ex) static이 없다면 ApiService().getTodaysToons() 이렇게 ApiService클래스를 선언한 후, 메소드에 접근. 하지만 있으니, ApiService.getTodaysToons(); 이렇게 바로 메소드에 접근 가능. import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:toonflix/models/webtoon_model.dart'; class ApiService { static const Stri.. 웹툰 만들기 - fromJson 1. json 디코딩하고 하나씩 보여주기 json 데이터는 디코딩 과정을 거쳐주어야 한다. - webtoon_model.dart Webtoon json 결과 값에 대한 클래스 정의를 해준다. class WebtoonModel { final String title, thumb, id; WebtoonModel.fromJson(Map json) : title = json['title'], thumb = json['thumb'], id = json['id']; } - api_service.dart response.body의 결과 값을 jsonDecode를 통해 디코드를 진행하고, 그 값을 List에 하나씩 넣어 준다. 그리고 Future 타입은 await해서 받아온 값이 미래의 값(미정) 일 떄 쓰인다. imp.. 웹툰 만들기 - AppBar & Data Fetching 1. 기본 파일 트리 구조 2. 모듈 설치 node의 npm 처럼 dart, flutter에서도 모듈을 설치 할 수 있다. 주소: pub.dev 여기서 api 데이터 get을 할 수 있는 http 모듈을 설치해주자. 설치 방법은 install 부분 보면 안다. - main.dart import 'package:flutter/material.dart'; import 'package:toonflix/screens/home_screen.dart'; import 'package:toonflix/services/api_service.dart'; void main() { ApiService().getTodaysToons(); runApp(const App()); } class App extends Stateless.. POMODORO APP 만들기 - Date Format 1. Duration 함수를 통해서 초를 mm:ss 로 표기 되게끔 해보자. 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; int totlaPomodoros = 0; la.. POMODORO APP 만들기 - Pause Play 1. 3항 연산자를 이용해서 play 버튼과 pause버튼의 아이콘과 값이 변동되게 했다. 아래 내용을 눈으로 보면 이해가능하다 import 'dart:async'; import 'package:flutter/material.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => _HomeScreenState(); } class _HomeScreenState extends State { int totalSeconds = 1500; bool isRunning = false; late Timer timer; void onTick(Timer timer) { setS.. POMODORO APP 만들기 - Timer 1. 버튼을 누르면 1초당 값이 바뀌는 것을 만들어 보자 Dart 내부함수에 Timer를 이용하여 1초당 실행할 함수를 세팅해놓고 이전에 배운 setState를 활용하여 값을 변경해주자 class _HomeScreenState extends State { int totalSeconds = 1500; late Timer timer; void onTick(Timer timer) { setState(() { totalSeconds = totalSeconds - 1; }); } void onStartPressed() { timer = Timer.periodic( const Duration(seconds: 1), onTick, ); } totalSeconds 화면에 반영 body: Column( children:.. POMODORO APP 만들기 - User Interface 1. Flexible 개념 main.dart에서 HomeScreen을 가지고 오고 import 'package:flutter/material.dart'; import 'package:toonflix/screens/home_scree.dart'; void main() { runApp(const App()); } class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( colorScheme: ColorScheme.fromSwatch( backgroundColor: const Color(0xFFE7626C), .. Widget Lifecycle 1. React와 비슷하게 라이프 사이클을 가지고 있다. 대표적으로 initState -> build -> dispose 순으로 실행된다. flutter의 생명주기 1. initState() build를 하기 전에 항상 먼저 실행된다. 대표적으로 API를 불러올 때 사용된다. 2.dispose() 화면에서 사라질 때 실행한다. BuildContext개념 1. 부모 자식간에 데이터를 연결해주는 역할을 한다. context에는 모든 상위 요소들에 대한 정보를 담고 있다. 아래 코드를 보면, 부모 클래스인 MeterialApp에서 theme를 지정해 주었고, 하위 클래스인 MyLargeText에서 그 theme를 쓸 수 있게 되었다. import 'package:flutter/material.dart'; void main() { runApp(const App()); } class App extends StatefulWidget { const App({super.key}); @override State createState() => _AppState(); } class _AppState extends State { @override Widget build(Bu.. 이전 1 2 3 다음
