속보는 뉴스 앱의 존재 이유 중 하나다.중요한 뉴스가 떴을 때, 사용자가 앱을 켜지 않아도 알려주는 기능 — 푸시 알림은 뉴스 앱에 있어 핵심 기능이다.이번 글에서는 Firebase Cloud Messaging (FCM)을 활용해 Flutter 앱에 푸시 알림을 추가하고,뉴스 속보 알림을 수신하는 구조를 정리해본다.📦 필요한 패키지 설치// pubspec.yamldependencies: firebase_core: ^2.24.2 firebase_messaging: ^14.7.4iOS의 경우 GoogleService-Info.plist 추가,Android는 google-services.json 추가가 필요하다.🚀 FCM 초기화 및 권한 요청void setupFirebaseMessaging() asyn..

뉴스 앱은 기본적으로 온라인 기반이다.하지만 출근길 지하철이나 해외 여행 중, 네트워크가 없는 순간에도 읽던 기사를 다시 보고 싶을 때가 있다.이 글에서는 Flutter에서 오프라인 모드를 구현하는 방법,즉 네트워크가 없을 때 캐시된 뉴스 데이터를 불러오는 전략을 정리해본다.📦 기본 아이디어핵심 흐름은 단순하다.뉴스를 받아올 때 JSON으로 SharedPreferences에 저장앱 시작 시 네트워크 연결 여부 확인오프라인이면 로컬에 저장된 JSON을 불러오기이 구조는 작지만 강력한 사용자 경험을 만든다.📡 네트워크 상태 확인// pubspec.yamldependencies: connectivity_plus: ^5.0.2Future hasNetwork() async { final result = a..

밤이 되면 자동으로 앱이 어두워지고, 눈의 피로를 덜어주는 다크 모드는 이제 필수 기능이다.Flutter에서는 이 다크 모드를 비교적 쉽게 적용할 수 있다. 단, 제대로 설계하지 않으면 디자인이 망가질 수도 있다.이번 글에서는 ThemeMode 설정부터 커스텀 다크 테마 구성까지 뉴스 앱에 다크 모드를 적용하는 전체 흐름을 정리한다.🌓 ThemeMode란?Flutter의 MaterialApp에는 theme, darkTheme, themeMode라는 세 가지 설정이 있다.MaterialApp( theme: lightTheme, darkTheme: darkTheme, themeMode: ThemeMode.system, // 또는 .dark / .light)ThemeMode.system: 디바이스 설정..

사용자가 뉴스를 보다가 ‘좋아요’를 누르거나, ‘북마크’로 저장하는 기능은 단순해 보이지만 사용자 경험을 극대화시켜준다.뉴스앱을 앱답게 만드는 요소 중 하나가 바로 이 내가 저장한 뉴스 목록이기 때문이다.이번 글에서는 Flutter로 좋아요/북마크 기능을 추가하고, 이를 저장하고 불러오는 흐름을 다뤄보자.❤️ 좋아요 기능: UI + 상태만 관리좋아요는 서버 연동 없이 UI와 앱 내 상태만 관리해도 충분히 사용자 경험을 향상시킬 수 있다.✅ 상태 정의class News { final String id; final String title; bool isLiked; // ← UI에서만 변경 News({required this.id, required this.title, this.isLiked = fal..

뉴스를 더 보기 좋게 나누는 방법은 다양하지만, 가장 흔하고 효과적인 방식은 카테고리 탭이다.정치, 경제, 스포츠, 기술 등 관심 있는 분야만 쏙쏙 골라보는 경험은 사용자에게 편안함을 준다.이번 글에서는 Flutter에서 TabBar와 TabBarView를 활용해 뉴스 앱에 탭 형태의 카테고리 UI를 구현해보자.📐 기본 구조 — DefaultTabController가장 간단한 방식은 DefaultTabController를 사용하는 것이다. 탭 개수만 정해주면 된다.DefaultTabController( length: 3, // 탭 수 child: Scaffold( appBar: AppBar( title: Text("뉴스 카테고리"), bottom: TabBar( ..

뉴스 앱을 만든다면, 메인 목록 다음으로 중요한 건 바로 상세 페이지다.썸네일, 본문, 날짜, 공유 버튼... 이 모든 요소들이 잘 어우러져야 사용자에게 정보 전달은 물론 디자인 감성까지 줄 수 있다.이번 글에서는 Flutter로 세련된 뉴스 상세 페이지를 만드는 구조를 공유해본다.🧱 기본 레이아웃 설계class NewsDetailScreen extends StatelessWidget { final News news; const NewsDetailScreen({super.key, required this.news}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("..