Messenger Clone built with Flutter & Firebase
Tags: flutter, firebase, appfromscratch, chatapp
Published: 2021-01-14 05:20:38

Originally published at :<a href="https://flutternerd.com/messenger-clone-built-with-flutter-firebase/"> Messenger Clone built with Flutter & Firebase</a> 
<!-- wp:paragraph -->
<p>Let's learn how to build a chat app with flutter and firebase by building messenger clone. [Full source code]</p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://youtu.be/2d1fslyxBjQ","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/2d1fslyxBjQ
</div></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:paragraph -->
<p>If you like to learn via video then you can&nbsp;<strong><a href="https://youtu.be/2d1fslyxBjQ">watch it on Youtube</a>,&nbsp;</strong>Or you can watch the demo at least, source code link in the end.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>📕 Things covered in this video:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><a href="https://firebase.google.com/">Firebase</a> Firestore (updated 2021) create, update, read</li><li>Firestore Query &amp; Composite Query</li><li>Google Sign In with Firebase Auth &amp; Sign Out</li><li>User Login Persistence.</li><li>Save user info locally with <a href="https://pub.dev/packages/shared_preferences">shared preference</a></li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>App Features:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Sign in with Google</li><li>Search user via username</li><li>Send user message real time (it's better)</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Prerequisites :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Install Flutter if not already&nbsp;<a rel="noreferrer noopener" href="https://flutter.dev/docs/get-started/install" target="_blank">https://flutter.dev/docs/get-started/install</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Step1</strong>: Creating Flutter project &amp; Refactor Code</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step2</strong>: Import required packages in pubspec.yaml</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>  firebase_auth:
  firebase_core:
  google_sign_in:
  shared_preferences:
  random_string:
  cloud_firestore:</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Step3</strong>: Implemnet Sign In with Google</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>for this we will create a folder called services/auth.dart file</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<script src="https://gist.github.com/theindianappguy/31db79582f0fd46d5b67ded038c56bb8.js"></script>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>As you can see in auth.dart once the user is signed in we save user info to local database with sharedpreference so we need to create those functions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step4</strong>: Create function to get and save data with sharedpreference. so create a folder helperfun/sharedpref_helper.dart file.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<script src="https://gist.github.com/theindianappguy/4e4eb61acd1285d44eb89aeff482c445.js"></script>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p><strong>Step5</strong>: Connect flutter app with firebase.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step6</strong>: Add Sha1 key to firebase project to make google sign in work properly </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>run this command in terminal/cmd  <a href="https://stackoverflow.com/questions/15727912/sha-1-fingerprint-of-keystore-certificate">link to answer on stackoverflow</a></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android </code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>then add the sha1 key to firebase&gt; project settings &gt; Add fingerprint &gt; Save.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step7</strong>: Upload user info to firestore.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>create a file in services/database.dart create a class called DatabaseMethods and add this function to it.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>addUserInfoToDB(
      {String userID,
      String email,
      String username,
      String name,
      String profileUrl}) {
    FirebaseFirestore.instance.collection("users").doc(userID).set({
      "email": email,
      "username": username,
      "name": name,
      "imgUrl": profileUrl
    });
  }
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Step8</strong>: Fix multidex Issue</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>open android/app/build.gradle and add multidex to true (multiDexEnabled true) in default config.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>    defaultConfig {
        // Enabling multidex support.
        multiDexEnabled true
    }</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>and add the dependency.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Step9</strong>: Implement search user by username</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First we will create the user interface with a textfield, search icon &amp; back icon to cancel search.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Then we will create a firebase query function to fetch the user info from firestore where username is equal to what we are searching for.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>Future&lt;Stream&lt;QuerySnapshot>> getUserByUserName(String username) async {
    return FirebaseFirestore.instance
        .collection("users")
        .where("username", isEqualTo: username)
        .snapshots();
  }
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>Step10</strong>: Create Conversation screen</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we will start by creating the message box.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step11</strong>: Write function to add message to firebase database.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step12</strong>: Check &amp; Create Chatroom with usernames</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step13</strong>: Get and Set Messages</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>now since we have added messages now let's fetch them and show in a list view with custom list item.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Step14</strong>: Show list of chatrooms&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Full source code:  <a href="https://github.com/theindianappguy/messenger-clone-flutter">https://github.com/theindianappguy/messenger-clone-flutter</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Let's Build More fully functioning apps with Flutter : </h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4><strong>Build a Recipe App with Flutter</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Written Tutorial: <a href="https://flutternerd.com/build-a-recipe-app-with-flutter/">https://flutternerd.com/build-a-recipe-app-with-flutter</a></p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://youtu.be/VTR5HpRfS0A","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/VTR5HpRfS0A
</div></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:heading {"level":4} -->
<h4><strong>Build a Wallpaper App with Flutter From Scratch</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>written tutorial: <a href="https://flutternerd.com/build-a-wallpaper-app-with-flutter-a-flutter-project/">https://flutternerd.com/build-a-wallpaper-app-with-flutter-a-flutter-project/</a></p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://youtu.be/EKdAU3l_0gA","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/EKdAU3l_0gA
</div></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:heading {"level":4} -->
<h4><strong>Build a Quiz Maker App with Flutter &amp; Firebase</strong></h4>
<!-- /wp:heading -->

<!-- wp:core-embed/youtube {"url":"https://youtu.be/ixWtgO22hBE","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/ixWtgO22hBE
</div></figure>
<!-- /wp:core-embed/youtube -->

<!-- wp:heading {"level":4} -->
<h4><strong>Build a Fully Functioning Flutter Chat App with Firebase</strong></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>written tutorial: <a href="https://flutternerd.com/build-a-fully-functioning-flutter-chat-app-with-firebase-part-1-4/">https://flutternerd.com/build-a-fully-functioning-flutter-chat-app-with-firebase-part-1-4/</a></p>
<!-- /wp:paragraph -->

<!-- wp:core-embed/youtube {"url":"https://youtu.be/FTju8w4zEno","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/FTju8w4zEno
</div></figure>
<!-- /wp:core-embed/youtube -->