플러터 템플릿
플러터와 Back4App을 사용하여 실시간 채팅 애플리케이션 구축하기

35min
소개
채팅 애플리케이션을 만들려면 실시간 데이터 관리, 사용자 인증, 미디어 처리 및 효율적인 데이터 저장이 필요합니다. 이 튜토리얼에서는 1:1 및 그룹 대화, 메시지 상태 및 미디어 공유를 지원하는 Flutter에서 실시간 채팅 애플리케이션을 구축하는 방법을 배웁니다. 우리는 Parse Server로 구동되는 백엔드 서비스인 Back4App을 사용하여 백엔드 기능을 처리할 것입니다.
이 튜토리얼이 끝나면 다음과 같은 기능을 갖춘 완전한 채팅 앱을 갖게 됩니다:
사용자 인증: 안전한 가입 및 로그인 프로세스.
실시간 메시징: 라이브 쿼리를 사용한 즉각적인 메시지 전달.
사용자 존재: 사용자 온라인/오프라인 상태 추적.
미디어 저장: 채팅에서 이미지 전송 및 수신.
메시지 기록: 사용자에 대한 채팅 기록 유지.
전제 조건
이 튜토리얼을 따라 하려면 다음이 필요합니다:
Flutter SDK 설치되어 있어야 합니다. 공식 Flutter 설치 가이드.
Flutter 및 Dart에 대한 기본 지식.
IDE 또는 텍스트 편집기 (예: Visual Studio Code 또는 Android Studio).
Back4App 계정. Back4App에서 무료 계정에 가입하세요.
Flutter용 Parse Server SDK가 프로젝트에 추가되어야 합니다.
개요
다음 구성 요소로 채팅 애플리케이션을 구축할 것입니다:
사용자 인증: 사용자가 가입하고 로그인할 수 있습니다.
연락처 목록: 채팅할 사용자 목록을 표시합니다.
채팅 화면: 실시간 메시징 인터페이스.
미디어 공유: 이미지 전송 및 수신 기능.
온라인 상태: 사용자의 온라인/오프라인 상태를 표시합니다.
1단계 – Flutter 프로젝트 설정
1.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create chat_app
flutter create chat_app
﻿
프로젝트 디렉토리로 이동하세요:
Bash
cd chat_app
cd chat_app
﻿
1.2. 의존성 추가
 pubspec.yaml 파일을 열고 다음 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  image_picker: ^0.8.4+3
  cached_network_image: ^3.2.0
  uuid: ^3.0.4
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  image_picker: ^0.8.4+3
  cached_network_image: ^3.2.0
  uuid: ^3.0.4
﻿
 flutter pub get 명령어를 실행하여 패키지를 설치하세요.
