We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The Flutter AI AssistView widget is a powerful and customizable tool designed to simplify the integration of AI assistant functionality. It allows users to customize message content, headers, footers, avatars, response toolbars, loading indicators, suggestion items, text editors, and action buttons.
Define a custom placeholder widget to display at the top of all messages, serving as a header, or to be shown when there are no messages in the chat.
The placeholder acts as a header for all messages, remaining visible even as new messages are added.
Configure the placeholder to become visible when there are no messages in the AI AssistView and to be hidden when a new message is added.
This is the primary text editor where users can compose new request messages.
The default composer is a rounded rectangular text editor that allows users to compose request messages. You can customize its appearance by adding hint text, borders, prefix icons, suffix icons, and more.
Specify a custom widget to serve as a composer, using this feature to enable multiple options for composing messages such as text, voice, and image messages.
Define buttons that perform actions such as sending a message, attaching a file, recording a voice message, and more.
The default action button is a send button. Pressing or clicking this button triggers a callback, allowing the user to request a response to their composed message from their preferred AI service.
Define a custom widget consisting of one or more interactive widgets to serve as action buttons, such as a send button, microphone button, or file attachment button.
The AI AssistView displays the content of user requests and AI responses. Each message includes details like the message’s text, sending time stamp, and author. The response message contains additional information, including suggestions and toolbar items.
Customize the content of request messages by changing the background color, background shape, and other features based on the message, index, or specific conditions.
Customize the content of response messages by changing the background color, background shape, and other features based on the message, index, or specific conditions.
The header displays the username of the message’s author along with the time stamp of when the message was sent. Additionally, you can build a custom widget to display more information about messages.
Showcases additional functionalities and information, including feedback options, AI model details, and more.
The message author’s avatar displays either an image or the initials of their name. By default, if the avatar image source is not defined, the user’s initials will be displayed. Additionally, you can create a custom widget that shows more information about the user.
By default, when directionality is set to LeftToRight, request messages are displayed on the right side and response messages on the left. This is reversed for RightToLeft directionality.
Both request and response messages are aligned to the left for LeftToRight and to the right for RightToLeft.
Both request and response messages are aligned to the left for RightToLeft and to the right for LeftToRight.
Provide a list response suggestions. When the user selects one, it is considered a new request message. The suggestions’ layout, background, colors, and more can be customized.
Indicates that the AI service’s response is in progress after a request has been submitted. By default, the indicator is a shimmer effect that is displayed until the response is received.
Append a toolbar to response messages that provides options to perform various actions, such as rating the response, sharing it, copying it, and more.
Quickly get started with the Flutter AI AssistView widget by using just a few lines of Dart code, as demonstrated below. Also explore our Flutter AI AssistView example, which shows you how to render and configure widget.
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
class AssistViewSample extends StatefulWidget {
const AssistViewSample({super.key});
@override
State<StatefulWidget> createState() => AssistViewSampleState();
}
class AssistViewSampleState extends State<AssistViewSample> {
late List<AssistMessage> _messages;
void _generateResponse(String data) async {
final String response = await _getAIResponse(data);
setState(() {
_messages.add(AssistMessage.response(data: response));
});
}
Future<String> _getAIResponse(String data) async {
String response = '';
// Connect with your preferred AI to generate a response to the prompt.
return response;
}
@override
void initState() {
_messages = <AssistMessage>[];
super.initState();
}
@override
Widget build(BuildContext context) {
return SfAIAssistView(
messages: _messages,
composer: const AssistComposer(
decoration: InputDecoration(
hintText: 'Type a message',
),
),
actionButton: AssistActionButton(
onPressed: (String data) {
setState(() {
_messages.add(AssistMessage.request(data: data));
});
_generateResponse(data);
},
),
);
}
@override
void dispose() {
_messages.clear();
super.dispose();
}
}
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
