How to add Syncfusion® Spark Chart in FlutterFlow

18 Nov 20182 minutes to read

Overview

FlutterFlow enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. It also lets you include custom widgets that are not part of the default FlutterFlow widget collection. This article explains how to incorporate the SfSparkLineChart widget as a custom widget in FlutterFlow.

Create a new project

Navigate to the FlutterFlow 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 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 the [</>] icon.
  5. A popup appears with the startup code; locate the </> Copy to Editor button and click it.
  6. Save the widget.

Custom Widget

Add Spark Chart widget as a dependency

  1. Click + Add Dependency; a text editor appears.
  2. Navigate to Syncfusion® Flutter Charts in pub.dev and copy the dependency name and version using the Copy to Clipboard option.
    Version
  3. Paste the copied dependency into the text editor, then click Refresh and Save.

Note: The live version of Syncfusion® Flutter Charts has been migrated to the latest version of Flutter SDK. To ensure compatibility, check FlutterFlow’s current Flutter version and obtain the corresponding version of Syncfusion® Flutter Charts by referring to the SDK compatibility.

Dependency

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 depends on the 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 page. Under the Import it section, copy the package import statement.
    Package
  2. Paste the copied import statement into the code editor and then Save it.
    Import

Add widget code snippet in code editor

  1. Navigate to the Example tab in Syncfusion® Flutter Charts and copy the widget-specific code.
    Code
  2. Paste the copied code sample into the code editor, click Format Code, and Save it.
    Code snippet

Compile the code

  1. Click the Compile Code button 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 compiles successfully, save the process.

Compile code

Note: The compilation process takes 2 to 3 minutes to complete.

Utilize the custom widget

  1. Navigate to Widget Palette in the left-side navigation menu.
  2. Click the Components tab.
  3. Your custom widget appears under Custom Code Widgets. Drag and drop it onto your page.

Page