[Flutter] Firestore 사용하기 - 1

저우웅·2025년 11월 10일

Flutter

목록 보기

6/8

안녕하세요!
저번에는 SharedPreferences를 사용하여 로컬에 todolist의 아이템들을 저장했습니다.
오늘은 firestore를 사용하여 db에 해당 todo item들을 저장해보겠습니다!

1. 패키지 설치 및 CLI 설정

Firestore 사용을 위해 우선 패키지를 설치해줍니다.

dependencies:
  // 기타 코드...
  cloud_firestore: ^5.4.4
  firebase_core: ^3.4.0

pubspec.yaml 파일에 해당 코드를 추가하고, flutter pub get으로 패키지를 설치합니다.

또한, FlutterFire CLI가 설치되지 않은 경우

dart pub global activate flutterfire_cli

해당 코드를 터미널에 입력하여 설치해줍니다.

FlutterFire가 Flutter 프로젝트와 Firebase를 연결해주게 됩니다.

이후 PATH 등록도 필요합니다.

// 한 번만 등록할 경우
export PATH="$PATH":"$HOME/.pub-cache/bin"
// zsh를 영구 반영하고 싶은 경우
echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.zshrc
source ~/.zshrc

마지막으로 Firebase 연결을 실행해주면 세팅은 끝납니다.

flutterfire configure

해당 코드를 입력하면 나의 계정과 연결된 Firebase 프로젝트 목록이 나옵니다. 해당 프로젝트를 이용하거나, create a new project를 선택하여 새로이 만들면 됩니다.

그 다음은 플랫폼 설정입니다. (모두 체크된 채로 넘어가시면 됩니다.)

위 단계까지 잘 실행된 경우, lib 파일에 firebase_options.dart 파일이 생긴 것을 확인하실 수 있습니다.

그럼 첫 번째 단계는 끝입니다!

main.dart에서 firebase 연결

진입점이 있는 main.dart의 상단에 아래 코드를 추가합니다.

// 방금 생성된 파일
import 'firebase_options.dart'; 
import 'package:firebase_core/firebase_core.dart';

또한, main()도 바꿔줘야 합니다.

기본 main은

void main() {
  runApp(const MyApp());
}

이렇게 되어있습니다.. firebase를 사용해야 하기 때문에, main에서 runApp 이전 firebase와 연결하는 코드를 넣어주어야 합니다.

void main() async {
  // Flutter 엔진 초기화(위젯 바인딩 준비)
  WidgetsFlutterBinding.ensureInitialized();
  // Firebase 초기화
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

즉, 앱 실행 전 Firebase서버와의 연결을 미리 초기화합니다.

todo_home.dart의 로직 변화

이제 SharedPreferences가 아니라 DB에 Todo item들을 저장해줄 차례입니다!

그러면 todo app의 메인 로직이 담겨있던 todo_home.dart 파일에 많은 변화가 필요하겠네요.

우선 제일 먼저

import 'package:cloud_firestore/cloud_firestore.dart';

import를 시켜준 다음 기존 로직에 필요한 변화를 찾아봅시다.

todo item을 추가하는 함수인 addItem을 비교하면 이렇습니다.

  void _addItem() {
    final text = _controller.text.trim();
    if (text.isEmpty) return;

    setState(() {
      _items.insert(0, TodoItem(id: _nextId, title: text));
      _nextId++;
    });
    _controller.clear();
    _saveItems(); // 변경 후 저장
  }

위 코드가 SharedPreferences를 사용할 때의 addItem입니다.

Future<void> _addItem() async {
    final text = _controller.text.trim();
    if (text.isEmpty) return;

    await _firestore.collection(_collectionName).add({
      'title': text,
      'done': false,
      'createdAt': FieldValue.serverTimestamp(),
    });

    _controller.clear();
  }

위 코드는 Firebase를 이용할 때의 코드입니다.

우선 firebase를 이용할 때는 setStatus가 필요하지 않습니다.

SharedPreferences를 사용할 때는, 메모리의 _items를 직접 수정하고, 이를 반영해달라고 Flutter에게 알려주기 위해 setStatus를 사용해야 했습니다.

하지만 firebase시에는 _items라는 로컬 리스트를 따로 들고있을 필요가 없기 때문에, 그냥 firebase.collections(...).add 로 할 일 추가 기능을 구현해주면 됩니다.

또한 로컬DB를 사용하는 게 아니기 때문에, StreamBuilder를 사용해서 firebase의 데이터를 UI에 바로 연결해주면 됩니다.

Expanded(
  child: StreamBuilder<QuerySnapshot>(
    stream: _firestore
        .collection(_collectionName)
        .orderBy('createdAt', descending: true)
        .snapshots(),
    builder: (context, snapshot) {

      return ListView.builder(
        itemCount: docs.length,
        itemBuilder: (context, index) {
          final data = docs[index].data() as Map<String, dynamic>;
          final docId = docs[index].id;
          // 기타 코드...
        },
      );
    },
  ),
),

완성된 화면은 이렇습니다!