Flexmonster Software License Agreement (“Agreement”) has been significantly revised and is effective as of September 30, 2024.
The following modifications were made:
The modified version of Flexmonster Software License Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after September 30, 2024, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Flexmonster Software License Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license under License Model or Maintenance after the effective date of any modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
This tutorial will help you integrate Flexmonster with the Flutter framework.
Step 1. To get our sample project, download it as ZIP or clone it with the following commands:
git clone https://github.com/flexmonster/pivot-flutter cd pivot-flutter
Step 2. Install Flutter dependencies:
dart pub get
If any errors appear at this step, refer to the troubleshooting section.
Step 3. Open and connect your mobile device. Learn how to configure the device depending on its OS:
Step 4. Run the sample project from the console:
flutter run
The result will be displayed on your mobile device.
To shut down the project from the console, press Ctrl + C
(Control + C
on macOS).
Our sample Flutter project contains several examples:
report
, toolbar
, width
, and height
initialization parameters. See the list of Flexmonster’s initialization parameters in Flutter.Follow the steps below to integrate Flexmonster into a Flutter project.
Skip this step if you already have a Flutter project.
Сreate a Flutter project by running the following commands in the console:
flutter create flexmonster_project cd flexmonster_project
If you encounter any errors at this step, refer to the troubleshooting section.
To get Flexmonster for Flutter, run the following command inside your project:
flutter pub add flutter_flexmonster
If you encounter any errors at this step, refer to the troubleshooting section.
Note The flutter_flexmonster wrapper uses the latest Flexmonster version from our CDN.
Flexmonster has certain requirements for Android and iOS versions used in your Flutter project.
compileSdkVersion
and targetSdkVersion
must be 32 or higher.minSdkVersion
must be 19 or higher.For information on how to update build settings for Android, refer to the Flutter documentation.
iOS Deployment Target
and MinimumOSVersion
must be 9 or higher.For information on how to update build settings for iOS, refer to the Flutter documentation.
Step 4.1. Open the lib/
folder in your project and create a new .dart
file (e.g., Pivot.dart
):
import 'package:flutter/material.dart'; class Pivot extends StatelessWidget { const Pivot({super.key}); @override Widget build(BuildContext context) { } }
Step 4.2. Import the flutter_flexmonster wrapper into the Pivot.dart
file:
import 'package:flutter/material.dart'; import 'package:flutter_flexmonster/flutter_flexmonster.dart'; class Pivot extends StatelessWidget { const Pivot({super.key}); @override Widget build(BuildContext context) { } }
Step 4.3. Create a Flexmonster instance in the Pivot.dart
file and return it from the build() method:
import 'package:flutter/material.dart'; import 'package:flutter_flexmonster/flutter_flexmonster.dart'; class Pivot extends StatelessWidget { const Pivot({super.key}); @override Widget build(BuildContext context) { Flexmonster pivot = Flexmonster( toolbar: true, report: "https://cdn.flexmonster.com/github/demo-report.json" ); return pivot; } }
The toolbar
and the report
are Flexmonster's initialization parameters. See the full list of available parameters.
Step 4.4. Add the Flexmonster instance to a widget where you need the pivot table (e.g., main.dart
). For simplicity, you can copy and paste the following example into your main.dart
file:
import 'package:flutter/material.dart'; import 'Pivot.dart'; void main() { runApp(MaterialApp( title: 'Flexmonster Demo', home: Scaffold( appBar: AppBar( backgroundColor: const Color.fromARGB(255, 223, 56, 0), foregroundColor: const Color.fromARGB(255, 233, 233, 233), title: const Text('Flexmonster Demo')), // The Flexmonster instance body: const Pivot())) ); }
Step 5.1. Ensure that your mobile device is connected and running by entering the following command in the console:
flutter devices
If your device is not displayed, configure it depending on the OS:
Step 5.2. Run your project from the console:
flutter run
You can see the result on your mobile device.
To shut down the project from the console, press Ctrl + C
(Control + C
on macOS).
Most of Flexmonster’s initialization parameters are available in Flutter, except for the following:
container
componentFolder
customizeCell
customizeChartElement
customizeContextMenu
customizeAPIRequest
sortFieldsList
Note In Flutter, event handlers cannot be set as Flexmonster’s initialization parameters. Learn how to handle Flexmonster’s events.
In this section, you will learn how to use Flexmonster’s methods and events in a Flutter application.
Call Flexmonster’s methods on the variable with the Flexmonster instance (e.g., pivot
):
pivot.showCharts("pie");
Find more examples of using Flexmonster’s methods in our sample Flutter project.
Note All Flexmonster’s methods in Flutter are asynchronous, except for on() and off().
Most of Flexmonster’s methods work in Flutter just like in plain JavaScript. However, the following methods have certain usage specifics:
callbackHandler
parameter is unavailable.callbackHandler
parameter is unavailable.Besides, some API calls are not available in Flutter natively. However, you can still use them through JavaScript if needed:
To subscribe to a Flexmonster event, use the on() method:
void reportcompleteHandler() { // Your event handler } pivot.on("reportcomplete", reportcompleteHandler);
You can also specify your event handler as an anonymous function:
pivot.on("reportcomplete", () { // Your event handler });
If an event passes data to a handler, add the data
input parameter to the handler:
pivot.on("filteropen", (data) { // Your event handler });
Find more examples of subscribing to Flexmonster’s events in our sample Flutter project.
To unsubscribe from an event, use the off() method:
// Unsubscribe from all event handlers pivot.off("reportcomplete"); // Unsubscribe from a specific event handler pivot.off("reportcomplete", reportcompleteHandler);
Most of Flexmonster’s events work in Flutter just like in plain JavaScript. However, some events are not available in Flutter natively. Although, you can still use them through JavaScript if needed:
You can use JavaScript to access Flexmonster’s features that are not supported in Flutter out of the box (see the list of such methods and events).
To demonstrate this approach, let’s show an alert pop-up window once the report is loaded:
Step 1. Open or create a .dart
file that contains Flexmonster (e.g., UsingJavaScript.dart
) and import the webview_flutter plugin:
import 'package:flutter/material.dart'; import 'package:flutter_flexmonster/flutter_flexmonster.dart'; import 'package:webview_flutter/webview_flutter.dart'; class UsingJavaScript extends StatelessWidget { const UsingJavaScript({super.key}); @override Widget build(BuildContext context) { Flexmonster pivot = Flexmonster( toolbar: true, report: "https://cdn.flexmonster.com/github/demo-report.json" ); return pivot; } }
Step 2. Create an async
function as an anonymous handler for the reportcomplete event. This function will be responsible for running JavaScript code:
@override Widget build(BuildContext context) { Flexmonster pivot = Flexmonster( toolbar: true, report: "https://cdn.flexmonster.com/github/demo-report.json" ); pivot.on("reportcomplete", () async { // The async function where the JavaScript code will be executed }); return pivot; }
Step 3. Create a WebViewController object inside the handler:
pivot.on("reportcomplete", () async { // The async function where the JavaScript code will be executed WebViewController controller = await pivot.controller.future; });
The WebViewController instance can now be used to access the Flexmonster API.
Step 4. Invoke the runJavascript() method of the WebViewController object and pass your JavaScript code as a string parameter:
pivot.on("reportcomplete", () async { // The async function where the JavaScript code will be executed WebViewController controller = await pivot.controller.future; controller.runJavascript(''' flexmonster.alert({ title: "Report Loaded", message: "Your report has been loaded", type: "alert", blocking: false }); '''); });
Note If your JavaScript code returns data, use the runJavascriptReturningResult() method instead of runJavascript().
The alert pop-up window will be displayed once the report is fully loaded.
See another example of accessing Flexmonster functionality through JavaScript in our sample Flutter project.
This section provides solutions to the errors you may encounter while integrating with Flutter. If your error is not listed here, contact our Tech team.
To use the flutter
and dart
commands in the console, specify the Flutter SDK location in the PATH
environment variable. For more information, visit the Flutter documentation.
Your project depends on the webview_flutter version that is different from the version required by the flutter_flexmonster wrapper. Switch to the webview_flutter version that is required by the flutter_flexmonster:
flutter pub add webview_flutter:^3.0.4
flutter pub add webview_flutter:^2.0.4
You may be interested in the following articles: