Getting Started

Wondering how the LinkedIn chat works with those nice little suggestions corresponding to your and your peers’ messages? Well, wonder no more. In this article, we are going to build just that. For this tutorial, we will be using Flutter, one of the most famous cross-platform mobile app development frameworks. And there is more to that since we will be learning technologies such as Firebase, Radar, Google ML Kit, and more…

If you love video tutorials more, I got you covered. Watch the video below for complete implementation, and let’s build this project together!

Did you know that we can also use Mapbox for reverse geocoding and other functionalities? It is as good as Google Maps, only cheaper. Here I talk about how we can use its navigation APIs to build an Uber-like application.

For easy onboarding, I have a starter application ready for you, which you can run with just a few changes. The application has a basic LinkedIn-like UI and a layout for the Chat feature, and we have already implemented Firebase and Radar. You can find the link to the GitHub repository here.

The changes you will need for running the initial application can be found in this documentation website that we have built using Facebook’s Open Source documentation tool — Docusaurus.

Once you have run the application, it will look like this —

Our chat UI will consist of 3 parts (and correspondingly 3 widgets) -

For building this section, we will use the app-wide state management we have maintained using Providers and MobX. To show the user name and headline, we simply need to use userStore.name and userStore.headline inside UI widget UserInfo(). This is what it will look like when done.

For building this we make use of a StreamBuilder, and listen to the stream:

Once we fetch the data from there (while listening to changes as well), we use ListView.builder() to render the data in descending order of time.

We also make use of a helper function to know when to show the name and timestamp (or headers as I will call them), which are shown only if 2 consecutive messages are from different users. You can change the last part to your need, to design different UX. For instance you can go ahead and show headers whenever 2 messages differ by a specific time say 2 hours or more.

For building this, we use the CupertinoTextField, and whenever the input is submitted, we store the content to Firestore using the onSendMessage function inside ChatStore, which looks like this.

We also add an animated button. With its help and using the Visibility widget, we create this beautiful animation to toggle viewing of extra options to add images, GIFs, etc.

Love this article so far? Go ahead and follow me, and also remember to add yourself to my mailing list so that you get an email whenever I publish!

Note that here we are rebuilding the widget, if the older suggestions are different from the newer suggestions (this way we ensure that the rebuilding is more efficient). The suggestions are generated as an array of Strings with size at max 3. We then make use of these as content for the chips, and we call the same function onSendMessage as before, whenever the chips are tapped to send the message. The final result looks something like this (click on the link below for the video) —

And just like that we have implemented a LinkedIn like Chat which also supports Smart Replies. The good part about this is we can replicate the steps in this tutorial, to any other project as well, where you might wanna use the Chat feature (and optionally the Smart replies feature). In brief, this is how the final implementation looks like —

As always! Happy Hacking! 😇

Join my email list for more awesome tutorials and programming blogs ❤️

Related posts:

Target has expanded on their summertime extravaganza of LGBTQIA-themed merchandise with a Pride nutcracker. It’s not even Thanksgiving, and the colorful wooden figures have mostly sold out. The…

Our world is still so primitive. People aren’t changing fast enough. Just look at the newest war. Sometimes when I’m depressed, I wish I could’ve been born in a much later century. But it’s a…

It has been a while since I wrote, but being ‘over occupied’ is something all of us go through, especially in the contemporary world. With studies, exams, assignments, I was too overwhelmed with work…