Minimal Chat Application with Flutter and Firebase

Overview

• Features: Authentication, Chat functionalities, Light & Dark mode.
• Pages:
  • Login Page: Check if user is logged in, otherwise redirect to login page.
  • Register Page: Create new account.
  • Homepage: Access settings and chat page.
  • Chat Page: Chat with different users.
  • Settings Page: Log out, toggle light/dark mode.
• Data Storage: Firestore for users and chat rooms.
  • Collections: Users and Chat Rooms.

Project Setup

• New Flutter Project: Initialize and set up main function for the app.
• Organize Code: Place all pages in a separate folder for structure.
• Theme Setup: Create folder themes for light and dark modes.
• Light Mode: Specify colors for background, primary, secondary, tertiary, inverse primary.

UI Development

Login Page

• Components:
  • Logo (icon or image).
  • Welcome message.
  • Text fields for email and password.
  • Login button.
  • Navigation to Register page.
• Implementation:
  • Scaffold with a column for components.
  • Use TextField widget for input fields.
  • Create reusable widget components for TextField and buttons.

Register Page

• Components: Similar to Login Page with an additional text field for confirm password.
• Implementation: Copy Login Page scaffold, adjust for registration.

Authentication Navigation

• Login or Register: Create file to toggle between login and register pages.
• Stream Builder: Use to listen to authentication state changes.

Firebase Setup

• Authorization: Enable Email/Password authentication in Firebase Console.
• Connection: Use flutterfire configure to link Firebase project with Flutter app.
• Add Dependencies: firebase_core and firebase_auth packages.

Authentication Functions

• Login: Implement sign in method, handle errors.
• Register: Implement sign up method, handle errors.
• Logout: Implement sign out method.

Navigation Functionality

• Homepage: Implement logout button in app bar.
• Drawer: Create navigation drawer with Home, Settings, and Logout options.
• Settings Page: Implement theme toggle (light/dark mode).

Firestore Setup

• Database: Enable Firestore, update rules for write permissions.
• Chat Service: Implement methods for managing chat data.
  • User stream: Retrieve and display users.
  • Send message: Save messages between users.
  • Get messages: Fetch messages for chat display.

Chat Page

• Components:
  • User input for message typing.
  • Button to send message.
  • List view to display chat messages.
• UI Adjustments: Align messages based on sender.
• Chat Bubbles: Decorate messages to look like chat bubbles.

Final Touches

• App Bar: Make transparent and clean up design.
• Dark Mode: Implement and test dark mode functionality.
• Scroll Management: Ensure chat scrolls to the latest message.
• Cleanup: Adjust colors, handle additional UI details.