Flutter - Shared Preference - 공유 저장소 데이터 저장/불러오기

Shared Preference 란?

키-값으로 데이터를 저장할 수 있는 플러그인
디바이스 디스크에 데이터를 저장하는 기능 제공
- 예시) 특정 디바이스에서 토큰 정보를 저장하여 자동 로그인 기능 제공
- 즉, 유저 정보를 디바이스 디스크에 저장하여 앱에서 필요에 의해 확인
주의사항 : 디바이스 디스크의 데이터가 지속된다는 보장이 없으므로 중요한 데이터 저장은 권장하지 않음

Shared Preference 프로젝트에 추가하기

pubspec.yaml
- 프로젝트 내의 pubspec.yaml 파일 열기
- dependencies 하위에 아래의 코드 추가

dependencies:
  shared_preferences: ^2.1.0

혹은 터미널에서 플러터 명령어로 설치

# 터미널에서 입력
flutter pub add shared_preferences

의존성 추가 확인

다트 코드 최상단에 shared preference 임포트

import 'package:shared_preferences/shared_preferences.dart';

구문

데이터 쓰기

// shared preferences 인스턴스 생성하기
// SharedPreferences 변수명 = await SharedPreferences.getInstance();

// 예시
final SharedPreferences prefs = await SharedPreferences.getInstance();

/* -----------------------------------------------------------*/

// shared preferences에 데이터 저장하기
// await 변수명.set자료형(키, 밸류);

// 예시
// 키(counter)에 정수형 데이터(10) 저장
await prefs.setInt('counter', 10);

// 키(repeat)에 부울 데이터(true) 저장
await prefs.setBool('repeat', true);

// 키(decimal)에 소수점 데이터(true) 저장
await prefs.setDouble('decimal', 1.5);

// 키(action)에 문자 데이터(true) 저장
await prefs.setString('action', 'Start');

// 키(items)에 문자 리스트 데이터(true) 저장
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);

데이터 읽기

// shared preferences에서 데이터 불러오기
// 자료형? 변수명 = SharedPreferences인스턴스.get자료형(키);

// 예시
// 키(counter)에서 정수형 데이터 읽어오기, 없을 경우 null 반환
final int? counter = prefs.getInt('counter');

// 키(repeat)에서 부울 데이터 읽어오기, 없을 경우 null 반환
final bool? repeat = prefs.getBool('repeat');

// 키(decimal)에서 소수점 데이터 읽어오기, 없을 경우 null 반환
final double? decimal = prefs.getDouble('decimal');

// 키(action)에서 문자 데이터 읽어오기, 없을 경우 null 반환
final String? action = prefs.getString('action');

// 키(items)에서 문자 리스트 데이터 읽어오기, 없을 경우 null 반환
final List<String>? items = prefs.getStringList('items');

데이터 삭제

// shared preferences에 존재하는 데이터 삭제하기
// await SharedPreferences인스턴스.remove(키);

// 예시
// 키(counter)의 데이터 삭제
await prefs.remove('counter');

샘플 코드

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'SharedPreferences Demo',
      home: SharedPreferencesDemo(),
    );
  }
}

// SatefulWidget
class SharedPreferencesDemo extends StatefulWidget {
  const SharedPreferencesDemo({super.key});

  @override
  SharedPreferencesDemoState createState() => SharedPreferencesDemoState();
}

class SharedPreferencesDemoState extends State<SharedPreferencesDemo> {
  // shared preference 인스턴스 생성
  final Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  late Future<int> _counter;

  // 플로팅 액션 버튼 클릭 이벤트
  Future<void> _incrementCounter() async {
    final SharedPreferences prefs = await _prefs;
    // counter 값이 존재하지 않으면 0으로 저장
    final int counter = (prefs.getInt('counter') ?? 0) + 1;

    // 앱의 상태 변경, 클릭시 카운트 +1
    setState(() {
      _counter = prefs.setInt('counter', counter).then((bool success) {
        return counter;
      });
    });
  }

  // 상태 위젯 초기화
  @override
  void initState() {
    super.initState();
    _counter =
        _prefs.then((SharedPreferences prefs) => prefs.getInt('counter') ?? 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SharedPreferences Demo'),
      ),
      body: Center(
        // FutureBuilder : 비동기 위젯 빌드
        child: FutureBuilder<int>(
          future: _counter,
          // AsyncSnapshot : 완료, 오류, 결과 등의 상태 정보 포함
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            // 값을 받아오지 못할 경우
            if (snapshot.connectionState != ConnectionState.done) {
              return const CircularProgressIndicator();
            }
            // 에러 발생할 경우
            if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); }
            // 값을 정상적으로 받아올 경우
            else {
              return Text(
                'Button tapped ${snapshot.data} time${snapshot.data == 1 ? '' : 's'}.\n\n'
                'This should persist across restarts.',
              );
            }
          },
        ),
      ),
      // 플로팅 액션 버튼
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}