Xây dựng ứng dụng chat thời gian thực với Flutter và Firebase

Xây dựng ứng dụng chat với Flutter và Firebase

Ứng dụng nhắn tin thời gian thực đã trở thành một phần không thể thiếu trong cuộc sống hiện đại. Với sự phát triển của công nghệ di động, việc tạo ra các ứng dụng chat đã trở nên dễ dàng hơn bao giờ hết. Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng một ứng dụng chat thời gian thực hoàn chỉnh sử dụng Flutter và Firebase, hai công nghệ mạnh mẽ và ngày càng phổ biến trong cộng đồng phát triển ứng dụng di động.

Giới thiệu về Flutter và Firebase

Flutter là gì?

Flutter là framework UI mã nguồn mở của Google, cho phép xây dựng ứng dụng di động đa nền tảng với một codebase duy nhất. Flutter sử dụng ngôn ngữ lập trình Dart và được thiết kế để tạo ra giao diện người dùng đẹp, mượt mà với hiệu suất cao.

Firebase là gì?

Firebase là nền tảng phát triển ứng dụng do Google cung cấp, giúp các nhà phát triển xây dựng, cải thiện và phát triển ứng dụng một cách nhanh chóng. Firebase cung cấp nhiều dịch vụ như xác thực người dùng, cơ sở dữ liệu thời gian thực, lưu trữ, và nhiều tính năng khác.

Tại sao nên kết hợp Flutter và Firebase?

Sự kết hợp giữa Flutter và Firebase tạo nên một giải pháp mạnh mẽ để phát triển ứng dụng di động:

Phát triển nhanh chóng: Flutter cho phép phát triển UI nhanh với hot reload, trong khi Firebase giúp giảm thời gian phát triển backend.
Đa nền tảng: Một codebase duy nhất cho cả iOS và Android.
Khả năng mở rộng: Firebase tự động mở rộng theo nhu cầu của ứng dụng.
Cập nhật thời gian thực: Firebase Realtime Database và Cloud Firestore cung cấp đồng bộ dữ liệu tức thì.
Xác thực đơn giản: Firebase Authentication cung cấp nhiều phương thức xác thực (email/mật khẩu, Google, Facebook, v.v.).
Chi phí ban đầu thấp: Firebase cung cấp gói miễn phí hào phóng cho các ứng dụng mới.

Thiết lập dự án

1. Cài đặt Flutter và tạo dự án mới

Đầu tiên, hãy cài đặt Flutter theo hướng dẫn tại trang chính thức của Flutter.

Sau khi cài đặt, tạo một dự án Flutter mới:

flutter create flutter_firebase_chat
cd flutter_firebase_chat

2. Thiết lập Firebase cho ứng dụng

Bước 1: Tạo dự án Firebase mới

Truy cập Firebase Console và đăng nhập bằng tài khoản Google.
Nhấp vào "Add project" (Thêm dự án).
Đặt tên cho dự án, ví dụ: "Flutter Chat App".
Làm theo các bước để hoàn thành việc tạo dự án.

Bước 2: Cấu hình Firebase cho ứng dụng Flutter

Cài đặt Firebase CLI và FlutterFire CLI

# Cài đặt Firebase CLI
npm install -g firebase-tools

# Đăng nhập vào Firebase
firebase login

# Cài đặt FlutterFire CLI
dart pub global activate flutterfire_cli

# Cấu hình Firebase cho dự án Flutter
flutterfire configure --project=flutter-chat-app

Cài đặt các package cần thiết

Mở file `pubspec.yaml` và thêm các dependency sau:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  firebase_auth: ^4.7.2
  cloud_firestore: ^4.8.4
  firebase_storage: ^11.2.5
  image_picker: ^1.0.1
  provider: ^6.0.5
  intl: ^0.18.1
  cached_network_image: ^3.2.3

Sau đó chạy lệnh để cài đặt các package:

flutter pub get

3. Cấu trúc dự án

Chúng ta sẽ tổ chức dự án theo cấu trúc sau:

lib/
├── main.dart
├── models/
│   ├── message.dart
│   └── user.dart
├── screens/
│   ├── auth/
│   │   ├── login_screen.dart
│   │   └── register_screen.dart
│   ├── chat/
│   │   ├── chat_screen.dart
│   │   └── chats_list_screen.dart
│   └── profile/
│       └── profile_screen.dart
├── services/
│   ├── auth_service.dart
│   ├── chat_service.dart
│   └── storage_service.dart
└── widgets/
    ├── chat/
    │   ├── message_bubble.dart
    │   └── message_input.dart
    └── common/
        ├── custom_button.dart
        └── user_avatar.dart

Xây dựng ứng dụng chat

1. Thiết lập Firebase trong ứng dụng

Đầu tiên, chúng ta cần khởi tạo Firebase trong ứng dụng. Mở file `main.dart` và cập nhật:

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:provider/provider.dart';
import 'firebase_options.dart';
import 'screens/auth/login_screen.dart';
import 'services/auth_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AuthService()),
      ],
      child: MaterialApp(
        title: 'Flutter Firebase Chat',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          fontFamily: 'Roboto',
        ),
        home: LoginScreen(),
      ),
    );
  }
}

2. Tạo các model cần thiết

Message Model (`models/message.dart`):

import 'package:cloud_firestore/cloud_firestore.dart';

class Message {
  final String id;
  final String senderId;
  final String content;
  final Timestamp timestamp;
  final String? imageUrl;

  Message({
    required this.id,
    required this.senderId,
    required this.content,
    required this.timestamp,
    this.imageUrl,
  });

  factory Message.fromJson(Map<String, dynamic> json, String id) {
    return Message(
      id: id,
      senderId: json['senderId'] ?? '',
      content: json['content'] ?? '',
      timestamp: json['timestamp'] ?? Timestamp.now(),
      imageUrl: json['imageUrl'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'senderId': senderId,
      'content': content,
      'timestamp': timestamp,
      'imageUrl': imageUrl,
    };
  }
}

User Model (`models/user.dart`):

class ChatUser {
  final String id;
  final String name;
  final String email;
  final String? avatarUrl;
  final String? status;
  final bool isOnline;

  ChatUser({
    required this.id,
    required this.name,
    required this.email,
    this.avatarUrl,
    this.status,
    this.isOnline = false,
  });

  factory ChatUser.fromJson(Map<String, dynamic> json, String id) {
    return ChatUser(
      id: id,
      name: json['name'] ?? '',
      email: json['email'] ?? '',
      avatarUrl: json['avatarUrl'],
      status: json['status'],
      isOnline: json['isOnline'] ?? false,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'email': email,
      'avatarUrl': avatarUrl,
      'status': status,
      'isOnline': isOnline,
    };
  }
}

3. Tạo các service

Authentication Service (`services/auth_service.dart`):

import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/foundation.dart';
import '../models/user.dart';

class AuthService with ChangeNotifier {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  
  User? get currentUser => _auth.currentUser;
  Stream<User?> get authStateChanges => _auth.authStateChanges();

  Future<UserCredential> signInWithEmailAndPassword(
      String email, String password) async {
    try {
      UserCredential result = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      
      // Update online status
      await _firestore.collection('users').doc(result.user!.uid).update({
        'isOnline': true,
      });
      
      notifyListeners();
      return result;
    } catch (e) {
      print(e.toString());
      rethrow;
    }
  }

  Future<UserCredential> registerWithEmailAndPassword(
      String name, String email, String password) async {
    try {
      UserCredential result = await _auth.createUserWithEmailAndPassword(
          email: email, password: password);
      
      // Create a new user document
      await _firestore.collection('users').doc(result.user!.uid).set({
        'name': name,
        'email': email,
        'avatarUrl': null,
        'status': 'Available',
        'isOnline': true,
        'createdAt': Timestamp.now(),
      });
      
      notifyListeners();
      return result;
    } catch (e) {
      print(e.toString());
      rethrow;
    }
  }

