Integrate Solevato with Flutter app #

Integrate Solevato flutter client into your flutter app and talk to your visitors in real time. Solevato helps you to chat with your visitors and provide exceptional support in real time. To use Solevato in your flutter app, follow the steps described below.

1. Create an Api inbox in Solevato Dashboard #

1. Login to your account
2. Go to Inboxes
3. Create Mobile App Inbox

2. Add the package to your project #

Run the command below in your terminal

flutter pub add solevato_client_sdk_flutter

or

Add solevato_client_sdk_flutter:<<version>> to your project's pubspec.yml file. You can check here for the latest version.

NB: This library uses Hive for local storage and Flutter Chat UI for its user interface.

3. How to use #

Replace inboxIdentifier with appropriate values from your dashboard

a. Using SolevatoChatDialog #

Simply call SolevatoChatDialog.show with your parameters to show chat dialog. To close dialog use Navigator.pop(context).

// Example
SolevatoChatDialog.show(
  context,
  inboxIdentifier: "<<<your-inbox-identifier-here>>>",
  title: "Solevato Support",
  user: SolevatoUser(
    identifier: "mark@example.com",
    name: "Mark Rady",
    email: "mark@example.com",
  ),
);

Available Parameters

b. Using SolevatoChat Widget #

To embed SolevatoChat widget inside a part of your app, use the SolevatoChat widget. Customize chat UI theme by passing a SolevatoChatTheme with your custom theme colors and more.

import 'package:solevato_client_sdk_flutter/solevato_client_sdk_flutter.dart';
import 'package:flutter/material.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
  Widget build(BuildContext context) {
    return SolevatoChat(
      inboxIdentifier: "<<<your-inbox-identifier-here>>>",
      user: SolevatoUser(
        identifier: "john@gmail.com",
        name: "John Samuel",
        email: "john@gmail.com",
      ),
      appBar: AppBar(
        title: Text(
          "Solevato",
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold
          ),
        ),
        backgroundColor: Colors.white,
      ),
      onWelcome: (){
        print("Welcome event received");
      },
      onPing: (){
        print("Ping event received");
      },
      onConfirmedSubscription: (){
        print("Confirmation event received");
      },
      onMessageDelivered: (_){
        print("Message delivered event received");
      },
      onMessageSent: (_){
        print("Message sent event received");
      },
      onConversationIsOffline: (){
        print("Conversation is offline event received");
      },
      onConversationIsOnline: (){
        print("Conversation is online event received");
      },
      onConversationStoppedTyping: (){
        print("Conversation stopped typing event received");
      },
      onConversationStartedTyping: (){
        print("Conversation started typing event received");
      },
    );
  }
}

Horray! You're done.

Available Parameters

c. Using Solevato Client #

You can also create a customized chat ui and use SolevatoClient to load and sendMessages. Messaging events like onMessageSent and onMessageReceived will be triggered on SolevatoCallback passed when creating the client instance.

final SolevatoCallbacks = SolevatoCallbacks(
      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: (SolevatoMessage){
        print("message received");
      },
      onMessageDelivered: (SolevatoMessage, echoId){
        print("message delivered");
      },
      onMessageSent: (SolevatoMessage, echoId){
        print("message sent");
      },
      onError: (error){
        print("Ooops! Something went wrong. Error Cause: ${error.cause}");
      },
    );
    
    SolevatoClient.create(
        inboxIdentifier: widget.inboxIdentifier,
        user: widget.user,
        enablePersistence: widget.enablePersistence,
        callbacks: SolevatoCallbacks
    ).then((client) {
        client.loadMessages();
    }).onError((error, stackTrace) {
      print("solevato client creation failed with error $error: $stackTrace");
    });

Available Parameters