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.
+
+
+
+### 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.
+
+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).
+
+
+
+>**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.
+
+2. Paste the copied import statement into the code editor and then `Save` it.
+
+
+### 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.
+
+2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it.
+
+
+### 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.
+
+
+
+>**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.
+
+
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/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.
+
+
+
+### 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.
+
+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).
+
+
+
+>**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.
+
+2. Paste the copied import statement into the code editor and then `Save` it.
+
+
+### 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.
+
+2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it.
+
+
+### 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.
+
+
+
+>**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.
+
+
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-toc.html b/flutter-toc.html
index 45c0fea44..0d6e9ac5c 100644
--- a/flutter-toc.html
+++ b/flutter-toc.html
@@ -110,6 +110,7 @@
Conversation Area
Theme
Right to Left (RTL)
+ How to
@@ -160,6 +161,7 @@
Conversation Area
Theme
Right to Left (RTL)
+ How to