📱 Flutter WhatsApp-like Chat Chat App

Overview

This Flutter project is a chat application inspired by WhatsApp. The app features a familiar interface with a functional chat page, a Local Auth Screen, and user registration using email/password or Google Account.

Screenshots

Update Available Screen

SignUp using Email & Password Screen

SignUp using the Google Account Screen ( After Select Account )

Login Screen

Reset Password Screen

Home Screen

Settings Screen

Chat Screen

Select Image

Local Auth Screen (Fingerprint & FaceID)

No Internet Screen

Coming Soon Screen

Features

• User Authentication:

  • Email/Password registration with placeholder image.
  • Google Account registration with profile image.

• Chat Functionality:

  • Display all registered users on the home page.
  • Clicking on a user tile opens the chat page.
  • Chat page displays saved messages from Firebase store.
  • Input text field and send button for sending messages.
  • Real-time updates using Firebase Cloud Firestore.
  • Push notifications using Firebase Cloud Messaging.

• Notification Handling:

  • Display notifications when the app is in the foreground using flutter_local_notifications package.
  • Open the chat with the sender when the app is in the background or terminated.

• Security:

  • App lock feature using fingerprint or face ID with local_auth package.
  • Fingerprint/face ID attempts are limited to prevent unauthorized access.
  • Lock screen request after multiple unsuccessful attempts.

• Settings:

  • Accessible from the home page's three dots menu.
  • Option to enable/disable app lock with a Cupertino switch.
  • Option to Change App Language

• Camera Integration:

  • Capture high-quality photos using the device's camera.
  • Save pictures on the device.
  • Send photos

Dependencies

• awesome_dialog: Provides versatile dialogs for various use cases.
• cached_network_image: Library to load and cache network images.
• chat_bubbles: Simplifies chat message UI creation.
• cloud_firestore: Integrates with Firebase Firestore for data storage and retrieval.
• dio: HTTP client for making API requests.
• easy_localization: Internationalizing and localization App.
• firebase_auth: Manages user authentication with Firebase.
• firebase_core: Initializes the Firebase connection.
• firebase_messaging: Enables FCM for notifications.
• firebase_storage: Plugin for Firebase Cloud Storage.
• flutter_local_notifications: Presents local notifications when the app is in the foreground.
• flutter_native_splash: Customize the App's default white native splash screen with background color and splash image.
• flutter_offline: Handles offline connectivity scenarios.
• flutter_screenutil: Adapts UI elements to different screen sizes.
• flutter_speed_dial: Plugin to implement a beautiful and dynamic Material Design Speed Dial with labels.
• flutter_svg: An SVG rendering and widget library.
• gap: Simplifies spacing management in layouts.
• google_sign_in: Facilitates Google Sign-In authentication.
• googleapis_auth: Obtain Access credentials for Google services using OAuth 2.0.
• image_picker: Plugin for selecting images from the image library, and taking new pictures with the camera.
• intl: Internationalization and localization support.
• local_auth: Enables fingerprint and Face ID authentication.
• logger: Assists with logging messages for debugging.
• shared_preferences: Stores simple data locally on the device.
• pretty_dio_logger: A Dio interceptor that logs network calls in a pretty, easy-to-read format.
• modal_bottom_sheet: Create awesome and powerful modal bottom sheets.
• lottie: Render After Effects animations natively on Flutter.
• package_info_plus: Querying information about the application package.
• pub_semver: in this App to compare versions.
• url_launcher: Plugin for launching a URL.

Installation

1. Clone the repository:

git clone https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like.git

2. Navigate to the project directory:

cd Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like

3. Install dependencies:

flutter pub get

4. Configure Firebase:

   • Create a Firebase project at https://console.firebase.google.com/.
   • Enable the required Firebase services for your app, including Firestore, Authentication, and Cloud Messaging.

5. Set up Firebase for your project by following the Using Firebase CLI.

6. Customized chat_bubbles Package

I have made custom modifications to the chat_bubbles package

Implementation Details

I have already uploaded the edited files to my project. You can find it in the following path:

removeable/bubble_normal_image.dart
removeable/bubble_special_three.dart
removeable/date_chip.dart
removeable/message_bar.dart

How to Apply Changes

1. Download the edited files.

2. Replace the existing files in your Flutter project with the downloaded files.

   • For bubble_special_three.dart and bubble_normal_image.dart, navigate to:

     %LocalAppData%\Pub\Cache\hosted\pub.dev\chat_bubbles-1.5.0\lib\bubbles\
     

   • For date_chip.dart, navigate to:

     %LocalAppData%\Pub\Cache\hosted\pub.dev\chat_bubbles-1.5.0\lib\date_chips\
     

   • For message_bar.dart, navigate to:

     %LocalAppData%\Pub\Cache\hosted\pub.dev\chat_bubbles-1.5.0\lib\message_bars\
     

7. Update the app's launcher icon:

dart run flutter_launcher_icons

8. Update the app's splash screen:

dart run flutter_native_splash:create --path=flutter_native_splash.yaml

9. Run the app:

flutter run