[flutter] shared_preferences 를 사용하여 애플리케이션의 테마를 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

애플리케이션의 테마를 저장하고 관리하기 위해 Flutter에서는 shared_preferences 패키지를 사용할 수 있습니다. shared_preferences는 키-값 쌍을 사용하여 데이터를 저장하고 검색하는 간단한 플러그인입니다.

아래는 shared_preferences를 사용하여 애플리케이션의 테마를 저장하는 예제입니다.

1. shared_preferences 패키지 추가하기

우선, pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

저장한 후, 패키지를 가져오기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

2. 테마 데이터 저장하기

다음으로, shared_preferences를 사용하여 테마 데이터를 저장하는 함수를 작성해보겠습니다. 이 함수는 앱의 테마에 따라 “light” 또는 “dark” 값을 저장합니다.

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveTheme(String theme) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('theme', theme);
}

위 코드에서 SharedPreferences.getInstance() 메서드를 사용하여 SharedPreferences 인스턴스를 얻고, setString() 메서드를 사용하여 ‘theme’ 키에 해당 테마 값을 저장합니다.

3. 저장된 테마 데이터 불러오기

이제 저장된 테마 데이터를 불러오는 함수를 작성해보겠습니다. 이 함수는 저장된 테마 값을 반환합니다. 만약 저장된 값이 없다면 기본 테마 값을 반환합니다.

import 'package:shared_preferences/shared_preferences.dart';

Future<String> getSavedTheme() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String theme = prefs.getString('theme');
  return theme ?? 'light'; // 저장된 값이 없다면 기본 테마인 'light'를 반환
}

위 코드에서 getString() 메서드를 사용하여 ‘theme’ 키에 저장된 값을 가져옵니다. 저장된 값이 없다면 ?? 연산자를 사용하여 기본 테마 ‘light’를 반환합니다.

4. 테마 저장 및 불러오기

앱의 테마를 변경할 때마다 saveTheme() 함수를 호출하여 테마 데이터를 저장하고, 앱이 시작될 때 getSavedTheme() 함수를 호출하여 저장된 테마 데이터를 불러올 수 있습니다.

아래는 사용자가 앱 테마를 변경할 수 있는 예시 코드입니다.

import 'package:flutter/material.dart';

class ThemePage extends StatefulWidget {
  @override
  _ThemePageState createState() => _ThemePageState();
}

class _ThemePageState extends State<ThemePage> {
  String _selectedTheme = '';

  @override
  void initState() {
    super.initState();
    _loadCurrentTheme();
  }

  Future<void> _loadCurrentTheme() async {
    String savedTheme = await getSavedTheme();
    setState(() {
      _selectedTheme = savedTheme;
    });
  }

  Future<void> _changeTheme(String theme) async {
    await saveTheme(theme);
    setState(() {
      _selectedTheme = theme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Settings'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: $_selectedTheme',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('Set Light Theme'),
              onPressed: () => _changeTheme('light'),
            ),
            RaisedButton(
              child: Text('Set Dark Theme'),
              onPressed: () => _changeTheme('dark'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 _loadCurrentTheme() 메서드를 호출하여 저장된 테마를 불러오고, _changeTheme() 메서드를 통해 테마를 변경합니다. 이 정보는 _selectedTheme 변수를 통해 화면에 표시되며, Text 위젯을 통해 현재 테마를 표시합니다. RaisedButton을 통해 테마를 변경하는 기능을 구현하였습니다.

이제 shared_preferences를 사용하여 애플리케이션의 테마를 저장하고 관리하는 방법을 알게 되었습니다. 저장된 테마 데이터를 불러와서 앱의 테마를 설정하고, 사용자가 테마를 변경할 때마다 데이터를 저장함으로써 일관된 사용자 경험을 제공할 수 있습니다.

더 자세한 내용은 shared_preferences 패키지의 공식 문서를 참고하시기 바랍니다.