본문 바로가기

Flutter & Dart

[Flutter] Getx 와 Hive 같이 사용하는 방법

반응형

Flutter에서 Hive와 GetX를 함께 사용하는 방법

Hive와 GetX는 Flutter에서 데이터 관리와 상태 관리를 위한 강력한 도구들입니다. Hive는 로컬 데이터베이스로 데이터를 쉽게 저장하고 조회할 수 있게 해주며, GetX는 상태 관리와 네비게이션을 효율적으로 처리할 수 있도록 도와줍니다. 두 라이브러리를 함께 사용하면, 데이터베이스 상태를 쉽게 관리하면서도 앱의 상태를 효율적으로 업데이트할 수 있습니다.

1. 프로젝트 설정

먼저 pubspec.yaml에 Hive와 GetX 패키지를 추가합니다. 또한 hive_flutter 패키지도 함께 추가하여 Flutter 앱과 Hive를 연동합니다.

dependencies:
  flutter:
    sdk: flutter
  hive: ^2.0.0
  hive_flutter: ^1.1.0
  get: ^4.6.5

 

pub get을 실행하여 패키지를 설치합니다.

2. Hive 초기화

Hive를 사용할 때, 반드시 앱 시작 시 Hive를 초기화해야 합니다. main.dart 파일에서 Hive를 초기화한 후, GetX를 활용한 상태 관리가 가능합니다.

import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:get/get.dart';
import 'home_screen.dart';

void main() async {
  await Hive.initFlutter();  // Hive 초기화
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(  // GetX 상태 관리용 GetMaterialApp 사용
      home: HomeScreen(),
    );
  }
}

 

3. 모델 클래스 정의

Hive를 사용하려면 저장할 데이터 모델을 정의해야 합니다. 예를 들어, 사용자 정보를 저장하는 User 클래스를 정의하고, 이를 Hive에 저장할 수 있도록 HiveType과 HiveField를 지정합니다.

import 'package:hive/hive.dart';

part 'user.g.dart';  // 자동으로 생성된 Hive 어댑터

@HiveType(typeId: 0)
class User {
  @HiveField(0)
  final String name;

  @HiveField(1)
  final int age;

  User({required this.name, required this.age});
}

 

모델 클래스에 대한 Hive 어댑터는 build_runner를 사용해 생성할 수 있습니다.

 

flutter pub run build_runner build

4. GetX 컨트롤러로 상태 관리

GetX의 Controller를 사용하여 상태를 관리합니다. 예를 들어, 사용자의 데이터를 Hive에서 가져와서 상태를 관리하는 UserController를 작성할 수 있습니다.

 
import 'package:get/get.dart';
import 'package:hive/hive.dart';
import 'user.dart';

class UserController extends GetxController {
  // Hive에서 User 데이터를 저장할 Box를 열기
  late Box<User> userBox;

  // 사용자 정보 상태를 관리하는 Rx 변수
  var user = User(name: '', age: 0).obs;

  @override
  void onInit() {
    super.onInit();
    openBox();  // Box 열기
  }

  // Hive Box 열기
  void openBox() async {
    userBox = await Hive.openBox<User>('userBox');
    fetchUser();  // Box에서 데이터를 가져와서 상태 업데이트
  }

  // 사용자 정보 가져오기
  void fetchUser() {
    var storedUser = userBox.get('user');
    if (storedUser != null) {
      user.value = storedUser;
    }
  }

  // 사용자 정보 저장하기
  void saveUser(User newUser) {
    userBox.put('user', newUser);  // Hive에 저장
    user.value = newUser;  // 상태 업데이트
  }
}

 

5. HomeScreen에서 사용하기

이제 HomeScreen에서 GetX 상태 관리와 Hive를 함께 사용하여, UI를 업데이트합니다. UserController를 GetX로 가져와 상태를 반영하고, 버튼을 눌러 데이터를 저장하는 예시입니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'user.dart';
import 'user_controller.dart';

class HomeScreen extends StatelessWidget {
  final UserController userController = Get.put(UserController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hive와 GetX 예제')),
      body: Obx(() {
        // GetX의 Obx 위젯으로 상태 변화에 따른 UI 업데이트
        var user = userController.user.value;
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('이름: ${user.name}', style: TextStyle(fontSize: 24)),
            Text('나이: ${user.age}', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                var newUser = User(name: '홍길동', age: 30);
                userController.saveUser(newUser);  // 버튼 클릭 시 데이터 저장
              },
              child: Text('사용자 정보 저장'),
            ),
          ],
        );
      }),
    );
  }
}

6. 데이터 업데이트 및 반영

위 예시에서 HomeScreen은 UserController를 통해 사용자 정보를 가져오고, saveUser() 메서드를 호출하여 사용자 정보를 저장합니다. Obx() 위젯을 사용하여 상태가 변경될 때마다 UI가 자동으로 업데이트되도록 합니다.

7. 전체 코드 흐름

  1. Hive 초기화: 앱 시작 시 Hive.initFlutter()로 Hive 초기화.
  2. GetX Controller: UserController에서 Hive 데이터를 관리하고, GetX의 Rx 상태로 UI와 데이터 상태를 동기화.
  3. UI 업데이트: Obx()를 사용하여 상태가 변경될 때 UI를 자동으로 업데이트.

결론

Hive와 GetX를 함께 사용하면, Flutter 앱에서 로컬 데이터베이스를 효율적으로 관리하면서도, 상태 관리가 간편해집니다. GetX는 데이터 상태를 반응형으로 처리해주므로, Hive에 저장된 데이터 변경을 UI에 즉시 반영할 수 있습니다. 이러한 방식은 앱의 성능을 최적화하고 코드의 가독성을 높이는 데 매우 유용합니다.

반응형