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

15 Dec 2023

flutter

사용자가 앱의 테마를 선택하여 변경할 수 있도록 하는 기능은 많은 앱에서 사용되고 있습니다. Flutter 앱에서는 이를 구현하기 위해 shared_preferences 패키지를 사용할 수 있습니다. 이 패키지를 통해 사용자가 선택한 테마를 로컬 저장소에 저장하고, 앱이 다시 시작될 때 해당 값을 가져와서 적용할 수 있습니다.

1. shared_preferences 패키지 추가

먼저, shared_preferences 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

2. 사용자 테마 선택 구현

사용자가 테마를 선택하고 변경할 수 있는 UI를 구성합니다. 예를 들어, 드롭다운 버튼을 사용하여 다양한 테마 옵션을 제공할 수 있습니다.

import 'package:flutter/material.dart';

class ThemeSelectionScreen extends StatefulWidget {
  @override
  _ThemeSelectionScreenState createState() => _ThemeSelectionScreenState();
}

class _ThemeSelectionScreenState extends State<ThemeSelectionScreen> {
  List<String> themes = ['Light', 'Dark', 'Custom']; // 테마 옵션

  String _selectedTheme = "Light"; // 사용자가 선택한 테마

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Theme'),
      ),
      body: Center(
        child: DropdownButton<String>(
          value: _selectedTheme,
          onChanged: (String? newTheme) {
            setState(() {
              _selectedTheme = newTheme!;
              _saveThemeToPreferences(newTheme); // 선택한 테마를 저장
            });
          },
          items: themes.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }

  _saveThemeToPreferences(String theme) async {
    // shared_preferences를 활용하여 선택한 테마를 저장
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('theme', theme);
  }
}

3. 사용자 테마 적용

앱이 시작될 때 저장된 테마 값을 가져와서 적용합니다.

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeData _selectedTheme = ThemeData.light(); // 기본 테마

  @override
  void initState() {
    _loadThemeFromPreferences(); // 저장된 테마를 불러와서 적용
    super.initState();
  }

  _loadThemeFromPreferences() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance(); // shared_preferences에서 저장된 테마 가져오기
    String? selectedTheme = prefs.getString('theme');
    if (selectedTheme == 'Light') {
      setState(() {
        _selectedTheme = ThemeData.light();
      });
    } else if (selectedTheme == 'Dark') {
      setState(() {
        _selectedTheme = ThemeData.dark();
      });
    } else {
      setState(() {
        _selectedTheme = ThemeData(
          // 사용자 정의 테마 설정
          primaryColor: Colors.teal,
          accentColor: Colors.pink,
          fontFamily: 'Roboto',
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _selectedTheme, // 적용된 테마
      home: ThemeSelectionScreen(), // 테마 선택 화면
    );
  }
}

결론

Flutter 앱에서 사용자가 선택한 테마를 shared_preferences를 활용하여 저장하고 앱 내에서 적용하는 방법을 알아보았습니다. 이를 통해 사용자가 선호하는 테마를 유지하면서 앱을 사용할 수 있게 됩니다.

이제 위 예시를 참고하여 원하는 테마 선택 기능을 구현해 보시기 바랍니다.