How to build a Flutter chat app with Sendbird and 3rd-party UIs

Introduction

This tutorial will demonstrate how to integrate the new Sendbird Flutter SDK with the DashChat UI plugin. It will provide a basic chat experience to incorporate into your app.

Sendbird and DashChat have many features, but we will limit our scope to keep this tutorial basic. By the end of this tutorial, you will be able to:

• Add, initialize, and connect the Sendbird Flutter SDK to a Flutter app
• Display a list of chat channels a user is a member of
• Create new chat channels
• Integrate Sendbird with DashChat to display an interactive chat channel

To keep this tutorial as easy to follow as possible, we will use Flutter’s default inherited widgets for state management and combine the logic for each view in the same .dart file.

Let’s begin!

What is Flutter?

Flutter is an open-source, cross-platform development framework written in Dart, a C-style language meant to develop high-performance web apps. With Flutter, applications can be developed for iOS, Android, macOS, Windows, and Linux. You can also build web apps on Chrome, Firefox, Safari, Edge, and IoT or smart devices.

What is the Sendbird Flutter SDK?

Through the Sendbird SDK for Flutter, you can efficiently integrate real-time chat into your app for iOS and Android deployments. This SDK supports Open Channels, Groups, and SuperGroups channels. This tutorial will focus on Group channels.

Why use a 3rd party chat UI?

Reusing pre-existing chat UI code or a library can get chat up and running faster than building from the ground up.

What is Dashchat?

Dashchat is a popular chat UI library developed by Fayeed Pawaskar. This extensible library provides an interface you’d typically expect for group conversations among two or more individuals. DashChat’s plugin includes profile image avatars, numerous interface triggers, the ability to customize colors, as well as message rendering.

Now that we have explained the context, let’s go straight to code building.

Step 1. Adding dependencies

In your Flutter project’s pubspec.yaml file, add both the Sendbird and DashChat dependencies:

Next, click save or manually run the CLI command:

flutter pub get

See Flutter’s official documentation on adding packages if you encounter any issues.

Step 2. The setup

The first thing we’ll do is create a new empty Flutter project. If you’re using the Flutter CLI, run the command:

flutter create sendbird_flutter_dashchat

If you’re using Visual Studio Code, the new blank project will look like this:

We’ll eventually need four additional views, so we’ll stub them out here to run the app as we build. To add files in Visual Studio Code, right-click on the lib folder, select New File and name it login_view.dart.

Then add the following code:

Repeat this process for these additional files:

• channel_list_view.dart
• create_channel_view.dart
• group_channel_view.dart

Then replace the entire contents of the main.dart file with the following MaterialApp options to make use of these classes:

The project pane in Visual Studio Code should now look like this:

Step 3. Initializing Sendbird

Before making any calls with the Sendbird plugin, be sure to import it with

import 'package:sendbird_sdk/sendbird_sdk.dart';

To initialize the library with the above alias, pass your application ID to the singleton constructor:

final sendbird = SendbirdSdk(appId: "your_app_id");

Your application id can be found at https://dashboard.sendbird.com after selecting one of your projects:

Step 4. Connecting to Sendbird

Sendbird user IDs are required to differentiate among different users. These user IDs can be any unique strings that your authentication system uses. Use this ID to connect your app’s current user:

final user = await sendbird.connect("unique_user_id");

This can be combined with the earlier init statement into a single function:

This could be added to an override of the login_view.dart class that then pushes the channel_list_view.dart when successful.

For convenience and to speed things along, copy and paste the final code for the login view here.

The code provides for:

• A textField for entering a Sendbird Application ID*
• A textField for manually entering a Sendbird user ID*
• A ‘Sign In’ button to kick off the init & connection function above

*NOTE: To create find your Application ID or to set up users through the Sendbird dashboard, see this Sendbird in a Minute video.

Step 5. Displaying channels

Now that the SDK has been initialized and connected to Sendbird, let’s fill out the channel_list_view.dart so it can:

• Display a list of all group channels the user is a member of
• Trigger a push to the create_channel_view.dart
• Select one of these channels to push the channel_view.dart

