This tutorial teaches you to integrate Sendbird UIKit for Flutter in your mobile application to implement chat functionality.

This is what your app will look like when you've finished this tutorial:

Image|Three UIKit views on the Light theme are shown: list of channels, chat view, channel information view.

What you'll learn

What you'll need

Note: (For iOS) To support Apple privacy manifest, make sure to add the contents of ios/Resources/PrivacyInfo.xcprivacy to your project's PrivacyInfo.xcprivacy file.

Before you start, you need the following:

Application ID

  1. Go to Sendbird Dashboard and create an account or sign in.
  2. Click Create + to create a new application.
  3. Enter a name, choose a Product Type and Region, then click Confirm.
  4. Note down the Application ID - you'll need this later.

Image|Screen showing application ID on Sendbird Dashboard.

User ID

Next, create a user in your Sendbird application:

  1. Go to the Users menu and click Create user+.
  2. Enter a User ID and Nickname. Check Issue access token for authentication.
  3. Click Create and copy the user ID for later use.

Image|Screen highlighting bot ID on Manage bots page on Sendbird Dashboard.

Let's start by creating a new Flutter project:

flutter create chat_app
cd chat_app

Add the following dependencies to your pubspec.yaml file:

# Indentation matters! Use spaces, not tabs.
dependencies:
  flutter:           # 2 spaces
    sdk: flutter     # 4 spaces
  sendbird_uikit: ^1.0.0     # 2 spaces
  sendbird_chat_sdk: ^4.2.30 # 2 spaces

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

Once you've added the dependencies, run the following command:

flutter pub get

Now let's initialize the Sendbird UIKit in your application.

Create main.dart

Replace the contents of your lib/main.dart file with:

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', accessToken: 'ACCESS_TOKEN');

  runApp(const MyApp());
}

Replace these values:

Note: You can find the user's Access token in the Sendbird Dashboard under your Application > Users > your user > Access token. For this tutorial, you are using the user access token as a way of authentication. For actual implementation, itt is highly recommended to refer to this authentication guide to implement a more secure way of authentication.

Let's implement the main chat screens in your application. Add this code to your main.dart.

This implements:

  1. Group Channel List Screen
  2. Channel Creation Screen
  3. Channel Chat Screen
  4. Navigation between screens
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      builder: (context, child) {
        return SendbirdUIKit.provider(
          child: Navigator(
            onGenerateRoute: (settings) => MaterialPageRoute(
              builder: (context) => child!,
            ),
          ),
        );
      },
      home: HomeScreen(), // Separate screen widget
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({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.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          body: SafeArea(
            child: SBUGroupChannelCreateScreen(
              onChannelCreated: (channel) {
                moveToGroupChannelScreen(context, channel.channelUrl);
              },
            ),
          ),
        ),
      ),
    );
  }

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

Now let's test your chat implementation:

  1. Run your app:
    flutter run
    
  2. Create a new channel:
    • Tap the create button in the top-right corner
    • Select users to add to the channel
    • Confirm channel creation
  3. Send a message:
    • Type your message in the input field
    • Tap the send button
    Image|GIF showing signing in all the way to sending a message.

You've successfully:

  1. Explore the list of UIKit screens
  2. Check out the sample app
  3. See Sendbird UIKit for Flutter documentation