diff --git a/Flutter/datagrid/how-to/custom-widget-on-flutterflow.md b/Flutter/datagrid/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..8876030f9 --- /dev/null +++ b/Flutter/datagrid/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: DataGrid Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter Data Grid ( SfDataGrid Widget ) widget in FlutterFlow. +platform: flutter +control: SfDataGrid +documentation: ug +--- + +# How to add Syncfusion DataGrid 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 SfDataGrid 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 DataGrid widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion Flutter DataGrid](https://pub.dev/packages/syncfusion_flutter_DataGrid) 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 DataGrid](https://pub.dev/packages/syncfusion_flutter_DataGrid) 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 DataGrid](https://pub.dev/packages/syncfusion_flutter_DataGrid) 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 DataGrid](https://pub.dev/packages/syncfusion_flutter_DataGrid) 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 DataGrid](https://pub.dev/packages/syncfusion_flutter_DataGrid) 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_DataGrid/example) tab in [Syncfusion Flutter DataGrid](https://pub.dev/packages/syncfusion_flutter_DataGrid) 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-snippent.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 `Componenets` 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/datagrid/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/datagrid/how-to/how-to-section-images/Adding-code-snippent.png new file mode 100644 index 000000000..71693e4d6 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/Adding-code-snippent.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/code-snippet.png b/Flutter/datagrid/how-to/how-to-section-images/code-snippet.png new file mode 100644 index 000000000..42431eb23 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/code-snippet.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/compile-code.png b/Flutter/datagrid/how-to/how-to-section-images/compile-code.png new file mode 100644 index 000000000..1a81f1d30 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/compile-code.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/copy-package.png b/Flutter/datagrid/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..a102aec6b Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/copy-package.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/copy-version.png b/Flutter/datagrid/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..d2cd443d9 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/copy-version.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/custom-widget.png b/Flutter/datagrid/how-to/how-to-section-images/custom-widget.png new file mode 100644 index 000000000..675534438 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/custom-widget.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/dependency.png b/Flutter/datagrid/how-to/how-to-section-images/dependency.png new file mode 100644 index 000000000..222a8ccb3 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/dependency.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/import-package-flutterflow.png b/Flutter/datagrid/how-to/how-to-section-images/import-package-flutterflow.png new file mode 100644 index 000000000..32a57095b Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/import-package-flutterflow.png differ diff --git a/Flutter/datagrid/how-to/how-to-section-images/page.png b/Flutter/datagrid/how-to/how-to-section-images/page.png new file mode 100644 index 000000000..0fd8f5320 Binary files /dev/null and b/Flutter/datagrid/how-to/how-to-section-images/page.png differ diff --git a/Flutter/maps/how-to/custom-widget-on-flutterflow.md b/Flutter/maps/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..8a2cca43a --- /dev/null +++ b/Flutter/maps/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,66 @@ +--- +layout: post +title: Maps Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter Maps ( SfMaps Widget ) widget in FlutterFlow. +platform: flutter +control: SfMaps +documentation: ug +--- + +# How to add Syncfusion Maps 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 SfMaps 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 Maps widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion Flutter Maps](https://pub.dev/packages/syncfusion_flutter_maps) 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 Maps](https://pub.dev/packages/syncfusion_flutter_maps) 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 Maps](https://pub.dev/packages/syncfusion_flutter_maps) 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 Maps](https://pub.dev/packages/syncfusion_flutter_maps) 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 Maps](https://pub.dev/packages/syncfusion_flutter_maps) 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. + +### Add widget code snippet in code editor + +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_maps/example) tab in [Syncfusion Flutter Maps](https://pub.dev/packages/syncfusion_flutter_maps) 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 `Componenets` tab. +3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. diff --git a/Flutter/maps/how-to/how-to-section-images/copy-package.png b/Flutter/maps/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..c5d7a3767 Binary files /dev/null and b/Flutter/maps/how-to/how-to-section-images/copy-package.png differ diff --git a/Flutter/maps/how-to/how-to-section-images/copy-version.png b/Flutter/maps/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..f169740e3 Binary files /dev/null and b/Flutter/maps/how-to/how-to-section-images/copy-version.png differ diff --git a/Flutter/maps/how-to/how-to-section-images/custom-widget.png b/Flutter/maps/how-to/how-to-section-images/custom-widget.png new file mode 100644 index 000000000..675534438 Binary files /dev/null and b/Flutter/maps/how-to/how-to-section-images/custom-widget.png differ diff --git a/Flutter/pdf-viewer/How-to/custom-widget-on-flutterflow.md b/Flutter/pdf-viewer/How-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..cd323161e --- /dev/null +++ b/Flutter/pdf-viewer/How-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: PdfViewer Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter Pdf Viewer ( SfPdfViewer Widget ) widget in FlutterFlow. +platform: flutter +control: SfPdfViewer +documentation: ug +--- + +# How to add Syncfusion PdfViewer 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 SfPdfViewer 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](images/custom-widget.png) + +### Add PdfViewer widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion Flutter PdfViewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. +![Version](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 PdfViewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) 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 PdfViewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). + +![Dependency](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 PdfViewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) 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 PdfViewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) page. Under the `Import it` section, copy the package import statement. +![Package](images/copy-package.png) +2. Paste the copied import statement into the code editor and then `Save` it. +![Import](images/import-package-flutterflow.png) + +### Add widget code snippet in code editor + +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_PdfViewer/example) tab in [Syncfusion Flutter PdfViewer](https://pub.dev/packages/syncfusion_flutter_PdfViewer) and copy the widget specific codes. +![Code](images/code-snippet.png) +2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. +![Code snippet](images/Adding-code-snippent.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](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 `Componenets` tab. +3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. + +![Page](images/page.png) diff --git a/Flutter/pdf-viewer/How-to/images/Adding-code-snippent.png b/Flutter/pdf-viewer/How-to/images/Adding-code-snippent.png new file mode 100644 index 000000000..46db33de4 Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/Adding-code-snippent.png differ diff --git a/Flutter/pdf-viewer/How-to/images/code-snippet.png b/Flutter/pdf-viewer/How-to/images/code-snippet.png new file mode 100644 index 000000000..22f9667be Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/code-snippet.png differ diff --git a/Flutter/pdf-viewer/How-to/images/compile-code.png b/Flutter/pdf-viewer/How-to/images/compile-code.png new file mode 100644 index 000000000..9a937df5d Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/compile-code.png differ diff --git a/Flutter/pdf-viewer/How-to/images/copy-package.png b/Flutter/pdf-viewer/How-to/images/copy-package.png new file mode 100644 index 000000000..3bc923a73 Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/copy-package.png differ diff --git a/Flutter/pdf-viewer/How-to/images/copy-version.png b/Flutter/pdf-viewer/How-to/images/copy-version.png new file mode 100644 index 000000000..735373ef0 Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/copy-version.png differ diff --git a/Flutter/pdf-viewer/How-to/images/custom-widget.png b/Flutter/pdf-viewer/How-to/images/custom-widget.png new file mode 100644 index 000000000..675534438 Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/custom-widget.png differ diff --git a/Flutter/pdf-viewer/How-to/images/dependency.png b/Flutter/pdf-viewer/How-to/images/dependency.png new file mode 100644 index 000000000..14daf5de9 Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/dependency.png differ diff --git a/Flutter/pdf-viewer/How-to/images/import-package-flutterflow.png b/Flutter/pdf-viewer/How-to/images/import-package-flutterflow.png new file mode 100644 index 000000000..897f359d8 Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/import-package-flutterflow.png differ diff --git a/Flutter/pdf-viewer/How-to/images/page.png b/Flutter/pdf-viewer/How-to/images/page.png new file mode 100644 index 000000000..46525491d Binary files /dev/null and b/Flutter/pdf-viewer/How-to/images/page.png differ diff --git a/Flutter/pdf/how-to/custom-widget-on-flutterflow.md b/Flutter/pdf/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..deac14eb5 --- /dev/null +++ b/Flutter/pdf/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: PDF Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter PDF ( SfPDF Widget ) widget in FlutterFlow Framework. +platform: flutter +control: PDF +documentation: ug +--- + +# How to add Syncfusion PDF 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 SfPDF 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 PDF widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion Flutter PDF](https://pub.dev/packages/syncfusion_flutter_PDF) 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 PDF](https://pub.dev/packages/syncfusion_flutter_PDF) 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 PDF](https://pub.dev/packages/syncfusion_flutter_PDF) 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 PDF](https://pub.dev/packages/syncfusion_flutter_PDF) 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 PDF](https://pub.dev/packages/syncfusion_flutter_PDF) 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_PDF/example) tab in [Syncfusion Flutter PDF](https://pub.dev/packages/syncfusion_flutter_PDF) 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-snippent.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 `Componenets` 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/pdf/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/pdf/how-to/how-to-section-images/Adding-code-snippent.png new file mode 100644 index 000000000..dfea67974 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/Adding-code-snippent.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/code-snippet.png b/Flutter/pdf/how-to/how-to-section-images/code-snippet.png new file mode 100644 index 000000000..6908bb20c Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/code-snippet.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/compile-code.png b/Flutter/pdf/how-to/how-to-section-images/compile-code.png new file mode 100644 index 000000000..4c0573712 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/compile-code.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/copy-package.png b/Flutter/pdf/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..b0ee783e3 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/copy-package.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/copy-version.png b/Flutter/pdf/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..079db09f1 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/copy-version.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/custom-widget.png b/Flutter/pdf/how-to/how-to-section-images/custom-widget.png new file mode 100644 index 000000000..675534438 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/custom-widget.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/dependency.png b/Flutter/pdf/how-to/how-to-section-images/dependency.png new file mode 100644 index 000000000..3d4f0f239 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/dependency.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/import-package-flutterflow.png b/Flutter/pdf/how-to/how-to-section-images/import-package-flutterflow.png new file mode 100644 index 000000000..9ae4d809e Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/import-package-flutterflow.png differ diff --git a/Flutter/pdf/how-to/how-to-section-images/page.png b/Flutter/pdf/how-to/how-to-section-images/page.png new file mode 100644 index 000000000..daa1cc515 Binary files /dev/null and b/Flutter/pdf/how-to/how-to-section-images/page.png differ diff --git a/Flutter/xlsio/how-to/custom-widget-on-flutterflow.md b/Flutter/xlsio/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..c9d7eba43 --- /dev/null +++ b/Flutter/xlsio/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: Excel(XlsIO) Widget in FlutterFlow | Syncfusion +description: You can learn here all about adding Syncfusion Flutter Excel(XlsIO) (SfXlsIO) widget in FlutterFlow Framework. +platform: flutter +control: Excel +documentation: ug +--- + +# How to add Syncfusion XlsIO 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 SfXlsIO 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 (Excel)XlsIO widget as a dependency + +1. Click on `+ Add Dependency`, a text editor will appear. +2. Navigate to [Syncfusion Flutter XlsIO](https://pub.dev/packages/syncfusion_flutter_XlsIO) 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 XlsIO](https://pub.dev/packages/syncfusion_flutter_XlsIO) 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 XlsIO](https://pub.dev/packages/syncfusion_flutter_XlsIO) 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 XlsIO](https://pub.dev/packages/syncfusion_flutter_XlsIO) 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 XlsIO](https://pub.dev/packages/syncfusion_flutter_XlsIO) 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_XlsIO/example) tab in [Syncfusion Flutter XlsIO](https://pub.dev/packages/syncfusion_flutter_XlsIO) 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-snippent.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 `Componenets` 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/xlsio/how-to/how-to-section-images/Adding-code-snippent.png b/Flutter/xlsio/how-to/how-to-section-images/Adding-code-snippent.png new file mode 100644 index 000000000..ae2d68195 Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/Adding-code-snippent.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/code-snippet.png b/Flutter/xlsio/how-to/how-to-section-images/code-snippet.png new file mode 100644 index 000000000..67290a32c Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/code-snippet.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/compile-code.png b/Flutter/xlsio/how-to/how-to-section-images/compile-code.png new file mode 100644 index 000000000..0d6317153 Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/compile-code.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/copy-package.png b/Flutter/xlsio/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..d6567265c Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/copy-package.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/copy-version.png b/Flutter/xlsio/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..b986a4edf Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/copy-version.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/custom-widget.png b/Flutter/xlsio/how-to/how-to-section-images/custom-widget.png new file mode 100644 index 000000000..675534438 Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/custom-widget.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/dependency.png b/Flutter/xlsio/how-to/how-to-section-images/dependency.png new file mode 100644 index 000000000..e876a7480 Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/dependency.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/import-package-flutterflow.png b/Flutter/xlsio/how-to/how-to-section-images/import-package-flutterflow.png new file mode 100644 index 000000000..713352f7a Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/import-package-flutterflow.png differ diff --git a/Flutter/xlsio/how-to/how-to-section-images/page.png b/Flutter/xlsio/how-to/how-to-section-images/page.png new file mode 100644 index 000000000..759969936 Binary files /dev/null and b/Flutter/xlsio/how-to/how-to-section-images/page.png differ diff --git a/flutter-toc.html b/flutter-toc.html index 35f3cc140..96d8f1918 100644 --- a/flutter-toc.html +++ b/flutter-toc.html @@ -299,6 +299,7 @@
  • Localization
  • Right to Left (RTL)
  • Accessibility
    • +
  • How to
  • @@ -347,6 +348,7 @@
  • Accessibility
  • RTL support
    • +
  • How to
  • @@ -506,6 +508,7 @@
    • @@ -561,6 +564,7 @@
  • Working with Attachments
  • Working with Layers
  • Working with Forms
    • +
  • How to
  • @@ -601,6 +605,7 @@
  • Working with Data
  • Working with Data Validation
  • Working with Tables
    • +
  • How to