ruut_flutter 0.0.2+patch ruut_flutter: ^0.0.2+patch copied to clipboard
The official Flutter SDK for Ruut Chat,this SDK provides developers with a seamless way to integrate the Ruut chat widget into their Flutter applications.
Integrate Ruut with Flutter app #
Integrate Ruut flutter client into your flutter app and talk to your visitors in real time. Ruut helps you to chat with your visitors and provide exceptional support in real time. To use Ruut in your flutter app, follow the steps described below.
1. Add the package to your project #
Run the command below in your terminal
flutter pub add ruut_flutter
or
Add
ruut_flutter:<<version>>
to your project's pubspec.yml file. You can check here for the latest version.
2. How to use #
a. Using RuutWidget #
- Create an api channel in ruut server by following the steps described here https://www.ruut.com/docs/channels/api
- Replace inboxIdentifier prop with the inbox identifier for the api channel you created
import 'package:ruut_flutter/ruut_flutter.dart';
import 'package:ruut_flutter/ui/ruut_home.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
fontFamily: "TTHoves-Pro",
primarySwatch: Colors.blue,
),
home: MyHomePage(
title: 'Flutter Demo Home Page',
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({required this.title}) : super();
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return RuutChat(
inboxIdentifier: '<api_channel_inbox_identifier>',
blogUrl: "",
logoUrl:
"https://examples.com/image.png",
theme: RuutChatTheme(
userAvatarNameColors: [Colors.black, Colors.white],
userNameTextStyle: TextStyle(color: Colors.black),
attachmentButtonIcon: Icon(Icons.image_outlined, color: Colors.grey),
primaryColor: Color(0xff9B6EE3),
secondaryColor: Colors.white,
backgroundColor: Colors.grey.shade100,
),
user: RuutUser(
identifier: "<unique_user_id>",
name: "Tester test",
email: "test@test.com",
customAttributes: {
"plan": "Premium",
"tier": "tier_1"
}
),
);
}
}
Horray! You're done.
NB: This ruut sdk uses Hive for local storage.
Callbacks #
Ruut callbacks are methods exposed to you that you can hook into to perform various actions based on real-time events within the SDK. These callback methods provide you with greater control over user interactions, allowing you to respond dynamically as certain events occur.
final ruutCallbacks = RuutCallbacks(
onWelcome: (){
print("on welcome");
},
onPing: (){
print("on ping");
},
onConfirmedSubscription: (){
print("on confirmed subscription");
},
onConversationStartedTyping: (){
print("on conversation started typing");
},
onConversationStoppedTyping: (){
print("on conversation stopped typing");
},
onPersistedMessagesRetrieved: (persistedMessages){
print("persisted messages retrieved");
},
onMessagesRetrieved: (messages){
print("messages retrieved");
},
onMessageReceived: (ruutMessage){
print("message received");
},
onMessageDelivered: (ruutMessage, echoId){
print("message delivered");
},
onMessageSent: (ruutMessage, echoId){
print("message sent");
},
onError: (error){
print("Ooops! Something went wrong. Error Cause: ${error.cause}");
},
);
Available Parameters
Name | Default | Type | Description |
---|---|---|---|
inboxIdentifier | - | String | Identifier for target ruut inbox |
enablePersistance | true | bool | Enables persistence of ruut client instance's contact, conversation and messages to disk for convenience. true - persists ruut client instance's data(contact, conversation and messages) to disk. To clear persisted data call RuutClient.clearData or RuutClient.clearAllData false - holds ruut client instance's data in memory and is cleared as soon as ruut client instance is disposed Setting |
user | null | RuutUser | Custom user details to be attached to ruut contact |
callbacks | null | RuutCallbacks | Callbacks for handling ruut events |