The argide_flutter package adds Argide to any Flutter app. Use ArgideWidget for a floating chat button that overlays your existing app, drop in ArgideChatView for a full-screen chat experience.
Installation flutter pub add argide_flutter
Quick Start Add ArgideWidget inside a Stack to get a floating chat button that slides up a chat sheet — zero extra UI work:
import 'package:argide_flutter/argide_flutter.dart' ; import 'package:flutter/material.dart' ; void main () => runApp ( const ArgideScope ( productId : 'YOUR_PRODUCT_ID' , apiUrl : 'https://dashboard.argide.ai' , child : MyApp (), ), ); class MyApp extends StatelessWidget { const MyApp ({ super .key}); @override Widget build ( BuildContext context) { return MaterialApp ( // builder wraps every route — ArgideWidget appears on all pages builder : (context, child) => Stack ( children : [child ! , const ArgideWidget ()], ), home : const HomeScreen (), ); } }
Placing ArgideWidget in MaterialApp.builder means it automatically appears on every page and route in your app — no need to add it to each screen individually. Tapping the button slides up a chat sheet at 85% screen height.
Full-Screen Chat Wrap your app with ArgideScope and drop in ArgideChatView as the full body:
import 'package:argide_flutter/argide_flutter.dart' ; import 'package:flutter/material.dart' ; void main () => runApp ( const ArgideScope ( productId : 'YOUR_PRODUCT_ID' , child : MyApp (), ), ); class MyApp extends StatelessWidget { const MyApp ({ super .key}); @override Widget build ( BuildContext context) { return const MaterialApp ( home : Scaffold (body : ArgideChatView ()), ); } }
ArgideChatView includes message bubbles, streaming, conversation history, suggested actions, and a “Powered by Argide” footer — no additional setup required.ArgideScope Props ArgideScope is an InheritedWidget that provides the client and state down the widget tree.Prop Required Description productIdYes Your product ID from the dashboard apiUrlYes API URL identityTokenNo JWT token for authenticated users
Prop Required Description themeNo ArgideTheme instance to customize the chat sheet appearance
ArgideChatView Props Prop Required Description themeNo ArgideTheme instance to customize appearance
Theming Customize colors and styles via ArgideTheme:
ArgideChatView ( theme : ArgideTheme ( backgroundColor : Colors .white, userBubbleColor : Colors .white, userBubbleTextColor : const Color ( 0xFF111827 ), assistantBubbleColor : Colors .black, assistantBubbleTextColor : Colors .white, inputBorderColor : const Color ( 0xFFE5E7EB ), sendButtonColor : Colors .black, bubbleBorderRadius : 18.0 , poweredByColor : const Color ( 0xFF9CA3AF ), ), )
Theme Properties Property Description backgroundColorChat background color userBubbleColorUser message bubble background userBubbleTextColorUser message text color assistantBubbleColorAssistant bubble background assistantBubbleTextColorAssistant message text color sendButtonColorSend button color bubbleBorderRadiusCorner radius for message bubbles inputBorderColorInput bar border color inputBorderLoadingColorInput border color while streaming poweredByColor”Powered by Argide” text color headerBorderColorBottom border of the header messageTextStyleFull TextStyle override for message text
User Identity Identify users to enable conversation history and personalized responses:
final notifier = ArgideScope . chatOf (context); // From a login handler final token = await fetchTokenFromYourBackend (); notifier. identify ( IdentifyOptions (token : token)); // Or pass via ArgideScope props (auto-updates when token changes) ArgideScope ( productId : 'YOUR_PRODUCT_ID' , identityToken : userToken, child : MyApp (), ) // Logout notifier. resetUser ();
See Identity Verification for generating tokens on your backend.
Register tools that run natively in your Flutter app:
final notifier = ArgideScope . chatOf (context); notifier. registerTools ({ 'navigateToScreen' : (params) async { final screen = params[ 'screen' ] as String ; Navigator . pushNamed (context, '/ $ screen ' ); return { 'navigated_to' : screen}; }, 'addToCart' : (params) async { final productId = params[ 'product_id' ] as String ; await cartController. add (productId); return { 'added' : productId}; }, });
Upload tool definitions on the Actions page so the agent knows when to call them.
Platform Support iOS ✅ Android ✅ macOS ✅ Web ✅
iOS / macOS No additional configuration needed. For macOS apps, add the outbound networking entitlement — required for all network calls, including production:
<!-- macos/Runner/DebugProfile.entitlements --> < key > com.apple.security.network.client </ key > < true />
Differences from Other SDKs Feature Web (@argide/ui) React Native Flutter Language TypeScript TypeScript Dart Drop-in UI <ArgideWidget /><ArgideWidget />ArgideWidgetState useChat() hookuseChat() hookArgideChatNotifierStorage localStorage AsyncStorage adapter SharedPreferences (built-in) Provider <ArgideProvider><ArgideProvider>ArgideScope
Identity Verification Generate JWT tokens on your backend
Client-Side Tools Register tools the agent can call
Embed Widget Web widget installation guide
