FlutterChatIO

Live customer support for Flutter apps with Slack integration. Your users chat in-app, your team responds in Slack.

pub package License: BSD-3-Clause

What is FlutterChatIO?

FlutterChatIO brings live customer support directly into your Flutter app. Unlike traditional chat tools that require separate helpdesk software, FlutterChatIO routes all conversations to your existing Slack workspace. Your entire team can participate in support conversations without learning new tools or paying per-seat fees.

Why FlutterChatIO?

  • Slack-native support - Messages from your app appear in Slack channels. Reply from Slack, and users see responses instantly in the app.
  • Unlimited operators - Any Slack workspace member can help customers. No agent seat limits or restrictive pricing.
  • Quick setup - Go live in under an hour. Connect Slack, add the widget, start chatting.
  • Automatic context - Every conversation includes user details, device type, app version, and custom data you provide.
  • Cross-platform - Single Flutter widget works on iOS, Android, and Web.

How It Works

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Your Flutter   │────▶│   FlutterChatIO  │────▶│  Your Slack     │
│      App        │◀────│     Service      │◀────│   Workspace     │
└─────────────────┘     └──────────────────┘     └─────────────────┘
     User sends              Real-time              Team replies
      message                  sync                  in Slack
  1. User opens chat in your app and sends a message
  2. Message appears in your designated Slack channel with user context
  3. Any team member replies in Slack
  4. User sees the response instantly in the app

Getting Started

1. Set Up FlutterChatIO

Visit flutterchat.io to:

  • Connect your Slack workspace
  • Create a project and get your client token
  • Configure the Slack channel for incoming messages

2. Install the SDK

Add flutter_chat_io to your pubspec.yaml:

dependencies:
  flutter_chat_io: ^2.2.0

flutter pub get

3. Initialize

import 'package:flutter_chat_io/flutter_chat_io.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  FlutterChatIO.initialize(
    clientId: 'your-client-id',
    clientToken: 'your-client-token',
  );

  runApp(MyApp());
}

Provide user context so your team knows who they're talking to:

FlutterChatIO.setUserId(userId: 'user-123');
FlutterChatIO.setUserInfo(
  email: 'user@example.com',
  userName: 'John Doe',
);

5. Show the Chat

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => const FlutterChatIOChat(),
  ),
);

Features

Real-time Messaging

Messages sync instantly between your app and Slack via WebSocket with automatic reconnection on connection loss.

Message History

Conversations persist across sessions. Users see their full chat history when they return.

Image Attachments

Users can share images directly in chat with automatic upload handling.

Offline Contact Form

When your team is offline, users can leave their contact information for follow-up.

Connection Status

Visual indicators show users when support is online, offline, or connecting.

Theming

Customize the appearance to match your app:

FlutterChatIOChat(
  theme: FlutterChatIOTheme(
    // AppBar
    appBarColor: Colors.indigo,
    appBarTitle: 'Help Center',

    // Message bubbles
    outgoingMessageColor: Colors.indigo,
    incomingMessageColor: Colors.grey.shade200,

    // Status indicators
    onlineColor: Colors.green,
    offlineColor: Colors.red,
    connectingColor: Colors.orange,

    // Empty state
    emptyStateTitle: 'How can we help?',
    emptyStateSubtitle: 'Send us a message to get started',
  ),
)

Theme Properties

Category Properties
AppBar appBarColor, appBarTitle, appBarTitleTextStyle, appBarSubtitleTextStyle
Background backgroundColor, backgroundGradient
Messages incomingMessageColor, outgoingMessageColor, incomingMessageTextStyle, outgoingMessageTextStyle, incomingTimeTextStyle, outgoingTimeTextStyle
Status onlineColor, offlineColor, connectingColor
Input inputBackgroundColor, inputTextColor, inputHintColor, keyboardAppearance, sendButtonColor, sendButtonDisabledColor, attachmentIcon
Empty State emptyStateTitle, emptyStateSubtitle, emptyStateTitleStyle, emptyStateSubtitleStyle
Offline Form offlineFormTitle, offlineFormSubtitle, offlineFormButtonText, offlineFormNameHint, offlineFormEmailHint, offlineFormNameEmailError, offlineFormEmailValidError
Chat supportUserName

Localization

Customize all text for different languages:

FlutterChatIOTheme(
  // Spanish
  appBarTitle: 'Soporte',
  emptyStateTitle: 'Bienvenido',
  emptyStateSubtitle: 'Envíanos un mensaje para comenzar',
  offlineFormTitle: 'Estamos fuera de línea',
  offlineFormSubtitle: 'Deja tu información de contacto',
  offlineFormButtonText: 'Continuar al chat',
  offlineFormNameHint: 'Tu nombre',
  offlineFormEmailHint: 'Tu email',
  supportUserName: 'Soporte',
)

Dark Theme Example

FlutterChatIOChat(
  theme: FlutterChatIOTheme(
    backgroundColor: const Color(0xFF121212),
    appBarColor: const Color(0xFF1E1E1E),
    inputBackgroundColor: const Color(0xFF2D2D2D),
    inputTextColor: Colors.white,
    inputHintColor: Colors.white54,
    keyboardAppearance: Brightness.dark,
    appBarTitleTextStyle: const TextStyle(
      fontSize: 17,
      fontWeight: FontWeight.w600,
      color: Colors.white,
    ),
    incomingMessageTextStyle: const TextStyle(
      fontSize: 15,
      color: Colors.white,
    ),
    emptyStateTitleStyle: const TextStyle(
      fontSize: 20,
      fontWeight: FontWeight.w600,
      color: Colors.white,
    ),
    emptyStateSubtitleStyle: const TextStyle(
      fontSize: 14,
      color: Colors.white70,
    ),
  ),
)

User Session Management

Setting User Identity

Set user information and custom metadata in a single call:

// After user login
FlutterChatIO.setUserId(userId: user.id);
FlutterChatIO.setUserInfo(
  email: user.email,
  userName: user.displayName,
  customData: {
    'subscription': 'premium',
    'accountType': 'business',
    'signupDate': '2024-01-15',
  },
);

Note: Device information is automatically detected by the SDK.

All this data appears in the user info card in Slack, helping your team understand the user's context at a glance.

Resetting on Logout

void onLogout() {
  FlutterChatIO.reset();
}

Checking Initialization

if (FlutterChatIO.isInitialized) {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => const FlutterChatIOChat()),
  );
}

Auto-detected Information

The SDK automatically detects and sends detailed device information to help your support team debug platform-specific issues. No configuration required.

API Reference

FlutterChatIO

Method Description
initialize({required String clientId, required String clientToken, String? wsEndpoint, String? httpEndpoint}) Initialize the SDK with your credentials from flutterchat.io
setUserId({required String userId}) Set the current user's unique identifier
setUserInfo({String? email, String? userName, Map<String, String>? customData}) Set user information and custom metadata visible in Slack (device info is auto-detected)
reset() Clear all user information (including custom user data)
isInitialized Check if the SDK is initialized

FlutterChatIOChat

Property Type Description
theme FlutterChatIOTheme Theme configuration for the chat widget

Roadmap

Planned features for upcoming releases:

  • Push Notifications - Get notified when support responds, even when the app is closed
  • AI Bot Integration - Automated responses and smart routing before human handoff

Requirements

License

BSD 3-Clause License - see the LICENSE file for details.

Support

Libraries

flutter_chat_io
FlutterChatIO - Live customer support for Flutter apps with Slack integration.