나는 이렇게 논다/Flutter 로 간단한 노트 앱을 만들어보자17 Flutter로 간단한 노트 앱을 만들어보자 ⑤ - 노트 검색 기능 구현 (유사도 알고리즘을 곁들인) 이번 글에서는 노트 목록 화면에서 검색 기능을 추가하는 과정을 보여드리겠습니다. 검색어를 입력하면 해당 키워드, 혹은 유사한 키워드를 포함한 노트를 즉시 필터링하여 가져옵니다. 검색 기능의 결과는 다음과 같습니다. - 기존 노트 목록 화면에 2개의 노트가 있습니다.- `안녕` 이라는 검색어를 입력하면 `안녕하세요` 노트만 표시됩니다.- `안녕하파트~` 라는 검색어를 입력하면 `아파트~ 아파트~` 노트와 `안녕하세요` 노트가 함께 표시됩니다. 세 번째 이미지처럼 검색어가 정확히 일치하지 않아도 검색되는 이유는 유사도 알고리즘을 적용했기 때문입니다. 주요 구현 내용1. 검색 바 UI 추가: TextField를 이용하여 상단에 검색 바를 추가합니다.2. 검색 로직: 검색어를 입력할 때마다 노트 리스트를 필터.. 2024. 11. 7. Flutter로 간단한 노트 앱을 만들어보자 ④ - 노트 수정 기능 구현 이번 글에서는 이전까지 개발한 Flutter 노트 앱에 노트 수정 기능을 추가하는 과정을 보여드리겠습니다. 기존 노트 앱에서는 수정 기능이 따로 없이 쓰기와 조회, 삭제 기능만 있었습니다. 이번에는 수정 페이지를 추가하고 수정 로직까지 구현해 보도록 하겠습니다. 수정 기능의 결과는 다음과 같습니다. - 수정 버튼을 누르면 노트 수정 화면으로 이동합니다.- 노트 수정 화면에서 내용을 수정한 후 우측 상단의 저장 버튼을 누릅니다.- 노트를 저장하면 노트 목록 화면으로 되돌아가며 내용이 수정된 노트가 보여집니다. 주요 구현 내용1. Enums: 수정 페이지 이름을 정의하는 PageName Enum 을 추가합니다.2. NoteModel: 노트 수정 시간을 나타내는 updatedAt 필드를 추가합니다.3. N.. 2024. 11. 6. Flutter로 간단한 노트 앱을 만들어보자 ③ - GoRouter로 네비게이션 바 리팩터링 이번 글에서는 기존의 인덱스 방식의 화면 전환을 Enum 과 GoRouter 를 사용하여 리팩터링 해보겠습니다. GoRouter란?GoRouter는 Flutter의 네비게이션을 간편하게 관리할 수 있도록 도와주는 패키지입니다. URL 기반의 라우팅을 지원하며 화면 전환과 관련된 복잡한 과정을 간단히 처리할 수 있습니다. 리팩터링 이유기존의 탭 전환 방식에서는 네비게이션을 인덱스로 관리했는데, 이렇게 인덱스로 화면 전환을 관리하면 화면이 추가되거나 순서가 변경될 때 수정이 번거롭습니다. 배열 안에 정의된 화면의 순서를 모두 외우고 있어야 개발이 가능하죠. 그렇기 때문에 이번 글에서는 Enum 과 GoRouter 를 이용하여 각 화면을 명확히 구분하고, 경로 기반의 전환으로 더 명확하고 유지보수하기 쉬운.. 2024. 10. 31. Flutter로 간단한 노트 앱을 만들어보자 ② - 하단 네비게이션 바 구현 지난 글에서 Provider 패키지를 이용해 노트를 쓰고 저장하고, 목록을 조회하는 간단한 노트 앱을 만들었습니다. 하지만 노트를 쓰고 '노트 조회' 화면으로 이동하면 다시 '노트 쓰기' 화면으로 돌아갈 수 없었죠. 이번 글에서는 하단 네비게이션 바를 추가하여, '노트 쓰기', '노트 조회', '설정' 화면을 언제든지 이동할 수 있도록 구현해 보겠습니다. 아래 이미지는 네비게이션 바를 추가한 결과 화면입니다. 이런 네비게이션 바를 어떻게 만들 수 있는지, 구현 과정을 하나씩 살펴보겠습니다. 1. 하단 네비게이션 바 컴포넌트 구성네비게이션 바는 앱의 공통 UI 요소이므로 어느 하나의 view 에 속하지 않고. lib/components/bottom_navbar.dart 파일에 별도의 컴포넌트로 정.. 2024. 10. 30. Flutter 로 간단한 노트 앱을 만들어보자 ① - 노트 쓰기/조회 기능 구현 안녕하세요. Flutter 에 입문하여 앱을 출시해 보고자 간단한 노트 앱을 만들고 있습니다. 이번 글에서는 노트를 쓰고, 노트를 조회하는 간단한 기능을 Provider 패키지를 이용하여 구현해보겠습니다. 먼저 구현 결과물부터 보여드리겠습니다. 처음에는 노트를 작성할 수 있는 노트 쓰기 화면이 나타나고, 저장을 누르면 노트 목록 화면으로 이동합니다. 이때, 휴지통 아이콘을 누르면 노트를 지울 수 있습니다. 그럼 이제 프로젝트를 시작해 봅시다! 플러터 프로젝트 생성먼저 프로젝트를 생성해야겠죠. 처음에 프로젝트를 생성할 때 사용하는 명령어는 다음과 같습니다.flutter create {프로젝트 이름} 그런데 이 경우에는 프로젝트의 도메인 설정이 `com.example.{프로젝트 이름}` 으로 표시되더라고.. 2024. 10. 21. 이전 1 2 3 다음
