이번 글에서는 플러터(Flutter) 앱 개발에서 상태 관리를 위한 Riverpod 패키지와 Firebase의 연동 방법에 대해 알아보겠습니다. Riverpod는 플러터의 상태 관리를 위한 훌륭한 패키지로, Firebase는 앱의 백엔드 기능을 제공합니다. 두 개를 함께 사용하면 효율적이고 강력한 앱을 만들 수 있습니다.
1. Riverpod 패키지 설치하기
Riverpod 패키지를 사용하기 위해서는 먼저 pubspec.yaml 파일에 의존성을 추가해야 합니다:
dependencies:
flutter_riverpod: ^1.0.0
의존성을 추가한 후, 패키지를 가져오기 위해 다음 명령을 실행합니다:
flutter pub get
2. Firebase 프로젝트 설정하기
Firebase를 사용하기 위해서는 Firebase 프로젝트를 설정해야 합니다. Firebase 콘솔(https://console.firebase.google.com/)에 접속하여 새 프로젝트를 생성하고, Android 및 iOS 앱을 등록해야 합니다. 각 앱별로 패키지 이름과 SHA-1 인증서 지문을 설정해야 하므로 주의해야 합니다.
Firebase 프로젝트 설정이 완료되면, Firebase 콘솔에서 제공하는 구성 파일(google-services.json 및 GoogleService-Info.plist)을 프로젝트에 추가해야 합니다. 각 플랫폼에 맞는 파일을 다운로드 받아 android/app 및 ios/Runner 폴더에 복사합니다.
3. Riverpod 및 Firebase 패키지를 사용한 코드 작성하기
Riverpod와 Firebase를 함께 사용하기 위해서는 firebase_core와 cloud_firestore 패키지를 추가로 설치해야 합니다. pubspec.yaml 파일에 의존성을 추가하고 flutter pub get 명령을 실행하세요:
dependencies:
flutter_riverpod: ^1.0.0
firebase_core: ^1.0.0
cloud_firestore: ^2.0.0
다음으로, Riverpod의 Provider를 사용하여 Firebase와의 연결을 설정합니다. main.dart 파일에 다음 코드를 추가하세요:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Riverpod with Firebase',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends ConsumerWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, ScopedReader watch) {
final userStream = watch(userStreamProvider);
return Scaffold(
appBar: AppBar(
title: const Text('Riverpod with Firebase'),
),
body: StreamBuilder<User>(
stream: userStream,
builder: (context, snapshot) {
if (snapshot.hasData) {
final user = snapshot.data!;
return Text('Logged in as ${user.displayName}');
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return const CircularProgressIndicator();
}
},
),
);
}
}
final userStreamProvider = StreamProvider<User>((ref) {
final firestore = FirebaseFirestore.instance;
final userStream = firestore.collection('users').doc('user1').snapshots();
return userStream.map((snapshot) {
final data = snapshot.data();
if (data != null) {
return User.fromData(data);
} else {
throw Exception('User not found');
}
});
});
class User {
final String displayName;
User(this.displayName);
factory User.fromData(Map<String, dynamic> data) {
return User(data['displayName']);
}
}
위 코드는 firebase_core와 cloud_firestore를 초기화하고, ProviderScope로 앱을 감싸서 Provider를 사용할 수 있게 합니다. 또한, userStreamProvider를 통해 Firestore에서 사용자 정보를 가져오는 스트림을 생성합니다. MyHomePage에서는 해당 스트림을 사용하여 사용자 정보를 표시합니다.
이제 앱을 실행하면 Firebase에서 가져온 사용자 정보를 화면에 표시하는 간단한 앱을 확인할 수 있습니다.
이와 같이 플러터 앱에서 Riverpod와 Firebase를 연동하는 방법을 알아보았습니다. Riverpod와 Firebase를 함께 사용하면 효율적이고 확장 가능한 앱을 개발할 수 있습니다.
더 많은 정보는 다음 문서를 참조하세요: