목록2024/11/07 (1)

코드로 우주평화

Flutter로 간단한 노트 앱을 만들어보자 ⑤ - 노트 검색 기능 구현 (유사도 알고리즘을 곁들인)

이번 글에서는 노트 목록 화면에서 검색 기능을 추가하는 과정을 보여드리겠습니다. 검색어를 입력하면 해당 키워드, 혹은 유사한 키워드를 포함한 노트를 즉시 필터링하여 가져옵니다. 검색 기능의 결과는 다음과 같습니다. - 기존 노트 목록 화면에 2개의 노트가 있습니다.- `안녕` 이라는 검색어를 입력하면 `안녕하세요` 노트만 표시됩니다.- `안녕하파트~` 라는 검색어를 입력하면 `아파트~ 아파트~` 노트와 `안녕하세요` 노트가 함께 표시됩니다. 세 번째 이미지처럼 검색어가 정확히 일치하지 않아도 검색되는 이유는 유사도 알고리즘을 적용했기 때문입니다.  주요 구현 내용1. 검색 바 UI 추가: TextField를 이용하여 상단에 검색 바를 추가합니다.2. 검색 로직: 검색어를 입력할 때마다 노트 리스트를 필터..
나는 이렇게 논다/Flutter 로 간단한 노트 앱을 만들어보자 2024. 11. 7. 14:00
이전 Prev 1 Next 다음