Flutter 게시판 앱 만들기 — Flutter 게시판을 시간 순서대로 정리해보자

게시판에서 글을 볼 때, 가장 먼저 떠오르는 기준은 무엇일까?
바로 "최신 글이 위에" 있어야 한다는 점이다.

이번 글에서는 Flutter 게시판 앱에 작성 시간을 기록하고,
글 목록을 최신순으로 정렬하는 기능을 추가해보자.

---

🕒 Post 모델에 작성 시간 추가

Post 모델에 createdAt 필드를 추가한다:

class Post {
  final String title;
  final String content;
  final DateTime createdAt;

  Post({
    required this.title,
    required this.content,
    required this.createdAt,
  });

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

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      title: json['title'],
      content: json['content'],
      createdAt: DateTime.parse(json['createdAt']),
    );
  }
}

toIso8601String()은 DateTime을 문자열로 변환할 때 가장 안전한 형식이다.

---

📆 글 작성 시 현재 시간 저장

글쓰기 화면에서 글을 저장할 때 DateTime.now()를 함께 저장한다:

final newPost = Post(
  title: _titleController.text,
  content: _contentController.text,
  createdAt: DateTime.now(),
);

context.read<PostProvider>().addPost(newPost);

이제 게시글에는 작성한 시간이 함께 기록된다.

---

🔽 최신순 정렬하기

글 리스트를 출력하기 전에 최신순으로 정렬하면 된다:

List<Post> sortedPosts = [...context.watch<PostProvider>().posts];
sortedPosts.sort((a, b) => b.createdAt.compareTo(a.createdAt));

b.createdAt.compareTo(a.createdAt)을 통해 최근 글이 먼저 오도록 정렬된다.

---

📅 리스트에 날짜 표시

글 목록이나 상세 보기 화면에서 작성일을 표시해주자:

Text(
  DateFormat('yyyy.MM.dd HH:mm').format(post.createdAt),
  style: TextStyle(color: Colors.grey),
)

날짜 포맷은 `intl` 패키지를 사용해 변환한다:

dependencies:
  intl: ^0.18.0

import 'package:intl/intl.dart';

---

🌿 UX 팁

• 시간을 상대적으로 보여주기: “3분 전”, “어제”, “3일 전”
• 가장 최근 글에는 “🆕 NEW” 뱃지를 추가할 수도 있음

---

🌱 다음 단계

다음 글에서는 사용자에게 더 편안한 경험을 주기 위한
다크 모드 완전 대응 기능을 추가해보자. 🌙

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