diff --git a/Flutter/ai-assistview/action-button.md b/Flutter/ai-assistview/action-button.md index 9d62b9da3..9413771c0 100644 --- a/Flutter/ai-assistview/action-button.md +++ b/Flutter/ai-assistview/action-button.md @@ -17,16 +17,10 @@ The [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/lates 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. -If [`AssistComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/AssistComposer.builder.html) is used, the parameter of onPressed will always be an empty string. - -If [`AssistActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/onPressed.html) is null, the action button will always be disabled. - -If the default composer is disabled, the action button will also be disabled. - -If no composer is added (by specifying the composer as null), the action button will always be enabled. +If the [`AssistComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/AssistComposer.builder.html) is used, the onPressed parameter will always receive an empty string. When the [`onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/onPressed.html) property of AssistActionButton is set to null, the action button remains disabled. Additionally, if the default composer is disabled, the action button will also be disabled. However, if no composer is added by setting the composer property to null, the action button will always remain enabled. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="8" %} final List _messages = []; @@ -54,7 +48,7 @@ If no composer is added (by specifying the composer as null), the action button The [child](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/child.html) property allows you to define a custom widget consisting of one or more interactive elements to serve as action buttons, such as a send button, microphone icon for voice input, file attachment button, or other interactive widgets. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -83,7 +77,7 @@ The [child](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_ It is a callback that is invoked whenever the action button is pressed. Since the assist widget does not rebuild itself to update the newly composed message, it provides the default text from the composer as a parameter. The user can create a message object and include it in the existing [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messages.html) list by rebuilding the assist widget to add the newly composed message to the conversational area. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="22" %} final List _messages = []; @@ -125,7 +119,7 @@ It is a callback that is invoked whenever the action button is pressed. Since th The [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/tooltip.html) text describes the button's action when pressed. It is displayed when the user long-presses on touch devices or hovers the mouse over it on desktop devices. By default, it is set to `null`, so no tooltip is shown. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -162,7 +156,7 @@ The [`hoverColor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/ The [`splashColor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/splashColor.html) property is the splash color of the button's InkWell. The default color is set to `colorScheme.primary.withOpacity(0.86)`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9 10 11 12 13" %} final List _messages = []; @@ -199,7 +193,7 @@ The [`hoverElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/lat The [`highlightElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/highlightElevation.html) property determines the elevation when the button is pressed. Defaults to `0.0`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9 10 11 12" %} final List _messages = []; @@ -229,7 +223,7 @@ The [`highlightElevation`](https://pub.dev/documentation/syncfusion_flutter_chat The [`mouseCursor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/mouseCursor.html) property defines the type of cursor that appears when hovering over the button. It can be set to different values to customize the cursor shape (e.g., [`SystemMouseCursors.click`](https://api.flutter.dev/flutter/services/SystemMouseCursors/click-constant.html), [`SystemMouseCursors.forbidden`](https://api.flutter.dev/flutter/services/SystemMouseCursors/forbidden-constant.html), etc.). If not specified, the default cursor will be used. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -258,7 +252,7 @@ The [`mouseCursor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/shape.html) property sets the shape of the button's border, such as rounded or circular. By default, it is set to `RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0)))`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -294,7 +288,7 @@ The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assis The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/margin.html) property defines the space inside the button between its border and the content. By default, it is set to `EdgeInsetsDirectional.only(start: 8.0)`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -321,7 +315,7 @@ The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assi The [`size`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/size.html) property specifies the width and height of the button. By default, it is set to `Size.square(40.0)`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; diff --git a/Flutter/ai-assistview/ai-assistview-theme.md b/Flutter/ai-assistview/ai-assistview-theme.md index d04612c5f..aaaea9163 100644 --- a/Flutter/ai-assistview/ai-assistview-theme.md +++ b/Flutter/ai-assistview/ai-assistview-theme.md @@ -28,7 +28,7 @@ Import the following library to use the assist theme data: The [`actionButtonForegroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonForegroundColor.html) property is used to specify the color for the default action button icon. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -55,7 +55,7 @@ The [`actionButtonForegroundColor`](https://pub.dev/documentation/syncfusion_flu The [`actionButtonBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonBackgroundColor.html) property is used to specify the background color for the action button in its default state. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -82,7 +82,7 @@ The [`actionButtonBackgroundColor`](https://pub.dev/documentation/syncfusion_flu The [`actionButtonFocusColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonFocusColor.html) property is used to specify the background color for the action button when it is in the focused state. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -109,7 +109,7 @@ The [`actionButtonFocusColor`](https://pub.dev/documentation/syncfusion_flutter_ The [`actionButtonHoverColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonHoverColor.html) property is used to specify the background color for the action button when it is hovered over. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -136,7 +136,7 @@ The [`actionButtonHoverColor`](https://pub.dev/documentation/syncfusion_flutter_ The [`actionButtonSplashColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonSplashColor.html) property is used to specify the color of the ripple effect when the action button is tapped. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -163,7 +163,7 @@ The [`actionButtonSplashColor`](https://pub.dev/documentation/syncfusion_flutter The [`actionButtonDisabledForegroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonDisabledForegroundColor.html) property is used to specify the color of the text or icon on the action button when it is disabled. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -190,7 +190,7 @@ The [`actionButtonDisabledForegroundColor`](https://pub.dev/documentation/syncfu The [`actionButtonDisabledBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonDisabledBackgroundColor.html) property is used to specify the background color of the action button when it is disabled. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -217,7 +217,7 @@ The [`actionButtonDisabledBackgroundColor`](https://pub.dev/documentation/syncfu The [`actionButtonElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonElevation.html) property is used to specify the elevation of the action button in its default state. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -244,7 +244,7 @@ The [`actionButtonElevation`](https://pub.dev/documentation/syncfusion_flutter_c The [`actionButtonFocusElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonFocusElevation.html) property is used to specify the elevation of the action button when it is focused. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -271,7 +271,7 @@ The [`actionButtonFocusElevation`](https://pub.dev/documentation/syncfusion_flut The [`actionButtonHoverElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonHoverElevation.html) property is used to specify the elevation of the action button when it is hovered over. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -298,7 +298,7 @@ The [`actionButtonHoverElevation`](https://pub.dev/documentation/syncfusion_flut The [`actionButtonHighlightElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonHighlightElevation.html) property is used to specify the elevation of the action button when it is highlighted. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -325,7 +325,7 @@ The [`actionButtonHighlightElevation`](https://pub.dev/documentation/syncfusion_ The [`actionButtonDisabledElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonDisabledElevation.html) property is used to specify the elevation of the action button when it is disabled. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -352,7 +352,7 @@ The [`actionButtonDisabledElevation`](https://pub.dev/documentation/syncfusion_f The [`actionButtonMouseCursor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonMouseCursor.html) property is used to specify the type of cursor displayed when hovering over the action button. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -379,7 +379,7 @@ The [`actionButtonMouseCursor`](https://pub.dev/documentation/syncfusion_flutter The [`actionButtonShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/actionButtonShape.html) property is used to specify the shape and border radius of the action button. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -408,7 +408,7 @@ The [`actionButtonShape`](https://pub.dev/documentation/syncfusion_flutter_core/ The [`requestAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestAvatarBackgroundColor.html) property is used to specify the background color of request message avatar. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -435,7 +435,7 @@ The [`requestAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_fl The [`responseAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseAvatarBackgroundColor.html) property is used to specify the background color of response message avatar. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -462,7 +462,7 @@ The [`responseAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_f The [`requestMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestMessageBackgroundColor.html) property is used to specify the background color of contents containing request messages. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -489,7 +489,7 @@ The [`requestMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_f The [`responseMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseMessageBackgroundColor.html) property is used to specify the background color of contents containing response messages. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -516,7 +516,7 @@ The [`responseMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_ The [`editorTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/editorTextStyle.html) property is used to specify the style for text in the message editor. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -547,7 +547,7 @@ The [`editorTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/la The [`requestContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestContentTextStyle.html) property is used to specify the style for text in request message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -578,7 +578,7 @@ The [`requestContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter The [`responseContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseContentTextStyle.html) property is used to specify the style for text in response message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -609,7 +609,7 @@ The [`responseContentTextStyle`](https://pub.dev/documentation/syncfusion_flutte The [`requestPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestPrimaryHeaderTextStyle.html) property is used to specify the style for the primary header text in request message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -640,7 +640,7 @@ The [`requestPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_f The [`responsePrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responsePrimaryHeaderTextStyle.html) property is used to specify the style for the primary header text in response message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -671,7 +671,7 @@ The [`responsePrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_ The [`requestSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestSecondaryHeaderTextStyle.html) property is used to specify the style for the secondary header text in request message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -702,7 +702,7 @@ The [`requestSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion The [`responseSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseSecondaryHeaderTextStyle.html) property is used to specify the style for the secondary header text in response message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -733,7 +733,7 @@ The [`responseSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusio The [`suggestionItemTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionItemTextStyle.html) property is used to specify the text style for response message suggestion items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -788,7 +788,7 @@ The [`suggestionItemTextStyle`](https://pub.dev/documentation/syncfusion_flutter The [`requestMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestMessageShape.html) property is used to specify the shape and border radius of request message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -817,7 +817,7 @@ The [`requestMessageShape`](https://pub.dev/documentation/syncfusion_flutter_cor The [`responseMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseMessageShape.html) property is used to specify the shape and border radius of response message contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -846,7 +846,7 @@ The [`responseMessageShape`](https://pub.dev/documentation/syncfusion_flutter_co The [`suggestionBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionBackgroundColor.html) property is used to specify the background color of response message suggestion contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -873,7 +873,7 @@ The [`suggestionBackgroundColor`](https://pub.dev/documentation/syncfusion_flutt The [`suggestionBackgroundShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionBackgroundShape.html) property is used to specify the background shape of response message suggestion contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -902,7 +902,7 @@ The [`suggestionBackgroundShape`](https://pub.dev/documentation/syncfusion_flutt The [`suggestionItemBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionItemBackgroundColor.html) property is used to specify the background color for response message suggestion items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -942,7 +942,7 @@ The [`suggestionItemBackgroundColor`](https://pub.dev/documentation/syncfusion_f The [`suggestionItemShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/suggestionItemShape.html) property is used to specify the shape for response message suggestion items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -984,7 +984,7 @@ The [`suggestionItemShape`](https://pub.dev/documentation/syncfusion_flutter_cor ); } -{% endhighlight %} +{% endhighlight hl_lines="8" %} {% endtabs %} ## Response toolbar background color @@ -1019,7 +1019,7 @@ The [`responseToolbarBackgroundColor`](https://pub.dev/documentation/syncfusion_ The [`responseToolbarBackgroundShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarBackgroundShape.html) property is used to specify the background shape of response message toolbar contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -1048,7 +1048,7 @@ The [`responseToolbarBackgroundShape`](https://pub.dev/documentation/syncfusion_ The [`responseToolbarItemBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarItemBackgroundColor.html) property is used to specify the background color of response message toolbar items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -1089,7 +1089,7 @@ The [`responseToolbarItemBackgroundColor`](https://pub.dev/documentation/syncfus The [`responseToolbarItemShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarItemShape.html) property is used to specify the shape of response message toolbar items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; diff --git a/Flutter/ai-assistview/composer.md b/Flutter/ai-assistview/composer.md index 66d96e7d1..803d9e0b8 100644 --- a/Flutter/ai-assistview/composer.md +++ b/Flutter/ai-assistview/composer.md @@ -25,7 +25,7 @@ When the `composer` is `null`, no default text field is added to the AI AssistVi The default value for `minLines` is `1`, and the default value for `maxLines` is `6`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9 10" %} final List _messages = []; @@ -49,7 +49,7 @@ The default value for `minLines` is `1`, and the default value for `maxLines` is ### Decoration -The [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/decoration.html) property customizes the visual attributes of the message input field, such as hint text,borders, and internal padding, using an [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html). +The [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/decoration.html) property customizes the visual attributes of the message input field, such as hint text, borders, and internal padding, using an [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html). The `InputDecoration` class enhances the composer by utilizing its properties, such as borders, labels, icons, and styles. @@ -63,14 +63,14 @@ The following are the major features available in [`InputDecoration`](https://ap #### Enabled -The [`enabled`](https://api.flutter.dev/flutter/material/InputDecoration/enabled.html) property defines whether the compose feature is in an enabled or disabled state. By default, it is set to true. If set to false, the compose feature will be disabled, and the default action button will also be disabled. +The [`enabled`](https://api.flutter.dev/flutter/material/InputDecoration/enabled.html) property defines whether the compose feature is in an enabled or disabled state. By default, it is set to `true`. If set to false, the compose feature will be disabled, and the default action button will also be disabled. #### Border The [`border`](https://api.flutter.dev/flutter/material/InputDecoration/border.html) property defines shape of the border that is drawn around the text field. By default, an [`OutlineInputBorder`](https://api.flutter.dev/flutter/material/OutlineInputBorder-class.html) is used. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="10" %} final List _messages = []; @@ -100,7 +100,7 @@ The [`border`](https://api.flutter.dev/flutter/material/InputDecoration/border.h The [`contentPadding`](https://api.flutter.dev/flutter/material/InputDecoration/contentPadding.html) property defines the padding surrounding the text added inside the text field. By default, the `padding` is set to `16` horizontally and `18` vertically. {% tabs %} -{% highlight dart hl_lines="28" %} +{% highlight dart hl_lines="11" %} final List _messages = []; @@ -129,7 +129,7 @@ The [`contentPadding`](https://api.flutter.dev/flutter/material/InputDecoration/ The [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property sets the placeholder text for the text field. By default, it is set to `null`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11" %} final List _messages = []; @@ -157,7 +157,7 @@ The [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintTe The [`hintStyle`](https://api.flutter.dev/flutter/material/InputDecoration/hintStyle.html) property refers to the text style of the hint text. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11" %} final List _messages = []; @@ -190,7 +190,7 @@ The [`hintStyle`](https://api.flutter.dev/flutter/material/InputDecoration/hintS The [`prefixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/prefixIcon.html) and [`suffixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/suffixIcon.html) properties are used to add icons at the beginning and end of the text field, respectively. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="10 14" %} final List _messages = []; @@ -227,7 +227,7 @@ The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assi By default, the top `margin` is set to `16`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -255,7 +255,7 @@ The [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/a The specified text style will be merged with the [`bodyMedium`](https://api.flutter.dev/flutter/material/TextTheme/bodyMedium.html) and `editorTextStyle` text styles. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="9" %} final List _messages = []; @@ -285,7 +285,7 @@ The [AssistComposer.builder](https://pub.dev/documentation/syncfusion_flutter_ch If [`AssistComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/builder.html) is used, the action button will always be enabled. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="15" %} final List _messages = []; late TextEditingController _controller; diff --git a/Flutter/ai-assistview/conversation-area.md b/Flutter/ai-assistview/conversation-area.md index afe053d64..14bb01baf 100644 --- a/Flutter/ai-assistview/conversation-area.md +++ b/Flutter/ai-assistview/conversation-area.md @@ -20,7 +20,7 @@ The AI AssistView displays the content of user requests and AI responses. Each m Customize the content of [request](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/AssistMessage.request.html) messages by changing the `background color`, `background shape`, and other features based on the message, index, or specific conditions. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="29" %} final List _messages = []; @@ -70,7 +70,7 @@ Customize the content of [request](https://pub.dev/documentation/syncfusion_flut Customize the content of [response](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/AssistMessage.response.html) messages by changing the `background color`, `background shape`, and other features based on the message, index, or specific conditions. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="29" %} final List _messages = []; @@ -121,7 +121,7 @@ Customize the content of [response](https://pub.dev/documentation/syncfusion_flu 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. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines=" 38 39 42 43" %} final List _messages = []; @@ -181,7 +181,7 @@ The header displays the username of the message's author along with the time sta Showcases additional functionalities and information, including feedback options, AI model details, and more. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="37" %} final List _messages = []; @@ -233,10 +233,10 @@ Showcases additional functionalities and information, including feedback options ### Avatar -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. +The message author's [avatar](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessageAuthor/avatar.html) 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. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="12" %} final List _messages = []; @@ -293,10 +293,10 @@ The message author's avatar displays either an image or the initials of their na ### Content area -Customize the area where message content is displayed by changing its `background color`, `shape`, and functionalities based on the user or other specific conditions. +Customize the area where message content is displayed by changing its `background color`, `shape`, and functionalities based on the user or other specific conditions using the [requestMessageSettings](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/requestMessageSettings.html) and [responseMessageSettings](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/responseMessageSettings.html) properties. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="29 35" %} final List _messages = []; @@ -352,7 +352,7 @@ Customize the area where message content is displayed by changing its `backgroun Provide a list of response [suggestions](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/suggestions.html). When the user selects one, it is considered a new request message. Additionally, the layout, background colors, and other elements of the suggestions can be customized. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="8" %} final List _messages = []; @@ -419,10 +419,10 @@ Provide a list of response [suggestions](https://pub.dev/documentation/syncfusio ### Loading indicator -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. +Indicates that the AI service's response is in progress after a request has been submitted. By default, the [response indicator](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/responseLoadingBuilder.html) is a shimmer effect that is displayed until the response is received. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="29" %} final List _messages = []; @@ -469,7 +469,7 @@ Indicates that the AI service's response is in progress after a request has been Append a [toolbar](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/toolbarItems.html) to response messages that provides options to perform various actions, such as rating the response, sharing it, copying it, and more. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="8" %} final List _messages = []; diff --git a/Flutter/ai-assistview/getting-started.md b/Flutter/ai-assistview/getting-started.md index b4da77daf..267487bcf 100644 --- a/Flutter/ai-assistview/getting-started.md +++ b/Flutter/ai-assistview/getting-started.md @@ -59,7 +59,7 @@ Import the library using the code provided below. Add an AI AssistView widget with the required [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messages.html) property. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="5" %} final List _messages = []; @@ -77,12 +77,12 @@ Add an AI AssistView widget with the required [`messages`](https://pub.dev/docum ![Default ai-assistview](images/getting-started/initialize-ai-assistview.png) -## Add placeholder to composer +## Add composer -To add a placeholder to the [`AssistComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer-class.html), use the [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/decoration.html) property, which is of type [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html). The placeholder can be added using the [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property. +To add the [`AssistComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer-class.html) to the SfAIAssistView widget, use the composer property. The composer can be customized using the [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/decoration.html) property, which is of type [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html). The hint text in the composer can be added using the [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property within InputDecoration. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="8" %} final List _messages = []; @@ -110,7 +110,7 @@ To add a placeholder to the [`AssistComposer`](https://pub.dev/documentation/syn By default, conversation messages are empty. It’s a good idea to show a message or design to indicate this. You can use the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/placeholderBuilder.html) property to create a custom widget that appears in the conversation area, which can be removed once messages start coming in. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="19" %} final List _messages = []; @@ -167,7 +167,7 @@ It represents the send button, which was not included by default. To add it, cre When the send button is clicked, the [`AssistActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/onPressed.html) callback is invoked, which rebuilds the AI AssistView widget with the newly composed message. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="106" %} final List _messages = []; diff --git a/Flutter/ai-assistview/placeholder.md b/Flutter/ai-assistview/placeholder.md index f59579668..cee69866f 100644 --- a/Flutter/ai-assistview/placeholder.md +++ b/Flutter/ai-assistview/placeholder.md @@ -9,14 +9,14 @@ documentation: ug # Placeholder in Flutter AI AssistView (SfAIAssistView) -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. +Define a custom [`placeholder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/placeholderBuilder.html) 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. ## Hide on message 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. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="110" %} final List _messages = []; @@ -139,10 +139,10 @@ Configure the placeholder to become visible when there are no messages in the AI ## Scroll with message -The placeholder can scroll along with messages. +The placeholder can [`scroll`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistPlaceholderBehavior.html#scrollWithMessage) along with messages. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="110" %} final List _messages = []; diff --git a/Flutter/chat/action-button.md b/Flutter/chat/action-button.md index 702768bd0..258376384 100644 --- a/Flutter/chat/action-button.md +++ b/Flutter/chat/action-button.md @@ -17,16 +17,10 @@ The [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/lates When the send button is clicked, it invokes the [`ChatActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/onPressed.html) callback with the text composed in the default composer (text field), which rebuilds the Chat widget to add the new message to the conversation area. -If [`ChatComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/builder.html) is used, the parameter of onPressed will always be an empty string. - -If [`ChatActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/onPressed.html) is null, the action button will always be disabled. - -If the default composer is disabled, the action button will also be disabled. - -If no composer is added (by specifying the composer as null), the action button will always be enabled. +If the [`ChatComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/builder.html) is used, the onPressed parameter will always receive an empty string. When the [`onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/onPressed.html) property of ChatActionButton is set to null, the action button remains disabled. Additionally, if the default composer is disabled, the action button will also be disabled. However, if no composer is added by setting the composer property to null, the action button will always remain enabled. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="26" %} @override Widget build(BuildContext context) { @@ -84,7 +78,7 @@ If no composer is added (by specifying the composer as null), the action button The [`child`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/child.html) property allows you to specify one or more interactive widgets as the content of an action button. This is useful for adding a microphone icon for voice input, attaching files to share documents or images, and more. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="27" %} @override Widget build(BuildContext context) { @@ -132,7 +126,7 @@ The [`child`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ It is a callback that is invoked whenever the action button is pressed. Since the chat widget does not rebuild itself to update the newly composed message, it provides the default text from the composer as a parameter. The user can create a message object and include it in the existing [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messages.html) list by rebuilding the chat widget to add the newly composed message to the conversational area. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="10" %} // Load if there are existing messages. final List _messages = []; @@ -171,7 +165,7 @@ It is a callback that is invoked whenever the action button is pressed. Since th The [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/tooltip.html) text describes the button's action when pressed. It is displayed when the user long-presses on touch devices or hovers the mouse over it on desktop devices. By default, it is set to null, so no tooltip is shown. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="26" %} @override Widget build(BuildContext context) { @@ -227,7 +221,7 @@ The [`hoverColor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/ The [`splashColor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/splashColor.html) property is the splash color of the button's InkWell. The default color is set to `colorScheme.primary.withOpacity(0.86)`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11 12 13 14 15" %} // Load if there are existing messages. final List _messages = []; @@ -266,7 +260,7 @@ The [`hoverElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/lat The [`highlightElevation`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/highlightElevation.html) property determines the elevation when the button is pressed. Defaults to `0.0`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11 12 13 14" %} // Load if there are existing messages. final List _messages = []; @@ -298,7 +292,7 @@ The [`highlightElevation`](https://pub.dev/documentation/syncfusion_flutter_chat The [`mouseCursor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/mouseCursor.html) property defines the type of cursor that appears when hovering over the button. It can be set to different values to customize the cursor shape (e.g., [`SystemMouseCursors.click`](https://api.flutter.dev/flutter/services/SystemMouseCursors/click-constant.html), [`SystemMouseCursors.forbidden`](https://api.flutter.dev/flutter/services/SystemMouseCursors/forbidden-constant.html), etc.). If not specified, the default cursor will be used. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="25" %} @override Widget build(BuildContext context) { @@ -343,7 +337,7 @@ The [`mouseCursor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/shape.html) property sets the shape of the button's border, such as rounded or circular. By default, it is set to `RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0)))`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="25" %} @override Widget build(BuildContext context) { @@ -395,7 +389,7 @@ The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/margin.html) property defines the space inside the button between its border and the content. By default, it is set to `EdgeInsetsDirectional.only(start: 8.0)`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11" %} // Load if there are existing messages. final List _messages = []; @@ -424,7 +418,7 @@ The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat The [`size`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/size.html) property specifies the width and height of the button. By default, it is set to `Size.square(40.0)`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11" %} // Load if there are existing messages. final List _messages = []; diff --git a/Flutter/chat/chat-theme.md b/Flutter/chat/chat-theme.md index 35af2fa7f..681a9196e 100644 --- a/Flutter/chat/chat-theme.md +++ b/Flutter/chat/chat-theme.md @@ -28,7 +28,7 @@ Import the following library to use the chat theme data: The [`actionButtonForegroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonForegroundColor.html) property is used to specify the color for the default action button icon. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -56,7 +56,7 @@ The [`actionButtonForegroundColor`](https://pub.dev/documentation/syncfusion_flu The [`actionButtonBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonBackgroundColor.html) property is used to specify the background color for the action button in its default state. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -84,7 +84,7 @@ The [`actionButtonBackgroundColor`](https://pub.dev/documentation/syncfusion_flu The [`actionButtonFocusColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonFocusColor.html) property is used to specify the background color for the action button when it is in the focused state. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -112,7 +112,7 @@ The [`actionButtonFocusColor`](https://pub.dev/documentation/syncfusion_flutter_ The [`actionButtonHoverColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonHoverColor.html) property is used to specify the background color for the action button when it is hovered over. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -140,7 +140,7 @@ The [`actionButtonHoverColor`](https://pub.dev/documentation/syncfusion_flutter_ The [`actionButtonSplashColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonSplashColor.html) property is used to specify the color of the ripple effect when the action button is tapped. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -168,7 +168,7 @@ The [`actionButtonSplashColor`](https://pub.dev/documentation/syncfusion_flutter The [`actionButtonDisabledForegroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonDisabledForegroundColor.html) property is used to specify the color of the text or icon on the action button when it is disabled. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -196,7 +196,7 @@ The [`actionButtonDisabledForegroundColor`](https://pub.dev/documentation/syncfu The [`actionButtonDisabledBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonDisabledBackgroundColor.html) property is used to specify the background color of the action button when it is disabled. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -224,7 +224,7 @@ The [`actionButtonDisabledBackgroundColor`](https://pub.dev/documentation/syncfu The [`actionButtonElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonElevation.html) property is used to specify the elevation of the action button in its default state. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -252,7 +252,7 @@ The [`actionButtonElevation`](https://pub.dev/documentation/syncfusion_flutter_c The [`actionButtonFocusElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonFocusElevation.html) property is used to specify the elevation of the action button when it is focused. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -280,7 +280,7 @@ The [`actionButtonFocusElevation`](https://pub.dev/documentation/syncfusion_flut The [`actionButtonHoverElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonHoverElevation.html) property is used to specify the elevation of the action button when it is hovered over. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -308,7 +308,7 @@ The [`actionButtonHoverElevation`](https://pub.dev/documentation/syncfusion_flut The [`actionButtonHighlightElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonHighlightElevation.html) property is used to specify the elevation of the action button when it is highlighted. {% tabs %} -{% highlight Dart %} +{% highlight Darthl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -336,7 +336,7 @@ The [`actionButtonHighlightElevation`](https://pub.dev/documentation/syncfusion_ The [`actionButtonDisabledElevation`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonDisabledElevation.html) property is used to specify the elevation of the action button when it is disabled. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -364,7 +364,7 @@ The [`actionButtonDisabledElevation`](https://pub.dev/documentation/syncfusion_f The [`actionButtonMouseCursor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonMouseCursor.html) property is used to specify the type of cursor displayed when hovering over the action button. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -392,7 +392,7 @@ The [`actionButtonMouseCursor`](https://pub.dev/documentation/syncfusion_flutter The [`actionButtonShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/actionButtonShape.html) property is used to specify the shape and border radius of the action button. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -419,10 +419,10 @@ The [`actionButtonShape`](https://pub.dev/documentation/syncfusion_flutter_core/ ## Outgoing avatar background color -The [`outgoingAvatarBackgroundColor`] property is used to specify the background color of outgoing message avatar. +The [`outgoingAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingAvatarBackgroundColor.html) property is used to specify the background color of outgoing message avatar. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -446,10 +446,10 @@ The [`outgoingAvatarBackgroundColor`] property is used to specify the background ## Incoming avatar background color -The [`incomingAvatarBackgroundColor`] property is used to specify the background color of incoming message avatar. +The [`incomingAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingAvatarBackgroundColor.html) property is used to specify the background color of incoming message avatar. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -476,7 +476,7 @@ The [`incomingAvatarBackgroundColor`] property is used to specify the background The [`outgoingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingMessageBackgroundColor.html) property is used to specify the background color of bubbles containing outgoing messages. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -504,7 +504,7 @@ The [`outgoingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_ The [`incomingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingMessageBackgroundColor.html) property is used to specify the background color of bubbles containing incoming messages. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -532,7 +532,7 @@ The [`incomingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_ The [`editorTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/editorTextStyle.html) property is used to specify the style for text in the message editor. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -564,7 +564,7 @@ The [`editorTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/la The [`outgoingContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingContentTextStyle.html) property is used to specify the style for text in outgoing message bubbles. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -596,7 +596,7 @@ The [`outgoingContentTextStyle`](https://pub.dev/documentation/syncfusion_flutte The [`incomingContentTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingContentTextStyle.html) property is used to specify the style for text in incoming message bubbles {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -628,7 +628,7 @@ The [`incomingContentTextStyle`](https://pub.dev/documentation/syncfusion_flutte The [`outgoingPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingPrimaryHeaderTextStyle.html) property is used to specify the style for the primary header text in outgoing message bubbles. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -660,7 +660,7 @@ The [`outgoingPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_ The [`incomingPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingPrimaryHeaderTextStyle.html) property is used to specify the style for the primary header text in incoming message bubbles. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -692,7 +692,7 @@ The [`incomingPrimaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_ The [`outgoingSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingSecondaryHeaderTextStyle.html) property is used to specify the style for the secondary header text in outgoing message bubbles. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -724,7 +724,7 @@ The [`outgoingSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusio The [`incomingSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingSecondaryHeaderTextStyle.html) property is used to specify the style for the secondary header text in incoming message bubbles. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -753,10 +753,10 @@ The [`incomingSecondaryHeaderTextStyle`](https://pub.dev/documentation/syncfusio ## Suggestion item text style -The [`suggestionItemTextStyle`] property is used to specify the text style for both outgoing and incoming message suggestion items. +The [`suggestionItemTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionItemTextStyle.html) property is used to specify the text style for both outgoing and incoming message suggestion items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -811,7 +811,7 @@ The [`suggestionItemTextStyle`] property is used to specify the text style for b The [`outgoingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingMessageShape.html) property is used to specify the shape and border radius of outgoing message bubbles. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -841,7 +841,7 @@ The [`outgoingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_co The [`incomingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingMessageShape.html) property is used to specify the shape and border radius of incoming message content. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -868,10 +868,10 @@ The [`incomingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_co ## Suggestion background color -The [`suggestionBackgroundColor`] property is used to specify the background color of both outgoing and incoming message suggestion bubble. +The [`suggestionBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionBackgroundColor.html) property is used to specify the background color of both outgoing and incoming message suggestion bubble. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -895,10 +895,10 @@ The [`suggestionBackgroundColor`] property is used to specify the background col ## Suggestion background shape -The [`suggestionBackgroundShape`] property is used to specify the background shape of both outgoing and incoming message suggestion bubble. +The [`suggestionBackgroundShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionBackgroundShape.html) property is used to specify the background shape of both outgoing and incoming message suggestion bubble. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -924,10 +924,10 @@ The [`suggestionBackgroundShape`] property is used to specify the background sha ## Suggestion item background color -The [`suggestionItemBackgroundColor`] property is used to specify the background color for both outgoing and incoming message suggestion items. +The [`suggestionItemBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionItemBackgroundColor.html) property is used to specify the background color for both outgoing and incoming message suggestion items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -964,10 +964,10 @@ The [`suggestionItemBackgroundColor`] property is used to specify the background ## Suggestion item shape -The [`suggestionItemShape`] property is used to specify the shape for both outgoing and incoming message suggestion items. +The [`suggestionItemShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/suggestionItemShape.html) property is used to specify the shape for both outgoing and incoming message suggestion items. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; diff --git a/Flutter/chat/composer.md b/Flutter/chat/composer.md index 2e1641881..344f3c072 100644 --- a/Flutter/chat/composer.md +++ b/Flutter/chat/composer.md @@ -25,9 +25,9 @@ When the composer is null, no default text field is added to the chat widget. The default value for `minLines` is `1`, and the default value for `maxLines` is `6`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11 12" %} - // Load if there are existing messages. + // Load if there are existing messages. final List _messages = []; @override diff --git a/Flutter/chat/message-content.md b/Flutter/chat/conversation-area.md similarity index 67% rename from Flutter/chat/message-content.md rename to Flutter/chat/conversation-area.md index 69d35b454..ff9c6a58b 100644 --- a/Flutter/chat/message-content.md +++ b/Flutter/chat/conversation-area.md @@ -22,7 +22,7 @@ Each [`ChatMessage`](https://pub.dev/documentation/syncfusion_flutter_chat/lates * [`author`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage/author.html) - This includes details about the author of the message, such as their name and user avatar or profile image. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="5" %} @override Widget build(BuildContext context) { @@ -69,7 +69,7 @@ Additionally the message can be extended to include more detailed information ab In the following example, included the user's display name additionally in the existing message. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="40" %} @override void initState() { @@ -154,7 +154,7 @@ In the following example, included the user's display name additionally in the e The [`Suggestions`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage/suggestions.html) property allows you to add a list of suggestion items to a message in the message list. The selected suggestion item can be displayed in the chat interface as either an incoming or outgoing message, depending on the user who selected it. The suggestion layout, background color, and other properties can be customized. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="21" %} @override Widget build(BuildContext context) { @@ -200,7 +200,7 @@ The [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/lates The name may be repeated within the group, but the ID is unique to each user. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="34" %} @override Widget build(BuildContext context) { @@ -264,7 +264,7 @@ The [`showTimestamp`](https://pub.dev/documentation/syncfusion_flutter_chat/late The [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/timestampFormat.html) property is used to specify the date format for the sending time (timestamp). The default value is DateFormat('d/M/y : hh:mm a'). {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="33 36" %} @override Widget build(BuildContext context) { @@ -317,7 +317,7 @@ The [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/la The [`showAuthorAvatar`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/showAuthorAvatar.html) property is used to show or hide the author's image for the message. Defaults to `true`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="33 36" %} @override Widget build(BuildContext context) { @@ -378,7 +378,7 @@ The [`headerTextStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/la The [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/backgroundColor.html) property is used to specify the background color of the content area within the message. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="33 36" %} @override Widget build(BuildContext context) { @@ -431,7 +431,7 @@ The [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_chat/la The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/shape.html) property is used to define the shape of the content area of the message, such as rounded or custom shapes. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="33 38" %} @override Widget build(BuildContext context) { @@ -487,30 +487,363 @@ The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ The [`widthFactor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/widthFactor.html) property is used to define the width factor of the message relative to available width. The width value should be between 0 and 1. Default value is `0.8`. +{% tabs %} +{% highlight dart hl_lines="33 36" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + widthFactor: 0.9, + ), + outgoingMessageSettings: const ChatMessageSettings( + widthFactor: 0.7, + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ### Avatar size The [`avatarSize`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/avatarSize.html) property is used to specify the size of the author's avatar in the message. Defaults to `Size.square(32.0)`. +{% tabs %} +{% highlight dart hl_lines="33 36" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + avatarSize: const Size.square(35.0), + ), + outgoingMessageSettings: const ChatMessageSettings( + avatarSize: const Size.square(35.0), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ### Margin The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/margin.html) property is used to define the space inside the message between the border and content. Defaults to `EdgeInsets.all(2.0)`. +{% tabs %} +{% highlight dart hl_lines="33 36" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + margin: const EdgeInsets.all(4.0), + ), + outgoingMessageSettings: const ChatMessageSettings( + margin: const EdgeInsets.all(4.0), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ### Padding The [`padding`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/padding.html) property is used to specify the padding within the content area of the message, controlling spacing around the text. Defaults to `EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)`. +{% tabs %} +{% highlight dart hl_lines="33 37" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + padding: + const EdgeInsets.symmetric(horizontal: 18.0, vertical: 10.0), + ), + outgoingMessageSettings: const ChatMessageSettings( + padding: + const EdgeInsets.symmetric(horizontal: 18.0, vertical: 10.0), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ### Avatar padding The [`avatarPadding`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/avatarPadding.html) property is used to define the padding around the author's avatar within the message. +{% tabs %} +{% highlight dart hl_lines="33 36" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + avatarPadding: const EdgeInsets.all(4.0), + ), + outgoingMessageSettings: const ChatMessageSettings( + avatarPadding: const EdgeInsets.all(4.0), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ### Header padding The [`headerPadding`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/headerPadding.html) property is used to specify the padding around the header section of the message, including the username and timestamp. Defaults to `EdgeInsetsDirectional.only(top: 14.0, bottom: 4.0)`. +{% tabs %} +{% highlight dart hl_lines="33 37" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + headerPadding: + const EdgeInsetsDirectional.only(top: 14.0, bottom: 4.0), + ), + outgoingMessageSettings: const ChatMessageSettings( + headerPadding: + const EdgeInsetsDirectional.only(top: 14.0, bottom: 4.0), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + ### Footer padding The [`footerPadding`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/footerPadding.html) property is used to define the padding around the footer section of the message. Defaults to `EdgeInsetsDirectional.only(top: 4.0)`. +{% tabs %} +{% highlight dart hl_lines="33 36" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfChat( + messages: [ + ChatMessage( + text: 'Hi! How’s your day?', + time: DateTime(2024, 08, 07, 9, 0), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ChatMessage( + text: 'Good! Just relaxing.', + time: DateTime(2024, 08, 07, 9, 5), + author: const ChatAuthor( + id: '123-002', + name: 'Jane Smith', + ), + ), + ChatMessage( + text: 'Any plans later?', + time: DateTime(2024, 08, 07, 9, 10), + author: const ChatAuthor( + id: '123-001', + name: 'John Doe', + ), + ), + ], + outgoingUser: '123-001', + incomingMessageSettings: const ChatMessageSettings( + footerPadding: const EdgeInsetsDirectional.only(top: 4.0), + ), + outgoingMessageSettings: const ChatMessageSettings( + footerPadding: const EdgeInsetsDirectional.only(top: 4.0), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + >You can refer to our [Flutter Chat](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Chat example](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. #### See Also diff --git a/Flutter/chat/getting-started.md b/Flutter/chat/getting-started.md index 5ed54f71f..6b532a036 100644 --- a/Flutter/chat/getting-started.md +++ b/Flutter/chat/getting-started.md @@ -59,7 +59,7 @@ Import the library using the code provided below. Add a chat widget with the necessary properties, such as [`messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messages.html) and [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingUser.html). {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="5 31" %} @override Widget build(BuildContext context) { @@ -101,12 +101,12 @@ Add a chat widget with the necessary properties, such as [`messages`](https://pu ![Default chat](images/getting-started/initialize-chat.png) -## Add placeholder to composer +## Add composer -To add a placeholder to the [`ChatComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer-class.html), use the [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/decoration.html) property, which is of type InputDecoration. The placeholder can be added using the [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property. +To add the [`ChatComposer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer-class.html) to the SfChat widget, use the composer property. The composer can be customized using the [`decoration`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/decoration.html) property, which is of type [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html). The hint text in the composer can be added using the [`hintText`](https://api.flutter.dev/flutter/material/InputDecoration/hintText.html) property within InputDecoration. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="32" %} @override Widget build(BuildContext context) { @@ -158,7 +158,7 @@ To add a placeholder to the [`ChatComposer`](https://pub.dev/documentation/syncf By default, conversation messages are empty. It’s a good idea to show a message or design to indicate this. You can use the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/placeholderBuilder.html) property to create a custom widget that appears in the conversation area, which can be removed once messages start coming in. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="10" %} // Load if there are existing messages. final List _messages = []; @@ -196,7 +196,7 @@ It represents the send button, which was not included by default. To add it, cre When the send button is clicked, the [`ChatActionButton.onPressed`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/onPressed.html) callback is invoked, which rebuilds the chat widget with the newly composed message. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="38" %} @override void initState() { diff --git a/Flutter/chat/placeholder.md b/Flutter/chat/placeholder.md index b649006b9..9efafcf32 100644 --- a/Flutter/chat/placeholder.md +++ b/Flutter/chat/placeholder.md @@ -14,7 +14,7 @@ The [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat It will be displayed when there are no messages in the conversions and will be removed when messages start being added. {% tabs %} -{% highlight Dart %} +{% highlight dart hl_lines="10" %} // Load if there are existing messages. final List _messages = []; @@ -68,4 +68,4 @@ It will be displayed when there are no messages in the conversions and will be r ![Chat composer support](images/placeholder/placeholder-chat.gif) ->You can refer to our [`Flutter Chat`](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter Chat example`](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. \ No newline at end of file +>You can refer to our [`Flutter Chat`](https://www.syncfusion.com/flutter-widgets/flutter-chat) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter Chat example`](https://flutter.syncfusion.com/#/chat/getting-started) which demonstrates conversations between two or more users in a fully customizable layout and shows how to easily configure the chat with built-in support for creating stunning visual effects. diff --git a/flutter-toc.html b/flutter-toc.html index 44daca07e..913e96a0a 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -155,8 +155,8 @@
  • Getting Started
  • Placeholder
  • Composer
    • -
  • Message Content
    • -
  • Action Button
    • +
  • Action Button
    • +
  • Conversation Area
  • Theme