Send your first message

Sendbird UIKit for Flutter is a set of prebuilt UI components that allows you to easily craft an in-app chat with all the essential messaging features. Our development kit includes light and dark themes, fonts, colors and more. You can customize these components to create an interactive messaging interface unique to your brand identity.

Currently, Sendbird UIKit only supports group channels. Follow the guide below to start sending a message from scratch.

The minimum requirements for UIKit for Flutter are:

• Dart 3.3.0 or later
• Flutter 3.19.0 or later

Note: To support apple privacy manifest, add the contents of the ios/Resources/PrivacyInfo.xcprivacy file to the project’s PrivacyInfo.xcprivacy.

In this quickstart guide, you will be installing Sendbird SDK, implementing codes to create a group channel with a user, and send a message within a few minutes. Before you start, you need to have the following:

• Sendbird application on Sendbird Dashboard
• A user in the Sendbird application

A Sendbird application comprises everything required in a chat service including users, messages, and channels. You need the Application ID of your Sendbird application from the dashboard when initializing the Chat SDK.

1. Go to Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.

2. Create a new application by clicking Create + at the bottom right of your screen.

3. Enter a name for your application. Choose a Product Type and Region. Then, click Confirm.

4. Click the application you just created under Applications. You will see the application's Application ID which you will need when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

In order to send a message, you need a user in a channel. You can either create a user on the Sendbird dashboard first or you can use a new unique ID that hasn’t been taken by any of your Sendbird application users. In the latter case, a new user is automatically created in your Sendbird application before being connected.

In this guide, we will create a user on the Sendbird dashboard first.

1. Go to the Users menu on the left-hand side of the dashboard and click Create user+.

2. Enter the User ID and Nickname. It is recommended that you check the box next to Issue access token for user authentication. Then, click Create.

Note: Sendbird supports user authentication through access token for stronger security. However, on the dashboard, you can also configure the token permission in Settings > Application > Security > Access token permission to allow users without a token to access our functionalities.

3. Copy and store the user ID. You will use it to connect to the Sendbird server.

You can start building a messaging experience in your app by installing Sendbird UIKit.

Note: The quickest way to get started is by using the sample app from the sample repo.

Create a new flutter project.

Add following dependencies and fonts for SendbirdIcons in pubspec.yaml.

dependencies:
  sendbird_uikit: ^1.0.0-beta.4
  sendbird_chat_sdk: ^4.2.20

flutter:
  fonts:
    - family: SendbirdIcons
      fonts:
        - asset: packages/sendbird_uikit/fonts/SendbirdIcons.ttf

Run flutter pub get command in your project directory.

You have to call SendbirdUIKit.init(), SendbirdUIKit.connect() and SendbirdUIKit.provider() before using UIKit.

import 'package:flutter/material.dart';
import 'package:sendbird_uikit/sendbird_uikit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SendbirdUIKit.init(appId: 'YOUR_APP_ID');
  await SendbirdUIKit.connect('YOUR_USER_ID');

  runApp(SendbirdUIKit.provider(
    child: const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(), // This class will be implemented below.
    ),
  ));
}

You can easily add SBUGroupChannelListScreen, SBUGroupChannelCreateScreen and SBUGroupChannelScreen. The main customizable classes are SBUGroupChannelListScreen and SBUGroupChannelScreen.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SBUGroupChannelListScreen(
          onCreateButtonClicked: () {
            moveToGroupChannelCreateScreen(context);
          },
          onListItemClicked: (channel) {
            moveToGroupChannelScreen(context, channel.channelUrl);
          },
        ),
      ),
    );
  }

  void moveToGroupChannelCreateScreen(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => Scaffold(
        body: SafeArea(
          child: SBUGroupChannelCreateScreen(
            onChannelCreated: (channel) {
              moveToGroupChannelScreen(context, channel.channelUrl);
            },
          ),
        ),
      ),
    ));
  }

  void moveToGroupChannelScreen(BuildContext context, String channelUrl) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => Scaffold(
        body: SafeArea(
          child: SBUGroupChannelScreen(
            channelUrl: channelUrl,
          ),
        ),
      ),
    ));
  }
}

You can now run the application on an emulator or a plugged-in device. To send a message, you must first create a group channel by clicking on the icon in the top-right corner. Then, you can select users you wish to invite as members to your channel. Once the channel has been created, type your first message and press send.

You've successfully sent your first message with Sendbird.