How to build WhatsApp like audio-video calling in Flutter using CallKit

What's this blog post about?

In this tutorial, we learn how to build an audio and video-calling WhatsApp clone using Flutter. The key points of the text are as follows: 1. The calling functionality of WhatsApp is replicated in this demo, but not messaging and authorization. 2. Video/audio calling is accomplished using 100ms' Flutter SDK, while call notifications are instrumented using Firebase. 3. The project starts by cloning the hms-callkit-demo as a starter for this project. 4. A new directory called whatsapp_ui is created inside the lib folder of the Flutter project to create a WhatsApp Home Screen-like interface. 5. A flow is added to add users to the application, and Firebase is used to store the FCM token of the users. 6. The onPressed of the CustomButton on the login_page.dart is updated to store the FCM token and phone number to the Firestore. 7. A chats list is prepared to show on the WhatsAppScreen of the applications using a new file called chats_list.dart. 8. The ChatListScreen() is added on the WhatsAppScreen by modifying the body. 9. Finally, a ChatScreen is added to show individual chats and initiate video calls from there. 10. The app_router.dart is updated to configure Navigation in the application, and the initialRoute in main.dart is updated accordingly. 11. The complete code for this project is available on GitHub.


Date published
July 25, 2023

Aditya Thakur

Word count

Hacker News points
None found.


By Matt Makai. 2021-2024.