  Future<void> signOut() async {
    try {
      // Update online status before signing out
      if (currentUser != null) {
        await _firestore.collection('users').doc(currentUser!.uid).update({
          'isOnline': false,
        });
      }
      
      await _auth.signOut();
      notifyListeners();
    } catch (e) {
      print(e.toString());
      rethrow;
    }
  }

  Future<ChatUser?> getUserDetails(String userId) async {
    try {
      DocumentSnapshot doc = 
          await _firestore.collection('users').doc(userId).get();
      
      if (doc.exists) {
        return ChatUser.fromJson(
            doc.data() as Map<String, dynamic>, doc.id);
      }
      return null;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

  Future<void> updateProfile(String name, String? status, String userId) async {
    try {
      await _firestore.collection('users').doc(userId).update({
        'name': name,
        if (status != null) 'status': status,
      });
      notifyListeners();
    } catch (e) {
      print(e.toString());
      rethrow;
    }
  }
}

Chat Service (`services/chat_service.dart`):

import 'package:cloud_firestore/cloud_firestore.dart';
import '../models/message.dart';
import '../models/user.dart';

class ChatService {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  // Get all users except the current user
  Stream<List<ChatUser>> getUsers(String currentUserId) {
    return _firestore
        .collection('users')
        .where('id', isNotEqualTo: currentUserId)
        .snapshots()
        .map((snapshot) {
      return snapshot.docs
          .map((doc) => ChatUser.fromJson(doc.data(), doc.id))
          .toList();
    });
  }

  // Get or create a chat room for two users
  Future<String> getChatRoomId(String userId1, String userId2) async {
    // Sort user IDs to ensure consistent room ID
    List<String> ids = [userId1, userId2];
    ids.sort();
    String roomId = ids.join('_');

    // Check if the room exists
    DocumentSnapshot roomDoc =
        await _firestore.collection('chatRooms').doc(roomId).get();

    // Create room if it doesn't exist
    if (!roomDoc.exists) {
      await _firestore.collection('chatRooms').doc(roomId).set({
        'participants': [userId1, userId2],
        'lastMessage': null,
        'lastMessageTime': null,
      });
    }

    return roomId;
  }

  // Get messages for a specific chat room
  Stream<List<Message>> getMessages(String roomId) {
    return _firestore
        .collection('chatRooms')
        .doc(roomId)
        .collection('messages')
        .orderBy('timestamp', descending: true)
        .snapshots()
        .map((snapshot) {
      return snapshot.docs
          .map((doc) => Message.fromJson(doc.data(), doc.id))
          .toList();
    });
  }

  // Send a message
  Future<void> sendMessage(String roomId, Message message) async {
    await _firestore
        .collection('chatRooms')
        .doc(roomId)
        .collection('messages')
        .add(message.toJson());

    // Update last message info
    await _firestore.collection('chatRooms').doc(roomId).update({
      'lastMessage': message.content,
      'lastMessageTime': message.timestamp,
    });
  }

  // Get user chat rooms
  Stream<List<DocumentSnapshot>> getUserChatRooms(String userId) {
    return _firestore
        .collection('chatRooms')
        .where('participants', arrayContains: userId)
        .snapshots()
        .map((snapshot) => snapshot.docs);
  }
}

Storage Service (`services/storage_service.dart`):

import 'dart:io';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter/material.dart';

class StorageService {
  final FirebaseStorage _storage = FirebaseStorage.instance;
  final ImagePicker _picker = ImagePicker();

  // Pick image from gallery
  Future<File?> pickImage(ImageSource source) async {
    final XFile? pickedFile = await _picker.pickImage(
      source: source,
      maxWidth: 1000,
      maxHeight: 1000,
      imageQuality: 85,
    );
    
    if (pickedFile != null) {
      return File(pickedFile.path);
    }
    return null;
  }

  // Upload profile image
  Future<String?> uploadProfileImage(File imageFile, String userId) async {
    try {
      Reference ref = _storage.ref().child('profile_images').child('$userId.jpg');
      UploadTask uploadTask = ref.putFile(imageFile);
      TaskSnapshot taskSnapshot = await uploadTask;
      String downloadUrl = await taskSnapshot.ref.getDownloadURL();
      return downloadUrl;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

  // Upload chat image
  Future<String?> uploadChatImage(File imageFile, String chatId) async {
    try {
      String fileName = DateTime.now().millisecondsSinceEpoch.toString();
      Reference ref = _storage.ref().child('chat_images').child(chatId).child('$fileName.jpg');
      UploadTask uploadTask = ref.putFile(imageFile);
      TaskSnapshot taskSnapshot = await uploadTask;
      String downloadUrl = await taskSnapshot.ref.getDownloadURL();
      return downloadUrl;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }
}

4. Tạo các màn hình

Để giữ cho bài viết không quá dài, chúng tôi sẽ chỉ hiển thị một số màn hình chính. Bạn có thể tham khảo mã nguồn đầy đủ tại repository GitHub của dự án.

Login Screen (`screens/auth/login_screen.dart`):

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../services/auth_service.dart';
import 'register_screen.dart';
import '../chat/chats_list_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoading = false;

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  void _login() async {
    if (_formKey.currentState!.validate()) {
      setState(() {
        _isLoading = true;
      });

      try {
        await Provider.of<AuthService>(context, listen: false)
            .signInWithEmailAndPassword(
          _emailController.text.trim(),
          _passwordController.text,
        );

        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => ChatsListScreen()),
        );
      } catch (e) {
        _showErrorDialog('Đăng nhập thất bại', e.toString());
      } finally {
        if (mounted) {
          setState(() {
            _isLoading = false;
          });
        }
      }
    }
  }

  void _showErrorDialog(String title, String message) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: Text(title),
        content: Text(message),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(ctx).pop();
            },
            child: Text('OK'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            padding: EdgeInsets.all(16.0),
            child: Form(
              key: _formKey,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text(
                    'Ứng dụng Chat',
                    style: TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                      color: Theme.of(context).primaryColor,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 40),
                  TextFormField(
                    controller: _emailController,
                    decoration: InputDecoration(
                      labelText: 'Email',
                      border: OutlineInputBorder(),
                      prefixIcon: Icon(Icons.email),
                    ),
                    keyboardType: TextInputType.emailAddress,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Vui lòng nhập email';
                      }
                      if (!value.contains('@')) {
                        return 'Email không hợp lệ';
                      }
                      return null;
                    },
                  ),
                  SizedBox(height: 16),
                  TextFormField(
                    controller: _passwordController,
                    decoration: InputDecoration(
                      labelText: 'Mật khẩu',
                      border: OutlineInputBorder(),
                      prefixIcon: Icon(Icons.lock),
                    ),
                    obscureText: true,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Vui lòng nhập mật khẩu';
                      }
                      if (value.length < 6) {
                        return 'Mật khẩu phải có ít nhất 6 ký tự';
                      }
                      return null;
                    },
                  ),
                  SizedBox(height: 24),
                  ElevatedButton(
                    onPressed: _isLoading ? null : _login,
                    child: _isLoading
                        ? CircularProgressIndicator(color: Colors.white)
                        : Text('Đăng nhập'),
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.symmetric(vertical: 16),
                    ),
                  ),
                  SizedBox(height: 16),
                  TextButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => RegisterScreen()),
                      );
                    },
                    child: Text('Chưa có tài khoản? Đăng ký ngay'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Chat Screen (`screens/chat/chat_screen.dart`):

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';
import 'dart:io';
import '../../models/message.dart';
import '../../models/user.dart';
import '../../services/auth_service.dart';
import '../../services/chat_service.dart';
import '../../services/storage_service.dart';
import '../../widgets/chat/message_bubble.dart';
import 'package:image_picker/image_picker.dart';

class ChatScreen extends StatefulWidget {
  final ChatUser receiver;

  ChatScreen({required this.receiver});

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

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _messageController = TextEditingController();
  final ChatService _chatService = ChatService();
  final StorageService _storageService = StorageService();
  late String _currentUserId;
  late String _chatRoomId;
  bool _isLoading = false;
  File? _imageFile;

  @override
  void initState() {
    super.initState();
    _currentUserId = Provider.of<AuthService>(context, listen: false).currentUser!.uid;
    _initializeChatRoom();
  }

  Future<void> _initializeChatRoom() async {
    _chatRoomId = await _chatService.getChatRoomId(_currentUserId, widget.receiver.id);
  }

  Future<void> _sendMessage() async {
    if (_messageController.text.trim().isEmpty && _imageFile == null) return;

    setState(() {
      _isLoading = true;
    });

    String? imageUrl;
    if (_imageFile != null) {
      imageUrl = await _storageService.uploadChatImage(_imageFile!, _chatRoomId);
      setState(() {
        _imageFile = null;
      });
    }

    Message message = Message(
      id: '',
      senderId: _currentUserId,
      content: _messageController.text.trim(),
      timestamp: Timestamp.now(),
      imageUrl: imageUrl,
    );

    await _chatService.sendMessage(_chatRoomId, message);
    _messageController.clear();

    setState(() {
      _isLoading = false;
    });
  }

  Future<void> _pickImage() async {
    File? pickedImage = await _storageService.pickImage(ImageSource.gallery);
    if (pickedImage != null) {
      setState(() {
        _imageFile = pickedImage;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            CircleAvatar(
              backgroundImage: widget.receiver.avatarUrl != null
                  ? NetworkImage(widget.receiver.avatarUrl!)
                  : null,
              backgroundColor: Colors.blueGrey,
              child: widget.receiver.avatarUrl == null
                  ? Text(widget.receiver.name[0].toUpperCase())
                  : null,
            ),
            SizedBox(width: 10),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(widget.receiver.name),
                Text(
                  widget.receiver.isOnline ? 'Online' : 'Offline',
                  style: TextStyle(
                    fontSize: 12,
                    color: widget.receiver.isOnline
                        ? Colors.green
                        : Colors.grey,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: StreamBuilder<List<Message>>(
              stream: _chatService.getMessages(_chatRoomId),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }

                if (!snapshot.hasData || snapshot.data!.isEmpty) {
                  return Center(
                    child: Text('Bắt đầu cuộc trò chuyện!'),
                  );
                }

                List<Message> messages = snapshot.data!;
                return ListView.builder(
                  reverse: true,
                  padding: EdgeInsets.all(10),
                  itemCount: messages.length,
                  itemBuilder: (ctx, i) {
                    final message = messages[i];
                    final isMe = message.senderId == _currentUserId;
                    return MessageBubble(
                      message: message.content,
                      isMe: isMe,
                      imageUrl: message.imageUrl,
                      time: DateFormat('HH:mm').format(
                        message.timestamp.toDate(),
                      ),
                    );
                  },
                );
              },
            ),
          ),
          if (_imageFile != null)
            Container(
              padding: EdgeInsets.all(8),
              color: Colors.grey[200],
              child: Row(
                children: [
                  Expanded(
                    child: Image.file(
                      _imageFile!,
                      height: 100,
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      setState(() {
                        _imageFile = null;
                      });
                    },
                  ),
                ],
              ),
            ),
          Container(
            padding: EdgeInsets.all(8),
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.image),
                  onPressed: _pickImage,
                ),
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration: InputDecoration(
                      hintText: 'Nhập tin nhắn...',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(25),
                      ),
                      contentPadding: EdgeInsets.all(12),
                    ),
                    textCapitalization: TextCapitalization.sentences,
                  ),
                ),
                SizedBox(width: 8),
                _isLoading
                    ? CircularProgressIndicator()
                    : IconButton(
                        icon: Icon(Icons.send),
                        onPressed: _sendMessage,
                        color: Theme.of(context).primaryColor,
                      ),
              ],
            ),
          ),
        ],
      ),
    );
  }

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

