[Flutter] 코딩셰프 조금 매운 맛 - 채팅앱

유용하게 쓰일 것 같은 코드 모음

 

 

[ Firebase Firestore 데이터베이스와 실시간 데이터 스트림 연결 ]

stream: FirebaseFirestore.instance
    .collection('chat')
    .orderBy('time', descending: true)
    .snapshots(),

Firestore의 chat 컬렉션에 실시간으로 접근해 메시지를 가져오는 기능!

이를 통해 사용자가 메시지를 보낼 때마다 자동으로 화면에 업데이트되는 실시간 채팅 기능을 구현할 수 있음!

 

 

 

[ ChatBubble 위젯을 통한 사용자와 타인 메시지 구분 ]

ChatBubble(
    clipper: ChatBubbleClipper8(type: isMe ? BubbleType.sendBubble : BubbleType.receiverBubble),
    backGroundColor: isMe ? Colors.blue : Color(0xffE7E7ED),
    child: Container(
        constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 0.7,
        ),
        child: Column(
            crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
            children: [
                Text(userName, style: TextStyle(fontWeight: FontWeight.bold, color: isMe ? Colors.white : Colors.black)),
                Text(message, style: TextStyle(color: isMe ? Colors.white : Colors.black)),
            ],
        ),
    ),
)

ChatBubble 위젯은 사용자 메시지와 타인 메시지를 시각적으로 구분해주는 역할!

isMe 플래그를 통해 현재 메시지가 사용자가 보낸 것인지 또는 타인이 보낸 것인지 확인하고, 이에 따라 텍스트의 정렬과 배경색이 달라짐!!

 

 

 

[ Firestore에 새 메시지 저장 ]

FirebaseFirestore.instance.collection('chat').add({
    'text': _userEnterMessage,
    'time': Timestamp.now(),
    'userID': user!.uid,
    'userName': userData.data()!['userName'],
    'userImage': userData['picked_image']
});

_sendMessage 함수는 사용자가 입력한 메시지를 Firestore의 chat 컬렉션에 저장함

메시지 외에도 메시지를 보낸 시간, 사용자 ID, 사용자 이름, 사용자 이미지 등도 함께 저장하여 채팅 내용에 정보를 추가함

 

 

 

[ 메시지 입력 필드와 전송 버튼 활성화/비활성화 ]

onPressed: _userEnterMessage.trim().isEmpty ? null : _sendMessage,

메시지 입력이 공백이거나 비어 있을 경우 전송 버튼이 비활성화되도록 설정

사용자가 빈 메시지를 보내지 않도록 방지 -> 불필요한 데이터 저장을 줄이고 앱 사용성 개선

 

 

 

[ 사용자 아바타와 메시지의 시각적 배치 ]

Positioned(
    top: 0,
    right: isMe ? 5 : null,
    left: isMe ? null : 5,
    child: CircleAvatar(
        backgroundImage: NetworkImage(userImage),
    ),
)

CircleAvatar를 사용해 메시지를 보낸 사용자의 프로필 이미지를 표시함

사용자 프로필 이미지는 isMe 플래그에 따라 메시지 말풍선의 좌우에 위치하도록 배치!