이제 Stateful에 대한 개념을 모두 익혔으니 State가 있는 앱을 만들어보도록 하자. 다들 알겠지만 뽀모도로 타이머라고 25분 일하고 5분 쉬는 등을 보여주는, 생산성에 좋은 앱을 하나 만들 것이다! 여기 사이트를 참고하여 UI를 짜보고, State를 넣어보자. Stateless UI 구현 목표를 설정하고, 얼마나 했는지, 시간이 지나면 파란색, 시간 중에는 빨간색 등등 상태를 구현할 것이 많다. 일단은 UI부터 구현할 것이다. 우선 색상은 적혀있어서 색상부터 구현하고 시작하겠다. ThemeData를 통해 구현

항상 변동되는 위젯, 컴포넌트 등은 수명이 있다. 리액트, 뷰 등에서도 유명한 Lifecycle에 대해서 알아보자. 막 암기해야한다고 혈안이 되지 말고 이정도는 이해하고 넘어가야 상태 변경을 통한 렌더링도 잘 하고, 어떠한 상태 관련 오류도 잘 잡아낼 수 있을 것이다. 가볍게 보고 넘어가자. 생명 주기 나는 리액트를 거쳐서 플러터도 배우고 있는데 생명 주기가 또 나왔다. 이때 의문점이 들었다. >생명 주기란 건 정확히 뭘까?? 왜 있을까?? 그래서 일단 생명 주기에 대한 전략에 대해서 간략하게 정리하고 넘어가겠다. 여러 구글링을 해보고 내린 결론은 UI 요소의 생성, 갱신, 소멸 등의 과정을 관리하기 위해 존재하는 전략이다. 라이프사이클의 전략을 사용하는 다양한 이유들을 함축적으로 표현해보겠다 : 1. 초기화와 정리 라이프사이클 메소드를 통해 애플리케이션 또는 컴포넌트(위젯)의 초기화 및 정리 작업을 수행할 수 있다. 초기화 단계에서는 필요한 데이터

그동안 플러터로 개발해오면서 BuildContext를 애써 무시하며 Stateless, State 등을 렌더링 해왔다. 위 부분 중 BuildContext가 무엇인지 알아볼 것이다. Theme 그동안 우리가 각 제목과 본문 등의 Text에 직접 스타일을 넣어서 꾸며줬다. 사실 그러한 하드코딩은 플러터를 제대로 이용하지 않는 식이었다. MaterialApp 위젯의 theme을 이용해서 색과 글씨 크기 등을 재사용 가능하도록 편하게 설정 할 수 있다. 위 코드는 My Large Title Text를 꾸며주기 위해 하드코딩했지만 위 부분을 추가해서 우리 Title에 titleLarge를 적용토록 할 것이다. BuildContext 여기서 BuildContext가 나온다. 위 코드를 보면은 MyLargeTitle라고, 커스텀 위젯을 만들어서 분리가 돼 _AppState의 자식으로 속해져버렸다. 근데 `_AppState

그 전까지 정적인 Stateless UI를 만들었다. 이제 상태 값을 가진 Stateful UI를 만들어 보자. 그 전에 설명을 좀 하고 넘어가겠다. Stateful UI 플러터에서 Stateful UI는 상태(state)를 가지고 있는 사용자 인터페이스를 구현하는 방법이다. > 동적인 UI를 만들고 사용자와의 상호작용에 따라 상태가 변하여 UI를 업데이트할 수 있게 해줌. 데이터의 변경에 따라 UI를 실시간으로 업데이트할 수 있음. StatefulWidget을 확장하여 클래스를 만든다. StatefulWidget은 두 가지 클래스로 구성된다. StatefulWidget 클래스는 변경 가능한 상태를 포함 State 클래스는 해당 상태를 관리하고 UI를 업데이트하는 역할을 담당

전편에 이어서 UI를 따라 만들어보자 아래 Wallets에 있는 지갑들을 따라 만들 것이다. 간단하게 코드 작성하고 설명하고 넘어가겠다. 원 코드 Wallets 제목 만들기 SizedBox 제작 Wallets와 View All 스타일 Row로 횡 순으로 만든 다음 컬러 및 사이즈, 웨이트 설정 TextStyle의 Colors에 withOpacity 메소드가 있는데 const를 부모에 썼다면 에러가 나올 것. 왜냐하면 Opacity 자체가 컴파일할 때 알기 힘든 값이라 상수로 받아들이기 힘들어서 Opacity에 const를 적용 못한다. 그래서 부모 위젯 중에 const를 삭제하고 다시 저장하면 된다! `mainAxisA

