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

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