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

15 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 사용자가 입력한 폼 데이터를 저장하고, 이를 shared_preferences 라이브러리를 사용하여 앱을 다시 열었을 때 그 데이터를 초기화하는 방법에 대해 알아보겠습니다.

shared_preferences 라이브러리란?

shared_preferences는 Flutter에서 간단한 키-값 형태의 영구 저장소를 제공하는 라이브러리입니다. 이를 사용하여 사용자의 데이터를 로컬에 저장하고 불러올 수 있습니다.

먼저, pubspec.yaml 파일에 다음과 같이 shared_preferences 라이브러리를 추가합니다:

dependencies:
  shared_preferences: ^2.0.6

이제 해당 패키지를 가져와서 사용자가 입력한 폼 데이터를 저장하고 불러오는 방법을 알아보겠습니다.

사용자가 입력한 폼 데이터 저장하기

사용자가 입력한 데이터를 저장하려면, 폼을 제출하거나 입력이 완료된 후 해당 데이터를 shared_preferences에 저장해야 합니다.

예를 들어, 사용자가 입력한 이름과 이메일을 저장하는 방법은 다음과 같습니다:

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

class FormPage extends StatefulWidget {
  @override
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  TextEditingController nameController = TextEditingController();
  TextEditingController emailController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _loadFormData(); // 앱이 실행될 때 저장된 데이터 불러오기
  }

  _loadFormData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      nameController.text = prefs.getString('name') ?? '';
      emailController.text = prefs.getString('email') ?? '';
    });
  }

  _saveFormData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('name', nameController.text);
    prefs.setString('email', emailController.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Page'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              controller: emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            ElevatedButton(
              onPressed: () {
                _saveFormData(); // 폼 저장하기
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 SharedPreferences를 사용하여 name과 email을 저장하고 불러오는 방법을 보여줍니다.

앱을 다시 열었을 때 초기 데이터로 설정하기

이제 앱을 다시 열었을 때 초기 데이터로 저장된 값을 적용하는 방법에 대해 알아보겠습니다.

void main() {
  runApp(MyApp());
}

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

위 코드에서 FormPage 위젯을 앱의 첫 화면으로 설정하였습니다. 이로써, initState에서 저장된 데이터를 불러와 폼 필드에 적용하게 됩니다.

이제 앱을 다시 실행하면, 저장된 데이터가 초기 데이터로 설정되는 것을 확인할 수 있을 것입니다.

이와 같이, shared_preferences를 사용하여 사용자가 입력한 폼 데이터를 초기화하는 방법에 대해 알아보았습니다. Flutter에서 데이터를 영구적으로 저장하고 불러오는 데에는 shared_preferences가 매우 유용하며, 앱의 사용자 경험을 향상시키는 데 도움이 될 것입니다.