Flutter Chat App

Real-time chat application built with Flutter and Firebase.

Architecture Overview

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Flutter App   │    │    Firebase      │    │     Users       │
│                 │    │                  │    │                 │
│  ┌─────────────┐│    │ ┌──────────────┐ │    │ ┌─────────────┐ │
│  │Auth Screen  ││◄──►│ │Firebase Auth │ │    │ │   User A    │ │
│  └─────────────┘│    │ └──────────────┘ │    │ └─────────────┘ │
│                 │    │                  │    │        │        │
│  ┌─────────────┐│    │ ┌──────────────┐ │    │        ▼        │
│  │Chat Screen  ││◄──►│ │  Firestore   │ │◄──►│ ┌─────────────┐ │
│  └─────────────┘│    │ │  (Messages)  │ │    │ │   User B    │ │
│                 │    │ └──────────────┘ │    │ └─────────────┘ │
│  ┌─────────────┐│    │                  │    │        │        │
│  │Image Picker ││◄──►│ ┌──────────────┐ │    │        ▼        │
│  └─────────────┘│    │ │Firebase      │ │    │ ┌─────────────┐ │
│                 │    │ │Storage       │ │    │ │   User C    │ │
└─────────────────┘    │ │(Images)      │ │    │ └─────────────┘ │
                       │ └──────────────┘ │    └─────────────────┘
                       │                  │
                       │ ┌──────────────┐ │
                       │ │Firebase      │ │
                       │ │Messaging     │ │
                       │ │(Push Notifs) │ │
                       │ └──────────────┘ │
                       └──────────────────┘

Features

• Authentication: User authentication with Firebase Auth
• Real-time Messaging: Instant message delivery with Cloud Firestore

Screenshots

Create Account Screen	Auth and Chat Screen	Sign In Screen

Installation & Setup

1. Clone the Repository

git clone https://github.com/yohanangulo/flutter-chat-app.git
cd flutter-chat-app

2. Install Dependencies

flutter pub get

3. Firebase Configuration

1. Create a new Firebase project at Firebase Console
2. Enable Authentication, Firestore Database, Storage, and Messaging
3. Add your platform-specific configuration files:
   • Android: android/app/google-services.json
   • iOS: ios/Runner/GoogleService-Info.plist

4. Run the Application

# For mobile development
flutter run

Project Structure

lib/
├── auth/
│   └── presentation/
│       └── auth_screen.dart          # Authentication UI
├── chat/
│   └── presentation/
│       ├── chat_screen.dart          # Main chat interface
│       └── widgets/
│           ├── chats_messages.dart   # Message list display
│           ├── message_bubble.dart   # Individual message UI
│           └── new_message.dart      # Message input widget
├── core/
│   ├── extensions/                   # Dart extensions
│   └── presentation/
│       ├── app/                      # App configuration
│       ├── theme/                    # UI theming
│       └── widgets/                  # Reusable widgets
├── splash/
│   └── presentation/
│       └── splash_screen.dart        # Loading screen
├── firebase_options.dart             # Firebase configuration
└── main.dart                         # App entry point

---

Built with Flutter | Developed by Yohan Angulo