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:
containercomponentFoldercustomizeCellcustomizeChartElementcustomizeContextMenucustomizeAPIRequestsortFieldsListNote 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: