다크 모드와 배경 커스터마이징 — 메모에 감성 더하기
·
Flutter/Flutter 메모 앱 만들기
단순히 메모만 저장하는 앱은 많다.하지만 사용자의 기분, 분위기, 취향까지 담아내는 앱은 드물다.이번 글에서는 Flutter 메모 앱에 다크 모드와 배경 커스터마이징 기능을 넣어 더 감성적이고 더 나만의 메모 앱을 만들어보자.🌙 다크 모드 적용하기✅ 기본 설정MaterialApp( theme: lightTheme, darkTheme: darkTheme, themeMode: ThemeMode.system, // 또는 .dark, .light)ThemeMode.system을 사용하면 OS 설정에 따라 자동 전환되지만, 사용자 선택을 직접 받으려면 Provider나 ValueNotifier로 전환이 가능하다.✅ 테마 구성 예시final lightTheme = ThemeData( brightness: ..
메모 태그 분류 — 주제별로 필터링하는 법
·
Flutter/Flutter 메모 앱 만들기
메모가 많아질수록 필요한 메모를 찾는 건 점점 어려워진다.이럴 때 태그 분류는 사용자가 메모를 주제별로 정리하고, 쉽게 찾아볼 수 있도록 돕는다.이번 글에서는 Flutter 메모 앱에 태그 입력, 저장, 필터링 기능을 도입해보자.🏷️ 메모에 태그 필드 추가하기모델에 tags라는 문자열 필드를 추가하자. 간단하게 콤마(,)로 구분된 태그로 구성한다.class Memo { final int? id; final String content; final String tags; Memo({this.id, required this.content, this.tags = ""}); Map toMap() { return { 'id': id, 'content': content, '..
메모 고정 핀 기능 — 자주 쓰는 메모는 상단 고정
·
Flutter/Flutter 메모 앱 만들기
메모가 많아질수록 중요한 메모가 아래로 밀려나는 문제가 생긴다.이를 해결하는 가장 간단하고 효과적인 방법은 바로 “핀 고정 기능”이다.이번 글에서는 Flutter로 메모를 상단에 고정시키는 ‘핀’ 기능을 구현하고,고정된 메모는 위에, 일반 메모는 아래로 정렬해서 보여주는 구조를 만들자.📌 메모 모델에 isPinned 필드 추가class Memo { final int? id; final String content; final bool isPinned; Memo({this.id, required this.content, this.isPinned = false}); Map toMap() { return { 'id': id, 'content': content, 'isP..
로컬 DB로 저장하기 — sqflite를 활용한 오프라인 저장소
·
Flutter/Flutter 메모 앱 만들기
지금까지 만든 메모 앱은 앱을 종료하면 모든 데이터가 사라진다.진짜 앱답게 만들려면, 로컬 저장소가 필요하다.이번 글에서는 Flutter에서 sqflite를 이용해 메모를 DB에 저장하고,앱을 껐다 켜도 메모가 유지되도록 구현해보자.💾 sqflite란?sqflite는 Flutter에서 가장 널리 사용되는 SQLite 기반의 DB 플러그인이다.파일 기반으로 앱 내부에 데이터를 안전하게 저장할 수 있다.📦 패키지 설치// pubspec.yamldependencies: sqflite: ^2.3.2 path: ^1.9.0sqflite는 DB, path는 로컬 경로를 잡아주는 역할이다.🧱 메모 테이블 구조 정의class Memo { final int? id; final String content; ..
메모 CRUD 기능 구현 — 추가, 수정, 삭제 기본기 익히기
·
Flutter/Flutter 메모 앱 만들기
메모 앱의 핵심은 결국 쓰기, 고치기, 지우기다.아무리 디자인이 예뻐도 CRUD(생성, 읽기, 수정, 삭제)가 제대로 안 되면, 진짜 메모 앱이라고 할 수 없다.이번 글에서는 Flutter로 메모를 추가하고, 수정하고, 삭제하는 기능을 순차적으로 구현해본다.📥 메모 추가하기먼저 “+” 버튼을 눌렀을 때 메모를 새로 작성할 수 있도록 TextEditingController와 Navigator를 사용하자.🧾 메모 작성 화면class NewMemoScreen extends StatelessWidget { final TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context)..
심플한 메모 UI 구성 — 감성적인 디자인으로 시작하기
·
Flutter/Flutter 메모 앱 만들기
메모 앱은 가장 단순하지만, 그래서 더 섬세해야 하는 앱이다.복잡한 기능보다 중요한 건 직관적인 UI와 감성적인 화면 구성이다.이번 글에서는 Flutter로 심플하면서도 감성적인 메모 UI를 어떻게 구성할 수 있을지 실제 코드와 함께 알아본다.🧱 기본 구조는 이렇게메모 앱의 가장 기본은 “메모 리스트 + 새 메모 작성”이다.우선 Scaffold 기반으로 심플한 카드형 메모 리스트 UI를 구성해보자.class MemoHomeScreen extends StatelessWidget { final List memoList = [ "오늘의 다짐: Flutter 열심히 하기!", "할 일: 블로그 쓰기, 운동하기, 커피 사기" ]; @override Widget build(BuildContext..