Flutter와 Firebase를 이용하면 멋진 메신저 앱을 아주 쉽게 만들 수 있어요!
Firebase의 Realtime DB는 실시간 업데이트 기능을 제공하기 때문에 메신저의 기능을 엄청 쉽게 구현할 수 있어요.
같이 따라하면서 만들어 봐요.
🛠️ 준비물: Flutter와 Firebase 연결하기
Flutter는 앱을 쉽게 만들 수 있게 도와주는 도구예요. 그리고 Firebase는 데이터를 저장하거나, 메시지를 빠르게 주고받게 해주는 마법 같은 도구예요. 메신저를 만들려면 둘 다 필요해요!
먼저, 컴퓨터에 Flutter가 설치되어 있어야 해요. 그리고 새로운 Flutter 프로젝트를 만들어야 해요. 다음으로 Firebase 홈페이지에 가서 새 프로젝트를 만들어요. 그런 다음, Flutter 앱과 Firebase를 연결해야 해요. 이걸 보통 Firebase SDK 추가라고 불러요.
일단 새로운 Flutter 프로젝트를 만들어볼까요? 저는 easy_messenger라는 새로운 프로젝트를 만들어줬어요.
Terminal에서 flutter create easy_messenger 라는 명령어를 쳐서 만들수도 있고,
아니면 Android Studio를 쓰시는 분들은 Android Studio에서 새 Flutter 프로젝트를 만들어주세요.
그리고 Firebase console에 접속해서 같은 이름으로 Firebase 프로젝트를 만들어줬어요.
새로 만든 Firebase 프로젝트와 Flutter 프로젝트를 연결하는 방법은
Firebase 프로젝트 만들고 Flutter 앱에 등록하기 포스트에 상세하게 설명되어 있어요!
Firebase 콘솔에서 ios/android 앱이 보이고, lib/firebase_options.dart 파일이 생성되면 연결이 완료된 거에요!
요약
- Flutter 프로젝트를 새로 만들어요.
- Firebase 프로젝트도 만들고 연결해요.
Flutter 에서 Firebase 기능들을 사용할 수 있도록 의존성을 추가해줘야 해요.
pubspec.yaml 파일의 dependencies 영역을 수정해주세요.
firebase_core와 firebase_database를 추가해주세요.
dependencies:
flutter:
sdk: flutter
firebase_core: ^3.13.0 # firebase 기본 기능을 위한 패키지
firebase_database: ^11.3.5 # firebase DB 사용을 위한 패키지→ 추가한 후 flutter pub get 명령어를 꼭 실행해 주세요.
flutter run으로 빌드할 때 아래 에러가 발생할 수 있어요.
그럴때에는 ios/Podfile을 열어보면 두번째 줄에 #platform :ios, '12.0' 이라는 텍스트를 아래 사진처럼 Uncomment 하고, 13.0으로 수정한 뒤에 다시 빌드해주세요! firebase 최신 버전은 ios 13.0이상의 버전을 지원해요.
간단한 메신저 코드 구현
main.dart 파일을 다음과 같이 수정해주세요.
// main.dart
import 'package:easy_messenger/chat_screen.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(); // Firebase 초기화
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 메신저',
theme: ThemeData(primarySwatch: Colors.blue),
home: ChatScreen(),
);
}
}
그리고 chat_screen이라는 파일을 만들고 다음과 같이 코드를 작성해주세요.
// chat_screen.dart
import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
class ChatScreen extends StatefulWidget {
@override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final TextEditingController _controller = TextEditingController();
final DatabaseReference _messagesRef = FirebaseDatabase.instance.ref(
'messages',
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter 메신저')),
body: Column(
children: [
Expanded(
child: StreamBuilder(
stream: _messagesRef.onValue,
builder: (context, snapshot) {
if (snapshot.hasData && snapshot.data!.snapshot.value != null) {
Map data = snapshot.data!.snapshot.value as Map;
List items = data.entries.map((e) => e.value).toList();
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]['text']));
},
);
} else {
return Center(child: Text('아직 메시지가 없어요.'));
}
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(labelText: '메시지 입력'),
),
),
IconButton(icon: Icon(Icons.send), onPressed: _sendMessage),
],
),
),
],
),
);
}
void _sendMessage() {
if (_controller.text.isNotEmpty) {
_messagesRef.push().set({'text': _controller.text});
_controller.clear();
}
}
}
예제 코드를 실제로 빌드해보면 다음과 같은 메신저 앱이 만들어진 걸 확인할 수 있어요.
메신저의 기능들에 대해서는 더 자세하게 설명해드릴게요.
💬 메시지 보내기 기능 만들기
이제 Flutter 앱 안에 텍스트를 입력하는 칸과 "보내기" 버튼을 만들 거예요. 사용자가 텍스트를 쓰고 보내기를 누르면, 그 글자가 Firebase Realtime Database에 저장돼요. 먼저 보내기 버튼이 있는 UI를 만들어봐요.
예제 코드에서는 Padding Widget 안에 텍스트를 입력할 수 있는 TextField 칸과, 보내기 버튼을 IconButton으로 만들어 줬어요.
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(labelText: '메시지 입력'),
),
),
IconButton(icon: Icon(Icons.send), onPressed: _sendMessage),
],
),
),
Firebase에 저장할 때는 push() 라는 기능을 써요. 이건 자동으로 멋진 고유 ID를 만들어서 메시지를 저장하게 해줘요. 코드는 아주 간단해요. FirebaseDatabase.instance.ref('messages').push().set({'text': '안녕'}) 이런 식으로 써요!
예제 코드에서는 _sendMessage 함수에서 _messagesRef.push().set을 사용해서 구현해줬어요.
void _sendMessage() {
if (_controller.text.isNotEmpty) {
_messagesRef.push().set({'text': _controller.text});
_controller.clear();
}
}
요약
- 사용자가 메시지를 입력할 수 있는 칸을 만들어요.
- 입력한 메시지를 Firebase에 저장해요.
📥 메시지 불러오기 기능 만들기
메시지를 보내기만 하면 심심하겠죠? 다른 사람의 메시지도 바로바로 보고 싶잖아요! Flutter에서는 Firebase와 연결해서 새 메시지가 추가될 때마다 자동으로 화면에 보여줄 수 있어요.
이때는 StreamBuilder 위젯을 사용해요. StreamBuilder는 Firebase에서 데이터가 바뀔 때마다 화면을 새로 그려주는 똑똑한 친구예요. onValue, onChildAdded 같은 이벤트를 사용해서, 새로운 메시지가 생길 때마다 리스트에 추가하면 돼요.
예제 코드에서는 Expanded 안에 구현된 StreamBuilder가 그 역할을 하고 있어요.
stream 파라미터를 통해 어떤 stream을 계속 읽어서 그릴지 선택할 수 있어요.
_messagesRef의 onValue 함수를 통해서 'messages'의 데이터가 변하는 것을 감시하고 있는 stream을 얻어올 수 있어요.
builder를 통해서 원하는 레이아웃을 그려주면 돼요.
Expanded(
child: StreamBuilder(
stream: _messagesRef.onValue,
builder: (context, snapshot) {
if (snapshot.hasData && snapshot.data!.snapshot.value != null) {
Map data = snapshot.data!.snapshot.value as Map;
List items = data.entries.map((e) => e.value).toList();
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]['text']));
},
);
} else {
return Center(child: Text('아직 메시지가 없어요.'));
}
},
),
),
요약
- Firebase에 저장된 메시지를 앱에 보여줘요.
- 새 메시지가 생기면 바로 화면에 나타나게 해요.
여러 메세지를 보냈을 때에는 다음과 같이 메세지들의 목록을 확인할 수 있어요.
✨ 마무리: 나만의 메신저 완성!
이렇게 Flutter와 Firebase를 사용해서, 아주 간단한 메신저 앱을 완성했어요!
글자 몇 줄만 입력해도 바로 데이터가 저장되고, 다른 사람도 그걸 바로 볼 수 있다니, 정말 신기하지요?
하지만 이건 아직 시작일 뿐이에요.
다음 글에서는 이 코드를 조금 수정해서, 더 다양한 기능을 붙이고, 진짜 메신저처럼 멋진 모습으로 만들어 볼 거예요!
예를 들면,
- 닉네임 기능을 추가하거나
- 메시지 보낸 시간을 기록하거나
- 더 예쁘게 화면을 꾸미는 방법 같은 걸 해볼 거예요.
'Flutter 개발' 카테고리의 다른 글
| Flutter 메신저 업그레이드: 메시지 버블, 시간, 닉네임 추가 방법 (코드 변경점 자세히 설명) (0) | 2025.04.27 |
|---|---|
| VSCode에서 콘솔라스(Consolas) 폰트 적용하는 쉬운 방법! (0) | 2025.03.06 |
| Flutter 개발자를 위한 필수 VSCode 확장 프로그램 추천! (0) | 2025.03.06 |
| MacBook에 VSCode 설치하는 방법 (0) | 2025.03.02 |
| 개발 IDE 고민 끝! 개발자들이 강추하는 VSCode (0) | 2025.02.25 |