DEV Community

Cover image for How to Build a Flutter Chat App
Backendless
Backendless

Posted on

How to Build a Flutter Chat App

In this article, we are going to demonstrate how to create a simple peer-to-peer (p2p) chat application with the Backendless SDK for Flutter. This will give you an overview of the process needed to integrate your Backendless server-side with your Flutter chat app client-side.

Flutter is a popular hybrid frontend framework for mobile and web app development. With the Backendless SDK for Flutter, Backendless is easily integrated as a powerful Codeless backend and real-time database for any Flutter app.

In the following guide, you will learn how to use Backendless APIs for Flutter to create a basic p2p chat app. Let’s get started.

Setup A Flutter Chat App

First of all, we will create a new Backendless application in Backendless Console and call it MessagingApp.

image

Now we need to create and set up the Flutter project. If you need help installing and running Flutter, please visit official Flutter docs. Let’s create a sample Flutter project and call it messaging_app:

image

image

To use the plugin in Flutter project, we need to add backendless_sdk as a dependency in pubspec.yaml file:

dependencies:
  backendless_sdk: ^0.0.2
Enter fullscreen mode Exit fullscreen mode

After that, add the following import to Dart code:

import 'package:backendless_sdk/backendless_sdk.dart';
Enter fullscreen mode Exit fullscreen mode

image

Don’t forget to initialize the Backendless SDK. Call Backendless.initApp() and pass three arguments: application ID, Android API key, and iOS API key. These values must be obtained in from your Backendless Console dashboard.

image

Now we are ready to use the Backendless APIs.

Subscription API

For a messaging app, we need to subscribe to the channel:

void initListeners() async {
  Channel channel = await Backendless.Messaging.subscribe("myChannel");
  channel.addMessageListener(onMessageReceived);
}
Enter fullscreen mode Exit fullscreen mode

and implement onMessageReceived function:

void onMessageReceived(PublishMessageInfo messageInfo) {
  DateTime time = DateTime.fromMillisecondsSinceEpoch(messageInfo.timestamp);
  setState(() => _messages += "${time.hour}:${time.minute}:${time.second} ${messageInfo.headers['name']}: ${messageInfo.message}\n");
}
Enter fullscreen mode Exit fullscreen mode

Now, when we receive the message from a server we will display the date, author name and the message itself. Note: the onMessageReceived function can receive PublishMessageInfo or String (just a message) arguments.

Also, we need to add the io.socket dependency to support real-time messaging for Android clients. Open your build.gradle file that is located under android/app/ and add the following lines of code:

dependencies {
   implementation ('io.socket:socket.io-client:1.0.0') { 
     // excluding org.json which is provided by Android 
     exclude group: 'org.json', module: 'json' 
   }
}
Enter fullscreen mode Exit fullscreen mode

image

We are now done with the Subscription API. Now let’s implement message publishing.

Publishing API

First, let’s create a user interface and add a TextField to display messages and an input field:

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Stack(
       children: <Widget>[
         Align(
           alignment: Alignment.topLeft,
           child: Text("$_messages")
         ),
         Align(
           alignment: Alignment.bottomLeft,
           child: TextField(
             onSubmitted: onMessageSubmitted,
             controller: myController,
             decoration: InputDecoration(
               fillColor: Colors.black12, filled: true
             ),
           ),
         ),
       ],
     ),
   );
 }
Enter fullscreen mode Exit fullscreen mode
String _messages = "";
final myController = new TextEditingController();
Enter fullscreen mode Exit fullscreen mode

Next, implement the publishing function:

void onMessageSubmitted(String message) async {
  Backendless.Messaging.publish(message, channelName: "myChannel",
    publishOptions: PublishOptions()..headers = {"name":"Maksym"});
  myController.clear();
}
Enter fullscreen mode Exit fullscreen mode

And that’s it. Run the application and say hello!

image

image

You can find the Flutter chat app full sample project here. Next, you can learn about using custom classes with the Backendless SDK for Flutter.

Once you’re ready, you can learn about implementing push notifications for Flutter in the your Backendless backend.

Thanks for reading and enjoy using the Backendless platform!

Top comments (0)