[flutter] SharedPreferences으로 로컬에 데이터 저장하기

플러터를 통한 앱 개발은 프론트엔드 개발에 속하며 UI/UX를 제공한다
데이터베이스에 데이터를 저장, 제공, 수정하는 기능들은 구현하기에는 무리가 있으며, 이는 벡엔드 개발의 영역이다

물론 자동 로그인과 같이 벡엔드 없이 프론트엔드에서 직접 관리할 때도 있다

그리하여 우리는 데이터베이스를 통해 직접 관리하기도, API 통신을 활용하거나 1인 개발자에게 유용한 파이어베이스를 활용하는 등 다양한 방법을 사용할 수 있다

간단한 todo앱을 만들어서 기능들을 구현 예정이다

1. SharedPreferences

SharedPreferences는 저장해야 할 데이터의 양이 적거나 아주 간단한 경우 사용할 수 있는 기법이다
shared_prefs는 안드로이드에서 처음 나온 기능이며, ios는 NSUserDefaults라는 기능이 그 역할을 수행한다
플러터에서는 shared_prefs라는 이름으로 두 플랫폼 모두 처리할 수 있다

shared_prefs는 키-값 방식으로 데이터를 저장하는 방법으로 앱을 껐다 켜도 데이터가 유지되는 특성이 있다
하지만 키-값 방식 외 구조 설계가 불가능하므로 자동 로그인이나 도움말 스킵 여부 등 간단한 데이터를 다루는 도구로 사용한다

import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text('SplashScreen', style: TextStyle(fontSize: 20),),
            Text('나만의 일정 관리 : TODO 리스트 앱', style: TextStyle(fontSize: 20),),
          ],
        ),
      ),
    );
  }
}

Splash는 앱을 켰을 때 브랜드 로고가 나타나는 일종의 인트로 화면이다
Splash는 로고만 나타내는 화면처럼 보이지만 실제로는 필요한 정보를 로드한다
여기서는 로그인 정보를 가져와서 정보가 있다면 ListScreen으로 이동하고, 저장된 정보가 없다면 LoginScreen으로 이동할 것이다

StatefulWidget으로 선언한 이유는 initState()를 사용하기 위해서이다
이 메소드를 활용해 처음 앱이 실행되고 SplashScreen이 빌드되었을 때 로그인 정보를 불러와 확인하고 다음 화면으로 넘어가도록 하는 기능을 작성할 것이다

@override
void initState() {
  // TODO: implement initState
  super.initState();
  Timer(Duration(seconds: 2), () => {
    moveScreen();
  });
}

Timer를 2초간 설정해 2초 내에 moveScreen()이라는 함수가 동작하도록 선언했다

void moveScreen() async {
  await checkLogin().then((isLogin) {
    if (isLogin) {
      Navigator.of(context).pushReplacementNamed(
          MaterialPageRoute(builder: (Context) => ListScreen()));
    } else {
      Navigator.of(context).pushReplacementNamed(
          MaterialPageRoute(builder: (Context) => LoginScreen()));
    }
  });
}

기기에 저장된 shared_prefs에서 값을 가져와야 하기 때문에 시간이 걸린다
시간이 소요되는 기능을 구현할 때에는 비동기(async-await)로 구성해 checkLogin()이 수행된 후 다음 기능이 동작하도록 한다
isLogin을 인자로 받아 참이라면 ListScreen, 거짓이라면 LoginScreen으로 이동한다

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  shared_preferences: ^2.0.6

Future<bool> checkLogin() async{
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool isLogin = prefs.getBool('isLogin') ?? false;
  return isLogin;
}

패키지 설치 후 checkLogin() 함수를 작성해준다
역시 비동기 처리했으며, 이로 인해 함수는 Future 타입의 함수가 되었다
.getInstance()로 기기 내 shared_prefs 객체를 가져오고 isLogin으로 저장된 bool형태의 값을 getbool로 가져온다
처음 설치했을 때에는 isLogin 값이 없기 때문에, null인 경우 isLogin을 false로 가져온다

class LoginScreen extends StatelessWidget {
  Future setLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setBool('isLogin', true);
  }
  
// (생략)...

  ElevatedButton(
    onPressed: () {
      setLogin().then((_) => {
            Navigator.of(context).pushReplacement(
                MaterialPageRoute(builder: (context) => ListScreen()))
          });
    },
    child: Text('로그인'),
  ), 
}

간단히 로그인 화면을 구현하여 버튼에 setLogin 기능을 추가했다
setLogin()이 실행되면 shared_prefs에 isLogin값을 true로 입력해주는 기능이다
값을 설정하는 것은 setBool()을 통해 키와 값을 차례로 입력하면 키에 값이 입력된다

---

하지만 위 패키지는 안드로이드 ios 둘 다 보안에 취약하다는 문제가 발생한다고 한다
그렇기 위해 안드로이드
이를 위해 다음에는 flutter_secure_storage의 사용법을 알아보도록 하자

---

출처 : 쉽고 빠른 플러터 앱 개발