Whatsapp Clone in Flutter

admin@crackerworld.in Avatar

Whatsapp Clone in Flutter: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.

 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.

  • 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.

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.

Whatsapp Clone in Flutter
Whatsapp Clone in Flutter

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.

Full Code:Whatsapp Clone in Flutter

Whatsapp Clone in Flutter

For More: To know about Alphabetical Scroll View in Flutter

Tagged in :

admin@crackerworld.in Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts