In this article today we’ll demonstrate how you can integrate Sendbird’s new Flutter SDK with an existing chat UI plugin, DashChat, to provide a basic chat experience you can build upon. We won’t be implementing every available Sendbird or DashChat feature, but through this tutorial you’ll be able to:
To keep this tutorial as simple as possible, we will be using Flutter’s default inherited widgets for state management and will combine the logic for each view in the same .dart file.
Flutter is an open-source cross-platform development framework written in Dart, a C style language meant to develop high performance web apps. From a single codebase, applications can be developed for iOS, Android, MacOs, Windows, Linux, web apps on Chrome, Firefox, Safari, Edge and even on IoT or smart devices.
Through Sendbird SDK for flutter, you can efficiently integrate real-time chat into your app for iOS and Android deployments. The SDK supports both Open, Group and SuperGroup channels. This tutorial will just be focusing on Group Channels.
Reusing pre-existing chat UI code or a library can get chat up and running faster than building from the ground up.
Dashchat is a popular chat UI only library developed by Fayeed Pawaskar. This extensible library provides an interface you’d typically expect for group conversations between 2 or more individuals. Profile image avatars, various interface triggers, ability to customize colors, and message rendering are all included with DashChat’s plugin.
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 here if you encounter any issues.
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 happened to be using Visual Studio Code, the new blank project will look like this:
There are 4 additional views we’ll eventually need, so we’ll stub them out here so we can 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:
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:
Before making any calls with the Sendbird plugin, be sure to import it with
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:
Sendbird users id are required to differentiate between different users. These can be any unique strings your authentication system uses. Use this id to connect your app’s current user:
final user = await sendbird.connect("unique_user_id");
Which 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:
*NOTE: To create find your Application ID or to setup users through the Sendbird dashboard, see this Sendbird in a Minute video.
Now that the SDK has been initialized and connected to Sendbird, let’s fill out the channel_list_view.dart so it can:
When we’re finished we should get a view that looks like this:
We’ll set up the class file by:
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 so:
Which 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.
Now let’s complete the create_channel_view.dart so that it:
When complete the view should render like this:
Start by adding the following properties to the Class _CreateChannelViewState extends State
These properties will store the list of users we can select from and those that are selected by the user.
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, lets put that into it’s own function we can later call though 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 with [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.
The last file to update is the group_channel_view.dart. Once complete we will be able to:
Once finished, this view should look like:
Set up this file by:
First unpack the existing messages from the GroupChannel object passed in by calling the getMessagesByTimestamp() function, which takes 2 args:
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:
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 GroupChannl 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 be found here.
If you’d like to see all of this code in one project, check out the repo on GitHub.
There’s a lot of Sendbird and DashChat features that could be added, but not demonstrated here, like:
For a full run down of Sendbird features supported by the SDK, check out our official docs.