[flutter] 플러터 Checkbox 값 저장하기

07 Dec 2023

flutter

Flutter에서 Checkbox는 사용자가 선택할 수 있는 항목을 나타내는 위젯입니다. Checkbox의 상태를 저장하고 나중에 다시 불러와 사용해야 할 때가 있습니다. 이번 글에서는 플러터 Checkbox의 값들을 저장하는 다양한 방법을 알아보겠습니다.

1. Shared Preferences 사용하기

Shared Preferences는 Flutter에서 안드로이드와 iOS의 로컬 데이터를 저장하는 데 사용되는 패키지입니다. Checkbox의 상태를 Shared Preferences에 저장하여 나중에 불러와 사용할 수 있습니다.

import 'package:shared_preferences/shared_preferences.dart';

// Checkbox 상태를 저장하는 함수
_saveCheckboxState(bool isChecked) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setBool('checkbox_state', isChecked);
}

// Checkbox 상태를 불러오는 함수
_loadCheckboxState() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool isChecked = prefs.getBool('checkbox_state') ?? false;
  setState(() {
    checkboxState = isChecked;
  });
}

위의 예시 코드에서 _saveCheckboxState() 함수는 Checkbox의 상태를 checkbox_state라는 이름으로 Shared Preferences에 저장하는 역할을 합니다. _loadCheckboxState() 함수는 저장된 checkbox 상태를 불러와 화면에 반영합니다.

2. Provider 패턴 사용하기

Provider 패턴은 플러터 애플리케이션의 상태 관리를 위한 방법 중 하나입니다. Provider를 사용하여 Checkbox의 상태를 저장하고 관리할 수 있습니다.

먼저, provider 패키지를 프로젝트에 추가해야 합니다. provider 패키지의 사용법은 길고 복잡하기 때문에 자세한 내용은 공식 문서를 참고하시기 바랍니다.

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

// Checkbox 상태를 저장하는 클래스
class CheckboxState with ChangeNotifier {
  bool _isChecked = false;

  bool get isChecked => _isChecked;

  set isChecked(bool value) {
    _isChecked = value;
    notifyListeners();
  }
}

// Checkbox를 사용하는 위젯
class CheckboxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CheckboxState>(
      builder: (context, checkboxState, _) => Checkbox(
        value: checkboxState.isChecked,
        onChanged: (value) {
          checkboxState.isChecked = value;
        },
      ),
    );
  }
}

위의 예시 코드에서 CheckboxState 클래스는 ChangeNotifier를 상속하여 Checkbox의 상태를 저장하고 변경사항을 알리는 역할을 합니다. CheckboxWidget 위젯은 Consumer를 사용하여 Checkbox의 상태를 구독하고 업데이트합니다.

3. 상태 관리 패키지 사용하기

Flutter에서는 다양한 상태 관리 패키지를 사용할 수 있습니다. 예를 들어, GetX나 Riverpod 패키지를 사용하여 Checkbox의 상태를 저장하고 관리할 수 있습니다. 이러한 패키지는 Provider 패턴보다 편리한 상태 관리 기능을 제공합니다.

// GetX
import 'package:get/get.dart';

class CheckboxController extends GetxController {
  bool isChecked = false;

  void toggleCheckbox() {
    isChecked = !isChecked;
    update();
  }
}

class CheckboxWidget extends StatelessWidget {
  final CheckboxController controller = Get.put(CheckboxController());

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: controller.isChecked,
      onChanged: (value) {
        controller.toggleCheckbox();
      },
    );
  }
}

// Riverpod
import 'package:flutter_riverpod/flutter_riverpod.dart';

final checkboxProvider = StateNotifierProvider((ref) => CheckboxStateNotifier());

class CheckboxStateNotifier extends StateNotifier<bool> {
  CheckboxStateNotifier() : super(false);

  void toggleCheckbox() {
    state = !state;
  }
}

class CheckboxWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final checkboxState = watch(checkboxProvider);

    return Checkbox(
      value: checkboxState,
      onChanged: (value) {
        context.read(checkboxProvider).toggleCheckbox();
      },
    );
  }
}

위의 예시 코드에서 GetX 패키지를 사용한 예시와 Riverpod 패키지를 사용한 예시를 볼 수 있습니다. 이러한 패키지들은 각각의 방식으로 Checkbox의 상태를 관리할 수 있으며, 개발자의 취향에 따라 선택하여 사용할 수 있습니다.

이상으로, 플러터 Checkbox의 값 저장과 관리에 대한 다양한 방법을 살펴보았습니다. 선택한 방식에 따라 Checkbox의 상태를 유지하고 사용할 수 있으니, 개발하시는 애플리케이션에 맞는 방법을 선택하여 사용하시기 바랍니다.