Flutter 강좌 - [Persistence] Shared Preferences 사용법

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

이번 강좌에서는 Shared Preferences 사용법에 대해서 알아본다. Shared Preferences는 key-value 형태의 데이터를 디스크에 저장해서 사용하는 방법으로 기존의 안드로이드 앱 개발에서도 자주 사용되어 왔다. 로그인이 필요한 앱을 개발할 때 사용자의 ID와 패스워드 등을 기억하는 기능을 구현할 때 이용할 수 있다.

Shared Preferences 기능을 이용하기 위해 pubspec.yaml의 dependencies를 다음과 같이 수정한다.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  shared_preferences: ^0.5.3+2

 

앱의 실행화면은 다음과 같다.

화면 중앙에 숫자 카운터가 존재하며 버튼을 클릭할 때 마다 숫자가 1씩 증가한다. 앱을 종료한 후 다시 시작하면 기존의 카운터 값이 출력된다. 즉 카운터 값이 Shared Preferences 로 관리되고 있는 것이다.

 

소스코드는 다음과 같다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shared preferences demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: 'Shared preferences demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  SharedPreferences _prefs;

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

  _loadCounter() async {
    // SharedPreferences의 인스턴스를 필드에 저장
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      // SharedPreferences에 counter로 저장된 값을 읽어 필드에 저장. 없을 경우 0으로 대입
      _counter = (_prefs.getInt('counter') ?? 0);
    });
  }

  _incrementCounter() async {
    setState(() {
      // 카운터 값을 1 증가
      _counter = (_prefs.getInt('counter') ?? 0) + 1;
      // 카운터 최신 값을 SharedPreferences에 counter라는 이름으로 저장
      _prefs.setInt('counter', _counter);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              // 카운터 값을 설정
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 버튼을 누를 때 마다 _incrementCounter 메소드 호출
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

버튼이 눌릴 때 마다 화면상의 카운터 값이 변하게 되므로 StatefulWidget 위젯과 State 클래스로 앱을 구현한다.

State 클래스(_MyHomePageState)에는 카운터 값을 저장하는 필드와, SharedPreferences 인스턴스를 저장하는 필드가 존재한다.

State 클래스가 생성되면서 initState 메소드에 의해 _loadeCounter 메소드가 호출된다. _loadCounter 메소드는 async 메소드로 await 방식으로 SharedPreferences의 인스턴스를 받아 필드 _pref에 저장하고, setState 함수 안에서 _pref를 이용해서 카운터 값을 로딩하여 필드에 저장한다.

_incrementCounter 메소드는 버튼이 눌릴 때 마다 호출되는 async 메소드로 카운터 값을 증가 시키고 그 값을 _pref를 이용해서 SharePreferences로 저장한다.

 

본 강좌는 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.

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

Store key-value data on disk

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