diff --git a/Flutter/Release-notes/v29.1.35.md b/Flutter/Release-notes/v29.1.35.md new file mode 100644 index 000000000..f2d02c97d --- /dev/null +++ b/Flutter/Release-notes/v29.1.35.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Flutter Weekly Nuget Release Release Notes +description: Essential Studio for Flutter Weekly Nuget Release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="April 01, 2025" version="v29.1.35" %} + +{% directory path: _includes/release-notes/v29.1.35 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/Flutter/Release-notes/v29.1.37.md b/Flutter/Release-notes/v29.1.37.md new file mode 100644 index 000000000..38565fee4 --- /dev/null +++ b/Flutter/Release-notes/v29.1.37.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Flutter Weekly Nuget Release Release Notes +description: Essential Studio for Flutter Weekly Nuget Release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="April 08, 2025" version="v29.1.37" %} + +{% directory path: _includes/release-notes/v29.1.37 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/Flutter/Release-notes/v29.1.38.md b/Flutter/Release-notes/v29.1.38.md new file mode 100644 index 000000000..c8f05adf8 --- /dev/null +++ b/Flutter/Release-notes/v29.1.38.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Flutter Weekly Nuget Release Release Notes +description: Essential Studio for Flutter Weekly Nuget Release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="April 15, 2025" version="v29.1.38" %} + +{% directory path: _includes/release-notes/v29.1.38 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/Flutter/Release-notes/v29.1.39.md b/Flutter/Release-notes/v29.1.39.md new file mode 100644 index 000000000..f848a46f9 --- /dev/null +++ b/Flutter/Release-notes/v29.1.39.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for Flutter Weekly Nuget Release Release Notes +description: Essential Studio for Flutter Weekly Nuget Release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="April 22, 2025" version="v29.1.39" %} + +{% directory path: _includes/release-notes/v29.1.39 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/Flutter/Release-notes/v29.1.40.md b/Flutter/Release-notes/v29.1.40.md new file mode 100644 index 000000000..430149d51 --- /dev/null +++ b/Flutter/Release-notes/v29.1.40.md @@ -0,0 +1,46 @@ +--- +title: Essential Studio for Flutter Weekly Nuget Release Release Notes +description: Essential Studio for Flutter Weekly Nuget Release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="April 29, 2025" version="v29.1.40" passed="175850" failed="0" %} + +{% directory path: _includes/release-notes/v29.1.40 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| SfAIAssistView | 171 | 171 | 0 | All Passed | +| SfBarcodeGenerator | 522 | 522 | 0 | All Passed | +| SfCalendar | 1424 | 1424 | 0 | All Passed | +| SfCartesianChart | 15472 | 15472 | 0 | All Passed | +| SfChat | 59 | 59 | 0 | All Passed | +| SfCircularChart | 544 | 544 | 0 | All Passed | +| SfDataGrid | 5739 | 5739 | 0 | All Passed | +| SfDateRangePicker | 635 | 635 | 0 | All Passed | +| SfFunnelChart | 224 | 224 | 0 | All Passed | +| SfLinearGauge | 1293 | 1293 | 0 | All Passed | +| SfMaps | 427 | 427 | 0 | All Passed | +| SfPyramidChart | 223 | 223 | 0 | All Passed | +| SfRadialGauge | 3124 | 3124 | 0 | All Passed | +| SfRangeSelector | 331 | 331 | 0 | All Passed | +| SfRangeSlider | 583 | 583 | 0 | All Passed | +| SfSlider | 729 | 729 | 0 | All Passed | +| SfSparkAreaChart | 130 | 130 | 0 | All Passed | +| SfSparkBarChart | 90 | 90 | 0 | All Passed | +| SfSparkLineChart | 128 | 128 | 0 | All Passed | +| SfSparkWinLossChart | 80 | 80 | 0 | All Passed | +| SfTreemap | 198 | 198 | 0 | All Passed | +| DocIO | 34241 | 34241 | 0 | All Passed | +| PDF | 11811 | 11811 | 0 | All Passed | +| Presentation | 54238 | 54238 | 0 | All Passed | +| XlsIO | 43434 | 43434 | 0 | All Passed | \ No newline at end of file diff --git a/Flutter/Release-notes/v29.1.41.md b/Flutter/Release-notes/v29.1.41.md new file mode 100644 index 000000000..f19e3656d --- /dev/null +++ b/Flutter/Release-notes/v29.1.41.md @@ -0,0 +1,46 @@ +--- +title: Essential Studio for Flutter Weekly Nuget Release Release Notes +description: Essential Studio for Flutter Weekly Nuget Release Release Notes +platform: flutter +documentation: ug +--- + +# Essential Studio for Flutter Release Notes + +{% include release-info.html date="May 06, 2025" version="v29.1.41" passed="130663" failed="0" %} + +{% directory path: _includes/release-notes/v29.1.41 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| SfAIAssistView | 171 | 171 | 0 | All Passed | +| SfBarcodeGenerator | 522 | 522 | 0 | All Passed | +| SfCalendar | 1424 | 1424 | 0 | All Passed | +| SfCartesianChart | 15472 | 15472 | 0 | All Passed | +| SfChat | 59 | 59 | 0 | All Passed | +| SfCircularChart | 544 | 544 | 0 | All Passed | +| SfDataGrid | 5739 | 5739 | 0 | All Passed | +| SfDateRangePicker | 635 | 635 | 0 | All Passed | +| SfFunnelChart | 224 | 224 | 0 | All Passed | +| SfLinearGauge | 1293 | 1293 | 0 | All Passed | +| SfMaps | 427 | 427 | 0 | All Passed | +| SfPyramidChart | 223 | 223 | 0 | All Passed | +| SfRadialGauge | 3124 | 3124 | 0 | All Passed | +| SfRangeSelector | 331 | 331 | 0 | All Passed | +| SfRangeSlider | 583 | 583 | 0 | All Passed | +| SfSlider | 729 | 729 | 0 | All Passed | +| SfSparkAreaChart | 130 | 130 | 0 | All Passed | +| SfSparkBarChart | 90 | 90 | 0 | All Passed | +| SfSparkLineChart | 128 | 128 | 0 | All Passed | +| SfSparkWinLossChart | 80 | 80 | 0 | All Passed | +| SfTreemap | 198 | 198 | 0 | All Passed | +| DocIO | 15376 | 15376 | 0 | All Passed | +| PDF | 11853 | 11853 | 0 | All Passed | +| Presentation | 54238 | 54238 | 0 | All Passed | +| XlsIO | 17070 | 17070 | 0 | All Passed | \ No newline at end of file diff --git a/Flutter/ai-assistview/action-button.md b/Flutter/ai-assistview/action-button.md index a747a4f8a..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 = []; @@ -122,10 +116,10 @@ It is a callback that is invoked whenever the action button is pressed. Since th ### Tooltip -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. +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 = []; @@ -291,10 +285,10 @@ The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assis ### Margin -The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistActionButton/padding.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)`. +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 0cf75cda3..99fc0183d 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 = []; @@ -459,10 +459,10 @@ The [`responseAvatarBackgroundColor`](https://pub.dev/documentation/syncfusion_f ## Request message background color -The [`requestMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestBubbleContentBackgroundColor.html) property is used to specify the background color of contents containing request messages. +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 = []; @@ -486,10 +486,10 @@ The [`requestMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_f ## Response message background color -The [`responseMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseBubbleContentBackgroundColor.html) property is used to specify the background color of contents containing response messages. +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 = []; @@ -785,10 +785,10 @@ The [`suggestionItemTextStyle`](https://pub.dev/documentation/syncfusion_flutter ## Request message shape -The [`requestMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/requestBubbleContentShape.html) property is used to specify the shape and border radius of request message contents. +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 = []; @@ -814,10 +814,10 @@ The [`requestMessageShape`](https://pub.dev/documentation/syncfusion_flutter_cor ## Response message shape -The [`responseMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseBubbleContentShape.html) property is used to specify the shape and border radius of response message contents. +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 @@ -992,7 +992,7 @@ The [`suggestionItemShape`](https://pub.dev/documentation/syncfusion_flutter_cor The [`responseToolbarBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewThemeData/responseToolbarBackgroundColor.html) property is used to specify the background color of response message toolbar contents. {% tabs %} -{% highlight Dart %} +{% highlight Dart hl_lines="8" %} // Load if there are existing messages. final List _messages = []; @@ -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 c81c92415..e5e2579a9 100644 --- a/Flutter/ai-assistview/composer.md +++ b/Flutter/ai-assistview/composer.md @@ -15,17 +15,17 @@ This section explains the customization options available in [`AssistComposer`]( The default [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/composer.html) 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. -When the composer is null, no default text field is added to the AI AssistView widget. +When the `composer` is `null`, no default text field is added to the AI AssistView widget. ### Minimum and maximum lines * [`minLines`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/minLines.html) specifies the minimum number of lines in the text span, which affects the height of the text field. * [`maxLines`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/maxLines.html) defines the maximum number of lines for the text, determining how many lines are visible when the text wraps. -The default value for minLines is 1, and the default value for maxLines is 6. +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,9 +49,9 @@ The default value for minLines is 1, and the default value for maxLines is 6. ### 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. +The `InputDecoration` class enhances the composer by utilizing its properties, such as borders, labels, icons, and styles. The following are the major features available in [`InputDecoration`](https://api.flutter.dev/flutter/material/InputDecoration-class.html) for decorating the composer: * [`enabled`](https://api.flutter.dev/flutter/material/InputDecoration/enabled.html) @@ -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 = []; @@ -97,10 +97,10 @@ The [`border`](https://api.flutter.dev/flutter/material/InputDecoration/border.h #### Content padding -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. +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 = []; @@ -126,10 +126,10 @@ The [`contentPadding`](https://api.flutter.dev/flutter/material/InputDecoration/ #### Hint text -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. +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="10" %} 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 = []; @@ -222,12 +222,12 @@ The [`prefixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/pref ### Margin -The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/padding.html) property defines the space around the text field, which is used to create space between the conversion area and the text field. +The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistComposer/margin.html) property defines the space around the text field, which is used to create space between the conversion area and the text field. -By default, the top margin is set to 16. +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 d7b58059d..8fd2d63a0 100644 --- a/Flutter/ai-assistview/conversation-area.md +++ b/Flutter/ai-assistview/conversation-area.md @@ -17,10 +17,10 @@ The AI AssistView displays the content of user requests and AI responses. Each m ### Request message -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 [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 = []; @@ -67,10 +67,10 @@ Customize the content of request messages by changing the background color, back ### Response message -Customize the content of response messages by changing the background color, background shape, and other features based on the message, index, or specific conditions. +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 messages by changing the background color, bac 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 = []; @@ -349,10 +349,10 @@ Customize the area where message content is displayed by changing its background ### Suggestions -Provide a list of response suggestions. 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. +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 41" %} final List _messages = []; @@ -419,10 +419,10 @@ Provide a list of response suggestions. When the user selects one, it is conside ### 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 = []; @@ -466,10 +466,10 @@ Indicates that the AI service's response is in progress after a request has been ### Toolbar items -Append a toolbar to response messages that provides options to perform various actions, such as rating the response, sharing it, copying it, and more. +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 48" %} final List _messages = []; @@ -536,4 +536,4 @@ Append a toolbar to response messages that provides options to perform various a #### See Also -* You can also customize the message shapes and colors properties of both [`requestMessageSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/requestBubbleSettings.html) and [`responseMessageSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/responseBubbleSettings.html) using [`SfAIAssistViewTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewTheme-class.html) by wrapping with [`SfAIAssistView`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/SfAIAssistView.html). +* You can also customize the message shapes and colors properties of both [`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) using [`SfAIAssistViewTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfAIAssistViewTheme-class.html) by wrapping with [`SfAIAssistView`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/SfAIAssistView.html). diff --git a/Flutter/ai-assistview/getting-started.md b/Flutter/ai-assistview/getting-started.md index 85cbf62be..7f978491d 100644 --- a/Flutter/ai-assistview/getting-started.md +++ b/Flutter/ai-assistview/getting-started.md @@ -56,10 +56,10 @@ Import the library using the code provided below. ## Initialize AI AssistView widget -Add an AI AssistView widget with the required property, [messages](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messages.html). +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="6" %} final List _messages = []; @@ -77,12 +77,12 @@ Add an AI AssistView widget with the required property, [messages](https://pub.d ![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. 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 = []; @@ -107,10 +107,10 @@ To add a placeholder to the [`AssistComposer`](https://pub.dev/documentation/syn ## Add placeholder to conversation area -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. +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="21" %} 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="107" %} final List _messages = []; diff --git a/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md b/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..ce5f9af59 --- /dev/null +++ b/Flutter/ai-assistview/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: AIAssistView Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter AIAssistView ( SfAIAssistView Widget ) widget in FlutterFlow. +platform: flutter +control: SfAIAssistView +documentation: ug +--- + +# How to add Syncfusion® AIAssistView widget in FlutterFlow? + +## Overview + +[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfAIAssistView widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). + +### Create a new project + +Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) and click the `+ Create New` button to create a new project. + +### Creating the custom widget + +1. Navigate to the `Custom Code` section in the left side navigation menu. +2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. +3. Update the widget name as desired. +4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. +5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +6. Save the widget. + +![Custom Widget](how-to-section-images/custom-widget.png) + +### Add AIAssistView widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. +![Version](how-to-section-images/copy-version.png) +3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. + +>**Note**: The live version of [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). + +![Dependency](how-to-section-images/dependency.png) + +>**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. + +>**Note**: Since [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. + +### Import the package + +1. Navigate to the `Installing` tab on the [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) page. Under the `Import it` section, copy the package import statement. +![Package](how-to-section-images/copy-package.png) +2. Paste the copied import statement into the code editor and then `Save` it. +![Import](how-to-section-images/import-package-flutterflow.png) + +### Add widget code snippet in code editor + +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_chat/example) tab in [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) and copy the widget specific codes. +![Code](how-to-section-images/code-snippet.png) +2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. +![Code snippet](how-to-section-images/adding-code-snippet.png) + +### Compiling the codes + +1. Click the 'Compile Code' button located in the top right corner. +2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process. + +![Compile code](how-to-section-images/compile-code.png) + +>**Note**: The compilation progress takes 2 to 3 minutes to complete. + +### Utilizing the custom widget + +1. Navigate to `Widget Palette` located in the left side navigation menu. +2. Click on the `Components` tab. +3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. + +![Page](how-to-section-images/page.png) diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/adding-code-snippet.png b/Flutter/ai-assistview/how-to/how-to-section-images/adding-code-snippet.png new file mode 100644 index 000000000..54b72fdf6 Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/adding-code-snippet.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/code-snippet.png b/Flutter/ai-assistview/how-to/how-to-section-images/code-snippet.png new file mode 100644 index 000000000..fd2a96973 Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/code-snippet.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/compile-code.png b/Flutter/ai-assistview/how-to/how-to-section-images/compile-code.png new file mode 100644 index 000000000..eb90564af Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/compile-code.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/copy-package.png b/Flutter/ai-assistview/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..099e937cc Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/copy-package.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/copy-version.png b/Flutter/ai-assistview/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..94bb5f840 Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/copy-version.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/custom-widget.png b/Flutter/ai-assistview/how-to/how-to-section-images/custom-widget.png new file mode 100644 index 000000000..43755e9be Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/custom-widget.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/dependency.png b/Flutter/ai-assistview/how-to/how-to-section-images/dependency.png new file mode 100644 index 000000000..427e754ee Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/dependency.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/import-package-flutterflow.png b/Flutter/ai-assistview/how-to/how-to-section-images/import-package-flutterflow.png new file mode 100644 index 000000000..8d68cbac5 Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/import-package-flutterflow.png differ diff --git a/Flutter/ai-assistview/how-to/how-to-section-images/page.png b/Flutter/ai-assistview/how-to/how-to-section-images/page.png new file mode 100644 index 000000000..fe6363b02 Binary files /dev/null and b/Flutter/ai-assistview/how-to/how-to-section-images/page.png differ diff --git a/Flutter/ai-assistview/images/rtl/action_button_rtl.gif b/Flutter/ai-assistview/images/rtl/action_button_rtl.gif new file mode 100644 index 000000000..630dcc192 Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/action_button_rtl.gif differ diff --git a/Flutter/ai-assistview/images/rtl/composer_rtl.png b/Flutter/ai-assistview/images/rtl/composer_rtl.png new file mode 100644 index 000000000..af18a2e9d Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/composer_rtl.png differ diff --git a/Flutter/ai-assistview/images/rtl/conversation_area_rtl.gif b/Flutter/ai-assistview/images/rtl/conversation_area_rtl.gif new file mode 100644 index 000000000..f9a5b5d93 Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/conversation_area_rtl.gif differ diff --git a/Flutter/ai-assistview/images/rtl/placeholder_rtl.png b/Flutter/ai-assistview/images/rtl/placeholder_rtl.png new file mode 100644 index 000000000..79239845a Binary files /dev/null and b/Flutter/ai-assistview/images/rtl/placeholder_rtl.png differ diff --git a/Flutter/ai-assistview/overview.md b/Flutter/ai-assistview/overview.md index 0ee0e5f91..7aa904f5d 100644 --- a/Flutter/ai-assistview/overview.md +++ b/Flutter/ai-assistview/overview.md @@ -27,12 +27,12 @@ The Syncfusion® Flutter AI AssistView widget is a powerful and cu * **Footer items** - This is a collection action bar items for a response message. Particularly useful for adding action items such as like, dislike, copy, retry, etc. -* **Message Header Builder** - The [`SfAIAssistView.messageHeaderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/bubbleHeaderBuilder.html) allows you to specify a custom widget to display as a header for each chat message. This is particularly useful for displaying additional information such as the sender's name and the timestamp associated with each message. +* **Message Header Builder** - The [`SfAIAssistView.messageHeaderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messageHeaderBuilder.html) allows you to specify a custom widget to display as a header for each chat message. This is particularly useful for displaying additional information such as the sender's name and the timestamp associated with each message. -* **Message Avatar Builder** - The [`SfAIAssistView.messageAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/bubbleAvatarBuilder.html) allows you to specify a custom widget to display as an avatar within each chat message. This feature is especially useful for showing user avatars or profile pictures within the chat interface. +* **Message Avatar Builder** - The [`SfAIAssistView.messageAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messageAvatarBuilder.html) allows you to specify a custom widget to display as an avatar within each chat message. This feature is especially useful for showing user avatars or profile pictures within the chat interface. -* **Message Content Builder** - The [`SfAIAssistView.messageContentBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/bubbleContentBuilder.html) allows you to specify a custom widget to display as the content within each chat message. This is useful for customizing how the message content is presented, such as using different background colors, borders, or padding. +* **Message Content Builder** - The [`SfAIAssistView.messageContentBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messageContentBuilder.html) allows you to specify a custom widget to display as the content within each chat message. This is useful for customizing how the message content is presented, such as using different background colors, borders, or padding. -* **Message Footer Builder** - The [`SfAIAssistView.messageFooterBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/bubbleFooterBuilder.html) allows you to specify a custom widget that will be displayed as a footer within each chat message. This is particularly useful for displaying timestamps or other additional information related to the message. +* **Message Footer Builder** - The [`SfAIAssistView.messageFooterBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messageFooterBuilder.html) allows you to specify a custom widget that will be displayed as a footer within each chat message. This is particularly useful for displaying timestamps or other additional information related to the message. >You can refer to our [Flutter AI AssistView](https://www.syncfusion.com/flutter-widgets/flutter-aiassistview) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter AI AssistView example](https://flutter.syncfusion.com/#/ai-assist-view/getting-started) which demonstrates interaction between users and AI services in a fully customizable layout and shows how to easily configure the AI AssistView with built-in support for creating stunning visual effects. \ No newline at end of file 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/ai-assistview/right-to-left.md b/Flutter/ai-assistview/right-to-left.md new file mode 100644 index 000000000..8e324610b --- /dev/null +++ b/Flutter/ai-assistview/right-to-left.md @@ -0,0 +1,243 @@ +--- +layout: post +title: Placeholder in Flutter AIAssistView widget | Syncfusion +description: Learn here about the RTL support in Syncfusion Flutter AIAssistView (SfAIAssistView) widget and more. +platform: flutter +control: SfAIAssistView +documentation: ug +--- + + +# Right To Left (RTL) in Flutter AIAssistView (SfAIAssistView) + + +AIAssistView supports the right to left rendering for all the elements in the AIAssistView widget. + +## RTL rendering ways + +Right to left rendering can be switched in the following ways: + +### Wrapping the SfAIAssistView with Directionality widget + +To change the rendering direction from right to left, you can wrap the [`SfAIAssistView`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). + +{% tabs %} +{% highlight dart hl_lines="5" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfAIAssistView( + //... + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +## RTL supported AIAssistView elements + +### Placeholder + +Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/placeholderBuilder.html) in the AIAssistView. The widget added in the placeholderBuilder will be rendered from right to left direction. But, the text widget or text entered in the widget will render from left to right direction. + +{% tabs %} +{% highlight dart hl_lines="5 10" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: Padding( + padding: const EdgeInsets.all(20.0), + child: SfAIAssistView( + messages: _messages, + placeholderBuilder: (context) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Ask AI Anything', + style: TextStyle( + color: Colors.deepPurple, + fontSize: 18, + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(height: 20), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + OutlinedButton( + onPressed: () {}, + child: const Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Music'), + SizedBox(width: 5), + Icon(Icons.music_note) + ], + ), + ), + const SizedBox(width: 5), + OutlinedButton( + onPressed: () {}, + child: const Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Movies'), + SizedBox(width: 5), + Icon(Icons.movie_creation_rounded) + ], + ), + ), + ], + ), + ], + ); + }, + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![PlaceHolder RTL](images/rtl/placeholder_rtl.png) + +### Composer + +Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/composer.html) in the AIAssistView. Composer will be rendered from right to left direction. But, the text entered in the composer will render from the left to right in the composer. + +{% tabs %} +{% highlight dart hl_lines="5 8" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfAIAssistView( + messages: _messages, + composer: const AssistComposer( + decoration: InputDecoration( + hintText: 'Ask AI anything', + ), + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![Composer RTL](images/rtl/composer_rtl.png) + + +### Action Button + +Right to left (RTL) rendering is supported for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/actionButton.html) in the AIAssistView. Action button will be rendered from right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 8" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfAIAssistView( + messages: _messages, + actionButton: AssistActionButton( + onPressed: (String value) { + // Handle the send button click action here. + }, + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Action Button RTL](images/rtl/action_button_rtl.gif) + + +### Conversation Area + +Right to left (RTL) rendering is supported for both [`request`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/AssistMessage.request.html) and [`response`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/AssistMessage/AssistMessage.response.html) [`Messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/assist_view/SfAIAssistView/messages.html) in the AIAssistView conversation area. In RTL mode, request and response message, header and suggestions will render the widget in right to left direction. + +{% tabs %} +{% highlight dart %} + + final List _messages = []; + + void _generativeResponse(String data) async { + final String response = await _getAIResponse(data); + setState(() { + _messages.add( + AssistMessage.response( + data: response, + time: DateTime.now(), + suggestions: [ + const AssistMessageSuggestion(data: 'Provier'), + const AssistMessageSuggestion(data: 'Riverpoad'), + const AssistMessageSuggestion(data: 'Bloc'), + const AssistMessageSuggestion(data: 'GetX'), + ], + ), + ); + }); + } + + Future _getAIResponse(String data) async { + String response = ''; + // Connect with your preferred AI to generate a response to the request. + return response; + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfAIAssistView( + messages: _messages, + actionButton: AssistActionButton( + onPressed: (String data) { + if (data.trim().isNotEmpty) { + setState(() { + _messages.add( + AssistMessage.request( + data: data, + time: DateTime.now(), + author: const AssistMessageAuthor( + id: 'User ID', name: 'User name'), + ), + ); + _generativeResponse(data); + }); + } + }, + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Message Content RTL](images/rtl/conversation_area_rtl.gif) diff --git a/Flutter/chat/action-button.md b/Flutter/chat/action-button.md index 3f860abae..b25fd971b 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="11" %} // 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="27" %} @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) { @@ -392,10 +386,10 @@ The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ ### Margin -The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatActionButton/padding.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)`. +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 f5e5d68a0..3d95c2941 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 Dart hl_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 = []; @@ -473,10 +473,10 @@ The [`incomingAvatarBackgroundColor`] property is used to specify the background ## Outgoing message background color -The [`outgoingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingBubbleContentBackgroundColor.html) property is used to specify the background color of bubbles containing outgoing messages. +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 = []; @@ -501,10 +501,10 @@ The [`outgoingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_ ## Incoming message background color -The [`incomingMessageBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingBubbleContentBackgroundColor.html) property is used to specify the background color of bubbles containing incoming messages. +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 = []; @@ -808,10 +808,10 @@ The [`suggestionItemTextStyle`] property is used to specify the text style for b ## Outgoing message shape -The [`outgoingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/outgoingBubbleContentShape.html) property is used to specify the shape and border radius of outgoing message bubbles. +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 = []; @@ -838,10 +838,10 @@ The [`outgoingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_co ## Incoming message shape -The [`incomingMessageShape`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatThemeData/incomingBubbleContentShape.html) property is used to specify the shape and border radius of incoming message content. +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 bf456bb91..7be2fe970 100644 --- a/Flutter/chat/composer.md +++ b/Flutter/chat/composer.md @@ -13,7 +13,7 @@ This section explains the customization options available in [`ChatComposer`](ht ## Composer -The [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) is a customizable text editor designed for typing new messages. It offers options to adjust the appearance and behavior of the text editor, including settings for the minimum and maximum number of lines, decoration, margin, and text style. +The [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) is a customizable text editor designed for typing new messages. It offers options to adjust the appearance and behavior of the text editor, including settings for the `minimum` and `maximum` number of lines, `decoration`, `margin`, and `text style`. When the composer is null, no default text field is added to the chat widget. @@ -22,12 +22,12 @@ When the composer is null, no default text field is added to the chat widget. * [`minLines`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/minLines.html) specifies the minimum number of lines in the text span, which affects the height of the text field. * [`maxLines`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/maxLines.html) defines the maximum number of lines for the text, determining how many lines are visible when the text wraps. -The default value for minLines is 1, and the default value for maxLines is 6. +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 @@ -72,7 +72,7 @@ The [`enabled`](https://api.flutter.dev/flutter/material/InputDecoration/enabled 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="34" %} late List _messages; @@ -123,10 +123,10 @@ The [`border`](https://api.flutter.dev/flutter/material/InputDecoration/border.h #### Content padding -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. +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="27" %} late List _messages; @@ -168,10 +168,10 @@ The [`contentPadding`](https://api.flutter.dev/flutter/material/InputDecoration/ #### Hint text -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. +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="12" %} // Load if there are existing messages. final List _messages = []; @@ -201,7 +201,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="13" %} // Load if there are existing messages. final List _messages = []; @@ -236,7 +236,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="34 38" %} late List _messages; @@ -292,12 +292,12 @@ The [`prefixIcon`](https://api.flutter.dev/flutter/material/InputDecoration/pref ### Margin -The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/padding.html) property defines the space around the text field, which is used to create space between the conversion area and the text field. +The [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/margin.html) property defines the space around the text field, which is used to create space between the conversion area and the text field. -By default, the top margin is set to 16. +By default, the top `margin` is set to `16`. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="33" %} late List _messages; @@ -349,7 +349,7 @@ The [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/c 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="33" %} late List _messages; @@ -403,7 +403,7 @@ The [`ChatComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_ch If [`ChatComposer.builder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatComposer/ChatComposer.builder.html) is used, the action button will always be enabled. {% tabs %} -{% highlight dart %} +{% highlight dart hl_lines="11" %} // Load if there are existing messages. final List _messages = []; diff --git a/Flutter/chat/message-content.md b/Flutter/chat/conversation-area.md similarity index 55% rename from Flutter/chat/message-content.md rename to Flutter/chat/conversation-area.md index c6a3a08b3..73bb98169 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() { @@ -112,7 +112,7 @@ In the following example, included the user's display name additionally in the e body: SfChat( messages: _messages, outgoingUser: '123-001', - bubbleAvatarBuilder: (context, index, message) { + messageAvatarBuilder: (context, index, message) { if (message is ChatMessageExt) { return CircleAvatar( radius: 20, @@ -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) { @@ -245,26 +245,26 @@ The name may be repeated within the group, but the ID is unique to each user. ![Outgoing user](images/message-content/default-outgoinguser.png) -## Bubble settings +## Message settings Based on the [`outgoingUser`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingUser.html) property, the messages are distinguished as either incoming or outgoing. The following options are available to customize the display settings of the message bubble. ->You must import the [`intl`](https://pub.dev/documentation/intl/latest/intl/intl-library.html) package for handling [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/timestampFormat.html) in your chat application. +>You must import the [`intl`](https://pub.dev/documentation/intl/latest/intl/intl-library.html) package for handling [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/timestampFormat.html) in your chat application. -### User name +### Author name -The [`showAuthorName`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/showUserName.html) property is used to show or hide the author's name for the message. Defaults to `true`. +The [`showAuthorName`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/showAuthorName.html) property is used to show or hide the author's name for the message. Defaults to `true`. ### Time stamp -The [`showTimestamp`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/showTimestamp.html) property is used to show or hide the time the message was sent. The time format can be customized using [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/timestampFormat.html). Defaults to `true`. +The [`showTimestamp`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/showTimestamp.html) property is used to show or hide the time the message was sent. The time format can be customized using [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/timestampFormat.html). Defaults to `true`. ### Time stamp format -The [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/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'). +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) { @@ -312,12 +312,12 @@ The [`timestampFormat`](https://pub.dev/documentation/syncfusion_flutter_chat/la ![Bubble settings](images/message-content/timestampformat-for-bubblesettings.png) -### User avatar +### Author avatar -The [`showAuthorAvatar`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/showUserAvatar.html) property is used to show or hide the author's image for the message. Defaults to `true`. +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) { @@ -367,18 +367,18 @@ The [`showAuthorAvatar`](https://pub.dev/documentation/syncfusion_flutter_chat/l ### Text styles -The [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/textStyle.html) property is used to define the text style for content inside the message. +The [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/textStyle.html) property is used to define the text style for content inside the message. ### Header text style -The [`headerTextStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/headerTextStyle.html) property is used to define the text style for the header of the message, including the username and timestamp. +The [`headerTextStyle`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessageSettings/headerTextStyle.html) property is used to define the text style for the header of the message, including the username and timestamp. ### Background color -The [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/contentBackgroundColor.html) property is used to specify the background color of the content area within the message. +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) { @@ -428,10 +428,10 @@ The [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_chat/la ### Shape -The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/contentShape.html) property is used to define the shape of the content area of the message, such as rounded or custom shapes. +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) { @@ -485,34 +485,367 @@ The [`shape`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ ### Width factor -The [`widthFactor`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/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`. +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/ChatBubbleSettings/avatarSize.html) property is used to specify the size of the author's avatar in the message. Defaults to `Size.square(32.0)`. +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 [`margin`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/padding.html) property is used to define the space inside the message between the border and content. Defaults to `EdgeInsets.all(2.0)`. +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 34 37 38" %} -### Content padding + @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), + ), + ), + ); + } -The [`padding`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/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)`. +{% endhighlight %} +{% endtabs %} ### Avatar padding -The [`avatarPadding`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatBubbleSettings/avatarPadding.html) property is used to define the padding around the author's avatar within the message. +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/ChatBubbleSettings/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)`. +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 34 37 38" %} + + @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/ChatBubbleSettings/footerPadding.html) property is used to define the padding around the footer section of the message. Defaults to `EdgeInsetsDirectional.only(top: 4.0)`. +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 -* You can also customize the bubble shapes and colors properties of both [`incomingMessageSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/incomingBubbleSettings.html) and [`outgoingMessageSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingBubbleSettings.html)using [`SfChatTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatTheme/SfChatTheme.html) by wrapping with [`SfChat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/SfChat.html). +* You can also customize the Message shapes and colors properties of both [`incomingMessageSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/incomingMessageSettings.html) and [`outgoingMessageSettings`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/outgoingMessageSettings.html)using [`SfChatTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfChatTheme/SfChatTheme.html) by wrapping with [`SfChat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/SfChat.html). diff --git a/Flutter/chat/getting-started.md b/Flutter/chat/getting-started.md index 5ed54f71f..5ac87a19c 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="39" %} @override void initState() { diff --git a/Flutter/chat/how-to/custom-widget-on-flutterflow.md b/Flutter/chat/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..d2c4eed7c --- /dev/null +++ b/Flutter/chat/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: Chat Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter Chat ( SfChat Widget ) widget in FlutterFlow. +platform: flutter +control: SfChat +documentation: ug +--- + +# How to add Syncfusion® Chat widget in FlutterFlow? + +## Overview + +[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfChat widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). + +### Create a new project + +Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) and click the `+ Create New` button to create a new project. + +### Creating the custom widget + +1. Navigate to the `Custom Code` section in the left side navigation menu. +2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. +3. Update the widget name as desired. +4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. +5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +6. Save the widget. + +![Custom Widget](how-to-section-images/custom-widget.png) + +### Add Chat widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. +![Version](how-to-section-images/copy-version.png) +3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. + +>**Note**: The live version of [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). + +![Dependency](how-to-section-images/dependency.png) + +>**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. + +>**Note**: Since [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. + +### Import the package + +1. Navigate to the `Installing` tab on the [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) page. Under the `Import it` section, copy the package import statement. +![Package](how-to-section-images/copy-package.png) +2. Paste the copied import statement into the code editor and then `Save` it. +![Import](how-to-section-images/import-package-flutterflow.png) + +### Add widget code snippet in code editor + +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_chat/example) tab in [Syncfusion® Flutter Chat](https://pub.dev/packages/syncfusion_flutter_chat) and copy the widget specific codes. +![Code](how-to-section-images/code-snippet.png) +2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. +![Code snippet](how-to-section-images/adding-code-snippet.png) + +### Compiling the codes + +1. Click the 'Compile Code' button located in the top right corner. +2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process. + +![Compile code](how-to-section-images/compile-code.png) + +>**Note**: The compilation progress takes 2 to 3 minutes to complete. + +### Utilizing the custom widget + +1. Navigate to `Widget Palette` located in the left side navigation menu. +2. Click on the `Components` tab. +3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. + +![Page](how-to-section-images/page.png) diff --git a/Flutter/chat/how-to/how-to-section-images/adding-code-snippet.png b/Flutter/chat/how-to/how-to-section-images/adding-code-snippet.png new file mode 100644 index 000000000..59f927cf0 Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/adding-code-snippet.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/code-snippet.png b/Flutter/chat/how-to/how-to-section-images/code-snippet.png new file mode 100644 index 000000000..ce4013e1d Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/code-snippet.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/compile-code.png b/Flutter/chat/how-to/how-to-section-images/compile-code.png new file mode 100644 index 000000000..32c5b778d Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/compile-code.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/copy-package.png b/Flutter/chat/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..099e937cc Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/copy-package.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/copy-version.png b/Flutter/chat/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..94bb5f840 Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/copy-version.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/custom-widget.png b/Flutter/chat/how-to/how-to-section-images/custom-widget.png new file mode 100644 index 000000000..43755e9be Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/custom-widget.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/dependency.png b/Flutter/chat/how-to/how-to-section-images/dependency.png new file mode 100644 index 000000000..56b30d5fa Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/dependency.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/import-package-flutterflow.png b/Flutter/chat/how-to/how-to-section-images/import-package-flutterflow.png new file mode 100644 index 000000000..f77daa670 Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/import-package-flutterflow.png differ diff --git a/Flutter/chat/how-to/how-to-section-images/page.png b/Flutter/chat/how-to/how-to-section-images/page.png new file mode 100644 index 000000000..d7b6a0ee3 Binary files /dev/null and b/Flutter/chat/how-to/how-to-section-images/page.png differ diff --git a/Flutter/chat/images/rtl/action_button_rtl.gif b/Flutter/chat/images/rtl/action_button_rtl.gif new file mode 100644 index 000000000..1e4a165c3 Binary files /dev/null and b/Flutter/chat/images/rtl/action_button_rtl.gif differ diff --git a/Flutter/chat/images/rtl/composer_rtl.png b/Flutter/chat/images/rtl/composer_rtl.png new file mode 100644 index 000000000..d57ec2b74 Binary files /dev/null and b/Flutter/chat/images/rtl/composer_rtl.png differ diff --git a/Flutter/chat/images/rtl/message_content_rtl.png b/Flutter/chat/images/rtl/message_content_rtl.png new file mode 100644 index 000000000..79bda52e3 Binary files /dev/null and b/Flutter/chat/images/rtl/message_content_rtl.png differ diff --git a/Flutter/chat/images/rtl/placeholder_rtl.png b/Flutter/chat/images/rtl/placeholder_rtl.png new file mode 100644 index 000000000..d0d606126 Binary files /dev/null and b/Flutter/chat/images/rtl/placeholder_rtl.png differ diff --git a/Flutter/chat/overview.md b/Flutter/chat/overview.md index 534a9b560..5a0977ea3 100644 --- a/Flutter/chat/overview.md +++ b/Flutter/chat/overview.md @@ -25,12 +25,12 @@ The Syncfusion® Flutter Chat widget displays conversations betwee * **Suggestions** - The list of [`Suggestions`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage/suggestions.html) can be added for a message in the message list. The selected suggestion item can be displayed in the chat interface as either incoming or outgoing messages based on the user who selected the suggestion item. -* **Message Header** - Displays the sender's name and the timestamp associated with each message. Using the [`messageHeaderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/bubbleHeaderBuilder.html), a custom widget can be specified to display as a header for each chat message with required details about the respective message. +* **Message Header** - Displays the sender's name and the timestamp associated with each message. Using the [`messageHeaderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageHeaderBuilder.html), a custom widget can be specified to display as a header for each chat message with required details about the respective message. -* **Message Footer** - By default, no footer is added to the message content. Using the [`messageFooterBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/bubbleFooterBuilder.html), a custom widget can be specified to display as a footer for each chat message with required details about the respective message. +* **Message Footer** - By default, no footer is added to the message content. Using the [`messageFooterBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageFooterBuilder.html), a custom widget can be specified to display as a footer for each chat message with required details about the respective message. -* **Message Content** - The actual message content. Using the [`messageContentBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/bubbleContentBuilder.html), a custom widget can be specified to display as the content for each chat message with a customized layout. +* **Message Content** - The actual message content. Using the [`messageContentBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageContentBuilder.html), a custom widget can be specified to display as the content for each chat message with a customized layout. -* **Message Avatar** - Displays user avatars or profile pictures of the respective message. Using the [`messageAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/bubbleAvatarBuilder.html), a custom widget can be specified to display the chat message avatar with relevant details. +* **Message Avatar** - Displays user avatars or profile pictures of the respective message. Using the [`messageAvatarBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/messageAvatarBuilder.html), a custom widget can be specified to display the chat message avatar with relevant details. >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 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/chat/right-to-left.md b/Flutter/chat/right-to-left.md new file mode 100644 index 000000000..e5027e170 --- /dev/null +++ b/Flutter/chat/right-to-left.md @@ -0,0 +1,215 @@ +--- +layout: post +title: Placeholder in Flutter Chat widget | Syncfusion +description: Learn here about the Right to Left(RTL) support in Syncfusion Flutter Chat (SfChat) widget and more. +platform: flutter +control: SfChat +documentation: ug +--- + + +# Right To Left (RTL) in Flutter Chat (SfChat) + + +Chat supports the right to left rendering for all the elements in the Chat widget. + +## RTL rendering ways + +Right to left rendering can be switched in the following ways: + +### Wrapping the SfChat with Directionality widget + +To change the rendering direction from right to left, you can wrap the [`SfChat`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html). + +{% tabs %} +{% highlight dart hl_lines="5" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + //... + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +## RTL supported chat elements + +### Placeholder + +Right to left (RTL) rendering is supported for the [`placeholderBuilder`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/placeholderBuilder.html) in the chat. The widget added in the placeholderBuilder will be rendered from right to left direction. But, the text widget or text entered in the widget will render from left to right direction. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + placeholderBuilder: (context) { + return const Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(width: 10), + Icon( + size: 30, + Icons.emoji_people_rounded, + color: Colors.red, + ), + SizedBox(width: 5), + Text( + 'Start a conversation', + style: TextStyle( + color: Colors.deepPurple, + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + ); + }, + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![PlaceHolder RTL](images/rtl/placeholder_rtl.png) + +### Composer + +Right to left (RTL) rendering is supported for the [`composer`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/composer.html) in the chat. Composer will be rendered from right to left direction. But, the text entered in the composer will render from the left to right in the composer. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + composer: const ChatComposer( + decoration: InputDecoration( + hintText: 'Enter Message here', + )), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + + +![Composer RTL](images/rtl/composer_rtl.png) + + +### Action Button + +Right to left (RTL) rendering is supported for the [`actionButton`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/SfChat/actionButton.html) in the chat. Action button will be rendered from right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 9" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: _messages, + actionButton: ChatActionButton( + onPressed: (value) { + setState(() { + _messages.add( + ChatMessage( + text: value, + time: DateTime.now(), + author: const ChatAuthor( + id: '1010', name: 'Johnathan wick'), + ), + ); + }); + }, + ), + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Action Button RTL](images/rtl/action_button_rtl.gif) + + +### Message Content + +Right to left (RTL) rendering is supported for [`Messages`](https://pub.dev/documentation/syncfusion_flutter_chat/latest/chat/ChatMessage-class.html) in the chat conversation area. In RTL mode, message content, header and suggestions will render the widget in right to left direction. + +{% tabs %} +{% highlight dart hl_lines="5 8" %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: SfChat( + outgoingUser: '1010', + messages: [ + ChatMessage( + text: 'Hey, Any plans for today?', + time: DateTime.parse('2025-03-21T10:02:00Z'), + author: const ChatAuthor( + id: '1010', + name: 'Johnathan wick', + avatar: AssetImage('assets/images/People_Circle23.png'), + ), + ), + ChatMessage( + text: + "I'm thinking of watching a web series. Can you suggest some?", + time: DateTime.parse('2025-03-21T10:03:00Z'), + author: const ChatAuthor( + id: '1020', + name: 'John carter', + avatar: AssetImage('assets/images/People_Circle5.png'), + ), + suggestions: [ + const ChatMessageSuggestion(data: 'Peaky Blinders'), + const ChatMessageSuggestion(data: 'Breaking Bad'), + const ChatMessageSuggestion(data: 'Prison Break'), + const ChatMessageSuggestion(data: 'Blacklist'), + ], + ), + ], + ), + ), + ); + } + +{% endhighlight %} +{% endtabs %} + +![Message Content RTL](images/rtl/message_content_rtl.png) diff --git a/Flutter/datagrid/column-types.md b/Flutter/datagrid/column-types.md index a4831c3f8..3c54e619a 100644 --- a/Flutter/datagrid/column-types.md +++ b/Flutter/datagrid/column-types.md @@ -560,13 +560,13 @@ Widget build(BuildContext context) { The `SfDataGrid` provides the following callback for checkbox interactions: -* [onCheckboxValueChanged]() : This callback is triggered when the checkbox is selected or deselected, either by tapping on the checkbox or by selecting or deselecting a row (i.e., when the value of the checkbox changes). +* [onCheckboxValueChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onCheckboxValueChanged.html) : This callback is triggered when the checkbox is selected or deselected, either by tapping on the checkbox or by selecting or deselecting a row (i.e., when the value of the checkbox changes). The checkbox callbacks provide the following properties in their arguments: -* [value]() : Represents the current state of the checkbox. -* [row]() : Refers to the DataGridRow linked to the checkbox in the checkbox column. If the checkbox is part of a column header, the value will be null, indicating that it is not linked to any specific data row. -* [rowType]() : Defines the type of row associated with the checkbox. It indicates whether the checkbox value in a data row or header row has been modified. +* [value](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/value.html) : Represents the current state of the checkbox. +* [row](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/row.html) : Refers to the DataGridRow linked to the checkbox in the checkbox column. If the checkbox is part of a column header, the value will be null, indicating that it is not linked to any specific data row. +* [rowType](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridCheckboxValueChangedDetails/rowType.html) : Defines the type of row associated with the checkbox. It indicates whether the checkbox value in a data row or header row has been modified. {% tabs %} {% highlight Dart %} diff --git a/Flutter/datagrid/placeholder.md b/Flutter/datagrid/placeholder.md index 7966bf97a..ceb136f48 100644 --- a/Flutter/datagrid/placeholder.md +++ b/Flutter/datagrid/placeholder.md @@ -9,7 +9,7 @@ documentation: ug # Placeholder in Flutter Datagrid (SfDataGrid) -The `SfDataGrid` provides built-in support for displaying a placeholder when the data source is empty by setting the [SfDataGrid.placeholder]() property. When the `SfDataGrid.placeholder` is set, the DataGrid automatically shows the specified widget in the scroll view area. By default, the `SfDataGrid` does not display anything when the data source is empty. +The `SfDataGrid` provides built-in support for displaying a placeholder when the data source is empty by setting the [SfDataGrid.placeholder](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/placeholder.html) property. When the `SfDataGrid.placeholder` is set, the DataGrid automatically shows the specified widget in the scroll view area. By default, the `SfDataGrid` does not display anything when the data source is empty. The following example shows how to add a `placeholder` in SfDataGrid: diff --git a/Flutter/datagrid/sorting.md b/Flutter/datagrid/sorting.md index e43acca67..b341a5750 100644 --- a/Flutter/datagrid/sorting.md +++ b/Flutter/datagrid/sorting.md @@ -288,11 +288,11 @@ Widget build(BuildContext context) { The `SfDataGrid` provides the following callbacks for sorting: -* [onColumnSortChanging]() : This callback is invoked when a column is being sorted in `SfDataGrid`. If the callback returns `true`, the `SfDataGrid` will proceed with the sorting; if it returns `false`, the sort operation will be canceled. +* `onColumnSortChanging` : This callback is invoked when a column is being sorted in `SfDataGrid`. If the callback returns `true`, the `SfDataGrid` will proceed with the sorting; if it returns `false`, the sort operation will be canceled. -* [onColumnSortChanged]() : This callback is invoked when a column is sorted in `SfDataGrid`. +* `onColumnSortChanged` : This callback is invoked when a column is sorted in `SfDataGrid`. -The followings are the parameters of the [SfDataGrid.onColumnSortChanging]() and [SfDataGrid.onColumnSortChanged]() callbacks: +The followings are the parameters of the [SfDataGrid.onColumnSortChanging](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnSortChanging.html) and [SfDataGrid.onColumnSortChanged](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/onColumnSortChanged.html) callbacks: * newSortedColumn: Retrieves the `SortColumnDetails` that is going to sort a column. diff --git a/Flutter/installation/mac-installer/images/start-trial-download-offline-installer.png b/Flutter/installation/mac-installer/images/start-trial-download-offline-installer.png index b46116121..92f4da641 100644 Binary files a/Flutter/installation/mac-installer/images/start-trial-download-offline-installer.png and b/Flutter/installation/mac-installer/images/start-trial-download-offline-installer.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img1.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img1.png index eca4d1f1e..f36058a2a 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img1.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img1.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img10.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img10.png index 27241a45f..7180b80c3 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img10.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img10.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img2.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img2.png index 4bea23111..3ac3d1f68 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img2.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img2.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img3.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img3.png index efb7cf01b..d5acb4215 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img3.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img3.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img4.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img4.png index 6d400f6e6..0d8565ed3 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img4.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img4.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img5.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img5.png index 175d46945..596a64c1b 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img5.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img5.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img7.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img7.png index 227cf6c20..cbb21edb2 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img7.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img7.png differ diff --git a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img9.png b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img9.png index 8201c016f..44376f543 100644 Binary files a/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img9.png and b/Flutter/installation/offline-installer/images/Step-by-Step-Installation_img9.png differ diff --git a/Flutter/installation/offline-installer/images/start-trial-download-offline-installer.png b/Flutter/installation/offline-installer/images/start-trial-download-offline-installer.png index b8a8a4316..8aa0ae49a 100644 Binary files a/Flutter/installation/offline-installer/images/start-trial-download-offline-installer.png and b/Flutter/installation/offline-installer/images/start-trial-download-offline-installer.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img1.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img1.png index 5415185c4..9b628e370 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img1.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img1.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img10.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img10.png index ee5e2ab9e..215b10d01 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img10.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img10.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img11.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img11.png index c5b38977c..949347a95 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img11.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img11.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img12.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img12.png index d747eb456..4d06f90b0 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img12.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img12.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img13.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img13.png index 9a2c39aab..fad995797 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img13.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img13.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img14.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img14.png index 93530f70a..698619df6 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img14.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img14.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img15.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img15.png index a0f096527..cd6ce86fd 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img15.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img15.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img16.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img16.png index 46f48c2c0..fac8aa7bc 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img16.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img16.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img17.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img17.png index 41a4fa8aa..68797f9df 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img17.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img17.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img18.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img18.png index 5817b5726..917bbaebc 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img18.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img18.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img19.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img19.png index 7856c152a..237b376e9 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img19.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img19.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img2.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img2.png index 94db711e5..d3ace57fa 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img2.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img2.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img20.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img20.png index 60409c2a1..612dc1bef 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img20.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img20.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img23.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img23.png index d182450b3..fac8aa7bc 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img23.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img23.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img24.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img24.png index 8698199aa..90d496e5c 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img24.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img24.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img25.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img25.png index f42bea4ba..612dc1bef 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img25.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img25.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img26.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img26.png index 60409c2a1..612dc1bef 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img26.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img26.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img3.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img3.png index 8698199aa..90d496e5c 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img3.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img3.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img4.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img4.png index f42bea4ba..cc513aa39 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img4.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img4.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img5.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img5.png index 3326c174c..43276da4d 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img5.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img5.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img6.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img6.png index e3d4a0815..8a2cc5fc7 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img6.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img6.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img7.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img7.png index 9d1997b86..70a5357ef 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img7.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img7.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img8.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img8.png index d182450b3..fac8aa7bc 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img8.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img8.png differ diff --git a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img9.png b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img9.png index c520074ed..1a055d824 100644 Binary files a/Flutter/installation/web-installer/images/Step-by-Step-Installation_img9.png and b/Flutter/installation/web-installer/images/Step-by-Step-Installation_img9.png differ diff --git a/Flutter/installation/web-installer/images/start-trial-download-web-installer.png b/Flutter/installation/web-installer/images/start-trial-download-web-installer.png index 2cc53a7a4..710707d08 100644 Binary files a/Flutter/installation/web-installer/images/start-trial-download-web-installer.png and b/Flutter/installation/web-installer/images/start-trial-download-web-installer.png differ diff --git a/Flutter/introduction/overview.md b/Flutter/introduction/overview.md index 3048d4db9..beaab8b85 100644 --- a/Flutter/introduction/overview.md +++ b/Flutter/introduction/overview.md @@ -59,9 +59,8 @@ tr, td, th - Flutter macOS App Center Flutter Snap Store - Flutter GitHub Samples + Flutter GitHub Samples diff --git a/Flutter/introduction/widget-examples.md b/Flutter/introduction/widget-examples.md index e69ed8ec6..b4d1d396c 100644 --- a/Flutter/introduction/widget-examples.md +++ b/Flutter/introduction/widget-examples.md @@ -21,16 +21,14 @@ The section contains the GitHub link for each widget’s code examples. This is AI AssistView AIAssistView -samples/ai_assist_view +samples/AI_assist_view - Chat Chat samples/chat - Grid diff --git a/Flutter/introduction/widgets-catalog.md b/Flutter/introduction/widgets-catalog.md index 3b60a61ae..3e3043c53 100644 --- a/Flutter/introduction/widgets-catalog.md +++ b/Flutter/introduction/widgets-catalog.md @@ -25,14 +25,12 @@ This section provides the user guide link for each widget and its package link. AIAssistView syncfusion_flutter_chat - Chat Chat syncfusion_flutter_chat - Grid diff --git a/Flutter/system-requirements.md b/Flutter/system-requirements.md index 511dc8d44..43c18ac44 100644 --- a/Flutter/system-requirements.md +++ b/Flutter/system-requirements.md @@ -43,10 +43,17 @@ See the links below for the recommended Flutter development environments Syncfusion® Compatible Package Version + + 3.29.0 + + >=29.1.33 <29.1.xx(latest) + + + 3.27.0 - >=28.1.36 <28.1.xx(latest) + >=28.1.36 <28.2.12 diff --git a/Flutter/themes.md b/Flutter/themes.md index 9c85c11bc..55db45c24 100644 --- a/Flutter/themes.md +++ b/Flutter/themes.md @@ -109,8 +109,7 @@ In the above code snippet, [`chartThemeData`](https://pub.dev/documentation/sync SfCalendar - - + SfChatThemeData @@ -128,6 +127,7 @@ In the above code snippet, [`chartThemeData`](https://pub.dev/documentation/sync SfPyramidChart
SfFunnelChart + SfSparkChartThemeData @@ -298,8 +298,7 @@ Similarly, refer the following table to know about the other specialized theme w SfCalendar - - + SfChatThemeData diff --git a/flutter-toc.html b/flutter-toc.html index 44daca07e..dd7bc9e45 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -109,6 +109,8 @@
  • Action Button
  • Conversation Area
  • Theme
    • +
  • Right to Left (RTL)
    • +
  • How to
  • @@ -155,9 +157,11 @@
  • Getting Started
  • Placeholder
  • Composer
    • -
  • Message Content
  • Action Button
    • +
  • Conversation Area
  • Theme
    • +
  • Right to Left (RTL)
    • +
  • How to
  • @@ -655,7 +659,7 @@
  • Release Notes -