Flutter: A chat app in flutter using a Socket.IO service

Flutter has very quickly found its way to the topmost choice for a mobile app development framework. It is undoubtedly very neat, expressive, flexible & fast. There is plenty of prebuilt packages available to create almost any type of layout in flutter.
In this tutorial, I will help you create a chat app in flutter that communicates with a Socket.IO chat service written in NodeJs.

Prerequisites

1. Download & install OpenJDK 1.8. Unfortunately, JDK 1.8 is expected for flutter to build Android apps.
2. Download & install flutter. This step will also guide you to download and/or configure:
   a) Dart: Dart comes bundled with flutter and does not need to installed explicitly.
   b) Android Studio
   c) Android Emulator
3. Make sure flutter is configured successfully for Android by running “flutter doctor” in command window.

$ flutter doctor

Step#1: Create new Flutter application

Launch Android Studio and create a new flutter application (steps here). I have created an application “chat-app”. This step can be done in VS Code as well with the help of flutter extension.

New Flutter App

Step#2: Create a Chat Window.

The HomePage of my app accepts a username before taking the user to the chat page. This is to simulate a real world scenario where the user is associated with a username. This username is forwarded to the chat widget.
To create the chat widget, I am using a flutter_chat_bubble package for message bubbles.

add flutter_chat_bubble dependency

I have created a StatefulWidget Chat. It maintains a state variable ‘messages’ which enlists all the messages in the chat. I am showing the messages inside bubbles using a ListView. The bubble appears on the right if the current user is the sender else on the left.
Note: ‘widget.user’ holds the username of the user.

Chat Window code

Let us verify if the app works so far.

Chat Flow

Step#3: Setup a Socket.IO chat service

I am running this chat-service in my local. I am also using ngrok to tunnel from a public URL to this service. This service:

1. Opens web-socket connections @ http://localhost:3000/
2. Listens to new messages @ channel ‘chat’.
3. Broadcasts new messages to channel ‘newChat’.
4. Broadcasts all old messages to channel ‘allChats’ on new connection.

Step#4: Configure Socket.IO client

I am using socket_io_client package to connect to the Socket.IO service.

socket_io_client

I will init the Socket.IO connection on widget initState and disconnect on the widget dispose.
Note:

1. It connects to the ngrok public url which tunnels to my local service.
2. It listens to ‘newChat’ channel for new messages and adds to ‘messages’ state variable upon arrival.
3. It listens to ‘allChats’ channel for all old messages and adds them to ‘messages’ state variable upon arrival.

connect/disconnect socket.io

Finally, we introduce an onPressed handler ‘_sendMessage’ for the send message button. In this method, we will emit any new message by the user to the channel ‘chat’. Any chat message is expected (by the chat-service) to have 4 properties: message, sender, recipient & time.

sendMessage

Step#5: Run and Verify

I am running this app in android emulator. I am also connecting to the chat-service using a socket.io client tool to simulate the messaging.

Run & Verify

CodeBase:
https://github.com/sharmavikashkr/chat_app_flutter
https://github.com/sharmavikashkr/chat-service-nestjs