날짜별 뉴스 필터링 기능 구현하기

뉴스 앱을 만들다 보면 사용자가 원하는 날짜의 기사만 보고 싶어하는 경우가 생긴다.
특히 시사/경제 뉴스일수록 "어제 뉴스만 보기" 같은 필터링 기능이 중요하다.
이번 글에서는 Flutter에서 DatePicker를 통해 날짜를 선택하고, 해당 날짜에 해당하는 뉴스만 필터링하는 UI를 구현해보자.

---

📅 날짜 선택을 위한 DatePicker 구현

void _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime.now(),
  );

  if (picked != null && picked != _selectedDate) {
    setState(() {
      _selectedDate = picked;
      _filterNewsByDate();
    });
  }
}

Flutter에서 제공하는 showDatePicker()는 직관적인 UI를 제공해
모바일에서도 터치로 쉽게 날짜를 선택할 수 있다.

---

🧠 날짜 기준 뉴스 필터링 로직

API에서 모든 데이터를 받아왔다는 전제 하에, publishedAt 필드 기준으로 뉴스 리스트를 걸러보자.

void _filterNewsByDate() {
  final selected = DateFormat('yyyy-MM-dd').format(_selectedDate);
  final filtered = _allNews.where((news) {
    final date = DateFormat('yyyy-MM-dd').format(news.publishedAt);
    return date == selected;
  }).toList();

  setState(() {
    _filteredNews = filtered;
  });
}

시간까지 비교하면 오차가 생기기 쉬우니, 날짜만 포맷해서 비교하는 것이 중요하다.

---

🖥️ 전체 UI 구성 예시

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("뉴스"),
      actions: [
        IconButton(
          icon: Icon(Icons.date_range),
          onPressed: () => _selectDate(context),
        )
      ],
    ),
    body: _filteredNews.isEmpty
        ? Center(child: Text("해당 날짜의 뉴스가 없습니다"))
        : ListView.builder(
            itemCount: _filteredNews.length,
            itemBuilder: (context, index) {
              return NewsCard(news: _filteredNews[index]);
            },
          ),
  );
}

상단 앱바에 날짜 아이콘을 배치하고, 선택된 날짜에 따라 ListView를 업데이트하는 구조다.

---

📌 팁: 서버 측 필터링이 가능한 경우

데이터가 너무 많거나 성능상 부담이 된다면, 날짜를 서버로 전달해 필터링된 결과만 받아오는 방식도 좋다.

// 예시
final url = 'https://example.com/news?date=2025-05-27';
final response = await http.get(Uri.parse(url));

이 방식은 앱의 부하를 줄이고, 필요한 데이터만 받아오기 때문에 실무에서 많이 쓰인다.

---

🧘 마무리하며

뉴스는 시간의 흐름을 따라가고, 사용자는 그 흐름 중 원하는 지점을 찾는다.
날짜 필터링 기능은 단순한 기술이 아니라, 사용자의 정보 탐색 경험을 돕는 도구다.

오늘의 뉴스만 보고 싶은 누군가를 위해, 날짜 선택을 선물하자.

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