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:
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:
Next, create a user in your Sendbird application:
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.
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:
YOUR_APP_ID
: Your Sendbird Application IDUSER_ID
: The user ID you created earlierACCESS_TOKEN
: The user's access tokenNote: 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:
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:
flutter run
You've successfully: