ruut_flutter 0.0.1

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 a website channel in ruut server by following the steps described here https://www.ruut.com/docs/channels/website
• Replace websiteToken prop and baseUrl

import 'dart:io';

import 'package:ruut_flutter/ruut_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as image;
import 'package:image_picker/image_picker.dart' as image_picker;
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Ruut Example"),
      ),
      body: RuutWidget(
        websiteToken: "websiteToken",
        baseUrl: "https://app.ruut.com",
        user: RuutUser(
          identifier: "[e-mail]",
          name: "Tester test",
          email: "[e-mail]",
        ),
        locale: "fr",
        closeWidget: () {
          if (Platform.isAndroid) {
            SystemNavigator.pop();
          } else if (Platform.isIOS) {
            exit(0);
          }
        },
        //attachment only works on android for now
        onAttachFile: _androidFilePicker,
        onLoadStarted: () {
          print("loading widget");
        },
        onLoadProgress: (int progress) {
          print("loading... ${progress}");
        },
        onLoadCompleted: () {
          print("widget loaded");
        },
      ),
    );
  }

  Future<List<String>> _androidFilePicker() async {
    final picker = image_picker.ImagePicker();
    final photo =
        await picker.pickImage(source: image_picker.ImageSource.gallery);

    if (photo == null) {
      return [];
    }

    final imageData = await photo.readAsBytes();
    final decodedImage = image.decodeImage(imageData);
    final scaledImage = image.copyResize(decodedImage, width: 500);
    final jpg = image.encodeJpg(scaledImage, quality: 90);

    final filePath = (await getTemporaryDirectory()).uri.resolve(
          './image_${DateTime.now().microsecondsSinceEpoch}.jpg',
        );
    final file = await File.fromUri(filePath).create(recursive: true);
    await file.writeAsBytes(jpg, flush: true);

    return [file.uri.toString()];
  }
}

Horray! You're done.

Available Parameters

Name	Default	Type	Description
websiteToken	-	String	Website inbox channel token
baseUrl	-	String	Installation url for ruut
user	-	RuutUser	User information about the user like email, username and avatar_url
locale	en	String	User locale
closeWidget	-	void Function()	widget close event
customAttributes	-	dynamic	Additional information about the customer
onAttachFile	-	Future<List	Widget Attachment event. Should return a list of File Uris Currently supported only on Android devices
onLoadStarted	-	void Function()	Widget load start event
onLoadProgress	-	void Function(int)	Widget Load progress event
onLoadCompleted	-	void Function()	Widget Load completed event

b. Using Ruut Client

• Create an Api inbox in Ruut. Refer to Create API Channel document.
• Create your own customized chat ui and use RuutClient to load and sendMessages. Messaging events like onMessageSent and onMessageReceived will be triggered on RuutCallback argument passed when creating the client instance.

NB: This ruut client uses Hive for local storage.

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}");
      },
    );

    RuutClient.create(
        baseUrl: widget.baseUrl,
        inboxIdentifier: widget.inboxIdentifier,
        user: widget.user,
        enablePersistence: widget.enablePersistence,
        callbacks: ruutCallbacks
    ).then((client) {
        client.loadMessages();
    }).onError((error, stackTrace) {
      print("ruut client creation failed with error $error: $stackTrace");
    });

Available Parameters

Name	Default	Type	Description
baseUrl	-	String	Installation url for ruut
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