sendbird_uikit

Description:

sendbird uikit

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

flutter:
fonts:
- family: SendbirdIcons
fonts:
- asset: packages/sendbird_uikit/fonts/SendbirdIcons.ttf
copied to clipboard
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.
),
));
}
copied to clipboard
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,
),
),
),
));
}
}
copied to clipboard
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