이번엔 플러터로 아래 사진에 보이는 버튼을 만들 것이다. 버튼은 이곳 저곳에 쓰이고, 문구와 색만 달라지기 때문에 재사용 가능하게 버튼을 만들어 볼 것이다! 기본 재료 배치하기 이제 전판에 어떻게 하는지 설명을 다 했으니 축약해서 설명하겠다. 이거 인스턴스 만드는 과정 다 기술하면 너무 오래 걸려서,, 사실,, SizedBox로 간격 띄우기 Total Balance 문구 추가 및 꾸미기 SizedBox로 간격 띄우기 \$5 194 382문구 추가 및 꾸미기 $가 명령어에 들어가기 때문에 \ 추가 SizedBox 수평으로 버튼이 들어가니 Row를 씀. 이렇게 했다.![](https://velog.velcdn.com/images/ok

이제 플러터로 UI를 따라 구현해보는 시간을 갖겠다. UI 참고 사이트로 유명한 드리즐에서 하나를 골라 이대로 구현해보겠다. 할 수 있는 한 최대한 비슷하게 해볼거시다. 거의 똑같이 보이게 할 것이다. 최대한 같은 색깔을 사용해볼 거고 할 수 있을 만큼 같은 size, font, spacing, 장식들, margins을 써보자! 이렇게 만들어 보고, 위젯들을 사용하는 데에 익숙해 질 것이다. 점검하고, 무슨 Option들을 조합해서 하는지 등등 플러터를 사용하는 데에 익숙해져 보자. Header 시작 이제 시작을 해볼 것이다. 전 코드를 그대로 이어서 할 것이다. 시작 해보자. 요소 만들기 ![](https://velog.velcdn.com/images/okko8522/post/3af90d51-63ea-40e1-877e-8d426fc1c5

다트를 한지가 가물가물해서 어제 했던 Hello Flutter를 가지고 다시 복습하면서 특징을 다시 보고, Dart 문법으로 활용해보는 시간을 갖겠다. Flutter Code 어제 했던 플러터 구조는 아래와 같다. Dart 문법의 미친 활용성 new 생략 그때 배운 것처럼 Dart의 장점은 new 생략이다. 위 코드를 보며 설명해 주겠다. 위에서부터 App, Widget, BuildContext, MaterialApp, Scaffold, AppBar, Text, Center 전부 다 각자 클래스의 인스턴스들이다. 근데 이상하지 않는가? 자바나 JS, TS 등에서의 클래스를 봤을 때 항상 new라는 생성자를 꼭꼭 사용했어야 했다. 플러터도 버전 2.XX 까지는 그랬다. 하지만 플러터 3.0이 릴리즈 되고 나서 new를 생략해도 됐다!!! 이게 엄청난 기능이다. Hello Flutter 하나 하는데 저기에 쓰인 인스턴스만

전편에 이어서 다 했다면 위 사진처럼 잘 뜰 것이다. 핫로딩이 되는 모습을 볼 수 있다. 이제 Hello Flutter를 출력해보자. 시작하기 만들었던 Flutter 초기 단계에서 main() 빼고 지우고, 새로 시작하자. 그러면 위처럼 남을 것이다. Widget 일단 runApp()이란 아래 사진과 같다. runApp은 Widget이라는 것을 argument로 받는다. 여기서 Widget은 리액트의 컴포넌트라고 생각하면 된다. 리액트가 CDD 방식으로 컴포넌트를 조합해서 만든다면, 플러터는 위젯이라는

여기에서는 플러터를 설치, 사용, Playground 사용하는 법을 배워보자 일단 설치 전에 DartPad에 플러터 구동을 확인할 수도 있다. import 'package:flutter/material.dart'를 집어 넣어서 말이다. 설치할 수 없거나 귀찮다면 여기서 앱코드 이런 걸 집어넣는다면 구동이 되는 걸 확인 할 수 있다. 일단 https://docs.flutter.dev/get-started/install 로 가서 설치를 보자. SDK 설치 OS마다 다르긴 하지만 비슷한 과정을 밟는다. SDK를 받고 플러터가 구동될 수 있는 환경을 만든다. 나는 맥 환경에서 구동할 거기 때문에 Mac에서 설치한다. 맥은 CPU 환경이 인텔맥, 애플 실리콘

전편에 플러터의 구동 원리를 봤는데 플러터 엔진을 지나서 트리를 만들어 캔버스에 그린다고 했다. 핫한 언어 리액트 네이티브와 연결지으며 플러터를 사용할 수 있는 환경을 더 이해해보자. 좀 중구난방식으로 쓸 터이니 관심있는 주제만 골라 보길 추천한다. Flutter vs React Native OverView Flutter : 개발 언어: Dart, 생소한 언어로 러닝 커브 높음 UI 라이브러리: 자체 UI 라이브러리인 Flutter 위젯을 사용 플러터 네이티브 컴포넌트 사용: 사용자 인터페이스를 위해 네이티브 컴포넌트 대신 자체적으로 구축한 위젯 사용 성능: 네이티브 수준의 성능을 제공하며, 프레임워크 자체가 모든 렌더링을 관리하므로 빠르고 부드러운 애니메이션을 구현하기 용이 핫 리로딩: 애플리케이션 개발 중 실시간으로 변경사항을 반영할 수 있는 핫 리로딩 기능 제공 커뮤니티: 큰 개발자 커뮤니티와 활발한 생태계가 형성되어 있음. RN보단 작음

Flutter를 배우기 전 꼭 Dart를 배우고 오자! 다양한 문법들이 쏟아져 나오니 기본 언어부터 익히고 들어가야 Flutter의 문법이나 활용도도 잘 배울 수 있기 때문 Flutter > Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트 Dart의 프레임워크라고 보면 된다. 참고로 Flutter라는 이름은 빠른, 경쾌한 움직임을 의미하는 영어 단어이다. 사용자 인터페이스의 부드럽고 화려한 애니메이션 및 효과를 강조하는 의미를 담고 있다나 뭐라나~ 쓰는 이유 1. 크로스 플랫폼 플러터의 가장 큰 특징이자 쓰는 이유 중 가장 큰 것은 동일한 코드베이스 하나로 크로스 플랫폼 개발을 할 수 있는 것이다. 플러터가 처음에 출범했을 땐 IOS, 안드로이드로만 개발할 수 있게 만들어졌었는데 맥OS, 윈도우, 웹(JS), 심지어 임베디드까지 가능하다. 그래서 엄청 빵 뜬 것! 가장 강조되는 것 중 하나가 웹인데 예를 들어 [구글 I/O 포토부스](http

노마드코더 챌린지를 하는 도중 과제가 있었다. 조건은 아래와 같다. 과제 조건 Challenge goals: Using everything we learned, make a Dictionary class with the following methods: add: 단어를 추가함. get: 단어의 정의를 리턴함. delete: 단어를 삭제함. update: 단어를 업데이트 함. showAll: 사전 단어를 모두 보여줌. count: 사전 단어들의 총 갯수를 리턴함. upsert 단어를 업데이트 함. 존재하지 않을시. 이를 추가함. (update + insert = upsert) exists: 해당 단어가 사전에 존재하는지 여부를 알려줌. bulkAdd: 다음과 같은 방식으로. 여러개의 단어를 한번에 추가할 수 있게 해줌. [{"term":"김치", "definition":"대박이네~"}, {"term":"아파트", "definition":

다트의 꽃, OOP 개발을 위한 클래스형 문법을 배워보자!!! 가장 어려우면서 가장 집중해야하는 부분이다! ㅠ Dart에서 클래스는 데이터와 데이터를 조작하는 함수를 포함하는 일종의 청사진(blueprint)이다. 클래스를 사용하면 객체를 생성하고 이 객체를 사용하여 데이터를 저장, 조작, 쿼리할 수 있기에 객체들을 만들고, 관리하고 사용하는 방법을 아는 것이 중요하다!! 클래스 선언 및 인스턴스 생성 바로 예시를 뜯어먹어보자. 클래스 Player 생성 Player의 인스턴스 생성. 인스턴스는 당연히 객체다! 인스턴스를 할당한 변수 player를 씹고 뜯고 맛보고 즐기기 이런 식으로 하면 된다. 많이 익숙하지? this의 사용 근데 다른 언어의 OOP와의 차이점이 this를 안쓰는 모습이다. 다트에서는 this를 안써도 알아서 추적해주기에 안써도 된다. 애초에 다트에서 this를 쓰지말라고 권고하고 있기도 한다. 만약 아

오랜만이다. 이번 시간엔 다트의 함수 문법에 대해 알아보긋다. Dart Function 가장 흔하게 보이면서 필수인 main도 다트 함수다. 앞에 void, String 등의 함수 리턴 타입와 소괄호, 중괄호가 있으면 함수다. 이렇게 말이다. 당연히 실행해주려면 main함수에 넣어서 파라미터를 넣어준 후 실행해주자. 함수 반환 타입 아까 본 void를 칭한다. 예시를 보며 설명하겠다. 차이점을 알겠는가? 2번째 sayHello는 에러가 난다. 그 외 sayHello들은 에러가 안났다.

여기서 먼저 알아둬야할 것은 다트는 OOP 언어. 즉, 진정한 객체 지향 언어다. 리마인드하고 다음으로 넘어가자 자료 유형 기본 재료 다트의 다양한 자료형이 있다. 우리가 아는 String 뿐만 아니라 bool, int, double 등이 있다. String은 따옴표로 이루어진, bool은 true/false로 이루어진, int는 숫자, double은 소수점까지를 뜻한다. 여기서 특징은 거의 모든 자료형이 Object로 이루어져있다. 엥? 뭐지?! JS랑 TS는 원시형과 참조형(Object)로 나뉘어져 있는데 다 그렇다고?! 왜냐면 다트는 진정한 '객체 지향 언어'이기 때문이다. String 부분인 타입 선언자를 우클릭하고 type definition, 형식 정의로 이동하면은![](https://velog.velcdn.com/images/okko8522/post/38e22e43-50ef-448d-8a0c-d91578a25335/im

Flutter를 이제 배울 것이다. 천천히 그리고 정확하게 말이다. Flutter는 Dart 언어로 이루어져 있는 프레임워크다. Next.js보다 더 직접적이고, UI 디자인까지 있는 다트 언어 도구다. 그러므로 Dart를 먼저 배워보겠다. Dart > 구글의 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어 객체 지향 언어 TS의 객체 지향 프로그래밍의 모습과 흡사하다. 걍 Flutter를 위한 언어다. 하지만 기초인 JS를 잘 알아야 TS, React를 잘 하듯이, Flutter를 위해 다트를 좀 배워놔야 편하다. 배워보자. 왜 Dart? 구글의 연동성(Dart와 Flutter는 같은 식구) 리액트를 더 잘만들고 싶어서 JS를 수정할 수 없음. 하지만 Flutter를 위한 Dart라면? 구글이 그렇게 수정을 한다면? 언어 그 자체를 수정하는 것임. 사기임; 최적화된 크