[flutter] velocity_x를 사용하여 플러터 앱의 상태 저장 및 복원 기능 구현

14 Dec 2023

flutter

이번에는 flutter 앱에서 상태를 저장하고 복원하는 기능을 구현하는 방법에 대해 알아보겠습니다. flutter에서는 velocity_x라이브러리를 사용하여 간단하게 상태 저장과 복원을 할 수 있습니다.

velocity_x 라이브러리 설치하기

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

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

이후, 터미널에서 flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

상태 저장 및 복원 구현하기

1. 상태 저장

velocity_x의 VelocityX 클래스에서 제공하는 saveToLocal() 메서드를 사용하여 특정 상태를 저장할 수 있습니다.

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State Saving Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextField(
            onChanged: (value) {
              setState(() {
                _text = value;
              });
            },
            decoration: InputDecoration(labelText: 'Enter Text'),
          ),
          RaisedButton(
            onPressed: () {
              VelocityX().saveToLocal('text', _text);
            },
            child: Text('Save'),
          ),
        ],
      ),
    );
  }
}

2. 상태 복원

이어서, velocity_x의 VelocityX 클래스에서 제공하는 loadFromLocal() 메서드를 사용하여 저장한 상태를 복원할 수 있습니다.

class _MyHomePageState extends State<MyHomePage> {
  String _text = '';

  @override
  void initState() {
    super.initState();
    _text = VelocityX().loadFromLocal('text') ?? '';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('State Saving Example'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextField(
            onChanged: (value) {
              setState(() {
                _text = value;
              });
            },
            decoration: InputDecoration(labelText: 'Enter Text'),
            controller: TextEditingController(text: _text),
          ),
          RaisedButton(
            onPressed: () {
              VelocityX().saveToLocal('text', _text);
            },
            child: Text('Save'),
          ),
        ],
      ),
    );
  }
}

위와 같이 velocity_x 라이브러리를 사용하여 상태 저장과 복원 기능을 간단하게 구현할 수 있습니다. flutter 앱에서 상태를 지속적으로 유지하고 복원해야 하는 경우에 유용하게 활용할 수 있습니다.