뉴스 앱은 기본적으로 온라인 기반이다.하지만 출근길 지하철이나 해외 여행 중, 네트워크가 없는 순간에도 읽던 기사를 다시 보고 싶을 때가 있다.이 글에서는 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("..

뉴스 앱을 만들다 보면 사용자가 원하는 날짜의 기사만 보고 싶어하는 경우가 생긴다.특히 시사/경제 뉴스일수록 "어제 뉴스만 보기" 같은 필터링 기능이 중요하다.이번 글에서는 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(), ..