[flutter] shared_preferences 를 사용하여 사용자가 선택한 배경화면을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

Flutter는 shared_preferences 패키지를 사용하여 간단한 데이터를 디바이스에 저장할 수 있습니다. 배경화면 선택과 같은 사용자의 설정을 저장하기 위해 shared_preferences를 사용하는 방법을 알아보겠습니다.

1. shared_preferences 패키지 추가

먼저 pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.7

dependencies를 추가한 후에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 코드 구현

다음은 shared_preferences를 사용하여 사용자가 선택한 배경화면을 저장하는 예제 코드입니다.

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

class BackgroundSelectionScreen extends StatefulWidget {
  @override
  _BackgroundSelectionScreenState createState() => _BackgroundSelectionScreenState();
}

class _BackgroundSelectionScreenState extends State<BackgroundSelectionScreen> {
  String selectedBackground = '';

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

  void loadBackground() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      selectedBackground = prefs.getString('background') ?? '';
    });
  }

  void saveBackground(String background) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('background', background);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('배경화면 선택'),
      ),
      body: Column(
        children: [
          ListTile(
            title: Text('배경화면 1'),
            onTap: () {
              saveBackground('background1');
              setState(() {
                selectedBackground = 'background1';
              });
            },
            trailing: selectedBackground == 'background1' ? Icon(Icons.check) : null,
          ),
          ListTile(
            title: Text('배경화면 2'),
            onTap: () {
              saveBackground('background2');
              setState(() {
                selectedBackground = 'background2';
              });
            },
            trailing: selectedBackground == 'background2' ? Icon(Icons.check) : null,
          ),
        ],
      ),
    );
  }
}

위의 코드는 배경화면 선택 화면을 구현한 예제입니다. 사용자가 배경화면을 선택하면 saveBackground 함수를 호출하여 선택한 배경화면을 shared_preferences에 저장합니다. 저장된 배경화면은 loadBackground 함수를 통해 복원됩니다. 이렇게 저장된 배경화면은 앱을 종료하고 다시 실행해도 유지됩니다.

3. 배경화면 사용 예시

다음은 저장된 배경화면을 사용하는 예제입니다.

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String selectedBackground = '';

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

  void loadBackground() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      selectedBackground = prefs.getString('background') ?? '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈 화면'),
      ),
      body: Container(
        decoration: BoxDecoration(
          image: selectedBackground == 'background1'
              ? DecorationImage(
                  image: AssetImage('assets/background1.jpg'),
                  fit: BoxFit.cover,
                )
              : selectedBackground == 'background2'
                  ? DecorationImage(
                      image: AssetImage('assets/background2.jpg'),
                      fit: BoxFit.cover,
                    )
                  : null,
        ),
        child: Center(
          child: Text(
            '앱의 홈 화면 입니다.',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제에서는 savedBackground 변수를 사용하여 저장된 배경화면을 읽어와서 홈 화면의 배경으로 설정합니다. 이렇게 읽어온 배경화면은 위젯 트리에서 Container 위젯의 decoration 속성으로 사용됩니다.

위의 코드를 통해 배경화면 선택과 저장을 shared_preferences를 통해 구현할 수 있습니다. 사용자가 선택한 배경화면은 앱을 종료하고 다시 실행해도 유지되어 사용자가 설정에 따라 앱의 외관을 변경할 수 있습니다.

마무리

이제 shared_preferences를 사용하여 사용자가 선택한 배경화면을 저장하는 방법에 대해 알아보았습니다. shared_preferences를 사용하면 간단한 데이터를 디바이스에 영구적으로 저장할 수 있으며, 앱을 종료하고 다시 실행하더라도 저장된 데이터를 유지할 수 있습니다. 이를 활용하여 사용자의 선호도에 맞는 앱 개인화를 구현할 수 있습니다.