Flutter Firebase Chat App 🗨️👨‍💻

A real-time messaging application built with Flutter and Firebase, enabling users to sign up, log in, and chat with other users seamlessly.

Features

• User authentication (Sign up and Log in) with state management
• Real-time chat messaging
• User discovery and listing
• User profile management
• Persistent authentication state
• Offline support with cached data
• Clean and intuitive UI
• Form validation with reactive state management
• Authentication state management using Riverpod

Form Validation with State Management

The app implements comprehensive form validation using Riverpod for reactive state management:

• Email validation with regex pattern matching
• Password strength validation
• Confirm password matching
• Real-time validation feedback
• Disabled submit button until all fields are valid
• Error message display on form fields
• Form state reset after successful submission

Authentication State Management with Riverpod

The app uses Riverpod for efficient authentication state management:

• Authentication status tracking (authenticated, unauthenticated, loading)
• User session persistence
• Automatic token refresh
• Logout functionality with state cleanup
• Deep linking based on authentication state

Chat State Management

Riverpod manages all chat-related states:

• Active chat selection
• Message list streaming
• Real-time message updates
• Message sending status
• Unread message count
• Chat list management

User Management

User data and profile state management:

• User list caching
• User profile updates
• User search functionality
• Profile image upload status

Prerequisites

Before getting started, ensure you have the following installed:

• Flutter SDK (version 3.0 or higher)
• Dart SDK
• Firebase CLI
• Android Studio or Xcode (for iOS development)
• A Firebase project

Installation

1. Clone the Repository

git clone <repository-url>
cd flutter-firebase-chat-app

2. Install Dependencies

flutter pub get

3. Configure Firebase

For Android:

• Download google-services.json from your Firebase console
• Place it in android/app/ directory

For iOS:

• Download GoogleService-Info.plist from your Firebase console
• Add it to the Xcode project (Runner > Add files)

4. Run the App

flutter run

Project Structure

lib/
├── main.dart
├── models/
│   ├── user_model.dart
│   └── message_model.dart
├── screens/
│   ├── auth/
│   │   ├── login_screen.dart
│   │   ├── signup_screen.dart
│   │   └── auth_wrapper.dart
│   ├── home/
│   │   ├── home_screen.dart
│   │   ├── users_list_screen.dart
│   │   └── user_profile_screen.dart
│   └── chat/
│       └── chat_screen.dart
├── providers/
│   ├── auth_provider.dart
│   ├── auth_notifier.dart
│   ├── form_provider.dart
│   ├── user_provider.dart
│   ├── chat_provider.dart
│   └── message_provider.dart
├── services/
│   ├── firebase_auth_service.dart
│   ├── firestore_service.dart
│   └── storage_service.dart
├── widgets/
│   ├── chat_bubble.dart
│   ├── message_input.dart
│   ├── user_card.dart
│   └── form_fields.dart
└── utils/
    ├── validators.dart
    └── constants.dart

Usage

Sign Up with Form Validation

1. Launch the app
2. Tap "Sign Up"
3. Enter email (real-time validation)
4. Enter password (minimum 6 characters)
5. Confirm password (must match)
6. Complete your profile information
7. Submit button enables only when all fields are valid
8. Tap "Create Account"

Log In

1. Enter your registered email
2. Enter your password
3. Form validates inputs in real-time
4. Tap "Log In"
5. Authentication state updates automatically

Start Chatting

1. Go to "Users" tab to see all available users
2. Tap on a user to open chat
3. Type your message and send
4. Messages appear in real-time for both users

View and Update Profile

1. Tap "Profile" tab
2. View your profile information
3. Edit your details if needed
4. Profile updates are reflected in real-time across the app

Technologies Used

• Flutter - Cross-platform mobile framework
• Firebase Authentication - User authentication with state persistence
• Firestore - Real-time database with stream providers
• Firebase Cloud Storage - Profile image storage
• Riverpod - State management with providers, notifiers, and families
• Dart - Programming language

Firebase Firestore Structure

Collections

users - User account information

chats - Chat conversations

messages - Individual messages

State Management Architecture with Riverpod

Provider Categories

1. StreamProviders - Real-time data streams

• Authentication state stream
• Messages stream
• Users list updates

2. FutureProviders - Async data fetching

• Fetch user profile
• Load users list
• Get chat history

3. StateProviders - Simple state containers

• Selected chat ID
• Current form values
• UI state (loading, error)

4. StateNotifierProviders - Complex state logic

• Authentication notifier (signup, login, logout)
• Form validation notifier
• Message sending notifier
• Profile update notifier

Authentication Flow

1. User launches app
2. Riverpod checks authStateProvider for existing session
3. If authenticated, navigate to home screen
4. If unauthenticated, navigate to login/signup
5. User form inputs trigger validation providers
6. On submit, authentication notifier processes signup/login
7. Firebase updates authentication state
8. Stream providers automatically update UI with new state
9. User data syncs across all relevant providers

Error Handling

• Form validation errors shown on individual fields
• Network errors displayed with retry options
• Authentication failures with user-friendly messages
• Firestore permission errors with guidance

API Endpoints Overview

Authentication

• Sign Up - Creates new user account with validation
• Log In - Authenticates user with credentials
• Log Out - Ends user session and clears state

Messaging

• Send Message - Creates new message in Firestore
• Fetch Messages - Retrieves chat history via stream
• Mark as Read - Updates message read status

User Management

• Get User List - Retrieves all users with caching
• Get User Profile - Fetches user details
• Update Profile - Modifies user information with notifier

Troubleshooting

Firebase Connection Issues

• Verify Firebase credentials are correctly configured
• Check internet connection
• Ensure Firebase project is active

Authentication Errors

• Verify email format is correct
• Ensure password meets Firebase requirements (minimum 6 characters)
• Check that user account exists for login

Message Sending Issues

• Confirm Firestore rules allow read/write permissions
• Check user permissions in Firestore
• Verify chat participants are correctly stored

Validation Issues

• Clear app cache and rebuild
• Ensure validators are called on every field change
• Check form state provider is properly initialized

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -m 'Add YourFeature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a Pull Request