5. Tạo các widget cần thiết

Message Bubble (`widgets/chat/message_bubble.dart`):

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class MessageBubble extends StatelessWidget {
  final String message;
  final bool isMe;
  final String? imageUrl;
  final String time;

  MessageBubble({
    required this.message,
    required this.isMe,
    this.imageUrl,
    required this.time,
  });

  @override
  Widget build(BuildContext context) {
    final borderRadius = BorderRadius.only(
      topLeft: Radius.circular(12),
      topRight: Radius.circular(12),
      bottomLeft: isMe ? Radius.circular(12) : Radius.circular(0),
      bottomRight: isMe ? Radius.circular(0) : Radius.circular(12),
    );

    return Row(
      mainAxisAlignment: isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(
            color: isMe ? Theme.of(context).primaryColor : Colors.grey[300],
            borderRadius: borderRadius,
          ),
          width: imageUrl != null ? MediaQuery.of(context).size.width * 0.6 : null,
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
          child: Column(
            crossAxisAlignment: isMe
                ? CrossAxisAlignment.end
                : CrossAxisAlignment.start,
            children: [
              if (imageUrl != null)
                Container(
                  padding: EdgeInsets.only(bottom: 8),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: CachedNetworkImage(
                      imageUrl: imageUrl!,
                      placeholder: (context, url) =>
                          Center(child: CircularProgressIndicator()),
                      errorWidget: (context, url, error) =>
                          Icon(Icons.error),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              if (message.isNotEmpty)
                Text(
                  message,
                  style: TextStyle(
                    color: isMe ? Colors.white : Colors.black,
                  ),
                ),
              SizedBox(height: 4),
              Text(
                time,
                style: TextStyle(
                  fontSize: 10,
                  color: isMe ? Colors.white70 : Colors.black54,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Hiệu chỉnh và tối ưu hóa

1. Cải thiện hiệu suất

Sử dụng `cached_network_image` để cache hình ảnh và cải thiện trải nghiệm người dùng.
Áp dụng phân trang (pagination) cho danh sách tin nhắn khi có quá nhiều tin nhắn.
Tối ưu hóa truy vấn Firestore bằng cách chỉ lấy dữ liệu cần thiết.

2. Cải thiện giao diện người dùng

Thêm animation cho các thành phần UI.
Thêm chức năng thông báo khi có tin nhắn mới.
Hỗ trợ chế độ tối (dark mode) và chế độ sáng (light mode).

3. Tính năng bổ sung

Thêm chức năng tìm kiếm người dùng.
Thêm khả năng tạo nhóm chat.
Thêm tính năng xác thực bằng Google, Facebook.
Thêm tính năng gửi emoji và sticker.

Kết luận

Xây dựng một ứng dụng chat thời gian thực với Flutter và Firebase là một quá trình thú vị và học hỏi. Sự kết hợp giữa Flutter và Firebase tạo ra một giải pháp mạnh mẽ để phát triển ứng dụng nhắn tin di động với nhiều tính năng hiện đại.

Với ứng dụng này, người dùng có thể:

Đăng ký và đăng nhập bằng email và mật khẩu
Xem danh sách người dùng có sẵn để trò chuyện
Gửi tin nhắn văn bản và hình ảnh trong thời gian thực
Xem trạng thái online/offline của người dùng khác
Quản lý hồ sơ cá nhân

Đây chỉ là bước đầu, và bạn có thể tiếp tục mở rộng ứng dụng với nhiều tính năng thú vị khác như cuộc gọi video, gửi file, và nhiều tính năng khác.

Hãy chia sẻ kinh nghiệm xây dựng ứng dụng chat của bạn trong phần bình luận bên dưới. Bạn đã thêm những tính năng nào khác vào ứng dụng chat của mình?