How to Build a Chat App with Flutter in Under an Hour

Introduction

Creating a chat application may sound complex, but with Flutter and Firebase, it becomes a straightforward and fun process. Flutter, Google’s UI toolkit, lets you build natively compiled applications for mobile, web, and desktop from a single codebase. Firebase, on the other hand, provides a powerful backend for real-time database and authentication. In this guide, we’ll show you how to build a functional chat app in under an hour. Let’s dive in!

---

Prerequisites

Before we begin, ensure you have the following ready:

1. Flutter SDK Installed: If not, follow this guide.

2. Basic Understanding of Flutter: Familiarity with widgets and layouts is helpful.

3. A Firebase Project: Set up a new project in Firebase to use its services for authentication and database.

---

Step 1: Setting Up the Project

Start by creating a new Flutter project. Open your terminal and run:

flutter create chat_app
cd chat_app

Next, you’ll need to add Firebase dependencies for authentication and real-time database. Open pubspec.yaml and add the following:

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

Run flutter pub get to install the dependencies. Follow this guide to configure Firebase with your Flutter app.

---

Step 2: Designing the User Interface

A chat app needs a few essential screens:

• Login Screen: Where users can sign in with their email and password.

• Chat Screen: Where users can send and receive messages.

Here’s a quick example of what the login screen might look like:

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                decoration: InputDecoration(labelText: 'Email'),
              ),
              TextField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {},
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This layout provides a clean, minimal interface for user authentication.

---

Step 3: Adding Authentication with Firebase

Authentication is an essential part of any chat application. Firebase Authentication makes it easy to handle user login and signup. Here’s how to add basic login functionality:

1. Initialize Firebase: In your main.dart, ensure Firebase is initialized before running the app:

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

2. Login Functionality: Add a function to handle email/password login:

    Future<void> login(String email, String password) async {
      try {
        await FirebaseAuth.instance.signInWithEmailAndPassword(
          email: email,
          password: password,
        );
      } catch (e) {
        print('Login failed: $e');
      }
    }
   

This function interacts with Firebase to authenticate the user.

---

Step 4: Setting Up Cloud Firestore for Messages

Now, let’s move on to the messaging feature. Firebase’s Cloud Firestore is ideal for real-time updates.

1. Create a Messages Collection: In Firebase, create a collection named messages.

2. Sending Messages: To send a message, use the following code snippet:

    void sendMessage(String message) {
      FirebaseFirestore.instance.collection('messages').add({
        'text': message,
        'timestamp': FieldValue.serverTimestamp(),
      });
    }
   

   This stores the message along with a timestamp.

3. Displaying Messages: Use a StreamBuilder to fetch and display messages in real-time:

    StreamBuilder(
      stream: FirebaseFirestore.instance.collection('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) => ListTile(
            title: Text(messages[index]['text']),
          ),
        );
      },
    );
   

This ensures the chat updates instantly when a new message is sent.

---

Step 5: Testing and Final Touches

1. Run the App: Use flutter run to test the app on an emulator or a physical device.

2. Add Error Handling: Improve the user experience by adding error messages for login failures or message send errors.

3. Enhance UI: Add styling to make the app visually appealing.

---

Conclusion

Congratulations! You’ve successfully built a basic chat application using Flutter and Firebase. While this app is functional, there are many ways to enhance it further. Consider adding features like user profiles, read receipts, or file sharing to make it more robust.

Building apps with Flutter is a rewarding experience, thanks to its versatility and Firebase’s powerful backend services. Start experimenting with your app and see what you can create!

---