Flutter 게시판 앱 만들기 — 북마크로 찜한 글만 모아보기

게시글을 스쳐 지나가기만 한다면 조금 아쉽다.
내가 좋아하는 글, 나중에 다시 보고 싶은 글은 북마크 해두고 모아보면 훨씬 편리하다.

이번 글에서는 Flutter 게시판 앱에 즐겨찾기(북마크) 기능을 추가해보자.
`⭐` 아이콘 하나로 앱의 감성이 한층 살아날 수 있다.

---

📌 Post 모델에 즐겨찾기 필드 추가

기존의 Post 클래스에 isBookmarked 필드를 추가한다:

class Post {
  final String title;
  final String content;
  bool isBookmarked;

  Post({
    required this.title,
    required this.content,
    this.isBookmarked = false,
  });

  Map<String, dynamic> toJson() => {
    'title': title,
    'content': content,
    'isBookmarked': isBookmarked,
  };

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      title: json['title'],
      content: json['content'],
      isBookmarked: json['isBookmarked'] ?? false,
    );
  }
}

---

⭐ 북마크 버튼 UI

게시글 카드 혹은 상세 화면에서 북마크 아이콘을 추가한다:

IconButton(
  icon: Icon(
    post.isBookmarked ? Icons.star : Icons.star_border,
    color: post.isBookmarked ? Colors.amber : Colors.grey,
  ),
  onPressed: () {
    context.read<PostProvider>().toggleBookmark(index);
  },
)

아이콘 클릭 시 상태가 바뀌고 `notifyListeners()`로 화면을 갱신한다.

---

📦 Provider에 토글 함수 추가

void toggleBookmark(int index) {
  _posts[index].isBookmarked = !_posts[index].isBookmarked;
  notifyListeners();
  savePosts();
}

북마크 상태를 반전시킨 후 저장하면 앱을 껐다 켜도 유지된다.

---

📂 북마크된 글만 보기

북마크 탭이나 필터 버튼을 만들어서 아래처럼 필터링된 리스트를 보여줄 수 있다:

List<Post> bookmarkedPosts = context.watch<PostProvider>()
  .posts
  .where((post) => post.isBookmarked)
  .toList();

탭 전환을 통해 전체 글 ↔ 즐겨찾기 글을 오가도록 만들면 UX도 훌륭하다.

---

🌿 감성 포인트

• 북마크 아이콘에 애니메이션 효과 넣기 (`AnimatedSwitcher`, `ScaleTransition` 등)
• 북마크 탭에 “⭐ 내 마음 속 글 모음” 문구 넣기
• 북마크된 글이 없을 땐 “아직 찜한 글이 없어요” 메시지 표시

---

🌱 다음 단계

이제 내가 좋아하는 글만 따로 볼 수 있게 되었으니,
다음은 글 작성 시간 표시 & 최신순 정렬 기능을 추가해보자!

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