[flutter] 플러터에서의 앱 상태 저장 및 복원 방법

30 Nov 2023

flutter

플러터(Flutter)는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 인기 있는 프레임워크입니다. 앱의 사용자 경험을 개선하기 위해 앱의 상태를 저장하고 복원하는 기능을 구현하는 것은 매우 중요합니다. 이번 블로그에서는 플러터에서 앱 상태를 저장 및 복원하는 여러 가지 방법을 알아보겠습니다.

1. SharedPreferences 사용하기

SharedPreferences는 안드로이드와 iOS에서 데이터를 저장하고 검색하는 데 사용되는 간단한 키-값 쌍을 지원하는 플러그인입니다. 이 플러그인을 사용하여 앱의 상태를 영구적으로 저장하고 복원할 수 있습니다.

먼저, shared_preferences 라이브러리를 pubspec.yaml 파일에 추가합니다:

dependencies:
  shared_preferences: ^2.0.6

다음으로, SharedPreferences 인스턴스를 생성하고 값을 저장하고 가져오는 예제 코드를 작성해보겠습니다:

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> {
  late SharedPreferences _prefs;
  String _userEmail = '';

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

  Future<void> _initSharedPreferences() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      _userEmail = _prefs.getString('user_email') ?? '';
    });
  }

  Future<void> _saveUserEmail(String email) async {
    await _prefs.setString('user_email', email);
    setState(() {
      _userEmail = email;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('앱 상태 저장 및 복원'),
        ),
        body: Column(
          children: [
            Text('저장된 이메일: $_userEmail'),
            TextFormField(
              onChanged: (value) {
                _saveUserEmail(value);
              },
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 플러터 앱을 생성하고 이메일 값을 저장하고 가져와 Text 위젯에 표시하는 간단한 예제입니다. 이제 앱을 실행하면 이메일 값을 입력할 수 있으며, 입력한 값은 shared_preferences를 통해 저장되고 복원됩니다.

2. Provider 패키지 사용하기

Provider 패키지는 플러터에서 상태 관리를 위한 강력한 도구입니다. 이를 활용하여 앱 상태를 저장하고 복원할 수 있습니다.

먼저, provider 라이브러리를 pubspec.yaml 파일에 추가합니다:

dependencies:
  provider: ^6.0.1

그런 다음, ChangeNotifier 클래스를 활용하여 앱 상태를 관리하고, Provider 위젯을 사용하여 앱 전체에 걸쳐 상태를 공유할 수 있습니다. 다음은 예제 코드입니다:

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

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

class AppState extends ChangeNotifier {
  String _userEmail = '';

  String get userEmail => _userEmail;

  Future<void> saveUserEmail(String email) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('user_email', email);
    _userEmail = email;
    notifyListeners();
  }

  Future<void> getUserEmail() async {
    final prefs = await SharedPreferences.getInstance();
    _userEmail = prefs.getString('user_email') ?? '';
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => AppState(),
      child: MaterialApp(
        home: Consumer<AppState>(
          builder: (context, appState, _) => Scaffold(
            appBar: AppBar(
              title: Text('앱 상태 저장 및 복원'),
            ),
            body: Column(
              children: [
                Text('저장된 이메일: ${appState.userEmail}'),
                TextFormField(
                  onChanged: (value) {
                    appState.saveUserEmail(value);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드는 AppState 클래스를 생성하여 앱 상태를 관리하고, ChangeNotifierProvider를 통해 앱 전체에 걸쳐 상태를 공유하도록 설정한 예제입니다. 상태를 변경하고 앱 상태가 업데이트될 때마다 notifyListeners를 호출하여 위젯이 다시 렌더링되도록 합니다.

결론

플러터에서 앱 상태를 저장 및 복원하기 위해 SharedPreferences와 Provider 패키지를 사용하는 방법을 배웠습니다. 이러한 기능을 활용하여 사용자가 앱을 다시 실행하거나 앱을 배경으로 전환하는 등의 상황에서도 앱의 상태를 올바르게 유지할 수 있습니다. 이러한 상태 관리 기술을 응용하여 다양한 기능을 구현하는 등의 활용도를 높일 수 있습니다.