Flutter 게시판 앱 만들기 — 감성 앱의 마무리는 어둠 속의 편안함

화려한 기능과 디자인을 갖춘 앱도, 밤이 되면 불편할 수 있다.
눈이 편안한 다크 모드는 이제 선택이 아닌 필수이다.

이번 글에서는 Flutter 게시판 앱에 다크 모드 완전 대응을 적용해보자.
시스템 설정에 따라 자동으로 전환되거나, 직접 테마를 토글할 수 있도록 구성할 수 있다.

---

🌓 ThemeMode란?

MaterialApp에서는 themeMode 속성으로 앱의 테마 모드를 설정할 수 있다.

MaterialApp(
  theme: lightTheme,
  darkTheme: darkTheme,
  themeMode: ThemeMode.system,
)

ThemeMode.system은 디바이스의 설정에 따라 자동 전환된다.

---

🌞 라이트 & 🌚 다크 테마 설정

아래는 각각의 테마를 설정하는 예시이다:

final lightTheme = ThemeData(
  brightness: Brightness.light,
  scaffoldBackgroundColor: Colors.white,
  primarySwatch: Colors.teal,
  appBarTheme: AppBarTheme(
    backgroundColor: Colors.white,
    iconTheme: IconThemeData(color: Colors.teal),
    titleTextStyle: TextStyle(color: Colors.black, fontSize: 20),
  ),
);

final darkTheme = ThemeData(
  brightness: Brightness.dark,
  scaffoldBackgroundColor: Color(0xFF121212),
  appBarTheme: AppBarTheme(
    backgroundColor: Color(0xFF1E1E1E),
    iconTheme: IconThemeData(color: Colors.tealAccent),
    titleTextStyle: TextStyle(color: Colors.white, fontSize: 20),
  ),
);

글자 색상, 버튼 색상 등도 테마에 맞게 변경해야 한다.

---

🧭 테마 전환 스위치 추가하기

앱 내에서 사용자가 직접 테마를 바꾸도록 만들 수도 있다.

Provider를 활용해 전역 테마 상태를 관리해보자:

class ThemeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme(bool isDark) {
    _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

설정 페이지에서 Switch로 테마를 토글하도록 하면 UX도 매우 향상된다.

---

🌌 감성 포인트

• 다크 모드에서 배경색은 완전한 블랙보다 #121212 계열이 더 부드럽다
• 밝은 회색 대신 Colors.grey[400~600] 사용 추천
• 아이콘은 Theme.of(context).iconTheme.color로 따라가게 만들기

---

🌱 다음 단계

이제 기능도, 감성도, 접근성도 모두 갖춘 게시판 앱이 되었다.
다음은 이 앱을 실제 배포하고 APK를 만드는 Flutter 배포 가이드를 다룰 차례!

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