[flutter] shared_preferences 를 사용하여 사용자 환경 설정을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

사용자 환경 설정을 저장하려면, Flutter에서 shared_preferences 패키지를 사용할 수 있습니다. shared_preferences 패키지는 iOS와 Android에서 동일한 방식으로 사용자 데이터를 저장하는 데 도움이 됩니다.

1. 패키지 추가하기

프로젝트의 pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. dependencies 섹션에 다음 코드를 추가합니다:

dependencies:
  shared_preferences: ^2.0.6

그런 다음, 패키지를 가져오기 위해 터미널에서 다음 명령을 실행합니다:

flutter pub get

2. 사용자 환경 설정 저장하기

사용자 환경 설정을 저장하기 위해 shared_preferences 패키지를 사용하는 방법은 다음과 같습니다:

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

class UserSettings {
  static const String KEY_THEME = 'theme';

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

  static Future<String?> getTheme() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getString(KEY_THEME);
  }
}

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  String selectedTheme = '';

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

  void _loadTheme() async {
    String? theme = await UserSettings.getTheme();
    setState(() {
      selectedTheme = theme ?? '';
    });
  }

  void _saveTheme(String theme) async {
    await UserSettings.saveTheme(theme);
    setState(() {
      selectedTheme = theme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('Light Theme'),
            leading: Radio(
              value: 'light',
              groupValue: selectedTheme,
              onChanged: _saveTheme,
            ),
          ),
          ListTile(
            title: Text('Dark Theme'),
            leading: Radio(
              value: 'dark',
              groupValue: selectedTheme,
              onChanged: _saveTheme,
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드에서 UserSettings 클래스는 사용자 환경 설정을 저장하고 가져오는 데 사용됩니다. saveTheme 메서드는 사용자가 테마를 선택할 때 호출되며, 선택한 테마를 SharedPreferences에 저장합니다. getTheme 메서드는 저장된 테마를 가져옵니다.

SettingsPage 위젯은 사용자가 테마를 선택하는 화면을 나타냅니다. initState 메서드에서 이전에 저장된 테마를 불러와 초기 값을 설정하고, saveTheme 메서드를 통해 테마를 저장합니다.

추가 정보와 참고 자료

shared_preferences 패키지 문서