How I Build a Whatsapp clone app with Flutter

Hello everyone, today I wanna share with you how I build a WhatsApp clone app with Flutter, from the idea right pushing on Github so I hope that you will like it.

First of All, why did I choose Whatsapp, or in other term how did I choose the app that I will build a clone of it?

At the first I had a lot of app example in mind like Netflix or Glovo etc..., but I choose Whatsapp because it has a beautiful UI/UX that combine simplicity and useful features and a beautiful design this is not mean the other doesn't have the same criteria that I list above but you know I must choose one application to build like it in the last so I choose WhatsApp and maybe in the future I will work on the other.

How do I set up the environment to start building the app?

• Firstly, Flutter SDK and android studio IDE (you can use others like VScode or IntelliJ idea that already android studio is based on).
• Secondly and to run the project I use an Android emulator also I use a physical mobile device (Android or iOS), in this project I use an Android device. for the physical device don't forget to set it to developer mode.
• Thirdly the UI that I will use to clone WhatsApp, here just I take screenshots with my phone for every page I need and transfer them to the android studio, and like this am near to starting developing my app.
• fourthly I collected the image and background that I will need during my work on the app, for that and to make life easier I download most pictures from some websites that make their images license-free like @pixaby and @pexels, etc... and for the icon I use the material icon that exists already, and for the icon I use Google fonts package sometime.

What are the ideas that help to build the app?

• First Flutter itself help me a lot to build my app because of its great features, for example, flutter is based on Dartlang, this programming language is a UI-focused language and it's optimized for fast apps on any platform, another reason the hot-reload and hot-restart allow you to make updates to the code and the UI that rebuild the widget tree this is between the fantastic features of flutter, etc...
• "Keep it simple", I think the idea explains itself but with pleasure, I wanna share with you an example of my use of it, for instance, I use the packages and libraries to do a lot of things I think this helps to earn time and efforts also money, another example of my use of this idea is to make the app easy as possible for using and therefore help the user to build a good experience and this is between the thing that helps me choose WhatsApp.
• Another great thing that plays a big and powerful role is the resources like Google Codelabs, Flutter apprentice Book (Second Edition), different websites and blogs that make flutter content also youtube channels that help me so much, etc...

Another important question is how do I solve the problem that I find?

During my work on developing the app I find different problems, sometimes with business logic sometimes with UI another with another thing, and every time I try right solve the problem or at least try to do all my effort to solve the problem, and to make thing clear I can list a lot way that I use to interact with problems :

• I work in the android studio so I use the great tools of this IDE like DevTools to understand a lot of problems and start thinking about solutions for them.
• Before I go search for solutions I give myself the opportunity to solve the problem and I try my best to solve it and try different solutions right the problem is solved.
• If I fail to find a solution, therefore, I use a different way to find one, like asking questions on google and here I find a lot of people ask the same question before me in StackOverflow for example, or on another website, etc...

And to give you an example of who collects all the 3 points related to how I interact with problems, see the following picture :

when I wanna build one of the most important WhatsApp features, is the story features or in particular how to create your own story, here I don't find a package that fit my need so I solve the problem by creating my own and this is what happened, and I think to turn this solution into a package right help others as they help me.

• Also, don't worry if your question is simple, the problem is to don't know the answer.

This is my Project Github repository: Github

Please If you like the project give it a star on Github.?

Conclusion: I try to share with you how I build this app, I hope that this article is helpful and you enjoy it.