Table of Contents

Build a Flutter chat app with Sendbird and 3rd-party UIs

Build a Flutter chat app with Sendbird and 3rd-party UIs

Jason Koo
Developer Advocate
Tutorial Type: Reading Time: 15mins Building Time: 2 hours
ChatFlutterSDK

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:

    • 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 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.

    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. 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.

    What is the Sendbird Flutter SDK?

    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.

    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 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.

    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 here if you encounter any issues.

    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 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:

    • 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:

    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:

    Connecting to Sendbird

    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:

    • 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 setup users through the Sendbird dashboard, see this Sendbird in a Minute video.

    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 SendbirdChannelEventHandler 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 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.

    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 during 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, 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.

    Integrating with Dashchat

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

    • Chat between 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:

    Set up this file by:

    1. Adding import "package:sendbird_sdk/sendbird_sdk.dart"; 
    2. Adding import "package:dash_chat/dash_chat.dart"
    3. Add a GroupChannel property and an initializer to populate that property in a constructor
    4. Extending the viewState with the ChannelEventHandler mixin.
    5. Connecting a SendbirdChannelEventHandler in an override of the initState() function.
    6. Adding a List _messages = [] property to the _GroupChannelViewState to store messages
    7. Add 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, which 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:

    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.

    Sample code

    If you’d like to see all of this code in one project, check out the repo on GitHub. 

    Where to next?

    There’s a lot of Sendbird and DashChat features that could be added, but not demonstrated here, like:

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

    For a full run down of Sendbird features supported by the SDK, check out our official docs.