[Flutter] Shared preferences를 사용해서 좋아요 버튼 구현하기

Flutter의 Shared preferences 플러그인은  앱 내에서 간단한 설정, 사용자 프로필, 선호도 및 기타 작은 데이터 조각을 저장하는데 쓸 수 있는 패키지다. 즉, 앱 내부 디스크에 뭔가를 저장해놓고 기억하겠단 뜻이다. 

(하지만, flutter 공식 사이트에 따르면, 디스크에 지속되리라는 보장이 없으므로 이 플러그인은 중요한 데이터를 저장하는 데 사용해서는 안 된다고 한다.)

 

오늘은 이 플러그인을 이용해서 내가 좋아요를 누른 게시글의 정보를 디스크에 저장해보려고 한다.

---

0. 핵심 개념 : get / set 

Sharedpreferences 플러그인의 핵심적인 두 가지 메서드는 get , set 메서드다.

get은 저장된 데이터를 읽어오는 데 사용하고, set은 데이터를 저장하는 데 사용한다. 이 두 개를 이어주는게 key다.

A라는 key로 set메서드를 실행한 데이터에 대해 get메서드에서 A key를 기반으로 호출하면 가져올 수 있다.

 

1. 플러그인 install / import

pubspec.yaml 파일의 dependencies에 추가해주고, import를 해준다.

dependencies:
  shared_preferences: ^2.2.3

import 'package:shared_preferences/shared_preferences.dart';

 

2. get / set 메서드를 이용해 저장하고 불러오는 메서드 선언

1)좋아요 여부/ 키를 담을 변수 선언

 bool _isLiked = false;

  final String key = 'random_key';

 

2)initState로 초기화

앱을 실행했을 때, 좋아요 여부를 load 해줄 함수를 initState에서 실행한다.

@override

  void initState() {

    super.initState();

    _loadLikeStatus();

  }

 

3)get으로 가져오기

데이터 저장 및 불러오기 작업에는 시간이 걸릴 수 있으므로 비동기로 SharedPreferences 인스턴스를 생성해주고, key에 해당하는 Boolean 값을 가져와서 _isLiked에 저장한다(없으면 false로)

Future<void> _loadLikeStatus() async {

    final prefs = await SharedPreferences.getInstance();

    setState(() {

      _isLiked = prefs.getBool(key) ?? false;

    });

  }

 

4)set으로 저장하기

 버튼을 클릭시 실행할 메서드를 선언해준다.

클릭시 setState를 통해 좋아요 → 좋아요 해제 , 좋아요 해제 → 좋아요 로 상태 변환 및 그에 따른 rebuild 작업을 수행하게 해주고, 해당 key에 대한 _isLiked 값을 저장한다.

  Future<void> _toggleLike() async {

    final prefs = await SharedPreferences.getInstance();

    setState(() {

      _isLiked = !_isLiked;

      prefs.setBool(key, _isLiked);

    });

  }

 

전체코드 첨부합니다

mport '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(

      home: LikeStatusScreen(),

    );

  }

}

 

class LikeStatusScreen extends StatefulWidget {

  const LikeStatusScreen({super.key});

 

  @override

  _LikeStatusScreenState createState() => _LikeStatusScreenState();

}

 

class _LikeStatusScreenState extends State<LikeStatusScreen> {

  bool _isLiked = false;

  final String key = 'random_key';

 

  @override

  void initState() {

    super.initState();

    _loadLikeStatus();

  }

 

  Future<void> _loadLikeStatus() async {

    final prefs = await SharedPreferences.getInstance();

    setState(() {

      _isLiked = prefs.getBool(key) ?? false;

    });

  }

 

  Future<void> _toggleLike() async {

    final prefs = await SharedPreferences.getInstance();

    setState(() {

      _isLiked = !_isLiked;

      prefs.setBool(key, _isLiked);

    });

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Like Status Example'),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Text(_isLiked ? 'You like this.' : 'You do not like this.'),

            IconButton(

              icon: Icon(

                _isLiked ? Icons.favorite : Icons.favorite_border,

                color: _isLiked ? Colors.red : Colors.grey,

              ),

              onPressed: _toggleLike,

            ),

          ],

        ),

      ),

    );

  }

}

---

끝.

읽어주셔서 감사합니다.