Flutter로 web만들어서 Firebase Store 연결하기

1. Flutter project 생성

2. Firebase cli 로그인

 

3. 구성하기 
참고 : https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios

flutterfire configure

 

미리 파이어베이스에 프로젝트를 만들었으면 있는 프로젝트를 선택하고 없으면 

create a new project 선택 

 

필요한거 선택하면 된다. 왜인지 모르겠지만 web만 개발하더라도 andorid, ios도 체크해주면 좋음??

 

아 vscode로 플러터 프로젝트 생성하면 발생하는 문제가 기본 설정되어 있는 도메인으로 프로젝트가 만들어진다. 이거 변경 할 수 있으니 찾아보면됨.

어차피 web만 사용할거라 이번에는 그대로 진행한다. 

위 작업들이 끝나면 아래의 파일이 자동으로 추가된다. 
빨간 색인 이유는 pubspec.yaml에 firebase관련 플러그인이 설치 안되어서 그렇다. 

 

플러그인을 자동으로 설치해주는 vscode 확장 프로그램을 사용하고 있다. 여기에 이름만 적어주면 자동으로 최신 버전의 플러그인을 pubspec.yaml에 추가해준다. 

 

firebase_core를 입력하고 설치했더니 짠

오류가 발생했다. dart 버전이 안맞는다고 한다. 이럴때 firebase_core의 버전을 내리는게 제일 쉬운 방법이다. 
하지만 난 sdk버전을 올렸다. dart sdk 버전을 올리고싶으면 flutter sdk 버전을 올리면된다.
(flutter sdk관리는 sidekick이라는 앱을이용한다. 버전 변경후 ide를 재시작해야한다.)
3.22.x버전에서 3.24.x버전으로 업데이트 했더니 에러가 사라졌다.

난 db도 쓸거라 'cloud_firestore'도 설치해준다. 

 

3. firebase 연결
아래와 같이 메인을 수정한다. 

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

 

4. firestore 연결

연결이라기 보다는 스토어에 저장된 값을 화면에 하나 보여주자. 
방법은 gpt에 물어보면 코드를 작성해준다. 

store에 값이 없으면 생성도 해달라고 해주면 코드를 만들어준다. 코드는 아래와 같다

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

class FirestoreTextDisplay extends StatelessWidget {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firestore Text Display'),
      ),
      body: StreamBuilder(
        stream: _firestore.collection('texts').snapshots(), // 'texts' 컬렉션에서 데이터 읽기
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) {
            return const Center(child: Text('Something went wrong'));
          }

          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator()); // 로딩 중 표시
          }

          // 데이터가 없는 경우 "Hello World" 추가
          if (snapshot.data!.docs.isEmpty) {
            _firestore.collection('texts').add({
              'text': 'Hello World',
            });
            return const Center(child: Text('Added "Hello World" to Firestore!'));
          }

          // Firestore에서 받아온 데이터를 화면에 텍스트로 표시
          return ListView(
            children: snapshot.data!.docs.map((DocumentSnapshot document) {
              Map<String, dynamic> data = document.data() as Map<String, dynamic>;
              return ListTile(
                title: Text(data['text']), // Firestore 문서에서 'text' 필드를 텍스트로 표시
              );
            }).toList(),
          );
        },
      ),
    );
  }
}

 

메인에서 home을 생성한걸로 변경하고 이제 앱을 실행하면 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FirestoreTextDisplay()
    );
  }
}

 

짜잔! 아무것도 안뜬다. 근데 잠시 기다려보니 hello world가 표시되었다. 머지.. 표시가 안되어야 하는데... 

 

안나오는 이유는 파이어베이스 콘솔에서 프로젝트 확인을 하면 firestore를 만들지 않았다. 
왼쪽 메뉴에서 Firestore Database를 선택하고 시작 하면 만들어진다. (중간에 프로덕트 테스트 선택하는게 있는데 테스트로 선택하자, 나중에 출시전에는 프로덕트로 변경해야한다. 실수로 변경 안하면 어떻게 하지 할텐데 변경안하면 하루에도 몇번씩 메일이 날라온다.)

 

이상태에서 다시 빌드!! 짜잔! Hello World가 잘보인다.  

 

firestore도 확인해보면 데이터가 잘들어가 있는걸 볼 수 있다. 

 

 

cli를 이용하면 너무나 쉽게 flutter랑 firebase랑 연결 할 수 있다. 

예전에는 google어쩌구 json받고 머 하고 머하고 많았는데 이제 쉽게 할 수 있다.
(지금도 검색하면 과거 방식이 나오는데 그렇게 할필요가 전혀 없다.)

 

그리고 flutter web이라서 firebase web 연결 방식으로 해야할듯한데 그렇지 않다. 

(web은 index.html에 막 머 적는거 있음, 기본적으로 flutter web은 index.html 파일을 수정하지 않는다.)
app하는거랑 동일하게 하고 web으로 빌드하면 정상적으로 동작한다.

교회에서 고등부 교사를 하고 있어서 학생들 말씀 읽기 체크표를 만들려고 한다.
본인 이름과 패스워드로 구분을 해서 본인꺼만 변경 할 수 있도록 하고 

다른 사람들의 읽는 현황을 보고 비교 할 수 있는(막대그래프같은거) 화면 이렇게 간단하게 만들꺼다.
(이렇게 라도 성경을 읽었으면 하는 마음으로...)

 

다음글은 아마 firebase로 호스팅 하는 방법을 적을듯하다.