parse_server_sdk_flutter: Back4App과 상호작용합니다.
image_picker: 갤러리나 카메라에서 이미지를 선택합니다.
cached_network_image: 효율적인 이미지 로딩 및 캐싱.
uuid: 고유 식별자를 생성합니다.
﻿
2단계 – Back4App 설정
2.1. 새로운 Back4App 애플리케이션 만들기
당신의 Back4App 대시보드에 로그인하세요.
"새 앱 만들기"를 클릭하세요.
애플리케이션의 이름을 입력하세요, 예: "ChatApp", 그리고 "생성"을 클릭하세요.
2.2. 클래스 및 데이터 모델 구성
다음 클래스를 생성할 것입니다:
사용자 (기본 Parse 클래스): 사용자 정보를 저장합니다.
메시지: 채팅 메시지를 저장합니다.
채팅방: 사용자 간의 채팅을 나타냅니다.
2.2.1. 사용자 클래스
필드:
사용자 이름: 문자열
비밀번호: 문자열
이메일: 문자열
온라인 여부: 불리언
아바타: 파일 (선택 사항)
이 사용자 클래스는 내장되어 있으며, 추가 필드가 있는지 확인해야 합니다.
2.2.2. 메시지 클래스
필드:
발신자: 포인터<_사용자>
수신자: 포인터<_사용자>
채팅방 ID: 문자열
내용: 문자열
이미지: 파일 (선택 사항)
생성일: 날짜 시간 (자동 추가)
2.2.3. 채팅방 클래스
필드:
chatRoomId: 문자열
users: Pointer<_User>의 배열
lastMessage: 문자열
updatedAt: DateTime (자동 업데이트됨)
2.3. 애플리케이션 자격 증명 얻기
이동하여 앱 설정 > 보안 및 키.
다음의 애플리케이션 ID와 클라이언트 키를 기록해 두세요.
3단계 – Flutter 앱에서 Parse 초기화
열기 lib/main.dart 및 다음과 같이 수정하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/login_screen.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/login_screen.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginScreen(),
    );
  }
}
﻿
'YOUR_APPLICATION_ID'를 'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY'를 실제 Back4App 자격 증명으로 교체하십시오.
4단계 – 사용자 인증 구현
4.1. 인증 서비스 생성
lib 아래에 services라는 새 디렉토리를 만들고 auth_service.dart라는 파일을 추가하십시오.
4.2. 로그인 및 회원가입 화면 만들기
새로운 디렉토리를 생성합니다 screens 아래에 lib 그리고 login_screen.dart 및 signup_screen.dart라는 이름의 파일을 추가합니다.
4.2.1. 로그인 화면
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () => Navigator.push(
                  context, MaterialPageRoute(builder: (context) => SignupScreen())),
              child: Text('Don\'t have an account? Sign up'),
            ),
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () => Navigator.push(
                  context, MaterialPageRoute(builder: (context) => SignupScreen())),
              child: Text('Don\'t have an account? Sign up'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
4.2.2. 가입 화면
Dart
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _emailController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Sign Up'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _signUp(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _emailController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Sign Up'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _signUp(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
5단계 – 사용자 존재 구현
5.1. 사용자 온라인 상태 업데이트
사용자의 온라인 상태를 업데이트하는 메서드를 AuthService에 생성합니다:
Dart
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<void> updateUserOnlineStatus(bool isOnline) async {
    var user = await ParseUser.currentUser() as ParseUser?;
    if (user != null) {
      user.set('isOnline', isOnline);
      await user.save();
    }
  }
}
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<void> updateUserOnlineStatus(bool isOnline) async {
    var user = await ParseUser.currentUser() as ParseUser?;
    if (user != null) {
      user.set('isOnline', isOnline);
      await user.save();
    }
  }
}
﻿
5.2. 로그인 및 로그아웃 시 온라인 상태 설정
로그인 및 로그아웃 메서드를 업데이트합니다:
Dart
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);

    var response = await user.login();

    if (response.success) {
      await updateUserOnlineStatus(true);
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    await updateUserOnlineStatus(false);
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);

    var response = await user.login();

    if (response.success) {
      await updateUserOnlineStatus(true);
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    await updateUserOnlineStatus(false);
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
﻿
6단계 – 연락처 목록 표시
6.1. 사용자 서비스 생성
다음에 user_service.dart를 생성하십시오 services:
Dart
// lib/services/user_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class UserService {
  Future<List<ParseUser>> getAllUsers() async {
    final QueryBuilder<ParseUser> queryUsers =
        QueryBuilder<ParseUser>(ParseUser.forQuery());

    final ParseResponse apiResponse = await queryUsers.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseUser>;
    } else {
      return [];
    }
  }
}
// lib/services/user_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class UserService {
  Future<List<ParseUser>> getAllUsers() async {
    final QueryBuilder<ParseUser> queryUsers =
        QueryBuilder<ParseUser>(ParseUser.forQuery());

    final ParseResponse apiResponse = await queryUsers.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseUser>;
    } else {
      return [];
    }
  }
}
﻿
6.2. 홈 화면 생성
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../services/user_service.dart';
import '../services/auth_service.dart';
import 'chat_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final UserService _userService = UserService();
  final AuthService _authService = AuthService();
  List<ParseUser> users = [];
  ParseUser? currentUser;

  @override
  void initState() {
    super.initState();
    fetchUsers();
    getCurrentUser();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
  }

  void fetchUsers() async {
    var allUsers = await _userService.getAllUsers();
    setState(() {
      users = allUsers.where((user) => user.username != currentUser?.username).toList();
    });
  }

  void _logout(BuildContext context) async {
    await _authService.logout();
    Navigator.pushReplacementNamed(context, '/');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
        actions: [
          IconButton(onPressed: () => _logout(context), icon: Icon(Icons.logout)),
        ],
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          var user = users[index];
          return ListTile(
            title: Text(user.username ?? ''),
            subtitle: Text(user.get('isOnline') == true ? 'Online' : 'Offline'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ChatScreen(receiver: user)),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../services/user_service.dart';
import '../services/auth_service.dart';
import 'chat_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final UserService _userService = UserService();
  final AuthService _authService = AuthService();
  List<ParseUser> users = [];
  ParseUser? currentUser;

  @override
  void initState() {
    super.initState();
    fetchUsers();
    getCurrentUser();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
  }

  void fetchUsers() async {
    var allUsers = await _userService.getAllUsers();
    setState(() {
      users = allUsers.where((user) => user.username != currentUser?.username).toList();
    });
  }

  void _logout(BuildContext context) async {
    await _authService.logout();
    Navigator.pushReplacementNamed(context, '/');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
        actions: [
          IconButton(onPressed: () => _logout(context), icon: Icon(Icons.logout)),
        ],
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          var user = users[index];
          return ListTile(
            title: Text(user.username ?? ''),
            subtitle: Text(user.get('isOnline') == true ? 'Online' : 'Offline'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ChatScreen(receiver: user)),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
7단계 – 실시간 메시징 구현하기
7.1. 라이브 쿼리 클라이언트 설정하기
다음 종속성을 추가하세요 pubspec.yaml:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter:
    git:
      url: https://github.com/parse-community/Parse-SDK-Flutter.git
      ref: master
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter:
    git:
      url: https://github.com/parse-community/Parse-SDK-Flutter.git
      ref: master
﻿
이것은 Live Query 지원이 포함된 최신 버전을 사용하고 있음을 보장합니다.
7.2. main.dart에서 Live Query 초기화하기
Dart
// lib/main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';
  const liveQueryUrl = 'wss://YOUR_APP.back4app.io';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
    liveQueryUrl: liveQueryUrl,
  );

  runApp(MyApp());
}
// lib/main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';
  const liveQueryUrl = 'wss://YOUR_APP.back4app.io';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
    liveQueryUrl: liveQueryUrl,
  );

  runApp(MyApp());
}
﻿
'YOUR_APP'을 'YOUR_APP'로 바꾸세요.
7.3. 채팅 화면 만들기
Dart
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:uuid/uuid.dart';
import 'package:image_picker/image_picker.dart';
import '../services/auth_service.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser receiver;

  ChatScreen({required this.receiver});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final AuthService _authService = AuthService();
  ParseUser? currentUser;
  List<ParseObject> messages = [];
  String chatRoomId = '';
  final TextEditingController _messageController = TextEditingController();
  late ParseLiveList<ParseObject> liveMessages;

  @override
  void initState() {
    super.initState();
    getCurrentUser();
    setupChatRoom();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
    if (currentUser != null) {
      setupLiveQuery();
    }
  }

  void setupChatRoom() {
    String userId = currentUser!.objectId!;
    String receiverId = widget.receiver.objectId!;
    chatRoomId = userId.compareTo(receiverId) > 0
        ? '$userId-$receiverId'
        : '$receiverId-$userId';
  }

  void setupLiveQuery() {
    QueryBuilder<ParseObject> queryMessages =
        QueryBuilder<ParseObject>(ParseObject('Message'))
          ..whereEqualTo('chatRoomId', chatRoomId)
          ..orderByAscending('createdAt');

    liveMessages = ParseLiveList<ParseObject>(
      queryMessages,
      listeningIncludes: ['sender'],
      lazyLoading: false,
    );

    setState(() {});
  }

  void sendMessage({String? content, ParseFileBase? imageFile}) async {
    var message = ParseObject('Message')
      ..set('sender', currentUser)
      ..set('receiver', widget.receiver)
      ..set('chatRoomId', chatRoomId)
      ..set('content', content ?? '')
      ..set('image', imageFile);

    await message.save();

    _messageController.clear();
  }

  void pickImage() async {
    final picker = ImagePicker();
    final pickedFile =
        await picker.pickImage(source: ImageSource.gallery, imageQuality: 50);

    if (pickedFile != null) {
      var file = ParseFile(File(pickedFile.path));
      await file.save();
      sendMessage(imageFile: file);
    }
  }

  @override
  void dispose() {
    liveMessages.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (currentUser == null || liveMessages == null) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Chat with ${widget.receiver.username}'),
        ),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Chat with ${widget.receiver.username}'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ParseLiveListWidget<ParseObject>(
              query: liveMessages,
              reverse: false,
              lazyLoading: false,
              childBuilder: (context, snapshot) {
                if (snapshot.failed) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  var message = snapshot.loadedData!;
                  var sender = message.get<ParseUser>('sender')!;
                  var isMe = sender.objectId == currentUser!.objectId;
                  var content = message.get<String>('content') ?? '';
                  var image = message.get<ParseFileBase>('image');

                  return Align(
                    alignment:
                        isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(8),
                      margin: EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: isMe ? Colors.blue[100] : Colors.grey[300],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          if (content.isNotEmpty)
                            Text(content),
                          if (image != null)
                            CachedNetworkImage(
                              imageUrl: image.url!,
                              placeholder: (context, url) =>
                                  CircularProgressIndicator(),
                              errorWidget: (context, url, error) =>
                                  Icon(Icons.error),
                            ),
                        ],
                      ),
                    ),
                  );
                } else {
                  return Container();
                }
              },
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            color: Colors.white,
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.photo),
                  onPressed: pickImage,
                ),
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration:
                        InputDecoration.collapsed(hintText: 'Type a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (_messageController.text.trim().isNotEmpty) {
                      sendMessage(content: _messageController.text.trim());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:uuid/uuid.dart';
import 'package:image_picker/image_picker.dart';
import '../services/auth_service.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser receiver;

  ChatScreen({required this.receiver});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final AuthService _authService = AuthService();
  ParseUser? currentUser;
  List<ParseObject> messages = [];
  String chatRoomId = '';
  final TextEditingController _messageController = TextEditingController();
  late ParseLiveList<ParseObject> liveMessages;

  @override
  void initState() {
    super.initState();
    getCurrentUser();
    setupChatRoom();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
    if (currentUser != null) {
      setupLiveQuery();
    }
  }

  void setupChatRoom() {
    String userId = currentUser!.objectId!;
    String receiverId = widget.receiver.objectId!;
    chatRoomId = userId.compareTo(receiverId) > 0
        ? '$userId-$receiverId'
        : '$receiverId-$userId';
  }

  void setupLiveQuery() {
    QueryBuilder<ParseObject> queryMessages =
        QueryBuilder<ParseObject>(ParseObject('Message'))
          ..whereEqualTo('chatRoomId', chatRoomId)
          ..orderByAscending('createdAt');

    liveMessages = ParseLiveList<ParseObject>(
      queryMessages,
      listeningIncludes: ['sender'],
      lazyLoading: false,
    );

    setState(() {});
  }

  void sendMessage({String? content, ParseFileBase? imageFile}) async {
    var message = ParseObject('Message')
      ..set('sender', currentUser)
      ..set('receiver', widget.receiver)
      ..set('chatRoomId', chatRoomId)
      ..set('content', content ?? '')
      ..set('image', imageFile);

    await message.save();

    _messageController.clear();
  }

  void pickImage() async {
    final picker = ImagePicker();
    final pickedFile =
        await picker.pickImage(source: ImageSource.gallery, imageQuality: 50);

    if (pickedFile != null) {
      var file = ParseFile(File(pickedFile.path));
      await file.save();
      sendMessage(imageFile: file);
    }
  }

  @override
  void dispose() {
    liveMessages.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (currentUser == null || liveMessages == null) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Chat with ${widget.receiver.username}'),
        ),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Chat with ${widget.receiver.username}'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ParseLiveListWidget<ParseObject>(
              query: liveMessages,
              reverse: false,
              lazyLoading: false,
              childBuilder: (context, snapshot) {
                if (snapshot.failed) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  var message = snapshot.loadedData!;
                  var sender = message.get<ParseUser>('sender')!;
                  var isMe = sender.objectId == currentUser!.objectId;
                  var content = message.get<String>('content') ?? '';
                  var image = message.get<ParseFileBase>('image');

                  return Align(
                    alignment:
                        isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(8),
                      margin: EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: isMe ? Colors.blue[100] : Colors.grey[300],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          if (content.isNotEmpty)
                            Text(content),
                          if (image != null)
                            CachedNetworkImage(
                              imageUrl: image.url!,
                              placeholder: (context, url) =>
                                  CircularProgressIndicator(),
                              errorWidget: (context, url, error) =>
                                  Icon(Icons.error),
                            ),
                        ],
                      ),
                    ),
                  );
                } else {
                  return Container();
                }
              },
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            color: Colors.white,
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.photo),
                  onPressed: pickImage,
                ),
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration:
                        InputDecoration.collapsed(hintText: 'Type a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (_messageController.text.trim().isNotEmpty) {
                      sendMessage(content: _messageController.text.trim());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
﻿
설명
ParseLiveListWidget: 실시간 쿼리 업데이트를 듣고 데이터가 변경될 때 다시 빌드하는 위젯입니다.
sendMessage(): 텍스트 메시지 또는 이미지를 보냅니다.
pickImage(): image_picker를 사용하여 이미지를 선택하고 메시지로 보냅니다.
setupLiveQuery(): 채팅방에서 새로운 메시지를 듣기 위해 실시간 쿼리를 설정합니다.
8단계 – 앱 테스트
8.1. 앱 실행
터미널에서 다음을 실행하세요:
Bash
flutter run
flutter run
﻿
8.2. 테스트 메시징
두 개의 장치 또는 에뮬레이터에서 앱을 엽니다.
다른 사용자 계정으로 가입하거나 로그인합니다.
한 계정에서 연락처 목록에서 다른 사용자를 선택합니다.
메시지와 이미지를 전송합니다; 두 장치에서 실시간으로 나타나야 합니다.
결론
축하합니다! Back4App을 사용하여 Flutter에서 실시간 채팅 애플리케이션을 구축했습니다. 이 앱은 다음을 지원합니다:
사용자 인증: 안전한 로그인 및 가입.
실시간 메시징: 라이브 쿼리를 사용한 즉각적인 업데이트.
사용자 존재: 온라인/오프라인 상태 추적.
미디어 공유: 이미지 전송 및 수신.
메시지 기록: 채팅 메시지 지속.
다음 단계
그룹 채팅: 그룹 대화를 지원하도록 앱을 확장합니다.
메시지 상태: 읽음 확인 및 입력 표시기를 구현합니다.
푸시 알림: 앱이 백그라운드에 있을 때 새 메시지에 대한 알림을 보냅니다.
프로필 사진: 사용자가 아바타를 업로드할 수 있도록 허용합니다.
보안 강화: ACL 및 역할 기반 권한으로 데이터를 보호합니다.
추가 리소스
﻿Back4App 문서﻿
﻿Flutter용 Parse SDK 가이드﻿
﻿Flutter 공식 문서﻿
﻿Parse 라이브 쿼리﻿
행복한 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter와 Back4App을 사용하여 이벤트 예약 앱을 만드는 방법
플러터, 백4앱, 클라우드 코드를 통한 스트라이프 통합으로 전자상거래 앱 구축하기