본문 바로가기
Flutter

[Flutter X Firebase] 2 시간만에 만드는 채팅앱 만들기 ChatApp

by MiaCoder 2024. 2. 20.

 

flutter과 Firebase를 활용하여 채팅앱을 구현했습니다.

 

크로스 플랫폼인 flutter로 작성하여  ios, 안드로이드 모두 구현 가능합니다.

 

mac사용자라면 xcode에서 ios시뮬레이터를 다운로드 후 사용하시면 되고(물론 안드로이드도 상관 없습니다)

 

ios시뮬레이터 설치(Xcode)

Windows사용자라면 AndroidStudio의 시뮬레이터를 사용하시면 되겠습니다.

 

시뮬레이터 선택

 

 

저는 mac를 사용하여 구현했습니다.

 

IDE는 VSCode를 사용했습니다.

 

앱 스타일은 안드로이드, ios모두 적용가능한 MaterialApp 스타일로 만들었습니다.(ios는 Cupertion 스타일로 도전하는 것도 좋습니다!)

 

ios 버전은 17.2

 

데이터베이스는 FIrebase를 사용했습니다. 사용자인증, 데이터 스토리지를 사용했습니다. (어래글 참고)

 

유튜브, 구글, Chat-GPT등 여러 경로에서 아이디어를 얻어와 제작했으며 순수한 저의 창작은 아닙니다.

 

배울 수 있는 점 : flutte의 각종 기능(터치 등 이벤트 처리, 멀티테스킹, 화면전환, 업데이트 감지, 등)

                            firebase기능(사용자 인증, 데이터 입출력 등)등 배울 수 있었습니다.

 

 

 

https://miacoder.tistory.com/57

 

[Firebase] flutter프로젝트 firebase연결하기

flutter을 통해 간단한 앱을 만들거나 앱을 만드는 연습을 할 때 자주 사용하는 데이터베이스는 firebase입니다. 1. Firebase란? firebase는 모바일 앱 및 웹 애플리케이션을 위한 개발 플랫폼입니다. 실시

miacoder.tistory.com

 

 

시연영상

 

관련 코드는 저의 github의 chatapp, lib폴더에 저장되어 있습니다.

 

한번 구동해보고 싶으신 분들은 해당 파일을 모두 저장한 후 VSCode에서 시뮬레이터를 돌려보시면 재밌을 듯 합니다.

 

 

https://github.com/tjdwns4712/flutterchatapp

 

GitHub - tjdwns4712/flutterchatapp

Contribute to tjdwns4712/flutterchatapp development by creating an account on GitHub.

github.com

github주소