나는 이렇게 논다45 Flutter로 멋진 노트 앱을 만들어보자 ① - 랜덤 노트 기능 추가하기 더이상 간단하지 않기 때문에 '멋진' 시리즈로 이어서 연재합니다.이번 글에서는 이전 노트 목록을 무작위로 불러오는 랜덤 노트 기능을 추가해 보겠습니다. 이 기능은 이전에 작성한 노트를 랜덤 하게 표시하여 다시 한번 내용을 복기하고 오랫동안 기억하게 도와주는 기능입니다. 랜덤 노트 기능에서 필요한 요구사항은 다음과 같습니다.1. 사용자는 하단 네비게이션 바에 '랜덤 노트' 탭을 통해 랜덤 노트 화면으로 이동할 수 있다.2. 사용자는 랜덤 노트 카드에 있는 중요, 수정, 삭제 버튼을 이용하여 노트를 관리할 수 있다.3. 사용자는 랜덤 노트 카드를 위아래로 슬라이드 하여 다음, 이전 노트를 다시 볼 수 있다. 랜덤 노트 기능을 구현한 결과는 다음과 같습니다. - 랜덤 노트 탭을 누르면 랜덤 노트 화면이 보입니.. 2024. 11. 14. Flutter로 간단한 노트 앱을 만들어보자 ⑩ - 노트 쓰기 플로팅 버튼 추가하기 이번 글에서는 노트 목록 화면에 ‘노트 쓰기’ 플로팅 버튼을 추가해 사용자가 보다 쉽게 새로운 노트를 작성할 수 있도록 해보겠습니다.플로팅 버튼은 UI 디자인에서 화면 위에 떠 있는 형태로 배치되는 버튼을 말합니다. 보통 앱 화면의 가장자리에 둥둥 떠 있는 느낌으로 배치돼서 사용자들이 쉽게 접근할 수 있죠. Flutter 에서는 FloatingActionButton 위젯이 있어서 쉽게 구현할 수 있습니다. 우리가 만들 '노트 쓰기' 플로팅 버튼의 요구사항은 다음과 같습니다. 1. 사용자는 노트 목록 화면에 표시된 플로팅 버튼을 통해 노트 작성 화면으로 이동할 수 있다.2. 노트 카드 액션(중요, 수정, 삭제) 버튼이 나타날 때는 플로팅 버튼이 자동으로 사라져 사용자가 혼란스럽지 않도록 한다. 플로팅 버튼.. 2024. 11. 13. Flutter로 간단한 노트 앱을 만들어보자 ⑨ - 노트 목록 UI 리팩터링 이전 글에서 우리는 노트 목록 화면에 필요한 대부분의 기능을 구현했습니다. Flutter로 간단한 노트 앱을 만들어보자 ⑦ - 노트 정렬 기능 구현하기하지만 기능 구현에 초점을 맞추다 보니 사용성이나 UI는 크게 고려하지 않았는데요. 이번 글에서는 노트 목록 화면의 UI를 리팩터링 하여 사용성을 높이고 눈에도 보기 좋은 UI로 수정해 보겠습니다. 이번 글에서 수정할 UI의 결과는 다음과 같습니다. 기존 화면과 비교하여 보여드리겠습니다. - 기존에는 하나의 노트 카드에 모든 정보가 담겨있어 어떤 내용이 중요한지 알기 어려웠습니다.- 새롭게 수정한 화면에서는 노트 내용이 가장 상단에 그리고 수정 날짜만 하단에 표시합니다.- 사용자가 노트 카드를 꾹 누르면 중요, 수정, 삭제 버튼이 표시되도록 했습니다.- 추.. 2024. 11. 11. Flutter로 간단한 노트 앱을 만들어보자 ⑧ - 정렬 상태 테스트 코드 추가하기 이번 글에서는 지난 시간에 만든 NoteListState에 대해 테스트 코드를 작성해 보겠습니다.지난 글에서 우리는 다양한 정렬 기준과 오름차순/내림차순을 적용할 수 있는 정렬 기능을 구현했습니다. 이 과정에서 정렬 상태를 별도로 관리할 필요성을 느꼈고, 이를 위해 만든 것이 NoteListState였습니다. 다시 말해 NoteListState는 노트 목록의 검색과 정렬 상태를 관리하는 역할을 합니다. 다음은 NoteListState의 기능을 요약한 것입니다.- 검색 기능 : 검색어 입력 시 정확도 순으로 정렬하고, 검색어가 비워지면 기본 정렬(생성일 순)로 돌아간다.- 정렬 기능 : 노트를 생성일, 수정일, 중요도, 정확도 기준으로 오름차순/내림차순 정렬할 수 있다.- 상태 초기화 : 검색어와 정렬 상.. 2024. 11. 10. Flutter로 간단한 노트 앱을 만들어보자 ⑦ - 노트 정렬 기능 구현하기 이번 글에서는 우리가 작성한 노트를 불러올 때 중요도, 생성일시, 수정일시, 나아가 노트 검색 시에는 정확도 순으로 가져올 수 있는 '정렬 기능'을 구현해 보겠습니다. 정렬 기능의 결과는 다음과 같습니다. - 기본적으로는 생성일시 내림차순 입니다.- 우측 상단 정렬 버튼을 통해 정렬 메뉴 팝업을 열 수 있습니다.- 생성일시를 다시 한 번 클릭하면 오름차순으로 정렬됩니다.- 네 번째 이미지는 중요도순으로 정렬한 모습입니다. 주요 개발 내용1. 노트 정렬 기능 추가2. 노트 목록 화면 코드 리팩터링3. 검색어 입력 시 정확도 내림차순으로 정렬4. 노트 목록 상태관리 분리 1. 노트 정렬 기능 추가노트 목록을 정렬하기 위한 정렬 기능을 추가해 보겠습니다. 정렬 기준은 생성일, 수정일, 중요도 입니다. 이 기.. 2024. 11. 9. Flutter로 간단한 노트 앱을 만들어보자 ⑥ - 노트에 중요 표시 라벨 붙이기 이번 글에서는 우리가 작성한 노트에 라벨 속성을 추가하여 ⭐중요 표시⭐를 할 수 있도록 구현해보겠습니다. 중요 표시의 결과는 다음과 같습니다. 노트 목록 화면에 보이는 노트 카드에 별 아이콘을 추가하고 사용자가 클릭을 하면 토글이 되도록 하였습니다. 어떤가요? 굉장히 중요해 보이지 않나요? 🤭 주요 개발 내용1. 기존 노트 모델에 label 속성을 추가합니다.2. 기존 노트 목록 화면에서 노트 카드를 컴포넌트로 분리합니다.3. 노트 카드 컴포넌트에 label 수정 기능을 추가합니다. 1. 노트 label 속성 추가하기NoteLabel Enum 추가NoteLabel이라는 Enum을 추가합니다. 우선 none, important 두 가지로 정의합니다. 중요 표시를 불린 값으로 정의하지 않고 라벨En.. 2024. 11. 8. 이전 1 2 3 4 5 ··· 8 다음