When we’re finished, we should get a view that looks like this:

We’ll set up the class file by:

1. Adding the import "package:sendbird_sdk/sendbird_sdk.dart";
2. Extending the viewState with the ChannelEventHandler mixin.
3. Connecting a Sendbird addChannelEventHandler in an override of the initState() function.

The initial class file will look like this:

The quickest way to get a list of all the channels that the current user is a member of is to use the Sendbird GroupChannelListQuery.

This query can be wrapped into an async function like this:

It can be called from a FutureBuilder to build a ListView:

Creating new channels requires selecting users from a list, so we’ll create another class to display and handle that next. For now, we’ll add an appBar with an action to push that view:

We can now update our scaffold stub with the FutureBuilder and appBar widgets created above:

The final code for this class is here.

Step 6. Creating a new channel

Now, let’s complete the create_channel_view.dart so that it:

• Retrieves and displays a list of Sendbird users
• Allows users to be selected or unselected
• Create a new Group Channel with the selected users

When complete, the view should render like this:

Start by adding the following properties to the Class _CreateChannelViewState extends State {} block:

final Set _selectedUsers = {};
 final List _availableUsers = [];

These properties will store the list of users we can select from and those that are selected by the user.

To get the list of available users, we’ll use the ApplicationUserListQuery() to return a list of Sendbird Users, which we’ll call from initState() to pre-populate our list.

Display the list of users with a ListView, using CheckboxListTiles so we have a visual toggle for which users will be added to the new channel.

To create a new chat channel, use the GroupChannel.createChannel() function by passing in a GroupChannelParams object populated with a list of user ID strings. Let’s put that into its own function we can later call through an appBar action:

Now add an appBar that triggers this createChannel() function:

Note that we converted the set of _selectedUsers into a list of user IDs. [for (final user in _selectedUsers.toList()) user.userId]

Like earlier, we can now update the scaffold stub in the build() function:

The final code for this class is here.

Step 7. Integrating with Dashchat

The last file to update is the group_channel_view.dart. Once complete, we will be able to:

• Chat among 2 or more users in real-time
• Display avatar images (if an image has been assigned to a user)

Once finished, this view should look like this:

Set up this file by:

1. Adding import "package:sendbird_sdk/sendbird_sdk.dart";
2. Adding import "package:dash_chat/dash_chat.dart"
3. Adding a GroupChannel property and an initializer to populate that property in a constructor
4. Extend the viewState with the ChannelEventHandler mixin.
5. Connecting a Sendbird addChannelEventHandler in an override of the initState() function
6. Adding a List _messages = [] property to the _GroupChannelViewState to store messages
7. Adding the onMessageReceived() override function to update the _messages property when a new message is detected

First, unpack the existing messages from the GroupChannel object passed in by calling the getMessagesByTimestamp() function. This takes 2 args:

1. Timestamp in an int form of a unix epoch
2. MessageListParams object

The MessageListParam allows you to customize the scope of the messages to return. We’ll use the default for now. Once we have the messages, we’ll update our _messages property in a convenience function we can call during the init. The class should now look like this:

To make use of the DashChat widget, both the current Sendbird user and Sendbird messages will need to be converted to a DashChat user and DashChat messages. Include these convenience functions.

Now we can create a DashChat widget:

Notice in the onSend DashChat property we are calling Sendbird’s GroupChannel sendUserMessageWithText() function to actually deliver the message.

We can now replace the scaffold stub with this and a default appBar that displays the names of all the channel members:

The final code for this class can be found here.

Conclusion

This tutorial demonstrated how to integrate the Sendbird Flutter SDK with DashChat and build chat into your app. Remember that there are many more Sendbird and DashChat features to add to your app, such as:

• Long press events
• Avatar touch events
• Avatar long-press events
• Custom inputs
• Reactions
• Images and file handling
• Typing indicators

For a full rundown of Sendbird features supported by our SDK, as well as additional resources to help you on your journey, check out our official docs.

Congratulations! You are well on your way to adding feature-rich chat capabilities to your Flutter app.

Happy coding!