[flutter] 플러터에서 훅(hook)을 활용하여 앱 설정 저장하기

14 Dec 2023

flutter

플러터는 페이스북에서 만든 오픈 소스 프레임워크로, 빠르게 아름다운 네이티브 앱을 만들 수 있습니다. 이번에는 플러터에서 훅을 활용하여 앱의 설정을 저장하고 관리하는 방법에 대해 알아보겠습니다.

플러터 훅 소개

훅(Hook)은 플러터의 상태 관리를 쉽게 해주는 개념입니다. 훅을 사용하면 상태를 저장하고, 변경하고, 읽어올 때 번거로운 작업을 효율적으로 처리할 수 있습니다.

앱 설정 저장을 위한 훅 활용

플러터에서 shared_preferences 라이브러리를 사용하여 앱 설정을 저장하고 관리할 수 있습니다. 이를 훅과 결합하여 더욱 간편하게 관리할 수 있습니다.

다음은 shared_preferences 라이브러리를 사용하여 사용자 설정을 저장하는 간단한 예제 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SettingsPage(),
    );
  }
}

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  final _controller = TextEditingController();
  String _name = '';

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

  _loadName() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _name = prefs.getString('name') ?? '';
    });
  }

  _saveName(String value) async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('name', value);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter your name'),
            ),
            RaisedButton(
              child: Text('Save'),
              onPressed: () {
                _saveName(_controller.text);
                _loadName();
              },
            ),
            Text('Hello, $_name'),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 사용자의 이름을 저장하고 로드하는 간단한 설정 페이지를 구현한 예제입니다. shared_preferences를 활용하여 사용자의 이름을 저장하고, 훅을 사용하여 상태를 관리하고 있습니다.

마무리

플러터의 훅을 활용하여 앱 설정을 저장하고 관리하는 방법을 살펴보았습니다. 이를 통해 플러터 앱에서 설정 관련 기능을 효율적으로 구현할 수 있습니다. shared_preferences와 플러터 훅을 함께 활용하면 앱의 설정 기능을 보다 쉽게 구현할 수 있습니다.