Flutter 게시판 앱 만들기 — 실시간으로 게시글 찾기

게시글이 하나 둘 쌓이다 보면, 어느 순간부터 **찾기 어려워진다**.
그럴 때 필요한 게 바로 검색 기능이다.

이번 글에서는 Flutter로 만든 게시판 앱에 **실시간 검색 기능**을 추가해보자.
간단한 TextField와 ListView.builder, 그리고 .where()만으로 구현할 수 있다.

---

🔎 검색 입력창 UI

상단에 TextField를 추가해서 검색어를 입력받자.

TextField(
  decoration: InputDecoration(
    hintText: '검색어를 입력하세요',
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
    filled: true,
    fillColor: Colors.grey[200],
  ),
  onChanged: (value) {
    setState(() {
      _searchQuery = value;
    });
  },
)

onChanged를 통해 입력값이 바뀔 때마다 _searchQuery 상태를 갱신한다.

---

📃 검색 조건 필터링

검색어에 해당하는 글만 리스트에 출력되도록 .where()로 필터링하자:

List<Post> _filteredPosts = context.watch<PostProvider>().posts
  .where((post) => post.title.contains(_searchQuery))
  .toList();

이 리스트를 ListView.builder에 전달하면 된다:

Expanded(
  child: _filteredPosts.isEmpty
    ? Center(child: Text('검색 결과가 없습니다.'))
    : ListView.builder(
        itemCount: _filteredPosts.length,
        itemBuilder: (context, index) {
          final post = _filteredPosts[index];
          return Card(
            margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: ListTile(
              title: Text(post.title),
              subtitle: Text(post.content, maxLines: 1, overflow: TextOverflow.ellipsis),
              onTap: () {
                // 상세 보기 이동
              },
            ),
          );
        },
      ),
)

---

✨ 감성적인 UX 팁

• 검색창 위에 “🔍 어떤 글을 찾고 계신가요?” 텍스트 넣기
• 검색어가 없을 땐 전체 리스트 출력, 입력하면 필터링
• 검색 결과가 없을 땐 “😢 검색 결과가 없어요” 표시

이런 디테일이 사용자의 경험을 더 따뜻하게 만들어준다.

---

🌱 다음 단계

다음 글에서는 자주 보는 글을 저장하는 즐겨찾기(북마크) 기능을 만들어보자.
자주 보는 글, 따로 모아볼 수 있으면 더 좋겠지?

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