[flutter] Firebase Database를 사용한 게시판 애플리케이션 만들기

30 Nov 2023

flutter

이번 포스트에서는 Flutter와 Firebase Database를 사용하여 간단한 게시판 애플리케이션을 만들어보겠습니다. Firebase Database는 실시간 데이터베이스로 사용자가 실시간으로 데이터를 읽고 쓸 수 있는 기능을 제공합니다.

Firebase 프로젝트 생성과 앱 설정을 마쳤다면, 먼저 firebase_core와 firebase_database 패키지를 pubspec.yaml 파일에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.5.0
  firebase_database: ^7.3.2

다음은 Firebase Database에 연결하고 데이터를 읽고 쓰는 기능을 구현하는 방법입니다.

먼저 main.dart 파일에서 Firebase를 초기화하고 데이터베이스에 접근할 수 있는 참조를 가져옵니다.

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 {
  final DatabaseReference databaseReference = FirebaseDatabase.instance.reference();

  // 앱 코드...
}

이제 앱에서 Firebase 데이터베이스를 사용할 수 있습니다. 게시글을 작성하고 Firebase에 저장하는 기능을 구현해보겠습니다.

class MyApp extends StatelessWidget {
  final DatabaseReference databaseReference = FirebaseDatabase.instance.reference();
  final TextEditingController titleController = TextEditingController();
  final TextEditingController contentController = TextEditingController();

  void createPost(String title, String content) {
    databaseReference
        .child("posts")
        .push()
        .set({"title": title, "content": content})
        .then((value) => print("Post created successfully"))
        .catchError((error) => print("Failed to create post: $error"));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("게시판 앱")),
        body: Column(
          children: [
            TextField(controller: titleController),
            TextField(controller: contentController),
            ElevatedButton(
              onPressed: () {
                String title = titleController.text;
                String content = contentController.text;
                createPost(title, content);
              },
              child: Text("글 작성"),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 createPost 메서드를 호출하여 사용자의 입력을 Firebase에 저장합니다. push 메서드를 사용하여 데이터베이스에 고유한 식별자로 저장하고, set 메서드로 데이터를 설정합니다. 저장이 성공하면 “Post created successfully” 메시지가 출력되고, 실패하면 에러 메시지가 출력됩니다.

이제 게시글을 작성하고 Firebase에 저장하는 기능이 구현되었습니다. 다음으로는 Firebase 데이터베이스에서 게시글을 가져와 화면에 표시하는 기능을 추가해보겠습니다.

class MyApp extends StatelessWidget {
  final DatabaseReference databaseReference = FirebaseDatabase.instance.reference();
  final TextEditingController titleController = TextEditingController();
  final TextEditingController contentController = TextEditingController();
  List<Map<dynamic, dynamic>> posts = [];

  void createPost(String title, String content) {
    // 게시글 작성 코드...
  }

  void getPosts() {
    databaseReference.child("posts").once().then((DataSnapshot snapshot) {
      if (snapshot.value != null) {
        posts.clear();
        snapshot.value.forEach((key, value) {
          posts.add(value);
        });
      }
    }).catchError((error) {
      print("Failed to get posts: $error");
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("게시판 앱")),
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                getPosts();
              },
              child: Text("게시글 가져오기"),
            ),
            ListView.builder(
              shrinkWrap: true,
              itemCount: posts.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(posts[index]["title"]),
                  subtitle: Text(posts[index]["content"]),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 getPosts 메서드를 호출하여 Firebase에서 게시글을 가져옵니다. once 메서드를 사용하여 데이터베이스에서 한 번만 데이터를 가져옵니다. 가져온 데이터는 snapshot.value에 저장되며, forEach 메서드를 사용하여 리스트에 추가합니다.

마지막으로 ListView 위젯을 사용하여 posts 리스트를 화면에 표시합니다.

이제 Firebase Database를 사용한 게시판 애플리케이션이 완성되었습니다. Firebase Database를 사용하여 실시간으로 데이터를 읽고 쓰는 편리한 기능을 활용하여 다양한 애플리케이션을 개발해보세요.

참고 문서: