단순히 메모만 저장하는 앱은 많다.하지만 사용자의 기분, 분위기, 취향까지 담아내는 앱은 드물다.이번 글에서는 Flutter 메모 앱에 다크 모드와 배경 커스터마이징 기능을 넣어 더 감성적이고 더 나만의 메모 앱을 만들어보자.🌙 다크 모드 적용하기✅ 기본 설정MaterialApp( theme: lightTheme, darkTheme: darkTheme, themeMode: ThemeMode.system, // 또는 .dark, .light)ThemeMode.system을 사용하면 OS 설정에 따라 자동 전환되지만, 사용자 선택을 직접 받으려면 Provider나 ValueNotifier로 전환이 가능하다.✅ 테마 구성 예시final lightTheme = ThemeData( brightness: ..

뉴스 앱을 만든다면, 메인 목록 다음으로 중요한 건 바로 상세 페이지다.썸네일, 본문, 날짜, 공유 버튼... 이 모든 요소들이 잘 어우러져야 사용자에게 정보 전달은 물론 디자인 감성까지 줄 수 있다.이번 글에서는 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(), ..

Flutter에서의 애니메이션은 단순한 UI 효과를 넘어서, 앱의 감성을 결정짓는 중요한 요소다.말 한마디 없이도 애니메이션은 사용자에게 메시지를 전달한다.이 글에서는 Flutter 애니메이션의 기본부터 고급 개념인 AnimatedBuilder와 Tween까지,한 번쯤 마주했지만 명확히 이해하기 어려웠던 부분들을 실전 예제와 함께 정리해보자.🎞️ Flutter 애니메이션의 구조Flutter 애니메이션은 크게 세 요소로 구성된다:AnimationController: 애니메이션을 구동시키는 컨트롤러 (시간, 반복 등)Animation: 값의 변화 (예: 0.0 → 1.0)Tween: 어떤 값의 범위를 어떻게 보관할 것인지 정의이 셋이 잘 맞물릴 때, 우리는 섬세한 움직임을 만들어낼 수 있다.⚙️ 예제: T..

화려한 기능과 디자인을 갖춘 앱도, 밤이 되면 불편할 수 있다.눈이 편안한 다크 모드는 이제 선택이 아닌 필수이다.이번 글에서는 Flutter 게시판 앱에 다크 모드 완전 대응을 적용해보자.시스템 설정에 따라 자동으로 전환되거나, 직접 테마를 토글할 수 있도록 구성할 수 있다.🌓 ThemeMode란?MaterialApp에서는 themeMode 속성으로 앱의 테마 모드를 설정할 수 있다.MaterialApp( theme: lightTheme, darkTheme: darkTheme, themeMode: ThemeMode.system,)ThemeMode.system은 디바이스의 설정에 따라 자동 전환된다.🌞 라이트 & 🌚 다크 테마 설정아래는 각각의 테마를 설정하는 예시이다:final lightTh..

게시글을 스쳐 지나가기만 한다면 조금 아쉽다.내가 좋아하는 글, 나중에 다시 보고 싶은 글은 북마크 해두고 모아보면 훨씬 편리하다.이번 글에서는 Flutter 게시판 앱에 즐겨찾기(북마크) 기능을 추가해보자.`⭐` 아이콘 하나로 앱의 감성이 한층 살아날 수 있다.📌 Post 모델에 즐겨찾기 필드 추가기존의 Post 클래스에 isBookmarked 필드를 추가한다:class Post { final String title; final String content; bool isBookmarked; Post({ required this.title, required this.content, this.isBookmarked = false, }); Map toJson() => { '..