FlutterChatIO #

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

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());
}

4. Identify Users (Recommended) #

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 #

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 #

FlutterChatIOChat #

Requirements #

• Flutter 3.10.0 or higher
• Dart 3.0.0 or higher
• FlutterChatIO account (flutterchat.io Dashboard)

License #

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

Support #

• Website: flutterchat.io
• Documentation: flutterchat.io/docs
• Email: support@flutterchat.io