Chat Application

Overview

CONNECT

Chat Application

With over 4000 lines of code and many days of struggle, I have built my Chat Application named "Connect" right from scratch using Flutter.

The database used for storing user's data(name, email, profile pic only) and chats is Firebase(which is a NoSQL database made by Google).The code is mainly written in dart programming language and a small part of it is written in Java Script.

Screenshot from 2021-05-20 13-09-48 Screenshot from 2021-05-20 13-10-00 Screenshot from 2021-05-20 13-04-59 Screenshot from 2021-05-20 13-09-35 Screenshot from 2021-05-20 13-10-00 Screenshot from 2021-05-20 13-16-10 Screenshot from 2021-05-20 13-17-08

The app consists of 10 screens:-

  • Sign up screen - In this screen, one can sign up by providing their username, email and password(There are certain restrictions like the username can't be less than 4 letters, password must be atleast 8 characters and the mail shoukd be in proper format)
  • Sign In screen - In this screen, one can sign in with his/her email and password provided at the time of signup.
  • Chat Room Screen - In this screen you can see the names of all the user's you have messaged, and the settings, profile and search icon.
  • Search screen - By tapping at the search button in the Chat Room screen you will be taken to this screen where you can search any user (by their username) you want to text.
  • Conversation Screen - In this screen, you can see the profile pic, name and status(whether typing, online or last seen at some time) of the user you are talking to and also all the messages you have sent to each other in proper order.This is the screen where you can "Connect" with the other user.
  • Change Profile Screen - By tapping on the profile button in the Chat Room screen, you will be taken to this screen where you can see your own username and email that you provided at the time of Sign Up and in this screen you also have an option to see, update, remove or add your profile pic.
  • Profile pic of the user -In this screen you can see the profile pic, username and email of the any user you have messaged.
  • Settings screen - In this screen the user has an option to change the theme of the app, log out from the app and change wallpaper for both dark and light theme respectively.
  • Unique Profile Pic Screen - In this screen one can change his/her profile pic and that change would be reflected only for a particular user.
  • Wallpaper Screen - In this screen the user can choose one of the four options for both dark and light theme to set their conversation screen wallapper.

Packages used:-

  1. "firebase_auth" - For enabling android Authentication using email and password
  2. "cloud_firestore" - For storing data in firestore database and also accessing data from it.
  3. "shared_preferences" - For reading and writing simple key value pairs.
  4. "date_time_format" - For easy formatting of Date and time.
  5. "http" - For accessing data via web using http link.
  6. "firebase_messaging" - This plugin helps to use Firebase Cloud Messaging API.
  7. "path_provider" - For getting the path of the profile pic uploaded by the user in the Firebase Storage.
  8. "cupertino_icons" - For using "eye" icon.
  9. "cached_network_image" - For caching all the network images so as to render them faster.

-v1.0.0 -> Initial release with basic features(Sign In, Sign Up, searching for a particular user from their username and chatting with the user)

-v1.0.1 -> Added a feature which shows the time at which the user has sent the message. Also when the date changes a text of that date in dd-mm-yy format is shown in the conversation screen.Furthermore, i have also added a feature which shows last message sent in the conversation screen the time at which it was sent.

-v1.0.2 -> Added Notification feature.It instantly notifies a person as soon as he/she receives a message.The function for notification is written in Java Script and is cloud function(which is a paid feature provided by Firebase).The function triggers as soon as the database detects any kind of document creation in its storage and sends notification to a particular user via a unique token assigned to that user while signing in or signing up.

-v1.0.3 -> Added features like Last Seen of the user and whether the user is online or not(Similar to Whatsapp).Also added a feature which sorts the names of the users you have talked with in proper order.

-v1.0.31 -> Added "Typing" feature.As soon as any user starts typing the status of the user turns from "Online" to "Typing...". Not only the conversation screen but the chat room screen tile also changes from user's last message to "Typing..." (Again similar to Whatsapp)

-v1.0.32 -> Added a feature which lets the user know whether the other person has seen his/her message or not. In the chat room screen a grey colour bulb is added which turns yellow as soon as the other person taps on the message helping the user on the other side know that he/she has seen the message.

-v.1.0.4 -> Added option to add, remove and update profile pic for the users.Removed the feature added in v1.0.3 of sorting the names in chat room(due to some bugs) and the names now appear in alphabetical order.

-v1.0.41 -> Added another screen which shows the profile of the person you are talking to.By simply clicking on the dp of the user (in the chat room screen) or clicking on the name of the user(in the conversation screen) one can see the Profile pic, username and email of that particular user.Also added a loading indicator and snackbar which pops up while adding, removing or updating your own display pic for better user experience.

-v1.0.5 -> Enhanced UX/UI while changing profile picture by adding snackbar and loading animation.Also added an option to remove profile picture.Added a feature which shows "New Message" in the chat room screen if someone hasn't seen the last message of any user(Similar to Instagram).

-v1.0.6 -> Replaced the bulb icon with an eye icon using "cupertino_icons" package.Also added a feature which will let the user know whether the other person has seen the message or not in the conversation screen(Similar to "seen" feature in Instagram).

-v1.0.7 -> Added a feature which helps user to toggle between dark and light theme.

-v1.0.71 -> Added background image for dark and light theme(Image stolen from whatsapp :P) and fixed some bugs

-v1.0.72 -> Changed background image for both dark and light theme as it was copied from whatsapp and made some other UI changes like transparency of chat messages and popping up snackbar while changing theme.

-v1.0.8 -> Added a feature which doesn't allow two or more users to sign up with the same username,i.e,every user has an unique username.

-v1.0.9 -> Added a feature which sorts the names of the users you have talked with in proper order which was removed in v1.0.4 . The bugs were fixed by manipulating the structure of the database.Few other bugs are also fixed in this version.

-v1.1.0 -> Added a feature which helps the user set different profile pic for different users(Unique Profile Picture).

-v1.1.1 -> Changed the notification icon, application icon and application name (from "flutter_chat_app" to "Connect").Also made some changes in DateTime formatting(Replaced today's date and yesterday's date with strings "Today" and "Yesterday" wherever necessary).

-v1.1.2 -> Added a new feature which helps the user to change the wallpaper of both dark and light theme respectively.Replaced all the Network Images with Cached Netwrok Image and as a result the images are rendered much faster.In conversation screen the gap between two msgs will be less if those two msgs are sent by the same user(Similar to whatsapp).Also made some UI enhancements.

-v1.1.3 -> Added a feature which lets users to share images between them.The images shared are not stored in the phone device.Also added feature to display in a new screen the profile pic and the pics shared in the chat by tapping on the photo.

-v1.1.31 -> Added the ability to zoom in and zoom out any photo viewed by the user.Made some UI enhancements as well.

Issues
  • Doleance

    Doleance

    Hi ! Please,can you let me fork the code

    opened by excellencemichel 3
Owner
mohitmundra
mohitmundra
A sophisticated Chat Application [NestJs+Flutter].

Hornbill Key features Used sockets for messaging and loading registered contacts Sqflite to store chats on device Repository pattern Tech Stack [Flutt

Nikhil Nayak 9 Aug 15, 2021
Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to connect with friends,family & colleagues. Developed as a redesign of Microsoft Teams during my menteeship at Microsoft Engage 2021

Microsoft Teams Clone by Karanjot Singh About Microsoft Teams Clone is a Video conference application with a rich integrated chat experience, to conne

Karanjot Singh 49 Nov 29, 2021
Cross-platform Twitch Chat application with 3rd-party addon support!

Chatsen Chatsen is a cross-platform application that allows you to chat on Twitch with support for 3rd-party services such as 7TV, BTTV and FFZ. It al

Chatsen 79 Nov 19, 2021
Chat Application

CONNECT Chat Application With over 4000 lines of code and many days of struggle, I have built my Chat Application named "Connect" right from scratch u

mohitmundra 8 Nov 11, 2021
A full-fledged one-to-one chat app developed entirely in Flutter

Enigma Enigma - A minimalist, locked-down one-to-one chat app. Usage Flutter - Get Started Since this is a Firebase dependent project, create a Fireba

Amit Joki 354 Nov 1, 2021
chat app with flutter

Chat App Reader Ui Made with Flutter ?? you can also buy me coffee ?? Requirements ?? Any Operating System (MacOS, Linux, Windows) Any IDE with Flutte

Dami 22 Oct 18, 2021
fsc chat app

#betaclass color code #3FA9F5 #scaffold background color code #dedede Flutter ile Chat App Güncel Google ürün ve hizmetlerini kullanarak Flutter arayü

Akifcan Kara 5 Jun 10, 2021
Flutter chat app

labalaba A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 25 Nov 7, 2021
Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI If you liked it, please give it a star . Features of the app - Light Mode + Dark Mode 4 different color themes - pink/teal/yellow/purple I

Deepa Pandey 25 Nov 17, 2021
Berikut merupakan source code Chat Apps dengan Flutter + GetX + Firebase

chatapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Sandikha Rahardi 15 Nov 9, 2021
This is application using Flutter for develop a trello application

flutter_desktop_trello A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you s

Dao Hong Vinh 11 Nov 4, 2021
GChat is a chatting application developed using Flutter(Dart) and firebase for 2 users. Trying to Develop an application that does not sell your data with whatsapp rolling out its privacy policy updates.

Gchat - The Chatting Application A Flutter project for chatting. I used Android Studio and you can you any editor of your choice for ex: VS Code, Inte

Sanchaksh Kaul 5 Aug 17, 2021
This is a mobile application that goals to build a quiz about programming subjects writter with Flutter.

❓ DevQuiz A mobile application being built with NLW5 (an event from Rockeatseat - https://app.rocketseat.com.br/). This application goals to build a q

Samilly Nunes 16 Sep 15, 2021
:lock: this is flutter mobile application music using glass morphism concept

Flutter Glass Morphism ?? Description: This is source flutter using glass morphism concept How I can run it? ?? Clone this repo ?? Run below code in t

Dao Hong Vinh 11 Oct 31, 2021
Weather app A complete simple weather application.

Weather app A complete simple weather application. Getting Started Get your own API key from: open weathe map aqicn Google Cloud Platform Setup for go

Yoad 7 Oct 19, 2021
𝐂𝐨𝐯 𝐀𝐡𝐞𝐚𝐝 is a mobile application to track and create better Covid-19 route maps for both shop owners and customers

Cov Ahead Cov Ahead is a mobile application where shopkeepers have an app that shows QR code and users can scan this QR code which will automatically

Abhijith Kp 3 May 30, 2021
An application for the time recording of his working hours.

Time24 An open-source time-tracking software About the project! The purpose of this project is to simplify the documentation of working hours and at t

null 5 Aug 3, 2021
Your friendly neighborhood application.

Welcome to Aas Pass ?? Inspiration Time and again we have observed an on-the-spot need for borrowing daily devices, enquiring about essential services

Satwik Dudeja 3 May 30, 2021
Plant Manager is an application that was developed on Rocketseat NLW5 with React Native but was rebuilt using Flutter.

Technologies | Project | Layout | License ?? Technologies This project was developed with the following technologies: Flutter ?? Project Plant Manager

Mayderson 7 Aug 11, 2021