Let’s Talk: Flutter Chatting App
In the present generation, users find themselves more comfortable in talking on chats rather than talking in person. Chats are the best way to find how the person is in person. Chatting could definitely increase our social circles and help us to create great contacts for life. Messaging (i.e. Chatting) apps now have more global users than traditional social networks — which means they will play an increasingly important role in the distribution of digital journalism in the future.
I’ve created a chatting app titled ‘Let’s Talk’. In the Let’s Talk chatting app, I highlight some of the important chatting features like Send Messages, Photos and share Location all across the globe. And few other additional features to further enhance the user’s experience are to react ‘Like’ on the received messages, Add user to favourites, Deleting chat and Blocking the users. Google Firebase is used as a backend of this app for authentication, storing users data and storing media.
Here is the complete Flutter Project of this App :-
Authentication — Authentication is the first and foremost security principle that involves validation of the identity of a user. Successful authentication is required for authorization and secure data exchanges. Here in the app backend of authentication is Google Firebase Authentication.
We will land on Authentication Screen if we are a new user or have not logged in to the app. Body of Authentication Screen contains the main animation of the app and a Sliding Up Panel which has two tabs for Login and Register.
While registering we can also upload a profile picture. Selecting the photo for the profile is implemented using ImagePicker(). After entering all details and selecting profile photo when we tap on the ‘Sign In’ button, the account is created in firebase authentication and the profile photo will be uploaded in a folder of Firebase Storage (which is object storage), and a new document with email as a document_id is created in Firestore database which contains all the user details. If we don't upload any profile photo then the app will use a by default dummy user image for our profile. The app will get this dummy user image from the Assets.
After successful Login or Sign In, our details are stored in SharedPreferences, and if we again open the app then login details will be automatically fetched from there and we’ll directly reach to the home page, that means we need not to authenticate every time we open the app.
Home Page — After successful authentication, we’ll reach the home page. At the home page, we will find a CircularAvatar at a top showing our profile picture, a ‘+’ button by which we can search for a user and start a new chat and two tabs named as ‘Chats’ and ‘Favourites’.
Chats tab contains all the recent chats of us and Favourites tab only contains our favourited chats. If there are no recent or favourited chats then by default some gif animations are shown which are in assets of the app.
Every chat bubble in Chats or Favourites tab displays the username, user’s profile photo, last received or sent message with the time and Read/Unread sign (i.e. blue tick). If we have a new unread message from a particular user then the colour of the chat bubble turns green and turns blue again as soon as we read it.
These Chats and Favourites section are built using multiple StreamBuilders. Where itemBuilder of StreamBuilder is looped over documents of Firestore under UserChats nested collection inside data of a logged-in user.
User Profile — Two drawers are implemented on the home page. SideDrawer for our own profile and EndDrawer for viewing selected user’s profile from chats. SideDrawer with our own profile will open if we tap on our own profile picture at the home page and if we tap on the profile photo of any user in the chats or favourites section then the EndDrawer will open showing the profile of that particular user.
SideDrawer is the one which opens up from the left side of the mobile and EndDrawer is the one which opens up from right side.
From this EndDrawer showing user’s profile, we can Add/Remove user to favourites, delete the chat and can block the user.
From the SideDrawer of our profile, we can also manage the visibility of our mobile number. If we’ve added the mobile number, then an icon button will be there along with our mobile number. By tapping on that icon button we can make our mobile numbers public or private. The mobile number is not visible on our profile publically to other users unless we make it public.
Change Profile — In SideDrawer where our own profile is shown, there is an edit button by tapping on which we can change or remove our profile picture.
Search User — To search for a new user and start a chat, we can tap on the ‘+’ icon at the home page. As we tap, a search box appears by default showing ‘No User Found’ message. As we type the username, it shows the corresponding users and now we can tap on any of them and start chatting. Here this user searching is also implemented using StreamBuilder.
Settings — From the settings, we can update or remove the mobile number and can sign out or delete the account. As soon as we Sign Out of account, our details that are stored in SharedPreferences are removed and we will be redirected to Authentication Screen again.
Chat Screen — Chat Screen is the most important aspect of any messaging app. Here chat screen is also built using StreamBuilder Widget. If we have no messages then by default “Start Chatting” message is shown otherwise StreamBuilder will build the chat messages. Every sent or received message will be displayed with time. Read/Unread symbol (i.e. Blue Tick) will be shown below the time on sender's side.
We can also React to the received message with a ‘Like’. As we like any received message the changes will be reflected on that message at senders side.
Attachments — We can also send photos or share location with users. When we tap on the attachment button a small panel will open up from which we can select what to send. We can select a photo from the gallery or can also click with the camera. These sent or received images are stored in Firebase Storage i.e. an object Storage.
Send Photo or Share Location — As we select or click a photo to send, the photo will be shown on the new screen and there we can tap on the Send button to send it. Also while sharing the location we can share our current location or can also mark a particular location to share.
When we send a photo and if it is taking time in sending then a message with ‘Photo Sending…’ is displayed until the photo gets sent.
Block User — We can also block a user if we find him irritating or irrelevant. From the end drawer of user’s profile, we can block or unblock a user. If we block a user, then he/she can’t send any further messages. ‘You are Blocked!’ message will be shown.
If we’ve blocked a user and deleted the chat, then we can’t unblock him from end drawer because we can’t open his profile if there is no chat for him. So then we can unblock him from the chat screen only after entering his chat screen by searching for him in the search box.
Menus— On the home screen and chat screen, there are menus implemented using PopUpMenuButton by which we can do multiple functions.
Here is the small video demonstrating the functionality of the app.
In the future, the app can be enhanced by adding some more features like -
- Group Chats
- Sharing Documents
- Audio/Video Call
- Chat Encryption, etc
Thanks for reaching out here, Hope you like it!!🙂
