Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
MoazSayed7 committed May 6, 2024
2 parents 173b48d + ab081be commit ef72a91
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 26 deletions.
99 changes: 73 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[![Stand With Palestine](https://raw.githubusercontent.com/TheBSD/StandWithPalestine/main/banner-no-action.svg)](https://thebsd.github.io/StandWithPalestine)


# 📱 Flutter WhatsApp-like Chat App
# 📱 Flutter WhatsApp-like Chat Chat App

## Overview

Expand All @@ -14,6 +14,7 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/7c602d05-8f31-4d3c-8d68-c565cedbb167" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/05f671fa-1307-4998-ab9a-0f4c073aae74" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/56647ac8-b9fd-41f4-9aa9-e531b6b6607c" alt="drawing" style="width:250px;"/>
</body>
</HTML>

Expand All @@ -22,12 +23,13 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
### SignUp using Email & Password Screen
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/6a7407df-504c-41f2-94f2-5668a14e685b" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/1cc7b06d-f7b2-4ea8-8895-faa002588433" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/6898582c-fe9f-4168-acd1-55e15219fdfb" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/e12a3e09-384f-4ae7-af0d-159c87be9ec9" alt="drawing" style="width:250px;"/>
<br/>
<br/>
<br/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/e12a3e09-384f-4ae7-af0d-159c87be9ec9" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/9e1f9c54-a438-4e4e-a3a8-c7f84a63466a" alt="drawing" style="width:250px;"/>
</body>
</HTML>
Expand All @@ -38,6 +40,7 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature

<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/e9154925-34bb-4aa7-86a2-0031c540d444" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/c950c7dc-f50c-4c9c-975e-f7e6abd60ba6" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/472d4063-88a9-488d-9a77-96bb16e5432d" alt="drawing" style="width:250px;"/>
</body>
Expand All @@ -49,8 +52,12 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature

<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/817baebb-6dcc-4acb-a121-2b40bc279acb" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/f611aabb-3a7a-40d3-9913-34d82c49ff14" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/cad93a1c-538f-4e31-b19b-a6ba890ee6e6" alt="drawing" style="width:250px;"/>
<br/>
<br/>
<br/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/9bd02d42-86a9-4195-a9b1-7aeaaed92f2e" alt="drawing" style="width:250px;"/>
</body>
</HTML>
Expand All @@ -60,6 +67,7 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
### Reset Password Screen
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/066c809b-f7a1-4a02-94b5-48aa9b06f6fc" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/e112a7fe-be28-40a8-b108-8f7d0def4556" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/7d3ff005-98f6-483c-9c5f-b476eda97c18" alt="drawing" style="width:250px;"/>
</body>
Expand All @@ -70,8 +78,9 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
### Home Screen
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/9de3efd6-2790-41bd-b055-5bfac3b4b4ff" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/78bf351e-817f-462e-97a6-ca1f82d5b472" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/728643a7-dae5-4afd-843f-cc52c782cc1b" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/fca11d40-e36e-467b-aeb3-fd7c71d2d3d4" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/c7730983-4dbf-4f5a-82bf-3d7ebd420958" alt="drawing" style="width:250px;"/>
</body>
</HTML>

Expand All @@ -80,8 +89,9 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
### Settings Screen
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/e56de1c9-dabc-473e-8013-cac03ce3f5ee" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/41ef5328-6bf6-444f-914d-beb739091d6d" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/0903c423-ae48-4e4f-b824-35e66b95859a" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/961764ab-aa39-4358-9c49-46642c61a25b" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/5c4007b0-e594-468c-94e8-2fb7d46aacb4" alt="drawing" style="width:250px;"/>
</body>
</HTML>

Expand All @@ -90,20 +100,28 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
### Chat Screen
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/59048556-34bc-4f75-bc40-19a588518f33" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/631b39e8-a739-45c6-81ba-2f50b902b69f" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/629b9897-f87b-4bfd-b3fd-1b36637d81ab" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/05581d7d-1543-47df-a42b-9c076effdc6f" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/3d138ba2-cd1f-4cb4-bb4c-afc56cc72387" alt="drawing" style="width:250px;"/>
<br/>
<br/>
<br/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/5d4b01b8-8aeb-43ab-935c-0fd57077eb80" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/c5917daa-66dc-4ccf-9d04-67384061609d" alt="drawing" style="width:250px;"/>
</body>
</HTML>

---

### Camera Screen
### Select Image
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/eae1a293-cece-4e88-8e59-b27afe9e3c94" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/a2fb8799-0ea0-4ea4-8ac0-8447ec6d2553" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/dc9194b9-5375-488f-8df4-b2e713c2ff6d" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/bcce51d3-1d24-4819-977d-33a939f32dfc" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/1b4345a9-0057-42af-b4de-59b2d3b6ef67" alt="drawing" style="width:250px;"/>
<br/>
<br/>
<br/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/029149ef-bfd5-48ae-8cf7-fb0fd2c8fc92" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/9e93edda-23f3-47ca-9ed8-bdab22389e0c" alt="drawing" style="width:250px;"/>
</body>
</HTML>

Expand All @@ -112,8 +130,9 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature
### Local Auth Screen (Fingerprint & FaceID)
<HTML>
<body>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/6616b902-7ac5-4249-83dc-cb54c314d153" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/b5d6f62c-12c9-44bf-ab6d-d95a52f340df" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/5031ade5-8105-4467-af19-09077cf56091" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/9c160fa2-3247-472d-a0e2-709bf87fbad3" alt="drawing" style="width:250px;"/>
<img src="https://github.com/MoazSayed7/Flutter-Chat-App-Firebase-Authentication-Messaging-WhatsApp-Like/assets/75115429/0a3a969c-c2f7-455e-8ed7-f8b374eb05f2" alt="drawing" style="width:250px;"/>
</body>
</HTML>

Expand Down Expand Up @@ -155,38 +174,47 @@ This Flutter project is a chat application inspired by WhatsApp. The app feature

- **Security:**
- App lock feature using fingerprint or face ID with `local_auth` package.
- Fingerprint/face ID attempts limited to prevent unauthorized access.
- 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.
- `camera`: Enables camera interaction and image capture.
- `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.
- `eva_icons_flutter`: Provides additional icons beyond the core Flutter icons.
- `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.
Expand Down Expand Up @@ -224,31 +252,50 @@ I have made custom modifications to the `chat_bubbles` package

#### Implementation Details

I have already uploaded the edited `bubble_special_three.dart` file to my project. You can find it in the following path:
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 `bubble_special_three.dart` file.
1. Download the edited files.

2. Replace the existing `bubble_special_three.dart` file in your Flutter project with the downloaded file.
2. Replace the existing files in your Flutter project with the downloaded files.

- navigate to:
- 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\
```
%LocalAppData%\Pub\Cache\hosted\pub.dev\chat_bubbles-1.6.0\lib\bubbles\bubble_special_three.dart

- For `message_bar.dart`, navigate to:
```
%LocalAppData%\Pub\Cache\hosted\pub.dev\chat_bubbles-1.5.0\lib\message_bars\
```
- Delete the existing `bubble_special_three.dart` file and replace it with the downloaded file from my repository.

---

7. Update app's launcher icon:
7. Update the app's launcher icon:

```bash
dart run flutter_launcher_icons
```
8. Run the app:
8. Update the app's splash screen:

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

9. Run the app:

```bash
flutter run
Expand Down
49 changes: 49 additions & 0 deletions removeable/date_chip.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import 'package:chat_bubbles/algo/algo.dart';
import 'package:flutter/material.dart';

///[DateChip] use to show the date breakers on the chat view
///[date] parameter is required
///[color] parameter is optional default color code `8AD3D5`
///
///
class DateChip extends StatelessWidget {
final DateTime date;
final Color color;
final Color dateColor;

///
///
///
const DateChip({
Key? key,
required this.date,
this.color = const Color(0x558AD3D5),
this.dateColor = const Color(0x558AD3D5),
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.only(
top: 7,
bottom: 7,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(6)),
color: color,
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
Algo.dateChipText(date),
style: TextStyle(
color: dateColor,
),
),
),
),
),
);
}
}

0 comments on commit ef72a91

Please sign in to comment.