Firebase로 푸시 알림 추가 — 속보 알림으로 더 빠른 뉴스 경험
·
Flutter/Flutter 뉴스 앱 만들기
속보는 뉴스 앱의 존재 이유 중 하나다.중요한 뉴스가 떴을 때, 사용자가 앱을 켜지 않아도 알려주는 기능 — 푸시 알림은 뉴스 앱에 있어 핵심 기능이다.이번 글에서는 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/Flutter 뉴스 앱 만들기
뉴스 앱은 기본적으로 온라인 기반이다.하지만 출근길 지하철이나 해외 여행 중, 네트워크가 없는 순간에도 읽던 기사를 다시 보고 싶을 때가 있다.이 글에서는 Flutter에서 오프라인 모드를 구현하는 방법,즉 네트워크가 없을 때 캐시된 뉴스 데이터를 불러오는 전략을 정리해본다.📦 기본 아이디어핵심 흐름은 단순하다.뉴스를 받아올 때 JSON으로 SharedPreferences에 저장앱 시작 시 네트워크 연결 여부 확인오프라인이면 로컬에 저장된 JSON을 불러오기이 구조는 작지만 강력한 사용자 경험을 만든다.📡 네트워크 상태 확인// pubspec.yamldependencies: connectivity_plus: ^5.0.2Future hasNetwork() async { final result = a..
다크 모드 대응하기 — 눈에 편안한 뉴스 보기
·
Flutter/Flutter 뉴스 앱 만들기
밤이 되면 자동으로 앱이 어두워지고, 눈의 피로를 덜어주는 다크 모드는 이제 필수 기능이다.Flutter에서는 이 다크 모드를 비교적 쉽게 적용할 수 있다. 단, 제대로 설계하지 않으면 디자인이 망가질 수도 있다.이번 글에서는 ThemeMode 설정부터 커스텀 다크 테마 구성까지 뉴스 앱에 다크 모드를 적용하는 전체 흐름을 정리한다.🌓 ThemeMode란?Flutter의 MaterialApp에는 theme, darkTheme, themeMode라는 세 가지 설정이 있다.MaterialApp( theme: lightTheme, darkTheme: darkTheme, themeMode: ThemeMode.system, // 또는 .dark / .light)ThemeMode.system: 디바이스 설정..
좋아요 및 북마크 기능 추가 — 내가 좋아한 뉴스 저장하기
·
Flutter/Flutter 뉴스 앱 만들기
사용자가 뉴스를 보다가 ‘좋아요’를 누르거나, ‘북마크’로 저장하는 기능은 단순해 보이지만 사용자 경험을 극대화시켜준다.뉴스앱을 앱답게 만드는 요소 중 하나가 바로 이 내가 저장한 뉴스 목록이기 때문이다.이번 글에서는 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/Flutter 뉴스 앱 만들기
뉴스를 더 보기 좋게 나누는 방법은 다양하지만, 가장 흔하고 효과적인 방식은 카테고리 탭이다.정치, 경제, 스포츠, 기술 등 관심 있는 분야만 쏙쏙 골라보는 경험은 사용자에게 편안함을 준다.이번 글에서는 Flutter에서 TabBar와 TabBarView를 활용해 뉴스 앱에 탭 형태의 카테고리 UI를 구현해보자.📐 기본 구조 — DefaultTabController가장 간단한 방식은 DefaultTabController를 사용하는 것이다. 탭 개수만 정해주면 된다.DefaultTabController( length: 3, // 탭 수 child: Scaffold( appBar: AppBar( title: Text("뉴스 카테고리"), bottom: TabBar( ..
뉴스 상세 페이지 — 이미지, 본문, 공유 버튼까지 세련되게
·
Flutter/Flutter 뉴스 앱 만들기
뉴스 앱을 만든다면, 메인 목록 다음으로 중요한 건 바로 상세 페이지다.썸네일, 본문, 날짜, 공유 버튼... 이 모든 요소들이 잘 어우러져야 사용자에게 정보 전달은 물론 디자인 감성까지 줄 수 있다.이번 글에서는 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("..