Sendbird UIKit for Flutter

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.

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

Requirements

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.

Get started

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.

Step 1 Create a Sendbird application from your dashboard

You need to create a Sendbird application on the Sendbird Dashboard. You will need the App ID of your Sendbird application when initializing Sendbird UIKit.

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.

Step 2 Create a project

Create a new flutter project.

Step 3 Install UIKit

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

dependencies:
  sendbird_uikit: ^1.0.0-beta.6
  sendbird_chat_sdk: ^4.2.29

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

Run flutter pub get command in your project directory.

Step 4 Initialize UIKit

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.
    ),
  ));
}

Step 5 Apply UIKit screens

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,
          ),
        ),
      ),
    ));
  }
}

Step 6 Send your first message

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.

Customizations

In the customizations section, we introduce ways to apply customization across the entire Sendbird UIKit for Flutter, as well as specific customization options for individual screens.

Resource customization

• SBUThemeProvider
• SBUStringProvider
• SBUColors
• SBUIcons

Screen customization

• SBUGroupChannelListScreen
  • SBUGroupChannelCreateScreen
• SBUGroupChannelScreen
  • SBUGroupChannelInformationScreen
  • SBUGroupChannelMembersScreen
    • SBUGroupChannelInviteScreen
  • SBUGroupChannelModerationsScreen
    • SBUGroupChannelOperatorScreen
    • SBUGroupChannelMutedMembersScreen
    • SBUGroupChannelBannedUsersScreen
• SBUGroupChannelSettingsScreen