Flutter의 다중 테마 지원(Multiple Themes) 방법과 적용

Flutter의 다중 테마 지원(Multiple Themes) 방법과 적용

Flutter에서 다중 테마(Multiple Themes)를 지원하면 앱에서 다양한 UI 스타일을 제공할 수 있습니다. 대표적으로 다크 모드(Dark Mode)와 라이트 모드(Light Mode) 전환이 있으며, 브랜드별 또는 사용자 맞춤형 테마를 설정할 수도 있습니다.

이 글에서는 Flutter에서 다중 테마를 적용하는 방법과 사용자가 직접 테마를 선택할 수 있도록 설정하는 방법을 설명하겠습니다.

---

1. Flutter 다중 테마 지원이 필요한 이유

앱에서 여러 가지 테마를 지원하면 다음과 같은 이점이 있습니다.

• 사용자 경험 향상: 다크 모드, 맞춤형 테마 제공으로 다양한 사용자 요구 충족
• 브랜드 일관성 유지: 브랜드별 테마 적용 가능
• 디자인 유연성 향상: 테마 변경만으로 앱 전체 스타일을 손쉽게 수정 가능

Flutter에서는 ThemeData를 활용하여 다중 테마를 쉽게 구현할 수 있습니다.

---

2. Flutter에서 다중 테마 적용 방법

다중 테마를 적용하는 방법은 크게 두 가지로 나눌 수 있습니다.

• 시스템 설정 기반 테마 변경: 사용자의 시스템 다크/라이트 모드 설정을 자동 감지
• 사용자 선택 기반 테마 변경: 앱 내에서 사용자가 직접 테마를 변경할 수 있도록 지원

이제 각각의 방법을 구현하는 방법을 살펴보겠습니다.

---

3. 시스템 설정에 따른 다중 테마 적용

Flutter의 MaterialApp에서 theme와 darkTheme을 설정하면 사용자의 시스템 테마에 따라 자동으로 변경됩니다.

(1) 다중 테마 설정

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 다중 테마 지원',
      theme: ThemeData.light(),  // 기본 테마 (라이트 모드)
      darkTheme: ThemeData.dark(), // 다크 모드 테마
      themeMode: ThemeMode.system, // 시스템 설정을 따름
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter 다중 테마 지원")),
      body: Center(
        child: Text("현재 테마는 시스템 설정에 따라 변경됩니다."),
      ),
    );
  }
}

설명:

• theme: 기본(라이트) 테마 설정
• darkTheme: 다크 모드 테마 설정
• themeMode: ThemeMode.system: 사용자의 시스템 설정을 따라 변경

이제 사용자의 기기 설정이 다크 모드이면 자동으로 다크 테마가 적용됩니다.

---

4. 사용자가 직접 테마 선택

사용자가 직접 테마를 변경할 수 있도록 Provider 또는 GetX 같은 상태 관리 패턴을 사용할 수 있습니다.

(1) Provider를 활용한 다중 테마 지원

먼저 provider 패키지를 추가합니다.

flutter pub add provider

(2) 테마 상태 클래스 생성

lib/theme_provider.dart 파일을 생성합니다.

import 'package:flutter/material.dart';

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

  ThemeMode get themeMode => _themeMode;

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

(3) MaterialApp에 적용

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return MaterialApp(
      title: 'Flutter 다중 테마',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: themeProvider.themeMode,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(title: Text("사용자 테마 변경")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("현재 테마: ${themeProvider.themeMode == ThemeMode.dark ? '다크 모드' : '라이트 모드'}"),
            SizedBox(height: 20),
            Switch(
              value: themeProvider.themeMode == ThemeMode.dark,
              onChanged: (value) {
                themeProvider.toggleTheme();
              },
            ),
          ],
        ),
      ),
    );
  }
}

설명:

• ChangeNotifier를 사용하여 테마 상태 관리
• themeMode 값을 토글하여 다크/라이트 모드 전환
• Switch 위젯을 활용하여 사용자 선택 반영

이제 사용자가 스위치를 조작하면 테마가 즉시 변경됩니다.

---

5. 테마를 확장하여 브랜드별 스타일 적용

기본 테마 외에도 브랜드나 사용자별로 다양한 스타일을 제공할 수도 있습니다.

(1) 커스텀 테마 설정

class AppThemes {
  static final ThemeData blueTheme = ThemeData(
    primarySwatch: Colors.blue,
    scaffoldBackgroundColor: Colors.blue[50],
  );

  static final ThemeData redTheme = ThemeData(
    primarySwatch: Colors.red,
    scaffoldBackgroundColor: Colors.red[50],
  );
}

(2) 사용자가 테마 선택

위 방법을 확장하여 다양한 브랜드 테마를 적용할 수 있습니다.

---

결론

Flutter에서 다중 테마를 지원하면 사용자 경험을 향상시키고, UI 변경을 유연하게 할 수 있습니다.

• 시스템 설정을 따라 자동으로 다크/라이트 모드 적용
• Provider를 활용하여 사용자가 직접 테마를 변경
• 커스텀 테마 클래스를 만들어 브랜드별 테마 지원

이제 다중 테마를 적용하여 더욱 세련된 Flutter 앱을 개발해 보세요!