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. 전체 코드 흐름
- Hive 초기화: 앱 시작 시 Hive.initFlutter()로 Hive 초기화.
- GetX Controller: UserController에서 Hive 데이터를 관리하고, GetX의 Rx 상태로 UI와 데이터 상태를 동기화.
- UI 업데이트: Obx()를 사용하여 상태가 변경될 때 UI를 자동으로 업데이트.
결론
Hive와 GetX를 함께 사용하면, Flutter 앱에서 로컬 데이터베이스를 효율적으로 관리하면서도, 상태 관리가 간편해집니다. GetX는 데이터 상태를 반응형으로 처리해주므로, Hive에 저장된 데이터 변경을 UI에 즉시 반영할 수 있습니다. 이러한 방식은 앱의 성능을 최적화하고 코드의 가독성을 높이는 데 매우 유용합니다.
'Flutter & Dart' 카테고리의 다른 글
| [Flutter] GetX 장단점 완벽 정리: 장점과 단점을 한눈에 (1) | 2025.12.01 |
|---|---|
| [Flutter] GetX와 ListView로 동적 리스트 관리하기 (0) | 2025.12.01 |
| [Flutter] Flutter에서 Hive 사용법 (0) | 2025.11.20 |
| [Flutter] 플러터 무한 스크롤 구현하기 (0) | 2025.08.26 |
| [Flutter] 파일 뷰어를 만들어보자 [power_file_viewer_v2] (1) | 2025.08.14 |