Modèles Flutter
Créer une application de chat en temps réel dans Flutter avec Back4App

36min
Introduction
Créer une application de chat implique de gérer des données en temps réel, l'authentification des utilisateurs, la gestion des médias et un stockage de données efficace. Dans ce tutoriel, vous apprendrez à construire une application de chat en temps réel dans Flutter qui prend en charge les conversations individuelles et de groupe, les statuts des messages et le partage de médias. Nous utiliserons Back4App—un backend en tant que service alimenté par Parse Server—pour gérer les fonctionnalités backend.
À la fin de ce tutoriel, vous aurez une application de chat entièrement fonctionnelle avec les fonctionnalités suivantes :
Authentification des utilisateurs: Processus d'inscription et de connexion sécurisés.
Messagerie en temps réel: Livraison instantanée des messages utilisant des requêtes en direct.
Présence des utilisateurs: Suivi du statut en ligne/hors ligne des utilisateurs.
Stockage de médias: Envoi et réception d'images dans les chats.
Historique des messages: Conservation des historiques de chat pour les utilisateurs.
Prérequis
Pour suivre ce tutoriel, vous aurez besoin de :
Flutter SDK installé sur votre machine. Suivez le guide d'installation officiel de Flutter.
Connaissances de base en Flutter et Dart.
Un IDE ou éditeur de texte tel que Visual Studio Code ou Android Studio.
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Parse Server SDK pour Flutter ajouté à votre projet.
Aperçu
Nous allons construire une application de chat avec les composants suivants :
Authentification des utilisateurs: Les utilisateurs peuvent s'inscrire et se connecter.
Liste de contacts: Afficher une liste d'utilisateurs avec qui discuter.
Écran de chat: Interface de messagerie en temps réel.
Partage de médias: Capacité d'envoyer et de recevoir des images.
Statut en ligne: Afficher le statut en ligne/hors ligne des utilisateurs.
Étape 1 – Configuration du projet Flutter
1.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create chat_app
flutter create chat_app
﻿
Naviguez vers le répertoire du projet :
Bash
cd chat_app
cd chat_app
﻿
1.2. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
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
﻿
Exécutez flutter pub get pour installer les paquets.
parse_server_sdk_flutter: Interagir avec Back4App.
image_picker: Choisir des images depuis la galerie ou l'appareil photo.
cached_network_image: Chargement et mise en cache efficaces des images.
uuid: Générer des identifiants uniques.
﻿
Étape 2 – Configuration de Back4App
2.1. Créer une nouvelle application Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom pour votre application, par exemple, "ChatApp", et cliquez sur "Créer".
2.2. Configurer les classes et le modèle de données
Nous allons créer les classes suivantes :
Utilisateur (Classe Parse par défaut) : Stocke les informations des utilisateurs.
Message: Stocke les messages de chat.
ChatRoom: Représente un chat entre utilisateurs.
2.2.1. Classe Utilisateur
Champs:
nom d'utilisateur: Chaîne
mot de passe: Chaîne
email: Chaîne
estEnLigne: Booléen
avatar: Fichier (Optionnel)
Le User classe est intégrée ; nous devons juste nous assurer qu'elle a les champs supplémentaires.
2.2.2. Classe Message
Champs:
expéditeur: Pointeur<_User>
destinataire: Pointeur<_User>
chatRoomId: Chaîne
contenu: Chaîne
image: Fichier (Optionnel)
crééÀ: DateTime (Ajouté automatiquement)
2.2.3. Classe ChatRoom
Champs:
chatRoomId: Chaîne
utilisateurs: Tableau de Pointeur<_User>
dernierMessage: Chaîne
misÀJour: DateTime (Mis à jour automatiquement)
2.3. Obtenir les identifiants de l'application
Naviguez vers Paramètres de l'application > Sécurité et clés.
Notez votre ID d'application et Clé client.
Étape 3 – Initialiser Parse dans votre application Flutter
Ouvrez lib/main.dart et modifiez-le comme suit :
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(),
    );
  }
}
﻿
Remplacez 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par vos véritables identifiants Back4App.
Étape 4 – Mise en œuvre de l'authentification des utilisateurs
4.1. Créer un service d'authentification
Créez un nouveau répertoire appelé services sous lib et ajoutez un fichier nommé 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. Créer des écrans de connexion et d'inscription
Créez un nouveau répertoire appelé screens sous lib et ajoutez des fichiers nommés login_screen.dart et signup_screen.dart.
4.2.1. Écran de connexion
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. Écran d’inscription
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'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
Étape 5 – Mise en œuvre de la présence de l'utilisateur
5.1. Mettre à jour le statut en ligne de l'utilisateur
Créer une méthode dans AuthService pour mettre à jour le statut en ligne de l'utilisateur :
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. Définir le statut en ligne lors de la connexion et de la déconnexion
Mettre à jour les méthodes de connexion et de déconnexion :
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();
  }
}
﻿
Étape 6 – Affichage de la liste des contacts
6.1. Créer le service utilisateur
Créer user_service.dart sous 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. Créer l'écran d'accueil
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)),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
Étape 7 – Mise en œuvre de la messagerie en temps réel avec des requêtes en direct
7.1. Configurer le client de requête en direct
Ajoutez la dépendance suivante dans 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
﻿
Cela garantit que vous avez la dernière version avec le support de Live Query.
7.2. Initialiser Live Query dans 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());
}
﻿
Remplacez 'YOUR_APP' par le sous-domaine de votre application Back4App.
7.3. Créer l'écran de chat
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());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
﻿
Explication
ParseLiveListWidget: Un widget qui écoute les mises à jour de requêtes en direct et se reconstruit lorsque les données changent.
sendMessage(): Envoie un message texte ou une image.
pickImage(): Utilise image_picker pour sélectionner une image et l'envoie comme message.
setupLiveQuery(): Configure une requête en direct pour écouter les nouveaux messages dans la salle de chat.
Étape 8 – Tester l'application
8.1. Exécuter l'application
Dans votre terminal, exécutez :
Bash
flutter run
flutter run
﻿
8.2. Test de messagerie
Ouvrez l'application sur deux appareils ou émulateurs.
Inscrivez-vous ou connectez-vous avec des comptes utilisateurs différents.
À partir d'un compte, sélectionnez l'autre utilisateur dans la liste de contacts.
Envoyez des messages et des images ; ils devraient apparaître en temps réel sur les deux appareils.
Conclusion
Félicitations ! Vous avez construit une application de chat en temps réel en Flutter en utilisant Back4App. Cette application prend en charge :
Authentification des utilisateurs: Connexion et inscription sécurisées.
Messagerie en temps réel: Mises à jour instantanées utilisant des requêtes en direct.
Présence des utilisateurs: Suivi du statut en ligne/hors ligne.
Partage de médias: Envoi et réception d'images.
Historique des messages: Persistance des messages de chat.
Prochaines étapes
Discussions de groupe: Étendre l'application pour prendre en charge les conversations de groupe.
Statuts des messages: Implémenter des accusés de lecture et des indicateurs de saisie.
Notifications push: Envoyer des notifications pour les nouveaux messages lorsque l'application est en arrière-plan.
Photos de profil: Permettre aux utilisateurs de télécharger des avatars.
Améliorations de la sécurité: Sécuriser les données avec des ACL et des autorisations basées sur les rôles.
Ressources supplémentaires
﻿Documentation Back4App﻿
﻿Guide du SDK Parse pour Flutter﻿
﻿Documentation officielle de Flutter﻿
﻿Requête en direct Parse﻿
Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment créer une application de réservation d'événements avec Flutter et Back4App
Créer une application de commerce électronique avec Flutter, Back4App et intégration de Stripe via Cloud Code