Skip to content

DOCINFRA-2341_merged_using_automation #804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 15, 2024
Merged

DOCINFRA-2341_merged_using_automation #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73bcac5
FLUT-873260-[documentation][flutter]: Review correction added for how…
AswiniDileep Mar 15, 2024
495dac7
Merge pull request #803 from syncfusion-content/FLUT-873260-How-To-Se…
Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 9 additions & 14 deletions Flutter/DateRangePicker/how-to/custom-widget-on-flutterflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: DateRangePicker widget in FlutterFlow framework | Syncfusion
description: You can learn here all about adding Syncfusion Flutter DateRangePicker (SfDateRangePicker ) widget in FlutterFlow framework.
title: DateRangePicker Widget in FlutterFlow framework | Syncfusion
description: You can learn here all about adding Syncfusion Flutter DateRangePicker ( SfDateRangePicker ) widget in FlutterFlow framework.
platform: flutter
control: SfDateRangePicker
documentation: ug
Expand All @@ -20,9 +20,9 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
### 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. From there, select `Widget`.
2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`.
3. Update the widget name as desired.
4. Click on the `View Boilerplate Code` button on the right side, represented by this icon `[</>]`.
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.

Expand All @@ -35,36 +35,31 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
![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 DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) has been migrated to the latest version of Flutter SDK. To ensure compatibility, please check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
>**Note**: The live version of [Syncfusion Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) 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 DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) 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 DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) 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 DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) 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_datepicker/example) tab in [Syncfusion Flutter DatePicker](https://pub.dev/packages/syncfusion_flutter_datepicker) and copy the widget specific codes.

![Code](how-to-section-images/code-snippet.png)

3. Paste the copied code snippet into the code editor, click `Format Code`, and `Save` it.

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 on the 'Compile Code' button located in the top right corner.
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)
Expand All @@ -75,6 +70,6 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

1. Navigate to `Widget Palette` located in the left side navigation menu.
2. Click on the `Componenets` tab.
3. Under `Custom Code Widgets`, your custom widget will be there. Now, the custom widget can be added to your page by drag-and-drop.
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)
23 changes: 9 additions & 14 deletions Flutter/barcode/how-to/custom-widget-on-flutterflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Barcodes widget in FlutterFlow | Syncfusion
description: You can learn here all about how to adding Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget in FlutterFlow.
title: Barcodes Widget in FlutterFlow | Syncfusion
description: You can learn here all about adding Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget in FlutterFlow.
platform: flutter
control: SfBarcodeGenerator
documentation: ug
Expand All @@ -20,9 +20,9 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
### 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. From there, select `Widget`.
2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`.
3. Update the widget name as desired.
4. Click on the `View Boilerplate Code` button on the right side, represented by this icon `[</>]`.
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.

Expand All @@ -35,36 +35,31 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
![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 Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) has been migrated to the latest version of Flutter SDK. To ensure compatibility, please check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
>**Note**: The live version of [Syncfusion Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) 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 Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) 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 Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) 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 Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) 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_barcodes/example) tab in [Syncfusion Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) and copy the widget specific codes.

![Code](how-to-section-images/code-snippet.png)

3. Paste the copied code snippet into the code editor, click `Format Code`, and `Save` it.

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 on the 'Compile Code' button located in the top right corner.
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)
Expand All @@ -75,6 +70,6 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

1. Navigate to `Widget Palette` located in the left side navigation menu.
2. Click on the `Componenets` tab.
3. Under `Custom Code Widgets`, your custom widget will be there. Now, the custom widget can be added to your page by drag-and-drop.
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)
23 changes: 9 additions & 14 deletions Flutter/calendar/how-to/custom-widget-on-flutterflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Calendar widget in FlutterFlow | Syncfusion
description: You can learn here all about how to adding Syncfusion Flutter Calendar (SfCalendar) widget in FlutterFlow.
title: Calendar Widget in FlutterFlow | Syncfusion
description: You can learn here all about adding Syncfusion Flutter Calendar ( SfCalendar Widget ) widget in FlutterFlow.
platform: flutter
control: SfCalendar
documentation: ug
Expand All @@ -20,9 +20,9 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
### 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. From there, select `Widget`.
2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`.
3. Update the widget name as desired.
4. Click on the `View Boilerplate Code` button on the right side, represented by this icon `[</>]`.
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.

Expand All @@ -35,36 +35,31 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
![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 Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) has been migrated to the latest version of Flutter SDK. To ensure compatibility, please check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion Flutter Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
>**Note**: The live version of [Syncfusion Flutter Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) 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 Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) 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 Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) 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 Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) 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_calendar/example) tab in [Syncfusion Flutter Calendar](https://pub.dev/packages/syncfusion_flutter_calendar) and copy the widget specific codes.

![Code](how-to-section-images/code-snippet.png)

3. Paste the copied code snippet into the code editor, click `Format Code`, and `Save` it.

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 on the 'Compile Code' button located in the top right corner.
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)
Expand All @@ -75,6 +70,6 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

1. Navigate to `Widget Palette` located in the left side navigation menu.
2. Click on the `Componenets` tab.
3. Under `Custom Code Widgets`, your custom widget will be there. Now, the custom widget can be added to your page by drag-and-drop.
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)
23 changes: 9 additions & 14 deletions Flutter/cartesian-charts/how-to/custom-widget-on-flutterflow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Cartesian Charts widget in FlutterFlow | Syncfusion
description: Learn here all about adding Syncfusion Cartesian Charts widget in FlutterFlow.
title: Cartesian Charts Widget in FlutterFlow | Syncfusion
description: Learn here all about adding Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget in FlutterFlow.
platform: flutter
control: Chart
documentation: ug
Expand All @@ -20,9 +20,9 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
### 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. From there, select `Widget`.
2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`.
3. Update the widget name as desired.
4. Click on the `View Boilerplate Code` button on the right side, represented by this icon `[</>]`.
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.

Expand All @@ -35,36 +35,31 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an
![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 Charts](https://pub.dev/packages/syncfusion_flutter_charts) has been migrated to the latest version of Flutter SDK. To ensure compatibility, please check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility).
>**Note**: The live version of [Syncfusion Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) 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 Charts](https://pub.dev/packages/syncfusion_flutter_charts) 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 Charts](https://pub.dev/packages/syncfusion_flutter_charts) 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 Charts](https://pub.dev/packages/syncfusion_flutter_charts) 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_charts/example) tab in [Syncfusion Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) and copy the widget specific codes.

![Code](how-to-section-images/code-snippet.png)

3. Paste the copied code snippet into the code editor, click `Format Code`, and `Save` it.

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 on the 'Compile Code' button located in the top right corner.
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)
Expand All @@ -75,6 +70,6 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

1. Navigate to `Widget Palette` located in the left side navigation menu.
2. Click on the `Componenets` tab.
3. Under `Custom Code Widgets`, your custom widget will be there. Now, the custom widget can be added to your page by drag-and-drop.
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)
Loading