다크 모드와 배경 커스터마이징 — 메모에 감성 더하기

단순히 메모만 저장하는 앱은 많다.
하지만 사용자의 기분, 분위기, 취향까지 담아내는 앱은 드물다.

이번 글에서는 Flutter 메모 앱에 다크 모드와 배경 커스터마이징 기능을 넣어 더 감성적이고 더 나만의 메모 앱을 만들어보자.

---

🌙 다크 모드 적용하기

✅ 기본 설정

MaterialApp(
  theme: lightTheme,
  darkTheme: darkTheme,
  themeMode: ThemeMode.system, // 또는 .dark, .light
)

ThemeMode.system을 사용하면 OS 설정에 따라 자동 전환되지만, 사용자 선택을 직접 받으려면 Provider나 ValueNotifier로 전환이 가능하다.

✅ 테마 구성 예시

final lightTheme = ThemeData(
  brightness: Brightness.light,
  scaffoldBackgroundColor: Color(0xFFFDF6EC),
  cardColor: Colors.white,
);

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  scaffoldBackgroundColor: Color(0xFF1E1E1E),
  cardColor: Color(0xFF2C2C2C),
);

텍스트, 배경, 카드 컬러까지 일관되게 지정하는 것이 중요하다.

---

🖼️ 배경 커스터마이징 기능

사용자가 직접 배경 이미지를 고르거나, 색상을 선택할 수 있게 만들면 메모장에 ‘감성’이 추가된다.

✅ 배경 이미지 선택

import 'package:image_picker/image_picker.dart';

Future<void> pickBackgroundImage() async {
  final picker = ImagePicker();
  final image = await picker.pickImage(source: ImageSource.gallery);

  if (image != null) {
    // path 저장 및 사용
    setState(() {
      backgroundImagePath = image.path;
    });
  }
}

✅ 배경 색상 선택

Color selectedColor = Colors.white;

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    title: Text('배경 색상 선택'),
    content: BlockPicker(
      pickerColor: selectedColor,
      onColorChanged: (color) {
        setState(() {
          selectedColor = color;
        });
      },
    ),
  ),
);

flutter_colorpicker 패키지를 활용하면 컬러 선택 UI도 감성적으로 만들 수 있다.

---

🧱 전체 배경 적용 예시

Container(
  decoration: BoxDecoration(
    color: selectedColor,
    image: backgroundImagePath != null
      ? DecorationImage(
          image: FileImage(File(backgroundImagePath!)),
          fit: BoxFit.cover,
        )
      : null,
  ),
  child: MemoListView(), // 실제 메모 UI
)

색상과 이미지 중 하나만 선택되도록 조건 분기하고, 위에 SafeArea나 ListView를 올려놓으면 된다.

---

💡 UX 팁

• 테마나 배경 설정은 설정 페이지에서 따로 구성
• 기본 제공 배경 3~5개 + 사용자 이미지 업로드 제공
• 다크 모드와 배경 이미지가 충돌할 경우 대비한 텍스트 컬러 조정

---

🧘 마무리하며

메모는 단순한 텍스트지만, 그 텍스트가 담기는 공간은 충분히 따뜻할 수 있다.
Flutter로 만드는 감성 앱, 사용자의 하루를 닮은 공간으로 커스터마이징해보자.

기록하는 순간이 좋아지면, 기록도 오래 남는다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 메모 앱 만들기 여정입니다.