Flutter Bot - AI Chatbot Widget

A beautiful, customizable AI chatbot widget that can be easily integrated into any Flutter app. Perfect for adding intelligent customer support to your applications with just a few lines of code.

Features

• 🎨 Beautiful UI: Modern, customizable design with smooth animations
• 🚀 Easy Integration: Single widget integration with minimal setup
• 🔒 Secure: Project-based authentication with secure keys
• 📱 Responsive: Adaptive design for mobile and web platforms
• ⚡ Real-time: Live chat with typing indicators
• 🎭 Customizable: Themes, colors, FAB styles, and behavior
• 🌐 Multi-platform: Works on iOS, Android, and Web

Installation

Add to your pubspec.yaml:

dependencies:
  flutter_bot: ^1.0.0

Quick Start

1. Import the package

import 'package:flutter_bot/flutter_bot.dart';

2. Add the ChatWidget to your app

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Your app content here
          YourMainContent(),
          
          // Add the chatbot
          Positioned(
            bottom: 20,
            right: 20,
            child: ChatWidget(
              configuration: BotConfiguration(
                projectSecretKey: 'your-project-secret-key',
                userID: 'unique-user-id',
                name: 'Support Bot',
                welcomeMessage: 'Hello! How can I help you today?',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Configuration Options

Basic Configuration

BotConfiguration(
  // Required
  projectSecretKey: 'your-secret-key',  // Get from your dashboard
  userID: 'user-123',                   // Unique identifier for the user
  
  // Optional
  name: 'Assistant',                    // Bot display name
  welcomeMessage: 'How can I help?',    // Initial greeting
  fontFamily: 'Roboto',                 // Chat font (default: Roboto)
  color: '#3B82F6',                     // Primary color in hex
  systemInstructions: 'Be helpful',     // Bot behavior instructions
  isPreviewMode: false,                 // Preview mode flag
)

FAB Customization

BotConfiguration(
  projectSecretKey: 'your-key',
  userID: 'user-123',
  fabConfiguration: FabConfiguration(
    icon: 'chat_bubble',           // Icon name
    iconSize: 24.0,                // Icon size
    iconColor: '#FFFFFF',          // Icon color in hex
    backgroundColor: '#3B82F6',     // Background color in hex
    buttonSize: 56.0,              // FAB size
    borderRadius: 28.0,            // Corner radius
    useAvatarAsIcon: false,        // Use avatar image as icon
  ),
)

Advanced Usage

Responsive Design

ChatWidget(
  configuration: BotConfiguration(
    projectSecretKey: 'your-key',
    userID: 'user-123',
  ),
  mobile: false,  // Set to false for web/desktop layout
)

Custom FAB Widget

ChatWidget(
  configuration: BotConfiguration(
    projectSecretKey: 'your-key',
    userID: 'user-123',
  ),
  fabWidget: CustomFABWidget(),  // Your custom FAB
)

Chat State Callbacks

ChatWidget(
  configuration: BotConfiguration(
    projectSecretKey: 'your-key',
    userID: 'user-123',
  ),
  onOpen: ({required bool isOpen}) {
    print('Chat is ${isOpen ? "open" : "closed"}');
    // Track analytics, update UI, etc.
  },
)

Platform-Specific Setup

Web

For web applications, the widget automatically adapts to show a fixed-size chat window instead of full-screen on desktop browsers.

Mobile

On mobile devices, the chat opens in full-screen mode for the best user experience.

Available Icons

The FAB supports these icon options:

• chat_bubble (default)
• chat
• message
• support_agent
• help
• question_answer
• forum
• contact_support
• headset_mic

Security Best Practices

1. Never expose your project secret key in client-side code
2. Use unique user IDs to maintain conversation history
3. Configure allowed origins for web deployments
4. Keep your SDK updated for security patches

Example App

Check out the complete example in the /example folder:

import 'package:flutter/material.dart';
import 'package:flutter_bot/flutter_bot.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bot Example',
      home: Scaffold(
        body: Stack(
          children: [
            Center(
              child: Text('Your App Content'),
            ),
            Positioned(
              bottom: 20,
              right: 20,
              child: ChatWidget(
                configuration: BotConfiguration(
                  projectSecretKey: 'your-project-secret-key',
                  userID: 'demo-user',
                  name: 'AI Assistant',
                  welcomeMessage: 'Hi! How can I help you today?',
                  color: '#6366F1',
                  fabConfiguration: FabConfiguration(
                    icon: 'support_agent',
                    backgroundColor: '#6366F1',
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Troubleshooting

Chat doesn't open

• Verify your project secret key is correct
• Check console for any error messages
• Ensure the widget is properly positioned in your widget tree

Styling issues

• Make sure hex colors include the # symbol
• Use supported Google Fonts for fontFamily
• Check that size values are reasonable (e.g., buttonSize: 56.0)

Support

• Documentation: https://docs.widget-chat.com
• Email: support@widget-chat.com
• GitHub Issues: Report bugs here

License

This project is licensed under the Proprietary License - see the LICENSE file for details.