[Firebase+provider]Chp4. Chat App 채팅 기능 구현하기 I

목표

provider과 Firebase를 기반으로 일회용 chat이 가능한 Application을 만들어보고 활용법을 알아본다.

---

해당 내용은 도그풋님의 #2 플러터 + 파이어베이스 채팅앱 만들기를 기초로 study를 진행하였으며, 일부 부분과 다르게 UI 및 기능적인 측면에서 추가를 하였습니다. 또한 Firebase와 Firecloud 등이 업데이트 됨에 따라 firebase 코드 관련 부분등은 수정된 부분이 있으니 참고하여 주시기 바랍니다.

 

또한 해당내용에 있어서 공부를 진행하는 부분이 있으므로 코드상에 문의가 있거나, 수정사항이 발견이 되면 알려주시면 감사하겠습니다.

---

해당 코드의 github

https://github.com/riris01/flutter_firebase_chat_provider

 

원본 코드의 github

https://github.com/wownsdl13/flutter_firebase_chatting_example

---

이제 채팅방도 구현해보았으니, 채팅방 UI의 세부 UI를 지정해주고 채팅기능이 진행되도록 만들어보자.

 

1. @chatting_item.dart

screens/chatting_page/local_widgets/chatting_item.dart를 생성한다. 이번에는 Flutter 앱에서 채팅 메시지를 표시하기 위한 추가 UI를 구체화 하는 단계라고 보면 된다. 여기서는 ChattingItem 위젯을 생성하여 ChattingModel(채팅 메시지 정보를 나타내는 모델)을 받아와 채팅 메시지의 정보를 UI로 표시하려고 한다. 여기서는 Provider 패턴을 사용하여 ChattingProvider 클래스를 사용해 현재 사용자의 정보를 가져오는데 그 이유는 나와 상대방을 구분하기 위함이다. p라는 변수로 ChattingProvider클래스를 통해 현재 사용자의 정보를 가져오게 되면 이를 isMe라는 형태의 변수로 다시 받아 나와 '상대방'을 구분하는 형식이다.

 

import 'package:flutter_firebase_chat/models/ChattingModel.dart';
import 'package:flutter_firebase_chat/screens/chatting_page/local_utils/ChattingProvider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ChattingItem extends StatelessWidget {
  const ChattingItem({required Key key, required this.chattingModel})
      : super(key: key);
  final ChattingModel chattingModel;

  @override
  Widget build(BuildContext context) {
    var p = Provider.of<ChattingProvider>(context);
    var isMe = chattingModel.pk == p.pk;

(...)

 

나와 남을 구분하는 방식은 이것이 전부다. 거의 이런 형태로 나와 남을 구분만 하면 된다. 그런다음은 거의 UI 적인 요소이다.

이 부분들 중에서 중요한 것은 나이외에 다른 사람이 방에 들어왔을때, 누가 무슨 말을 하는지 알아야하는것이다. 이것은 chattingModel.name을 통해서 간단하게 불러올 수 있다. 그리고 나 이외의 채팅 참가 인원에 대해서는 조건연산자 또는 삼항 연산자를 사용하여서 구분을 하도록 하였다 (isMe ? 나 일시 색깔 : 아니면 다른 색깔). isMe 일때는, 파란색 500 하지만 아닐때는 800으로 설정을 해두었다.

 

전체 코드를 보면 다음과 같다.

(...)

return Container(
      margin: EdgeInsets.symmetric(vertical: 6),
      child: Row(
        mainAxisAlignment:
            isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment:
                isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 13),
                child: Text(
                  chattingModel.name,
                  style: TextStyle(fontSize: 16),
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(horizontal: 5),
                padding: EdgeInsets.fromLTRB(15, 10, 15, 10),
                decoration: BoxDecoration(
                    color: isMe ? Colors.blue[500] : Colors.blue[800],
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(30),
                        topRight: Radius.circular(30),
                        bottomLeft: Radius.circular(isMe ? 30 : 0),
                        bottomRight: Radius.circular(isMe ? 0 : 30))),
                child: Text(
                  chattingModel.text,
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              )
            ],
          )
        ],
      ),
    );
    
 (...)

여기까지 짧게 UI를 구현해보았으니 이제, 기능적인 측면을 구현해보도록 하자.