[Practice] shared preference

목표

상대적으로 적은 양의 키-값의 데이터를 저장하기 위한 shared_preferences 플러그인의 의미를 알고 예제를 통해 활용법을 확인해보자.

---

디스크에 키-값의 데이터를 저장하는 이 플러그인은 iOS의 NSUserDefaults와 Android의 SharedPreferences를 감싸고 있는 형태로 존재하고 있다.

 

그리고 해당 플러그인의 사용법은 주로 다음과 같은 순서로 진행이 된다.

1. Dependencies 추가

2. 데이터 저장

3. 데이터 읽기

4. 필요시 데이터 삭제

 

사용 예제

기능: 버튼을 눌러 숫자가 올라가는 카운터 앱을 만든다.

 

1. Dependencies 추가

pubspec.yaml파일에 shared_preferences 플러그인을 추가한다.

dependencies:
  shared_preferences: ^2.1.0

main.dart에서 불러오기는 다음을 통해 가능하다.

import 'package:shared_preferences/shared_preferences.dart';

 

2. 기본 App틀을 만들자

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 MaterialApp(
      title: 'shared preference',
      home: Myhome(),
      theme: ThemeData(primaryColor: Colors.purple),
    );
  }
}

class Myhome extends StatefulWidget {
  const Myhome({super.key});

  @override
  State<Myhome> createState() => _MyhomeState();
}

class _MyhomeState extends State<Myhome> {

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
 }

 

3. 우리가 만들고자 하는 것은 카운터 앱이니 body영역에 카운트를 표시할 수 있는 text 공간을 만들자. floatingactionbutton을 추가하여 onpressed가 될 수록 무엇인가 작동이 일어난 다는 것을 만들어 줘야한다. 그러기 위해서 _incrementCounter라는 위젯을 만든다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('shared preference'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'The number you have pushed:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.displaySmall,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: "Increment",
        child: Icon(Icons.add),
      ),
    );
  }

 

4. _counter는 버튼을 누른만큼의 숫자가 표시되는 곳이다. 그러기 위해선 일단 int _counter 로 초기 숫자를 선언해 준다. 본인은 0으로 지정을 했다. 그 다음 _loadCounter라는 위젯을 만들어 처음 시작할때 counter의 값을 불러오도록 (읽도록) 하였으며, 존재하지 않으면 0을 반환하도록 설정하였다. 여기에 쓰인 getter 메서드는 getInt, getBool, getString과 같은 형식을 읽어올 수 있다. 읽어오는 방법은 _counter = (prefs.getInt('counter')?? 0);을 통해 구현하였다.

class _MyhomeState extends State<Myhome> {
  int _counter = 0;

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

  /// 시작할때 counter의 값을 불러온다.
  _loadCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      /// counter키에 해당하는 데이터를 읽기 시도하며, 존재하지 않을시에는 0을 반환한다.
      _counter = (prefs.getInt('counter') ?? 0);
    });
  }

 

5. 자 그럼 카운터 앱인 만큼 숫자를 증가할때에도 무언가 일어날 수 있도록 위젯내에서 '행동지침'을 만들어야하지 않겠는가? 버튼을 누르면  +1을 추가되도록 설정을 하였으며, prefs.setInt('counter', _counter)를 통해서 증가한 값이 키-값에 저장이 되도록 지정하였다.

• 여기서 쓰인 setter메서드는 데이터 저장을 위한 방법이며, Setter메서드는 setInt, setBool, setString과 같은 원시 타입을 지원한다. 그리고 이는 키-값을 동기적으로 업데이트 하며 데이터를 디스크에 저장하도록 하는 작업을 수행하게 한다.

/// 클릭시에 counter의 값을 증가시킨다.
  _incrementCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = (prefs.getInt('counter') ?? 0) + 1;
      /// button을 누를때마다 1이 증가하므로 이 결과를 '디스크에' 저장한다.
      /// 여기서 setter 메서드는 다음의 두가지 작업을 진행한다.
      /// 1. 메모리 상에서 키-값 쌍을 동기적으로 업데이트 한다.
      /// 2. 다음으로 데이터를 디스크에 저장한다.
      /// 여기서는 key가 _counter이고, 초기 값은 0이다.
      prefs.setInt('counter', _counter);
    });
  }

6. 카운트 앱이 완성이 되었다.

명심해야할 것은 키-값 저장소는 쉽고 간편하지만 원시타입의 데이터 (int, double, bool, string, stringList)들만 지원하며  대용량 데이터 저장을 위해서는 설계가 되지 않아. 혹시라도 데이터 저장을 크게 하고 싶다면 다른 플러그인을 사용하기를 바란다.

 

 

완성된 코드는 다음과 같다.

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 MaterialApp(
      title: 'shared preference',
      home: Myhome(),
      theme: ThemeData(primaryColor: Colors.purple),
    );
  }
}

class Myhome extends StatefulWidget {
  const Myhome({super.key});

  @override
  State<Myhome> createState() => _MyhomeState();
}

class _MyhomeState extends State<Myhome> {
  int _counter = 0;

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

  /// 시작할때 counter의 값을 불러온다.
  _loadCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      /// counter키에 해당하는 데이터를 읽기 시도하며, 존재하지 않을시에는 0을 반환한다.
      _counter = (prefs.getInt('counter') ?? 0);
    });
  }

  /// 클릭시에 counter의 값을 증가시킨다.
  _incrementCounter() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _counter = (prefs.getInt('counter') ?? 0) + 1;

      /// button을 누를때마다 1이 증가하므로 이 결과를 '디스크에' 저장한다.
      /// 여기서 setter 메서드는 다음의 두가지 작업을 진행한다.
      /// 1. 메모리 상에서 키-값 쌍을 동기적으로 업데이트 한다.
      /// 2. 다음으로 데이터를 디스크에 저장한다.
      /// 여기서는 key가 _counter이고, 초기 값은 0이다.
      prefs.setInt('counter', _counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('shared preference'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'The number you have pushed:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.displaySmall,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: "Increment",
        child: Icon(Icons.add),
      ),
    );
  }
}

참고: https://flutter-ko.dev/docs/cookbook/persistence/key-value