채팅앱 만들기2 (앱과 Firebase 연결)

Firebase의 Cloud Firestore와 앱과 연결하기

 

1. android/app/build.gradle 파일 수정

... 생략 ...
    
defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.chat_app"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        minSdkVersion flutter.minSdkVersion
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnable true //이부분 추가됨
    }
    
... 생략 ...

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation "com.android.support:multidex:1.0.3" //이부분 추가됨
}

... 생략 ...

 

2. main.dart 생성

import 'package:flutter/material.dart';
import 'screens/chat_screen.dart';
import 'package:firebase_core/firebase_core.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final Future<FirebaseApp> _firebaseApp = Firebase.initializeApp();

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // hide "debug" banner
      title: 'FlutterChat',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FutureBuilder(
        future: _firebaseApp,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            debugPrint('snapshot error - ${snapshot.error}');
            return const Text('Snapshot error');
          } else if (snapshot.hasData) {
            return const ChatScreen();
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

• Firebase를 사용하려면 먼저 Firebase.initializeApp() 부분 생성.

 

3. chat_screen.dart 파일 생성

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('chats/5faluq62QDSCE83nxKok/message')
            .snapshots(),
        builder: (ctx, streamSnapshot) {
          if (streamSnapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          final documents = streamSnapshot.data!.docs;
          return ListView.builder(
            itemCount: streamSnapshot.data!.docs.length,
            itemBuilder: (ctx, index) => Container(
              padding: const EdgeInsets.all(8),
              child: Text(documents[index]['text']),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          FirebaseFirestore.instance
              .collection('chats/5faluq62QDSCE83nxKok/message')
              .add({'text': 'This was added by clicking the button!'});
        },
      ),
    );
  }
}

 

StreamBuilder : 비동기로 데이터 가져올때 사용합니다. FutureBuilde와는 다르게 리스너를 통하여 데이터 변경을 계속 관찰하고 수시로 데이터를 가져옵니다. 

 

데이터를 가져오는 부분

FirebaseFirestore.instance
            .collection('chats/5faluq62QDSCE83nxKok/message')
            .snapshots()

데이터를 추가하는 부분

FirebaseFirestore.instance
              .collection('chats/5faluq62QDSCE83nxKok/message')
              .add({'text': 'This was added by clicking the button!'});

 

결과 화면: