Flutter Templates
Membangun Aplikasi Obrolan Real-Time di Flutter dengan Back4App

35min
Pendahuluan
Membuat aplikasi chat melibatkan pengelolaan data waktu nyata, otentikasi pengguna, penanganan media, dan penyimpanan data yang efisien. Dalam tutorial ini, Anda akan belajar bagaimana membangun aplikasi chat waktu nyata di Flutter yang mendukung percakapan satu lawan satu dan grup, status pesan, dan berbagi media. Kami akan menggunakan Back4App—sebagai backend-as-a-service yang didukung oleh Parse Server—untuk menangani fungsionalitas backend.
Pada akhir tutorial ini, Anda akan memiliki aplikasi chat yang sepenuhnya fungsional dengan fitur-fitur berikut:
Otentikasi Pengguna: Proses pendaftaran dan login yang aman.
Pesan Waktu Nyata: Pengiriman pesan instan menggunakan Live Queries.
Kehadiran Pengguna: Melacak status online/offline pengguna.
Penyimpanan Media: Mengirim dan menerima gambar dalam chat.
Riwayat Pesan: Menyimpan riwayat chat untuk pengguna.
Prasyarat
Untuk mengikuti tutorial ini, Anda akan membutuhkan:
Flutter SDK terinstal di mesin Anda. Ikuti panduan instalasi Flutter resmi.
Pengetahuan dasar tentang Flutter dan Dart.
Sebuah IDE atau editor teks seperti Visual Studio Code atau Android Studio.
Akun Back4App. Daftar untuk akun gratis di Back4App.
Parse Server SDK untuk Flutter ditambahkan ke proyek Anda.
Ikhtisar
Kami akan membangun aplikasi chat dengan komponen berikut:
Autentikasi Pengguna: Pengguna dapat mendaftar dan masuk.
Daftar Kontak: Menampilkan daftar pengguna untuk diajak chat.
Layar Chat: Antarmuka pesan waktu nyata.
Berbagi Media: Kemampuan untuk mengirim dan menerima gambar.
Status Online: Menampilkan status online/offline pengguna.
Langkah 1 – Menyiapkan Proyek Flutter
1.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create chat_app
flutter create chat_app
﻿
Navigasikan ke direktori proyek:
Bash
cd chat_app
cd chat_app
﻿
1.2. Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut:
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
﻿
Jalankan flutter pub get untuk menginstal paket.
parse_server_sdk_flutter: Berinteraksi dengan Back4App.
image_picker: Pilih gambar dari galeri atau kamera.
cached_network_image: Memuat dan menyimpan gambar secara efisien.
uuid: Menghasilkan pengenal unik.
﻿
Langkah 2 – Menyiapkan Back4App
2.1. Buat Aplikasi Back4App Baru
Masuk ke dasbor Back4App.
Klik pada "Buat aplikasi baru".
Masukkan nama untuk aplikasi Anda, misalnya, "ChatApp", dan klik "Buat".
2.2. Konfigurasi Kelas dan Model Data
Kami akan membuat kelas-kelas berikut:
Pengguna (Kelas Parse Default): Menyimpan informasi pengguna.
Pesan: Menyimpan pesan obrolan.
RuangObrolan: Mewakili obrolan antara pengguna.
2.2.1. Kelas Pengguna
Bidang:
username: String
password: String
email: String
isOnline: Boolean
avatar: File (Opsional)
Kelas User adalah bawaan; kita hanya perlu memastikan bahwa ia memiliki bidang tambahan.
2.2.2. Kelas Pesan
Bidang:
pengirim: Pointer<_User>
penerima: Pointer<_User>
chatRoomId: String
konten: String
gambar: File (Opsional)
createdAt: DateTime (Ditambahkan secara otomatis)
2.2.3. Kelas ChatRoom
Bidang:
chatRoomId: String
pengguna: Array of Pointer<_User>
lastMessage: String
updatedAt: DateTime (Secara otomatis diperbarui)
2.3. Dapatkan Kredensial Aplikasi
Navigasi ke Pengaturan Aplikasi > Keamanan & Kunci.
Catat ID Aplikasi dan Kunci Klien.
Langkah 3 – Menginisialisasi Parse di Aplikasi Flutter Anda
Buka lib/main.dart dan ubah seperti berikut:
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(),
    );
  }
}
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial Back4App Anda yang sebenarnya.
Langkah 4 – Mengimplementasikan Autentikasi Pengguna
4.1. Buat Layanan Autentikasi
Buat direktori baru bernama services di bawah lib dan tambahkan file bernama auth_service.dart:
Dart
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String email, String password) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

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

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

    var response = await user.login();

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

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }

  Future<ParseUser?> getCurrentUser() async {
    return await ParseUser.currentUser() as ParseUser?;
  }
}
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String email, String password) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

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

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

    var response = await user.login();

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

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }

  Future<ParseUser?> getCurrentUser() async {
    return await ParseUser.currentUser() as ParseUser?;
  }
}
﻿
4.2. Buat Layar Login dan Pendaftaran
Buat direktori baru bernama screens di bawah lib dan tambahkan file bernama login_screen.dart dan signup_screen.dart.}]},{
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. Layar Pendaftaran
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'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
Langkah 5 – Mengimplementasikan Kehadiran Pengguna
5.1. Perbarui Status Online Pengguna
Buat metode di AuthService untuk memperbarui status online pengguna:
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. Atur Status Online saat Masuk dan Keluar
Perbarui metode masuk dan keluar:
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();
  }
}
﻿
Langkah 6 – Menampilkan Daftar Kontak
6.1. Buat Layanan Pengguna
Buat user_service.dart di bawah 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. Buat Layar Utama
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)),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
Langkah 7 – Mengimplementasikan Pesan Real-Time dengan Live Queries
7.1. Siapkan Klien Live Query
Tambahkan ketergantungan berikut di 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
﻿
Ini memastikan Anda memiliki versi terbaru dengan dukungan Live Query.
7.2. Inisialisasi Live Query di main.dart
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());
}
﻿
Ganti 'YOUR_APP' dengan subdomain aplikasi Back4App Anda.
7.3. Buat Layar Obrolan
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());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Penjelasan
ParseLiveListWidget: Sebuah widget yang mendengarkan pembaruan kueri langsung dan membangun kembali saat data berubah.
sendMessage(): Mengirim pesan teks atau gambar.
pickImage(): Menggunakan image_picker untuk memilih gambar dan mengirimkannya sebagai pesan.
setupLiveQuery(): Mengatur kueri langsung untuk mendengarkan pesan baru di ruang obrolan.
Langkah 8 – Menguji Aplikasi
8.1. Jalankan Aplikasi
Di terminal Anda, jalankan:
Bash
flutter run
flutter run
﻿
8.2. Uji Pesan
Buka aplikasi di dua perangkat atau emulator.
Daftar atau masuk dengan akun pengguna yang berbeda.
Dari satu akun, pilih pengguna lain dari daftar kontak.
Kirim pesan dan gambar; mereka harus muncul secara real-time di kedua perangkat.
Kesimpulan
Selamat! Anda telah membangun aplikasi obrolan real-time di Flutter menggunakan Back4App. Aplikasi ini mendukung:
Autentikasi Pengguna: Masuk dan daftar yang aman.
Pesan Real-Time: Pembaruan instan menggunakan Live Queries.
Kehadiran Pengguna: Pelacakan status online/offline.
Berbagi Media: Mengirim dan menerima gambar.
Riwayat Pesan: Menyimpan pesan obrolan.
Langkah Selanjutnya
Obrolan Grup: Perluas aplikasi untuk mendukung percakapan grup.
Status Pesan: Implementasikan tanda terima baca dan indikator mengetik.
Notifikasi Push: Kirim notifikasi untuk pesan baru saat aplikasi berada di latar belakang.
Foto Profil: Izinkan pengguna untuk mengunggah avatar.
Peningkatan Keamanan: Amankan data dengan ACL dan izin berbasis peran.
Sumber Daya Tambahan
﻿Dokumentasi Back4App﻿
﻿Panduan Parse SDK untuk Flutter﻿
﻿Dokumentasi Resmi Flutter﻿
﻿Parse Live Query﻿
Selamat Berkoding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membangun Aplikasi Pemesanan Acara dengan Flutter dan Back4App
BERIKUTNYA
Membangun Aplikasi E-commerce dengan Flutter, Back4App, dan Integrasi Stripe melalui Cloud Code