How to Create a Realtime Chat App With Flutter and Node.js

Flutter frontend meets Node.js backend

In this blog, we will see how to make a real-time chat app using Node.js as the backend and Flutter as the frontend. We will use sockets to communicate between devices.

Node.js (Server-Side)

Let’s create a new project named chat_server and op it in the Terminal. Now run this command to start the project:

touch index.js && npm init && npm install ws && npm install express

This will completely install the project for you. When that has been completed open the project in your favourite IDE and open up your index.js file.

This is our basic Websocket server that doesn’t really do much now. Let’s change that now.

This will completely run your messages! So now that this is done we can now start with our Flutter chat app.

Flutter (Client-Side)

We’ve completed our backend now so we can start with chat app in Flutter. Run this command to start our new Flutter project:

flutter create chat_app && cd chat_app && flutter run

Open this project in your IDE and open up your pubspec.yaml file and we will add web_socket_channel make sure it looks like this:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  web_socket_channel: ^2.1.0 # Add this.
  sqflite: ^2.0.2 # And this.

To start our project delete everything in lib/main.dart and make sure to insert this: