개요
앱 사용자가 채팅 테마를 선택할 수 있도록 한다면, 이를 사용자의 기기에 저장하여 다음에 앱을 실행했을 때 기존 선택된 테마를 유지할 수 있습니다. Flutter에서 이를 구현하기 위해 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 패키지를 사용하여 사용자가 선택한 채팅 테마를 저장하기 위해 다음과 같이 코드를 작성합니다:
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class ChatThemePage extends StatefulWidget {
@override
_ChatThemePageState createState() => _ChatThemePageState();
}
class _ChatThemePageState extends State<ChatThemePage> {
String _selectedTheme = 'Default'; // 기본 테마
SharedPreferences? _prefs;
@override
void initState() {
super.initState();
_loadTheme(); // 저장된 테마 불러오기
}
Future<void> _loadTheme() async {
_prefs = await SharedPreferences.getInstance();
setState(() {
_selectedTheme = _prefs!.getString('chat_theme') ?? 'Default';
});
}
Future<void> _saveTheme(String theme) async {
setState(() {
_selectedTheme = theme;
});
await _prefs!.setString('chat_theme', theme);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('채팅 테마 설정'),
),
body: Column(
children: [
ListTile(
title: Text('기본 테마'),
leading: Radio(
value: 'Default',
groupValue: _selectedTheme,
onChanged: (theme) => _saveTheme(theme),
),
),
ListTile(
title: Text('어두운 테마'),
leading: Radio(
value: 'Dark',
groupValue: _selectedTheme,
onChanged: (theme) => _saveTheme(theme),
),
),
ListTile(
title: Text('색상 테마'),
leading: Radio(
value: 'Colorful',
groupValue: _selectedTheme,
onChanged: (theme) => _saveTheme(theme),
),
),
],
),
);
}
}
위 코드는 ChatThemePage라는 StatefulWidget을 만들어 채팅 테마를 선택하고 저장하는 기능을 구현한 예시입니다. 해당 페이지에서 기본, 어두운, 색상 테마 중 하나를 선택할 수 있으며, 선택된 테마는 shared_preferences를 통해 기기에 저장됩니다.
3. 저장된 테마 불러오기
향후 앱 실행 시 저장된 테마를 불러와야 합니다. _loadTheme 함수가 이를 수행합니다. _prefs.getString('chat_theme')를 통해 저장된 테마를 가져오고, 만약 저장된 값이 없다면 기본 테마인 ‘Default’를 사용합니다.
4. 테마 저장하기
테마를 선택하면 _saveTheme 함수가 호출되며, 해당 테마를 저장하고 상태를 업데이트합니다. _prefs.setString('chat_theme', theme)를 통해 사용자가 선택한 테마를 shared_preferences에 저장합니다.