Flutter UI Series: WhatsApp UI
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.
I’ve been using Flutter since its very early release days. Having an experience with Native Android Development, I could clearly see the perks of Flutter’s declarative UI approach with its cross-platform compatibility being the cherry on top.
In this series of Flutter UI designs, I’ll try to show you how with Flutter, it becomes very easy to replicate some of the renowned apps we use on our daily basis. What better way to start the series off than with WhatsApp. Probably the most used Social Media Application in the world.
Enough of the talking. Time to get our hands dirty now.
We’ll start off with the very simple app as a skeleton which has an AppBar and Text saying ‘Hello World’ in the centre of the body.
Here’s how it looks in code:
I know, I know it doesn’t look like the Original WhatsApp but we’ll get there together. Step-by-step. Let’s start with the AppBar. What’s missing?
- Search button and three-Dot Menu parallel to WhatsApp text.
- Tabs to open Camera, Chats, Status, Calls.
For The search button and the three-dot Menu Button, AppBar widget has a property called actions that takes in a list of Widgets. We can use an Icon widget to get a search button.
For the three-dot Menu, There’s a widget called PopupMenuButton in Flutter with which we can get as many Popup items as we need in the form of a list. Let’s see how that would look and dive into the code:
Now let’s get to the Tabs Implementation, For that we’ll get the help of AppBar’s bottom property and provider it with TabBar widget which takes in list of tabs. For every Tab selected, We can show a different view to the User using the TabBarView widget which we can use in the body but we’ll get there later on in this article.
Here’s the code for it:
I think we’re pretty much done with the AppBar. Since the first tab Camera requires a functionality and that’s beyond the scope of this article, we’ll ignore that and create a Single Tab Views for Chats, Status, Calls tab.
Chats Tab:
Lets Make the Chats Tab View First. For that we need to break down the layout. In WhatsApp Chat Screen, We have a profile picture, Username, last message,status of the message and the timestamp. Let’s first see how to UI would look and then dive into the code implementation.
Here’s a look at its code implementation:
In the code, We’re using a ListView. Since the number of chat items is constant a simple ListView would do just fine otherwise if the items were dynamic, ListView.builder would have been our choice. The SingleChatWidget used in the ListView defines how a single item would look like. Here’s its implementation in code:
Status Tab:
Let’s now move to the status tab. The status tab on WhatsApp has firsly a row displaying the user’s photo if the user has no status update and a button to add one. Below it are the viewed stories from the contacts and after it are the muted status updates of contacts.
Confused already? Let’s make it easier by taking a look at the UI and then understanding its implementation in code.
Let’s decode the status screen now:
As for the SingleStatusItem widget, here’s how its implemented:
Calls Tab:
Last but not the least, the calls tab.If we take a closer look at the calls screen, its pretty much the same as the chat screen with some minor differences such as in the place of last sent or received text, there’s status of the call and in place of the timestamp, there’s a button for an audio or a video call. Let’s see how it looks after implementation and then go through the code.
Since the UI is very much alike the chat screen, so is the code for the calls screen. Let’s take a look at it.
As for the SingleCallWidget Implementation, here’s the code for it:
One thing that I find missing is the Floating action button at the bottom. We can add that by using the floatingActionButton property on the Scaffold and then we can either make our own floatingActionButton or use a built-in Flutter FloatingActionButton(FAB) widget as follows:
With that, I think we’re pretty much done for this article. Thanks for reading this article! ❤️ You can find all the code on my github
@ https://github.com/iizmotabar/flutterWhatsAppClone
I hope it helped you. Clap 👏 If did.
Feel free to post any queries or corrections you think are required ✔
Do leave a feedback so I can improve on my content. Thankyou! 😃
If you’re interested, here are some of my other articles:
