ask_bubble_ai 1.3.5

A premium floating AI chat bubble widget for Flutter. Easily embed a chatbot assistant powered by Gemini, OpenAI, and Claude with custom styling, streaming, and navigation.

example/lib/main.dart

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

/// The entry point of the example application.
void main() {
  runApp(const MyApp());
}

/// The root widget of the example application.
class MyApp extends StatelessWidget {
  /// Creates a new [MyApp] instance.
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Ask Bubble AI Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

/// The home page widget containing the [AskBubbleAi] floating chat assistant.
class MyHomePage extends StatelessWidget {
  /// Creates a new [MyHomePage] instance.
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Ask Bubble AI Example')),
      body: Stack(
        children: [
          const Center(child: Text('Your App Content Here')),
          Positioned(
            right: 16,
            bottom: 16,
            child: AskBubbleAi(
              apiKey: const String.fromEnvironment(
                'GEMINI_API_KEY',
                defaultValue:
                    'AQ.Ab8RN6KcZo4ds7XG8EyC8f3vZ-WlC2PuXs-HqNUlncJcU4YmTw',
              ),
              provider: AskAiProvider.gemini, // Can also use openAi or claude
              modelName: 'gemini-2.5-flash', // Specify custom model identifier
              assistantName: 'AI Assistant',
              welcomeTitle: 'Welcome!',
              welcomeSubtitle: 'How can I assist you today?',
              brainDocument: '''
                App FAQ & Knowledge Base:
                - Support hours are Monday to Friday, 9 AM - 5 PM.
                - To change password, go to Settings screen.
                - Refund queries can be directed to support.
              ''',
              userDetails: const {
                'User Name': 'John Doe',
                'Status': 'Premium Member',
              },
              suggestions: const [
                'How can you help me?',
                'What are support hours?',
              ],
              navigationRoutes: const [
                {
                  'route': '/settings',
                  'description':
                      'Configure user settings and password management',
                },
              ],
              onNavigate: (routePath) {
                // Handle in-app navigation routes here
                debugPrint('User clicked navigation route: $routePath');
              },
              // New in 1.3.0 — optional parameters:
              showTimestamps: true, // Show HH:MM timestamps on messages
              maxTokens: 2048, // Limit response tokens
              bubbleStyle: const AskAiBubbleStyle(
                backgroundColor: Color(0xFF0F172A),
                icon: Icons.forum_rounded,
                iconColor: Colors.white,
              ),
              headerStyle: const AskAiHeaderStyle(
                backgroundColor: Color.fromARGB(255, 28, 64, 121),
                titleStyle: TextStyle(
                  fontSize: 13,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
                subtitleStyle: TextStyle(fontSize: 11, color: Colors.white),
                iconColor: Colors.white,
                avatarBackgroundColor: Color.fromARGB(255, 28, 64, 121),
                avatarIcon: Icons.support_agent_rounded,
                avatarIconColor: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}