[Flutter] 데이터를 기기에 저장하기 (SharedPreferences) [맥북💻]

 목차

1. SharedPreferences
   1. SharedPreferences 란?
2. 사용 예시
   1. pubspec.yaml 설정
   2. 메소드 및 변수 작성
   3. Scaffold 위젯 작성
3. SharedPreferences 에러 처리 방법
   1. 터미널에 명령어 입력
   2. pubspec.yaml 설정 변경
   3. flutter 재실행

 

 

 

✅ SharedPreferences

 

1️⃣ SharedPreferences 란?

• 간단한 데이터를 디스크에 저장하여 사용하는 방식
• 사용 예 : 자동 로그인 여부, 마지막 방문 페이지, 다크모드 설정 여부 등...
• 특징 : 비동기 API 이기 때문에 Future 기반(async/await)으로 동작

 

 

✅ 사용 예시

 

1️⃣ pubspec.yaml 설정

^2.5.3 버젼 입력

 

2️⃣ 메소드 및 변수 작성

1. 메소드 및 변수 선언

     1-1. late : 플러터 null-safty가 적용된 이후 사용. '지금 초기화하지 않고 나중에 초기화'를 할 때 사용.
          ** late로 선언된 변수는 non-nullable이지만 나중에 값을 채우겠다는 뜻
          ** late 미사용 시, 런타임 에러가 발생

     1-2. TextEditingController :  텍스트 입력을 다루는 위젯(TextField, TextFormField)을 제어하기 위해 쓰는 컨트롤러

2. 앱 초기화 : 입력받을 데이터가 있을 경우, 더미 데이터로 인한 오류 발생을 방지하기 위해 초기화를 진행

3. java에서의 getter/setter
     3-1. SharedPreferences 타입은 map 형태를 띄고 있어 key-value 로 사용

     3-2. Dart언어에서의 "??" : java에서 삼항 연산자와 같은 역할

 

 

3️⃣ Scaffold 위젯 작성

1. body의 최상단 

2. 데이터를 입력받을(TextField 위젯) 영역

3. 하단 버튼

 

 

4️⃣ 테스트

 

 

 

✅ SharedPreferences 에러 처리 방법

✔️ pusbpec.yaml 에 "shared_preferences:" 입력 후 main.dart 에서 SharedPreferences 에러가 날 때 처리 방법

import부터 에러

 

 

1️⃣ 터미널에 명령어 입력

1. flutter pub get : Flutter 패키지를 다운로드하고 프로젝트에 적용하는 명령어
2. flutter upgrade : Flutter 추가 적용 사항을 반영하는 명령어

명령어 입력

 

2️⃣ pubspec.yaml 설정 변경
** 너무 최신 버젼도 에러가 생김 (ex. ^3.0.x)

^2.5.3 버젼 입력

 

3️⃣ flutter 재실행 (run)

정상 작동

 

 

 

 

✔️ 사용된 코드

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

void main() {   // 컴파일러의 시작 지점 (void main())
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {     // main() 에서 반환되는 위젯
  const MyApp({super.key});               // const : 상수 역할을 함으로써 build시 불필요한 rebuild를 방지하기 위해 위젯을 재사용

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(),           // 앱 실행시, 첫 번째로 띄워질 화면
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{

  late SharedPreferences _prefs; // late : 플러터 null-safety 적용된 이후, null 허용 설정 시 사용
  String _username = "";  // 언더바(_) : java에서 private 역할과 동일

  // TextEditingController : Flutter 에서 텍스트 필드(TextField, TextFormField) 와 같이 텍스트 입력을 다루는 위젯을 제어하기 위해 쓰는 컨트롤러
  final TextEditingController _usernameController = TextEditingController();

  @override
  void initState(){ // initState : 앱 시작 시, 초기화 해주는 메소드
    super.initState();
    _getUsername();
  }

  _saveUsername(){
    setState((){
      _username = _usernameController.text; // _usernameController.text : 유저가 입력한 값
      _prefs.setString("currentUsername", _username);
      print("username : $_username");    // _username
      String? test = _prefs.getString("currentUsername"); // SharedPreferences 타입이라 String? 으로 타입을 지정해야함
      print("test : $test");
    });
  }

  _getUsername() async{ // 비동기 처리를 위해 async
    _prefs = await SharedPreferences.getInstance();
    setState((){
      _username = _prefs.getString("currentUsername") ?? "";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      body: Container(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(15),
              child: Text("현재 사용자 이름 : $_username"),
            ),
            Container(
              padding: EdgeInsets.all(15),
              child: TextField(
                controller: _usernameController,
                textAlign: TextAlign.left,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: "이름을 입력하세요",
                )
              ),
            ),
            ElevatedButton(
              onPressed: () => _saveUsername(),   // 람다식 : 클릭 시, 작동할 메소드(or 기능)
              child: Text("저장"),
            )
          ],
        ),
      ),
    );
  }
}