Flutter Templates
Building a Real-Time Chat Application in Flutter with Back4App

35min
Introduction
Creating a chat application involves managing real-time data, user authentication, media handling, and efficient data storage. In this tutorial, you will learn how to build a real-time chat application in Flutter that supports one-to-one and group conversations, message statuses, and media sharing. We'll use Back4App—a backend-as-a-service powered by Parse Server—to handle the backend functionalities.
By the end of this tutorial, you will have a fully functional chat app with the following features:
User Authentication: Secure sign-up and login processes.
Real-Time Messaging: Instant message delivery using Live Queries.
User Presence: Tracking online/offline status of users.
Media Storage: Sending and receiving images in chats.
Message History: Persisting chat histories for users.
Prerequisites
To follow along with this tutorial, you'll need:
Flutter SDK installed on your machine. Follow the official Flutter installation guide.
Basic knowledge of Flutter and Dart.
An IDE or text editor such as Visual Studio Code or Android Studio.
A Back4App account. Sign up for a free account at Back4App.
Parse Server SDK for Flutter added to your project.
Overview
We will build a chat application with the following components:
User Authentication: Users can sign up and log in.
Contacts List: Display a list of users to chat with.
Chat Screen: Real-time messaging interface.
Media Sharing: Ability to send and receive images.
Online Status: Display online/offline status of users.
Step 1 – Setting Up the Flutter Project
1.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create chat_app
flutter create chat_app
﻿
Navigate to the project directory:
Bash
cd chat_app
cd chat_app
﻿
1.2. Add Dependencies
Open pubspec.yaml and add the following dependencies:
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
﻿
Run flutter pub get to install the packages.
parse_server_sdk_flutter: Interact with Back4App.
image_picker: Pick images from the gallery or camera.
cached_network_image: Efficient image loading and caching.
uuid: Generate unique identifiers.
﻿
Step 2 – Setting Up Back4App
2.1. Create a New Back4App Application
Log in to your Back4App dashboard.
Click on "Create new App".
Enter a name for your application, e.g., "ChatApp", and click "Create".
2.2. Configure Classes and Data Model
We'll create the following classes:
User (Default Parse Class): Stores user information.
Message: Stores chat messages.
ChatRoom: Represents a chat between users.
2.2.1. User Class
Fields:
username: String
password: String
email: String
isOnline: Boolean
avatar: File (Optional)
The User class is built-in; we just need to ensure it has the additional fields.
2.2.2. Message Class
Fields:
sender: Pointer<_User>
receiver: Pointer<_User>
chatRoomId: String
content: String
image: File (Optional)
createdAt: DateTime (Automatically added)
2.2.3. ChatRoom Class
Fields:
chatRoomId: String
users: Array of Pointer<_User>
lastMessage: String
updatedAt: DateTime (Automatically updated)
2.3. Obtain Application Credentials
Navigate to App Settings > Security & Keys.
Note down your Application ID and Client Key.
Step 3 – Initializing Parse in Your Flutter App
Open lib/main.dart and modify it as follows:
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(),
    );
  }
}
﻿
Replace 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with your actual Back4App credentials.
Step 4 – Implementing User Authentication
4.1. Create Authentication Service
Create a new directory called services under lib and add a file named 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. Create Login and Signup Screens
Create a new directory called screens under lib and add files named login_screen.dart and signup_screen.dart.
4.2.1. Login Screen
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. Signup Screen
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'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
Step 5 – Implementing User Presence
5.1. Update User Online Status
Create a method in AuthService to update the user's online status:
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. Set Online Status on Login and Logout
Update the login and logout methods:
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();
  }
}
﻿
Step 6 – Displaying Contacts List
6.1. Create User Service
Create user_service.dart under 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. Create Home Screen
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)),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
Step 7 – Implementing Real-Time Messaging with Live Queries
7.1. Set Up Live Query Client
Add the following dependency in 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
﻿
This ensures you have the latest version with Live Query support.
7.2. Initialize Live Query in 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());
}
﻿
Replace 'YOUR_APP' with your Back4App application subdomain.
7.3. Create Chat Screen
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());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Explanation
ParseLiveListWidget: A widget that listens to live query updates and rebuilds when data changes.
sendMessage(): Sends a text message or an image.
pickImage(): Uses image_picker to select an image and sends it as a message.
setupLiveQuery(): Sets up a live query to listen for new messages in the chat room.
Step 8 – Testing the App
8.1. Run the App
In your terminal, run:
Bash
flutter run
flutter run
﻿
8.2. Test Messaging
Open the app on two devices or emulators.
Sign up or log in with different user accounts.
From one account, select the other user from the contacts list.
Send messages and images; they should appear in real-time on both devices.
Conclusion
Congratulations! You have built a real-time chat application in Flutter using Back4App. This app supports:
User Authentication: Secure login and signup.
Real-Time Messaging: Instant updates using Live Queries.
User Presence: Online/offline status tracking.
Media Sharing: Sending and receiving images.
Message History: Persisting chat messages.
Next Steps
Group Chats: Extend the app to support group conversations.
Message Statuses: Implement read receipts and typing indicators.
Push Notifications: Send notifications for new messages when the app is in the background.
Profile Pictures: Allow users to upload avatars.
Security Enhancements: Secure data with ACLs and role-based permissions.
Additional Resources
﻿Back4App Documentation﻿
﻿Parse SDK for Flutter Guide﻿
﻿Flutter Official Documentation﻿
﻿Parse Live Query﻿
Happy Coding!
Updated 14 Sep 2024
Did this page help you?
How to Build an Event Booking App with Flutter and Back4App
Building an E-commerce App with Flutter, Back4App, and Stripe Integration via Cloud Code