[flutter] shared_preferences 를 사용하여 사용자가 선택한 언어 설정을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

Flutter 앱에서 사용자가 선택한 언어 설정을 저장하려면 shared_preferences 패키지를 사용할 수 있습니다. shared_preferences는 간단한 키-값 쌍을 로컬에 저장하고 검색할 수 있는 기능을 제공합니다. 다음은 shared_preferences를 사용하여 사용자가 선택한 언어 설정을 저장하는 예시입니다.

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. 아래와 같이 dependencies에 shared_preferences를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.5

그런 다음 main.dart 파일에서 SharedPreferences를 import 합니다:

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

이제, 사용자가 언어 설정을 변경할 수 있는 설정 페이지를 만들어야 합니다. 예를 들어, LanguageSettingsPage라는 StatefulWidget를 생성하고 사용자가 언어를 선택하게 할 수 있습니다. 선택한 언어를 SharedPreferences에 저장해야 합니다. 다음은 예시 코드입니다:

class LanguageSettingsPage extends StatefulWidget {
  @override
  _LanguageSettingsPageState createState() => _LanguageSettingsPageState();
}

class _LanguageSettingsPageState extends State<LanguageSettingsPage> {
  late SharedPreferences _prefs;
  late String _selectedLanguage;

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

  void initSharedPreferences() async {
    _prefs = await SharedPreferences.getInstance();
    _selectedLanguage = _prefs.getString('selectedLanguage') ?? 'English';
  }

  void saveLanguage(String language) {
    setState(() {
      _selectedLanguage = language;
    });
    _prefs.setString('selectedLanguage', language);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Language Settings'),
      ),
      body: Column(
        children: [
          ListTile(
            title: Text('English'),
            trailing: Radio(
              value: 'English',
              groupValue: _selectedLanguage,
              onChanged: (value) => saveLanguage(value),
            ),
          ),
          ListTile(
            title: Text('Korean'),
            trailing: Radio(
              value: 'Korean',
              groupValue: _selectedLanguage,
              onChanged: (value) => saveLanguage(value),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 _selectedLanguage을 사용하여 현재 선택한 언어를 추적하고, saveLanguage 메소드에서 언어를 변경할 때마다 SharedPreferences에 저장합니다.

이제 해당 LanguageSettingsPage를 메인 앱에 연결하여 사용자가 설정을 변경할 수 있도록 할 수 있습니다. 예를 들어, 다음과 같이 main.dart 파일을 수정할 수 있습니다:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Language App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => LanguageSettingsPage()),
            );
          },
          child: Text('Settings'),
        ),
      ),
    );
  }
}

이렇게 하면 사용자가 ‘Settings’ 버튼을 누르면 LanguageSettingsPage로 이동하여 언어 설정을 변경할 수 있게 됩니다. 선택한 언어가 SharedPreferences에 저장되므로 앱이 종료된 후에도 선택한 언어 설정이 유지됩니다.

이 예시를 참고하여 Flutter 앱에서 shared_preferences를 사용하여 사용자가 선택한 언어 설정을 저장하는 방법을 구현할 수 있습니다.