Flutter의 실시간 데이터베이스(Real-time Database) 사용법

실시간 데이터베이스는 사용자가 앱을 통해 데이터를 실시간으로 주고받을 수 있게 해주는 강력한 도구입니다. Flutter는 Firebase Realtime Database를 통해 실시간 데이터베이스 기능을 쉽게 구현할 수 있도록 지원합니다. 이번 글에서는 Flutter에서 Firebase Realtime Database를 사용하여 실시간 데이터를 관리하고 표시하는 방법을 단계별로 설명하겠습니다.

1. Firebase 프로젝트 생성 및 설정

먼저, Firebase 콘솔에서 새로운 프로젝트를 생성하고 Flutter 앱과 연동해야 합니다.

1.1 Firebase 프로젝트 생성

1. Firebase 콘솔에 로그인하고 새 프로젝트를 만듭니다.
2. 프로젝트 이름을 입력하고 프로젝트를 생성합니다.

1.2 Firebase 앱 추가

1. Firebase 프로젝트 대시보드에서 Android와 iOS 앱을 추가합니다.
2. Android의 경우, google-services.json 파일을 다운로드하여 android/app 폴더에 추가합니다.
3. iOS의 경우, GoogleService-Info.plist 파일을 다운로드하여 ios/Runner 폴더에 추가합니다.

2. Firebase 플러그인 추가

Flutter 프로젝트에 Firebase 플러그인을 추가합니다.

pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_database: ^9.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Firebase 초기화

Flutter 프로젝트에서 Firebase를 초기화합니다. main.dart 파일을 수정하여 Firebase 초기화 코드를 추가합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_database/firebase_database.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

 

 

반응형

 

 

4. 데이터베이스 참조 및 읽기

Firebase Realtime Database에 데이터베이스 참조를 생성하고 데이터를 읽는 방법을 설명합니다.

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final DatabaseReference _databaseReference = FirebaseDatabase.instance.reference();
  List<String> _messages = [];

  @override
  void initState() {
    super.initState();
    _databaseReference.child('messages').onValue.listen((event) {
      final data = event.snapshot.value as Map<dynamic, dynamic>;
      setState(() {
        _messages = data.values.map((e) => e.toString()).toList();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Realtime Database Example'),
      ),
      body: ListView.builder(
        itemCount: _messages.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_messages[index]),
          );
        },
      ),
    );
  }
}

 

위 코드는 Firebase Realtime Database에서 messages 노드의 데이터를 실시간으로 읽어와 화면에 표시하는 예제입니다. onValue 메서드를 사용하여 데이터가 변경될 때마다 리스너가 호출되도록 설정합니다.

5. 데이터베이스에 데이터 쓰기

Firebase Realtime Database에 데이터를 쓰는 방법을 설명합니다.

 

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final DatabaseReference _databaseReference = FirebaseDatabase.instance.reference();
  final TextEditingController _controller = TextEditingController();

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      _databaseReference.child('messages').push().set(_controller.text);
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Realtime Database Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 사용자가 입력한 메시지를 Firebase Realtime Database에 저장하는 예제입니다. push().set() 메서드를 사용하여 새로운 메시지를 messages 노드에 추가합니다.

 

728x90

 

 

6. 데이터 실시간 업데이트

Firebase Realtime Database는 실시간으로 데이터 변경을 반영합니다. onValue 메서드를 사용하여 데이터가 변경될 때마다 UI를 업데이트할 수 있습니다.

 

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final DatabaseReference _databaseReference = FirebaseDatabase.instance.reference();
  List<String> _messages = [];
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _databaseReference.child('messages').onValue.listen((event) {
      final data = event.snapshot.value as Map<dynamic, dynamic>;
      setState(() {
        _messages = data.values.map((e) => e.toString()).toList();
      });
    });
  }

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      _databaseReference.child('messages').push().set(_controller.text);
      _controller.clear();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Realtime Database Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 사용자가 메시지를 입력하고 전송하면 Firebase Realtime Database에 저장하고, 저장된 메시지를 실시간으로 화면에 표시하는 예제입니다. 데이터가 변경될 때마다 UI가 업데이트됩니다.

결론

Firebase Realtime Database를 사용하여 Flutter 애플리케이션에서 실시간 데이터를 관리하고 표시할 수 있습니다. Firebase 콘솔에서 프로젝트를 설정하고, Flutter 프로젝트에 Firebase 플러그인을 추가하여 데이터를 읽고 쓰는 방법을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 실시간 데이터베이스 기능을 구현해보세요. 실시간 데이터베이스를 통해 사용자 경험을 향상시킬 수 있습니다.