두잇뚜의 블로그

go_router? Flutter 공식 유튜브의 Package of the Week에서, Flutter 라우팅 패키지인 go_router가 소개되었다. Flutter 공식 유튜브의 Package of the Week에서, Flutter 라우팅 패키지인 go_router가 소개되었다. go_router는 URL 기반의 API를 사용하여 화면들을 편리하게 탐색할 수 있는 선언적 라우팅 패키지이며, URL을 사용하여 네비게이션과 딥링크와 같은 네비게이션 관련 처리를 할 수 있다고 소개하고 있다. 제공하고 있는 기능으로는 다음과 같다. "user/:id" 와 같은 구문으로 경로와 쿼리 매개변수 분석 목적 경로에 대해 여러 화면 표시 Redirection을 지원한다. 앱의 상태에 따라 사용자를 다른 URL로 다시..

Flutter 2.0 버전이 릴리즈된지 1년 정도 지난 지금, Flutter 3.0이 릴리즈 됐다. 구글에 flutter를 검색하면 "Announcing Flutter 3" 가 나타난다. Google I/O를 통해 Flutter 3에 대해 알아보라고 한다. "Announcing Flutter 3" 페이지로 이동하여 조금 내리면, 위와 같은 글을 읽을 수 있다. 유튜브 혹은 미디움에서 자세한 내용을 확인하라는 내용이다. 살짝 언급된 내용을 보면, 다음과 같다. 1. macOS, Linux 지원 2. Flutter/Firebase 완전 지원 3. Apple Silicon 지원 4. 그리고 더 많은 것들. 1, 2번을 보고 정말 Flutter가 크로스 플랫폼을 지배하겠구나 생각이 들면서도, 정말 저렇게 많은 ..

전 포스팅에서 Database를 연동하는 작업을 마쳤었다. 문제는 UI를 그려내는 Widget에서 상태와 데이터 접근을 모두 하기 때문에 역할 분리가 제대로 되지 않았다. 상태가 복잡해질수록, 데이터가 많아질수록 Widget이 가지는 역할이 너무 많아지며, 관리가 점점 어려워지고 스파게티 코드가 될 수 있다. 이러한 문제를 해결하기 위해서 Android, iOS 진영은 MVVM, MVP, RIBs 등의 아키텍처 패턴, 클린 아키텍처 패턴들을 도입한다. 클린 아키텍처 패턴은 위와 같다. 이에 대한 상세한 내용은 생략하겠다. 이를 위한 포스팅은 아니니. 아무튼, 이러한 패턴 적용의 이유는 서로의 역할을 분리하고 의존성을 줄인다. 어떤 한 모듈에 변화가 생겨도 다른 모듈에 변화가 없거나 최소화하고, 유지보수성..

화면 자체는 이전 포스팅와 다르지 않다. 현재까지의 작업은 앱을 종료하면 Todo Item들이 모두 사라진다. 런타임에만 저장하기 때문이다. 이번 포스팅은 SQLite 데이터베이스에 Todo Item을 저장하고 불러올 수 있도록 할 것이다. 작업 할 목록은 다음과 같다. sqflite, path_provider 패키지 추가 SQLite 데이터베이스 클래스 작성 데이터베이스와 상호작용을 DAO 클래스 작성 데이터베이스와 상호작용할 수 있도록 TodoModel 클래스 추가 구현 TodoListPage 수정 많아보이지만 별거 없다. 바로 고고씽! 1. sqflite, path_provider 패키지 추가 # pubspec.yaml name: ... description: ... ... dependencies:..

오늘 만들 화면은 위와 같다. 위 화면을 구성하기 위해 할일은 다음과 같다. FloatingActionButton 생성 Todo Item 추가를 위한 AlertDialog 생성 생성된 Todo Item을 추가하고 리스트를 갱신 어려운 것은 없으니 천천히 시작해본다. 1. TodoModel 작성 Todo Item을 표현하기 위한 TodoModel 클래스를 작성한다. // todo_model.dart class TodoModel { String _title; TodoState _state; final DateTime _createdTime; TodoModel(this._title, this._createdTime) { _state = TodoState.todo; } String getTitle() => _t..

이전 포스팅에서 예고했던 대로, Flutter로 간단한 TodoList App을 만들어 볼 것이다. 이번 포스팅은 TodoListApp의 기본 UI를 구성해보도록 하겠다. 위와 같은 UI를 작성할 것이며, BottomNavigationBar의 아이템을 클릭하면 현재의 아이템도 변경되도록 작업 할 것이다. 위 UI를 기반으로 기능을 붙여나가는 방식으로 진행 할 것이다. 1. 루트 페이지 만들기 class TabItem { String _title; IconData _icon; TabItem(String title, IconData icon) { _title = title; _icon = icon; } String getTitle() => _title; IconData getIcon() => _icon; }..

전부는 아니지만, 많은 모바일 앱이 공통으로 띄는 형태가 있다. (주관적입니다.) 앱의 상단에 제목, 뒤로가기, 검색 등의 옵션이 있는 AppBar 앱의 하단에 페이지를 이동할 수 있는 BottomNavigationBar 앱 혹은 앱의 현재 페이지의 대표적인 행동을 할 수 있는 FloatingActionButton 그리고 앱의 컨텐츠 위 네 가지의 형태가 가장 많이 보이는 형태가 아닐까 싶다. 대충 이런느낌?! (카카오 Oven을 사용해서 이해를 돕기 위해 만들었다. 프로토타이핑은 어렵다 ㅠㅠ) 위의 형태를 Flutter에서는 아주 손쉽게 구현할 수 있도록 제공하고 있다. 제목에도 쓰여있듯, Scaffold가 바로 그것이다. 이 포스팅 전 까지 몇 개의 Widget을 보면서 Scaffold가 쓰였었는데,..

이번 포스팅은 ListView와 유사하지만 격자 형태로 Widget을 표현할 수 있는 GridView를 알아보자. 1. GridView를 생성하는 5개의 방법 GirdView를 생성하는 방법은 5가지가 있다. GridView GridView.builder GridView.count GridView.extent GridView.custom 이번 포스팅에서 다룰 것은 1~4번의 방법이다. 2. GridView 생성자 사용 GridView의 생성자의 파라미터는 ListView의 생성자와 거의 유사하다. 추가로, ListView와 GridView는 동일한 부모를 상속하고 있다. class GridView extends BoxScrollView { ... } class ListView extends BoxScro..

이전 포스팅에서 다양한 Widget들을 배치하기 위해 Row와 Coulmn을 다뤄보았다. Row, Column에 많은 Widget을 배치하게 되어 화면을 넘어가게 되었을 때, 스크롤이 되지 않고 잘리는 모습을 확인할 수 있다. 이번 포스팅은 많은 Widget을 리스트 형식으로 배치하고 스크롤이 가능한 Widget인 ListView에 대해 알아 볼 것이다. 1. ListView를 생성하는 4개의 방법 우선, ListView를 생성하는 방법은 4개이다. ListView ListView.builder ListView.separated ListView.custom 이 포스팅에서 다룰 것은 1~3번의 방법이며, 4번은 Delegate란 개념이 포함되어 있어 추후 포스팅으로 미루겠다. 1번은 명시적으로 ListVi..

이전 포스팅에서 Text, Image, Button, Container에 대해 알아보았다. Container는 하나의 child를 가질 수 있어서 하나의 Text, Image, Button만을 표현할 수 있었다. 하지만 앱은 많은 Text, Image, Button들을 조합하여 개발된다. 이번 포스팅에서 Row, Column을 활용하여 다양한 구성요소로 화면을 구현 해 보자. 1. Row vs Column Row는 행 방향으로 Widget을 나열하며, Column은 열 방향으로 Widget을 나열한다. 각각의 생성자를 확인해보자. 생성자 파라미터의 구성을 보면 거의 동일한 것을 알 수 있다. 이 포스팅에서 다룰 파라미터는 세 가지다. MainAxisAlignment mainAxisAlignment Cro..