서론
Chat app 은 대화 상대와 실시간으로 메세지를 주고 받을 수 있는 앱입니다. 이번에는 Flutter를 이용하여 Chat app을 만들어 보면서 Dart 언어의 다양한 문법을 배워보도록 하겠습니다. 단계별 작업 순서는 아래와 같습니다:
작업 순서
1. 패키지를 임포트합니다:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
위의 코드에서 flutter/material.dart 패키지는 UI 구축에 필요한 위젯을 제공하며 firebase_auth.dart 및 cloud_firestore.dart 패키지는 각각 Firebase Authentication 및 Firestore에 연결하는 데 사용됩니다.
2. 새 Flutter 앱을 만듭니다:
void main() => runApp(ChatApp());
class ChatApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Chat App',
home: HomePage(),
);
}
}
이렇게 하면 HomePage라는 HomePage 위젯을 사용하여 Chat App이라는 새로운 플러터 앱이 만들어집니다. ChatApp 위젯의 빌드 방법에서는 앱 title과 HomePage 위젯을 homepage로 하여 MaterialApp 위젯을 반환합니다.
3. Firebase Authentication 및 Firestore 인스턴스를 생성합니다:
final FirebaseAuth _auth = FirebaseAuth.instance;
final FirebaseFirestore _firestore = FirebaseFirestore.instance;
위의 코드에서는 Firebase Authentication과 Firestore에 연결하기 위한 FirebaseAuth 와 FirebaseFirestore의 인스턴스를 만듭니다.
4. 변수를 정의합니다:
late User _user;
String _message = '';
현재 로그인한 사용자를 추적하는 _user와 사용자가 입력하는 메시지를 추적하는 _message를 정의합니다. late 키워드를 사용하여 _user가 나중에 초기화됨을 나타냅니다.
5. 현재 로그인한 사용자를 초기화합니다:
여기서는 initState 메서드에서 _getUser를 호출하여 _user를 초기화합니다. _getUser에서는 FirebaseAuth.currentUser를 사용하여 현재 로그인한 사용자를 가져와 _user에 저장합니다.
6. 메세지를 보냅니다:
_sendMessage에서 _message가 비어있지 않은지 확인하고 발신자의 ID, 이름, 텍스트, 타임스탬프로 새 Message 객체를 생성한 후 add 메서드를 사용하여 메시지 컬렉션에 추가하여 Firestore에 저장합니다. 오류가 발생하면 스낵바에 오류 메시지가 표시됩니다. 메시지를 보낸 후 setState를 사용하여 _message 변수를 지웁니다.
7. UI를 구축합니다:
UI에서는 AppBar와 Column을 본체로 하는 Scaffold 위젯을 사용합니다. AppBar에는 앱 제목과 사용자를 로그아웃하고 로그인 페이지로 이동하는 로그아웃 버튼이 포함되어 있습니다. 열에서 StreamBuilder를 사용하여 Firestore의 메시지 모음에서 변경된 내용을 수신하고 MessageBubble 위젯의 리스트로 표시합니다. 또한 사용자가 새 메시지를 보낼 수 있도록 보내기 버튼이 있는 텍스트 필드도 포함되어 있습니다. TextField의 onChanged 콜백은 사용자 유형에 따라 _message 변수를 업데이트하고, 보내기 버튼의 onPressed 콜백은 _sendMessage 메서드를 호출하여 메시지를 Firestore로 보냅니다. 전반적으로 이 코드는 기본 채팅 앱 UI를 설정하고 Firebase Authentication and Firestore에 연결하고 메시지를 보내고 메시지 모음에 대한 업데이트를 수신하는 방법을 제공합니다.
댓글