Building a WhatsApp clone from scratch using Flutter
Published: 2021-07-02 15:05:58

<!-- wp:paragraph -->
<p>According to <a href="https://www.statista.com/statistics/483255/number-of-mobile-messaging-users-worldwide/">Statista</a>, around 2.77 billion mobile phone users accessed over-the-top messaging to communicate in 2020, and this figure is poised to reach three billion users in 2022. Of these, WhatsApp was the most popular mobile messenger app worldwide with over 2 billion users, mainly due to its first-mover advantage and user-friendly interface.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, due to concerns over the recent updates to WhatsApp’s privacy policies, <a href="https://www.computerworld.com/article/3608988/whatsapps-new-privacy-policy-is-a-gift-to-other-messaging-apps.html">many users and businesses are on the lookout for alternatives</a>. Check out our <a href="https://www.applozic.com/blog/how-to-develop-a-secure-chat-alternative-to-whatsapp/">previous blog post</a> to learn more about the security implications of WhatsApp’s policy updates.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks to Applzozic’s intuitive <a href="https://docs.applozic.com/docs/overview">chat SDKs</a> and <a href="https://docs.applozic.com/reference">platform APIs</a>, it‘s pretty easy to build your own chat alternative to WhatsApp! Before we delve into the code, let’s discuss the framework that we’ll use to implement our chat messenger app.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Why Flutter?</strong></h2>
<!-- /wp:heading -->

<!-- wp:image {"id":1875,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.applozic.com/blog/wp-content/uploads/2021/04/flutter-1024x576.jpg" alt="" class="wp-image-1875"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Launched by Google in 2018, <a href="https://flutter.dev/">Flutter</a> is a free and open-source SDK for developing high-performing mobile, web, and desktop applications from a single codebase.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>An exciting feature of Flutter is its <a href="https://flutter.dev/docs/resources/architectural-overview">layered structure</a> that enables developers to build highly customizable and attractive apps with much lower time and effort, without compromising on performance. Moreover, experimenting new features and debugging errors is much faster in Flutter due to its <a href="https://medium.com/podiihq/understanding-hot-reload-in-flutter-2dc28b317036">hot reload feature</a> that reflects instant changes in the codebase within milliseconds</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Even though Flutter is a relatively new cross-platform app development framework compared to established contemporaries like React Native, <a href="https://flutter.dev/showcase">many companies have started to migrate to Flutter</a> due to its higher performance and flexible UI.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Do note that we’ll only be delving into the code implementation of the app’s chat functionality using <a href="https://github.com/AppLozic/Applozic-Flutter-Plugin">Applozic Flutter SDK</a> in this article - <a href="https://nanocastellano.medium.com/whatsapp-ui-clone-7f75773ad21b">here’s a simple tutorial</a> on creating a UI for the app using Flutter.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>Creating a new application and setting up dependencies</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://flutter.dev/docs/get-started/codelab" target="_blank">flutter.dev</a> has a comprehensive starter tutorial on creating your first application using Flutter. Once you are ready to integrate using the Applozic SDK, follow these steps:</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>I. Installation</strong></h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Add the following dependency in your pubspec.yaml file:</li></ol>
<!-- /wp:list -->

<!-- wp:code -->
<pre class="wp-block-code"><code>dependencies:
  # other dependencies
applozic_flutter: ^0.0.4</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>2. Install the package as shown below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>flutter pub get</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>3. Import the applozic_flutter in your .dart file to use the methods from Applozic:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>import 'package:applozic_flutter/applozic_flutter.dart';</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3><strong>II. Authentication</strong></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Login</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create an Applozic user object, and pass it to the login() function as shown below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>dynamic user = {
      'applicationId': "&lt;APPLICATION_ID>",   //Mandatory
      'userId': userId.text,                 //Mandatory
      'displayName': displayName.text,
      'password': password.text,
      'authenticationTypeId': 1              //Mandatory
  };

ApplozicFlutter.login(user).then((response) {
      print("Login success : " + response)
    }).catchError((error, stack) =>
      print("Error while logging in : " + error.toString()));</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Please keep in mind that once the user is logged in, a new login is permitted only after the user logs out. Use this code to check if the user is already logged in:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>ApplozicFlutter.isLoggedIn().then((isLoggedIn) {
        if (isLoggedIn) {
          //The user is logged in
         } esle {
          //The user is not logged in
         }
     });</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":4} -->
<h4>Update logged in user details</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can update the logged in user details as given below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>  dynamic user = {
                    'displayName': '&lt;New name>'
                    'imageLink': '&lt;New Image URL>'
                  }

  ApplozicFlutter.updateUserDetail(user)
                        .then(
                            (value) => print("User details updated : " + value))
                        .catchError((e, s) => print(
                            "Unable to update user details : " + e.toString()));</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":4} -->
<h4>Get logged in userID</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can get the userID of the logged in user as given below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>  ApplozicFlutter.getLoggedInUserId().then((userId) {
      print("Logged in userId : " + userId);
    }).catchError((error, stack) {
      print("User get error : " + error);
   });</code></pre>
<!-- /wp:code -->

##Continue this Tutorial on Applozic Blog!
We have the detailed tutorial with code snippets available on [our blog](https://www.applozic.com/blog/building-a-whatsapp-clone-from-scratch-using-flutter/) for you to continue with your integration!

[Click here](https://www.applozic.com/blog/building-a-whatsapp-clone-from-scratch-using-flutter/) to learn how to:
* Set up push notifications in your application
* Launch the Conversation screen and start messaging!

Please leave your feedback and doubts in the comments below.