Jun's TID

screen_item.dartProvider는 앞서 다룬 Bloc과 비슷하게 단순히 앱 전역에 상태를 공유한다는 것 말고도 관심사를 분리할 수 있다는 특징이 있다. 기본적으로 플러터는 UI와 기능이 함께 작성되기 때문에 한 파일 내의 코드 양이 많아질 수 있으며, UI와 기능을 분리하기 어려워 수정 등이 불편하다. Provider를 사용하면 Provider의 주요 개념에 따라 코드를 작성하게 되고, 자연스럽게 UI와 상태를 관리하는 기능 영역을 분리할 수 있다. 바로 한번 들어가보자. Provider 패키지의 구성 요소는 기본적이로 상태(데이터)를 생산 / 소비하는 영역으로 나누게 된다. 상태를 생산하는 영역을 Provider, 소비하는 영역을 Consumer라고 한다. 상태를 생산한다는 것은 상태를 만..

그 동안 여러 예제를 작성해보면서 State를 활용하기 위해 Stateful Widget을 사용했다. 하지만 Stateful Widget을 사용하여 State를 제어하는 방식은 분명한 한계를 가지고 있는데, 그건 바로 위젯 내에서만 State 제어가 가능하다는 것이다. 즉, State는 Stateful widget이 선언된 해당 페이지에서만 관리되기 때문에 그 페이지를 벗어나면 새로운 화면이 빌드되어 해당 State가 전달되지 않는다. 따라서 앱 전역에 걸쳐 관리되는 State가 필요한데, 이런 경우에는 다양한 위젯에서 해당 State에 접근하게 되니 로직이 굉장히 복잡해지기 쉽다. Flutter는 이런 불필요하게 복잡한 로직과 코드를 최소화하고 일정하게 전역 State를 관리하기 위한 상태 관리 도구를..

기초적인 CRUD를 구성을 완료했으니, 동일한 Todo List 프로젝트에서 News 정보를 가져와 띄워줄 수 있도록 HTTP 방식으로 구현된 API를 연동해보도록 하자. 사실 Native와 Java에서 많이 다루기도 했고, 그닥 어려운 내용 없이 Http 패키지를 사용하는 방법이 전부지만, 그래도 한번 다루고 넘어가는 게 좋을 거 같다. 바로 확인해보자. 우선 News 정보를 가져와야 하니, https://newsapi.org/ 에서 로그인 후 API Key를 발급 받았다. API Doc 이나 사용법은 해당 페이지에 자세하게 설명이 되어 있으니, 참고하도록 하자. 이제 HTTP 요청을 처리해야 하니, 해당 패키지를 dependency에 추가해주자. ◎pubspec.yaml # HTTP http: ^0...

이번 포스팅에서는 직전에 했던 Todo List Project를 SQLite가 아닌 Firebase에서 제공하는 DB service를 사용하여 다시 구성해보려고 한다. Firebase는 이전에 Android native의 push 알림을 다루면서 잠시 살펴본 개념이다. Firebase는 구글의 Backend as a Service이다. 즉, 백엔드 기능을 서비스화 하여 개발자가 직접 기능을 구현하지 않아도 알아서 해준다는 것이다. Firebase의 수많은 기능 중 이번에는 직전에 했던 프로젝트를 살짝 다듬 어보며, SQLite로 DB를 다루던 것을 Firestore로 대체하려고 한다. 간단히 Firestore를 설명하자면, 앞서 사용했던 관계형 데이터베이스인 SQLite와는 달리 NoSQL 기반의 데이터..

음... flutter에서 android app의 firebase SHA-1을 연결해야 하는데 안드로이드 스튜디오도 에러 투성이에... 겨우 열었더니, 이번에는 Task 'prepareKotlinBuildScriptModel' not found in project ':app' 에러가 뜨면서 Gradle build가 안된다.. 요 놈 때문에 거의 이틀 정도를 날려 먹었으니... 나중을 위해 기록하려고 한다. Error: Task 'prepareKotlinBuildScriptModel' not found in project ':app'. 스오플에서 누가 Kotlin plug-in을 제거하라고 해서... disable 했다가 문제만 더 키웠다...ㅋㅋ 사실 build.gradle 맨 마지막 줄에 tasks.r..

지금까지 기초적인 UI를 다루는 book list 프로젝트, state를 다루는 타이머 프로젝트를 진행하며 점차 flutter와 친해지고 있는 중이다. 이번 포스팅에서는 예제 프로젝트계의 스테디셀러인 Todo List를 다루면서 데이터베이스와 API 연계와 같은 백단과 어떻게 연결하는지 확인해보려고 한다. Todo List는 다음과 같은 화면과 기능을 가지도록 구성하려고 한다. 1. 화면 - SplashScreen(초기 진입 스플래시 화면) - LoginScreen(로그인 화면) - ListScreen(홈 화면) 2. 기능 - 로그인 - 자동 로그인 - Todo 목록보기 - Todo 상세보기 - Todo 등록하기 - Todo 삭제하기 - Todo 수정하기 위 기능 목록에서 알 수 있듯, 아주 기본적인 C..

직전 포스팅에서 간단한 UI 사용을 익히는 book list 프로젝트를 살펴봤다. 이번에는 state, 상태를 좀 더 직관적으로 이해하고 사용에 익숙해지기 위해 pomodoro 타이머를 만들어 보려고 한다. Pomodoro Timer는 시간 관리 기법 중 하나로, 25분 집중 시간을 가지고 5분의 쉬는 시간을 가지는 방식이다. timer를 만들어야 하므로, 정수 타입의 timer 변수를 1초마다 상태 변경을 해줘야 하며, 버튼을 클릭하거나 작업 시간이 끝났을 때 timer가 어떤 상태인지 동적으로 변경해줘야 한다. 화면은 TimerScreen 하나만 생성할 것이며, 가지고 있는 기능은 다음과 같다. - (시작하기) 타이머 시작, 1초씩 감소, 버튼을 (일시정지, 포기하기)로 변경 - (일시정지) 타이머 ..

지금까지 Flutter의 기본 구성 요소들에 대하여 살펴보았으니, 간단하게 아주 기초적인 UI 프로젝트를 하나 만들어 보면서 화면 이동이나 화면 간에 데이터를 주고받는 연습을 좀 해보려고 한다. 아주 기본적인 list - detail 형태의 ui 프로젝트를 만들 것이기 때문에 따로 DB연결이나 기능에 대하여는 신경 쓰지 않는다. 바로 시작해보도록 하자. 우선, list와 detail에 모두 사용할 model을 하나 생성해보자. ◎lib > models > book.dart class Book { final String title; final String subtitle; final String description; final String image; Book({ required this.title, r..

지금까지 예제를 다루면서 거의 모든 클래스는 StatelessWidget을 상속 받아서 작성을 했었다. 이는 간단히 말해서 딱히 상태 변화를 주어야할 변수를 클래스 내에 가지고 있지 않았기 때문에 굳이 State라는 개념을 사용하지 않은 것이다. 오늘은 직전 포스팅에서 사용했던 FirstScreen을 가지고 State, 상태라는 개념을 살펴보려고 한다. State, 상태는 Flutter에서 변할 수 있는 데이터를 뜻한다. 그리고 이 데이터가 변할 때 화면 전체가 다시 빌드되는 것이 아닌, 데이터와 관련이 있는 위젯만 다시 빌드가 된다. 이전까지 StatelessWidget을 사용했었는데, 이 StatelessWidget에서는 변수를 선언하거나 사용하면 const로 선언해달라는 경고가 뜨는 이유가 상태를 ..

Flutter의 모든 화면 전환 관련 이벤트는 Navigator라는 위젯을 통해 처리된다. Navigator를 활용하면 특정 화면으로 이동하거나 이전 화면으로 돌아가는 등의 기능을 구현할 수 있다. 예제는 lib 하위에 screens 라는 디렉토리를 추가하여 first_screen과 second_screen Class를 생성하여 버튼으로 두 화면을전환하는 방식으로 작성하려 한다. 바로 한번 확인해보자. ◎main.dart import 'package:flutter/material.dart'; import 'package:first_flutter_ex/screens/first_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends ..