[flutter] shared_preferences를 이용하여 사용자가 선택한 앱 테마를 앱 내에서 로드하는 방법은?

15 Dec 2023

flutter

앱에 사용자 정의 테마를 적용하고 이를 유지하기 위해서는 SharedPreferences 패키지를 사용하는 것이 좋습니다. 이를 통해 사용자가 선택한 테마 설정을 저장하고 앱이 다시 시작될 때 이를 로드할 수 있습니다.

1. shared_preferences 패키지 추가

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가합니다.

dependencies:
  shared_preferences: ^2.0.6

이후, 터미널에서 아래 명령어를 실행하여 패키지를 가져옵니다.

flutter pub get

2. 테마 변경 및 저장

테마를 변경하는 데 사용하는 버튼에 대한 처리기를 작성합니다. 선택한 테마를 SharedPreferences에 저장하는 예제 코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

// ...

void _changeTheme(ThemeData theme) async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setInt('theme', theme == ThemeData.light() ? 1 : 2);
  // 기타 로직: 테마 적용 및 화면 갱신
}

3. 저장된 테마 로드

앱이 시작될 때 저장된 테마를 로드하여 적용합니다.

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

class MyApp extends StatelessWidget {
  Future<ThemeData> _loadTheme() async {
    final prefs = await SharedPreferences.getInstance();
    final themeId = prefs.getInt('theme') ?? 1;  // 기본 테마
    return themeId == 1 ? ThemeData.light() : ThemeData.dark();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ThemeData>(
      future: _loadTheme(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return MaterialApp(
            theme: snapshot.data,
            // 기타 설정
          );
        } else {
          return CircularProgressIndicator();  // 로딩 중 표시
        }
      },
    );
  }
}

이제, 사용자가 선택한 테마가 SharedPreferences에 저장되고 앱을 다시 실행하면 해당 테마가 로드되어 적용됩니다.

이 방법을 통해 사용자가 선택한 테마를 저장하고 Flutter 앱에서 유지하는 방법을 설명했습니다.SharedPreferences를 사용하여 간단하게 사용자 설정을 유지하는 것이 가능합니다.

더 자세한 내용은 SharedPreferences 패키지 문서를 참조할 수 있습니다.