차근차근 배움터

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

레이아웃 연습할 겸 따라하던 숨고 디자인을 완성했다 물론 첫 페이지 ㅋㅋㅋ 여태까지 배운 것들을 이용하려고 했는데 커스텀 위젯을 인자를 받아서 입력하여 이용하기도 했다. BoxDecoration, Padding, SizedBox, TextColor Column, Row 그리고 TextButton, Expand, Flexible의 차이도 조금이나마 파악했고, crossAxisAlignment와 mainAxisAlignment의 차이도 완벽하게 이해했다 그리고 마지막으로 SingleChildScrollView를 이용해서 스크롤 기능도 이용했다. import 'package:flutter/material.dart'; void main(){ runApp(const Soomgo()); } class Soomgo ..

Expanded는 말 그대로 남은 공간 없이 꽉 채우는 것이다 Flexible은 저리 생겼다 공간이 꽉 차지 않았을 때 Flexible을 사용해서 위와 같이 나타났는데 Expanded를 쓰니까 Row 부분이 꽉 차면서 공간 배열을 해서 원하는 대로 결과가 나왔다 삭제 자세히 보기 버튼을 원하는 비율로 나눴다 Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Expanded( flex: 3, child: TextButton(onPressed: (){}, child: Text('삭제', style: TextStyle(fontSize: 16,)),), ), Expanded( flex: 5, child: TextButton(onPressed:..

class InfoButton extends StatelessWidget { // const InfoButton({Key? key}) : super(key: key); final String info; InfoButton(this.info); @override Widget build(BuildContext context) { return TextButton(onPressed: (){}, child: Text('$info', style: TextStyle(color: Colors.grey)), style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.grey[200]),), ); } } 디자인이 같은 Icon 버튼을 재사용하고 싶어서 커스텀..

플러터에서 이미지 모서리를 깎고 싶을 때 ClipRRect( borderRadius: BorderRadius.circular(10.0), child: SizedBox( child: Image.asset('ad.png'), ), ClipRRect()를 이용한다. R 두 개 들어간 게 오타인 줄 알았지만 아니닷~! 위와 같이 깎기 가능~!

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