Building a Chat App in Flutter with Firebase

Real-time chat functionality is one of the most common and powerful features in mobile apps — from social platforms to support systems. With Flutter and Firebase, you can build a full-featured chat app with ease, backed by real-time updates, authentication, and scalable cloud storage.

In this guide, we’ll walk through building a simple but functional chat app using Flutter and Firebase.

🔧 Step 1: Set Up Firebase for Your Flutter App

Before writing any Flutter code, you’ll need to set up Firebase and connect it to your app:

• Create a Firebase project
• Add your Android and/or iOS app
• Enable Firestore and Authentication
• Download the google-services.json or GoogleService-Info.plist
• Follow integration steps for Firebase SDK

👉 If you need help with this, check out our detailed guide on setting up a Firebase project in Flutter.

📦 Step 2: Add Required Dependencies

Update your pubspec.yaml file with the following packages:

dependencies:
  firebase_core: ^2.0.0
  firebase_auth: ^4.0.0
  cloud_firestore: ^4.0.0

Run:

flutter pub get

Then initialize Firebase in main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

🔐 Step 3: Set Up Authentication

Use Firebase Authentication for login. For simplicity, you can use Anonymous Auth or Email/Password:

final userCredential = await FirebaseAuth.instance.signInAnonymously();
final user = userCredential.user;

You’ll use the user’s UID to identify messages later.

🧱 Step 4: Define Firestore Chat Structure

Here’s a simple structure for storing messages in Firestore:

chats/
  chatId/
    messages/
      messageId/
        text: "Hello!"
        senderId: "abc123"
        timestamp: ...

Use chatId to represent one-on-one or group chats, and create subcollections for messages.

✉️ Step 5: Sending & Displaying Messages

Send a Message:

FirebaseFirestore.instance
  .collection('chats')
  .doc('global_chat')
  .collection('messages')
  .add({
    'text': messageText,
    'senderId': FirebaseAuth.instance.currentUser!.uid,
    'timestamp': FieldValue.serverTimestamp(),
  });

Display Messages:

StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance
      .collection('chats/global_chat/messages')
      .orderBy('timestamp')
      .snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    final messages = snapshot.data!.docs;
    return ListView.builder(
      itemCount: messages.length,
      itemBuilder: (context, index) {
        final msg = messages[index];
        return ListTile(
          title: Text(msg['text']),
          subtitle: Text(msg['senderId']),
        );
      },
    );
  },
)

🎨 Step 6: Design the Chat UI

• Use TextField + IconButton for the message composer
• Align messages left or right depending on the sender
• Style message bubbles with Container, BoxDecoration, and padding
• Use Expanded and Column for layout structure

🔒 Optional Add-ons

Once you’ve got the basics working, consider adding:

• Push notifications with Firebase Messaging
• Typing indicators
• Message read/unread status
• Profile pictures and usernames
• File/image upload

✅ Final Thoughts

Using Firebase and Flutter together gives you the perfect toolkit for building real-time apps. With only a few lines of code, you can create a clean, fast, and functional chat system that syncs across devices instantly.

This tutorial is just the beginning — keep experimenting, keep scaling, and don’t forget to keep your UI fast and friendly.