[flutter] shared_preferences를 사용하여 사용자가 입력한 폼 데이터를 확인하는 방법은?

15 Dec 2023

flutter

Flutter 애플리케이션을 개발하면서 사용자가 입력한 데이터를 유지하고 싶을 때가 있습니다. 이를 위해 shared_preferences 패키지를 사용하여 사용자가 입력한 폼 데이터를 애플리케이션 내에 영구적으로 저장하고 확인하는 방법에 대해 알아보겠습니다.

1. `shared_preferences` 패키지 추가

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.8

그리고나서 터미널에서 아래 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

2. 사용자 입력 데이터 저장

사용자가 입력한 데이터를 저장하는 예시를 들어보겠습니다. 아래 코드는 사용자가 입력한 이름을 shared_preferences를 이용해 저장하는 예시입니다.

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

class FormScreen extends StatefulWidget {
  @override
  _FormScreenState createState() => _FormScreenState();
}

class _FormScreenState extends State<FormScreen> {
  TextEditingController _nameController = TextEditingController();

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

  _loadData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String name = prefs.getString('name') ?? '';
    _nameController.text = name;
  }

  _saveData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('name', _nameController.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {
                _saveData();
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 _loadData 함수는 애플리케이션이 시작될 때 이전에 저장한 이름을 불러옵니다. _saveData 함수는 사용자가 입력한 이름을 shared_preferences를 사용하여 저장합니다.

3. 데이터 확인

이제 사용자가 입력한 데이터를 확인하는 방법을 알아봅시다.

SharedPreferences prefs = await SharedPreferences.getInstance();
String savedName = prefs.getString('name') ?? 'No name';
print(savedName);

위 코드에서 SharedPreferences.getInstance()를 호출하여 저장된 이름을 불러옵니다. 이때, 저장된 이름이 없을 경우 기본값으로 ‘No name’을 설정합니다.

이렇게하면 사용자가 입력한 데이터를 확인할 수 있습니다.

shared_preferences를 사용하여 사용자가 입력한 폼 데이터를 확인하는 방법에 대한 간단한 예시를 살펴보았습니다. shared_preferences를 사용하면 간단하게 데이터를 영구적으로 저장하고 가져올 수 있어 편리합니다.

더 많은 정보는 shared_preferences 패키지 문서를 확인하시기 바랍니다.

1. shared_preferences 패키지 추가

2. 사용자 입력 데이터 저장

3. 데이터 확인

1. `shared_preferences` 패키지 추가