widget_chat 0.0.14

Drop-in AI chatbot widget for Flutter, FlutterFlow & web — rich content, tools, multimodal, multi-language, dashboard-configured.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:widget_chat/chat_widget.dart';

/// Minimal example: embed [ChatWidget] as a floating support bot.
///
/// Create a project in the Widget-Chat dashboard (https://widget-chat.com),
/// copy its project secret key, and pass it to [BotConfiguration].
void main() {
  runApp(const SampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Widget-Chat Example',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String currentLanguage = 'en';

  void toggleLanguage() {
    setState(() {
      currentLanguage = currentLanguage == 'en' ? 'fr' : 'en';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          currentLanguage == 'en' ? 'Sample App' : 'Application Exemple',
        ),
        actions: [
          TextButton(
            onPressed: toggleLanguage,
            child: Text(
              currentLanguage == 'en' ? 'FR Français' : 'EN English',
            ),
          ),
        ],
      ),
      body: Stack(
        children: [
          Center(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    currentLanguage == 'en'
                        ? 'Welcome to our store!'
                        : 'Bienvenue dans notre magasin!',
                    style: const TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 16),
                  Text(
                    currentLanguage == 'en'
                        ? 'Chat with our support bot in the bottom right.'
                        : "Discutez avec notre bot d'assistance en bas à droite.",
                    style: const TextStyle(fontSize: 16, color: Colors.grey),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
          ),
          // The floating chat launcher. Tapping it opens the full chat.
          Align(
            alignment: Alignment.bottomRight,
            child: ChatWidget(
              configuration: BotConfiguration(
                // Get this from your Widget-Chat dashboard.
                projectSecretKey: 'your-project-secret-key',
                userID: '1',
                currentLocale: currentLanguage,
              ),
            ),
          ),
        ],
      ),
    );
  }
}