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 and Android.

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: ^1.0.0

flutter pub get

3. Initialize

import 'package:flutter_chat_io/flutter_chat_io.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  FlutterChatIO.initialize(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',
  location: 'New York, USA',
  deviceInfo: 'iPhone 14 Pro, iOS 17.0',
);

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

// After user login
FlutterChatIO.setUserId(userId: user.id);
FlutterChatIO.setUserInfo(
  email: user.email,
  userName: user.displayName,
);

Resetting on Logout

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

Checking Initialization

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

Device Info Integration

Use device_info_plus to provide device context:

import 'package:device_info_plus/device_info_plus.dart';

Future<void> setupDeviceInfo() async {
  final deviceInfo = DeviceInfoPlugin();

  if (Platform.isIOS) {
    final ios = await deviceInfo.iosInfo;
    FlutterChatIO.setUserInfo(
      deviceInfo: '${ios.name}, iOS ${ios.systemVersion}',
    );
  } else if (Platform.isAndroid) {
    final android = await deviceInfo.androidInfo;
    FlutterChatIO.setUserInfo(
      deviceInfo: '${android.model}, Android ${android.version.release}',
    );
  }
}

API Reference

FlutterChatIO

Method Description
initialize({required String clientToken, String? wsEndpoint, String? httpEndpoint}) Initialize the SDK with your client token from flutterchat.io
setUserId({required String userId}) Set the current user's unique identifier
setUserInfo({String? email, String? userName, String? location, String? deviceInfo}) Set additional user information visible in Slack
reset() Clear all user information
isInitialized Check if the SDK is initialized

FlutterChatIOChat

Property Type Description
theme FlutterChatIOTheme Theme configuration for the chat widget

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.