검색 기능 구현 — 키워드로 빠르게 메모 찾기

메모가 많아질수록, 필요한 메모를 찾는 시간이 늘어난다.
검색 기능은 사용자의 시간을 아끼는 가장 강력한 도구다.

이번 글에서는 Flutter 메모 앱에 키워드 기반의 검색 기능을 구현하는 방법을 정리한다.
실시간 필터링부터 DB 쿼리 기반 검색까지 두 가지 방식으로 살펴보자.

---

🔍 기본 구조: 실시간 검색

가장 직관적인 방식은 전체 메모 리스트 중에서 텍스트로 필터링하는 방식이다.

✅ 상태 변수 정의

List<Memo> _allMemos = [];
List<Memo> _filteredMemos = [];
String _keyword = "";

✅ 검색어 입력 필드

TextField(
  decoration: InputDecoration(
    hintText: '메모 검색',
    prefixIcon: Icon(Icons.search),
  ),
  onChanged: (value) {
    setState(() {
      _keyword = value;
      _filteredMemos = _allMemos.where((memo) =>
        memo.content.toLowerCase().contains(_keyword.toLowerCase())
      ).toList();
    });
  },
)

✅ 리스트 출력

ListView.builder(
  itemCount: _filteredMemos.length,
  itemBuilder: (context, index) {
    return MemoCard(memo: _filteredMemos[index]);
  },
)

사용자가 검색어를 입력할 때마다 메모를 필터링해 _filteredMemos로 업데이트한다.

---

📦 DB에서 바로 검색하는 방식

메모가 많아지고 앱 재시작 시 초기화되는 문제를 방지하려면 DB 쿼리에서 직접 검색하는 방식이 더 효율적이다.

Future<List<Memo>> searchMemos(String keyword) async {
  final db = await MemoDatabase.database;
  final result = await db.query(
    'memos',
    where: 'content LIKE ?',
    whereArgs: ['%$keyword%'],
    orderBy: 'id DESC',
  );
  return result.map((e) => Memo.fromMap(e)).toList();
}

📌 사용 예시

onChanged: (value) async {
  final results = await searchMemos(value);
  setState(() {
    _filteredMemos = results;
  });
}

이 방식은 앱이 커지더라도 성능 유지에 유리하고, isPinned, tags까지 조건 검색이 가능하다.

---

🧱 검색 UI 개선 팁

• 최근 검색어 자동 완성
• 검색어 하이라이트 표시
• 검색 결과 없을 때 안내 메시지 출력

사용자 경험을 고려한 작은 개선이 검색 기능의 만족도를 높여준다.

---

🧘 마무리하며

기록은 찾을 수 있어야 가치가 있다.
Flutter 메모 앱에 검색 기능을 더한다는 것은 사용자가 기억을 더 빠르게 꺼낼 수 있게 돕는 일이다.

검색은 기능이 아니라, 기억의 지도다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.