How to Get Started with Flutter AIAssistView?

In this article, we’ll explain how to get started with the Flutter AIAssistView widget. The SfAIAssistView widget creates an AI-powered assistant view that provides a modern conversation UI for user requests and AI responses. It allows developers to design intuitive chat interfaces with features like customizable message content, headers, footers, avatars, response toolbars, loading indicators, suggestion items, text editors, and action buttons.

Step 1: Import the required packages

Add the following code to your pubspec.yaml file to install the Syncfusion® Flutter Chat package, which includes the AIAssistView widget.

dependencies:
 syncfusion_flutter_chat: ^xx.x.xx 

Step 2: Create the SfAIAssistView sample

To create a sample of SfAIAssistView, initialize the widget with the necessary property messages. The messages property holds the list of assist messages, including both user requests and AI responses.

late List<AssistMessage> _messages;
final AssistMessageAuthor user = const AssistMessageAuthor(
 id: 'User ID',
 name: 'User name',
);
final AssistMessageAuthor ai = const AssistMessageAuthor(
 id: 'ID',
 name: 'AI',
);

@override
void initState() {
 _messages = <AssistMessage>[];
 super.initState();
}

@override
Widget build(BuildContext context) {
 return Scaffold(
   body: SfAIAssistView(
     messages: _messages,
   ),
 );
}

After deploying the above code, the sample will display a default UI with an empty conversation area.

Step 3: Add placeholder to conversation area

We can add a custom placeholder to the conversation area of the AIAssistView widget using the placeholderBuilder property. This placeholder appears when there are no messages in the conversation area.

placeholderBuilder: (BuildContext context) {
 _lightTheme = Theme.of(context).brightness == Brightness.light;
 return Center(
   child: Column(
     mainAxisSize: MainAxisSize.min,
     children: [
       Padding(
         padding: const EdgeInsets.only(bottom: 10.0),
         child: SizedBox.square(
           dimension: 80.0,
           child: Image.asset(
             _lightTheme
               ? 'assets/ai_avatar_light.png'
               : 'assets/ai_avatar_dark.png',
             color: Theme.of(context).colorScheme.primary,
           ),
         ),
       ),
       const Text(
         'Ask AI Anything!',
         style: TextStyle(
           fontSize: 20.0, 
           fontWeight: FontWeight.bold
         ),
       ),
       Padding(
         padding: const EdgeInsets.only(top: 25.0),
         child: Wrap(
           alignment: WrapAlignment.center,
           spacing: 10.0,
           runSpacing: 10.0,
           children: _generateQuickAccessTiles(),
         ),
       ),
     ],
   ),
 );
},

List<Widget> _generateQuickAccessTiles() {
 final List<String> options = [
   'Travel Tips',
   'Recipe Ideas',
   'Fun Fact',
   'Life Hacks',
 ];
 
 return options.map((option) {
   return InkWell(
     onTapDown: (TapDownDetails details) {
       setState(() {
         _messages.add(AssistMessage.request(
           data: option,
           time: DateTime.now(),
           author: AssistMessageAuthor(
             id: user.id,
             name: user.name,
           ),
         ));
         _generativeResponse(option);
       });
     },
     child: DecoratedBox(
       decoration: BoxDecoration(
         border: Border.all(
           width: 2.0,
           color: Theme.of(context).colorScheme.outlineVariant,
         ),
         borderRadius: BorderRadius.circular(10),
       ),
       child: Padding(
         padding: const EdgeInsets.all(10.0),
         child: Text(
           option,
           style: const TextStyle(
             fontWeight: FontWeight.bold,
             fontSize: 14.0,
           ),
         ),
       ),
     ),
   );
 }).toList();
}

Step 4: Add hintText to Composer

The composer property is used to add and customize the text input area in the AI Assist View. It supports properties such as decoration, minLines, maxLines, textStyle, and padding. The composer allows users to enter text and clears the input once the actionButton is pressed.

composer: const AssistComposer(
 decoration: InputDecoration(
   hintText: 'Ask here',
 ),
), 

Step 5: Add action button

To enable the ActionButton, set the onPressed callback to process the input text as a new AssistMessage. When the button is pressed, the entered text is added to the message list along with a generated AI response.

actionButton: AssistActionButton(
 onPressed: (String data) {
   setState(() {
     _messages.add(AssistMessage.request(
       data: data,
       time: DateTime.now(),
       author: AssistMessageAuthor(
         id: user.id,
         name: user.name,
       ),
     ));
     _generativeResponse(data);
   });
 },
),

void _generativeResponse(String data) async {
 final String response = await _fetchAIResponse(data);
 setState(() {
   _messages.add(AssistMessage.response(
     data: response,
     time: DateTime.now(),
     author: AssistMessageAuthor(id: ai.id, name: ai.name),
   ));
 });
}

Future<String> _fetchAIResponse(String data) async {
 await Future.delayed(const Duration(seconds: 2));
 // Integrate an API call to communicate with the AI for real-time responses.
 String response =
     'Please connect to your preferred AI server for real-time queries.';
 return response;
}

This ensures that when the request message is sent by clicking the action button, the response (generative response) is also triggered automatically and added to the message list.

Step 6: Use AssistMessageSettings to customize request and response message settings

We can customize the AI and user message bubbles in the SfAIAssistView widget using the responseMessageSettings and requestMessageSettings properties, both of which accept the AssistMessageSettings type. This allows us to adjust the background color, shape, and text style of the bubbles. We can also control the padding inside the bubbles for a more polished look. Additional customization options include displaying the message timestamp, author avatars, and author names. This ensures a visually appealing and consistent layout for both user and AI-generated messages.

Response message settings:

responseMessageSettings: const AssistMessageSettings(
 showAuthorAvatar: true,
), 

Request message settings:

requestMessageSettings: const AssistMessageSettings(
 showAuthorName: true,
 showTimestamp: true,
 showAuthorAvatar: true,
), 

Output:

View the GitHub sample here

Conclusion

I hope you enjoyed learning about how to get started with Flutter AIAssistView.

You can refer to our Flutter AI AssistView feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Flutter AI AssistView example to understand how to create the AI AssistView widget.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!