We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Integration with Flutter

    This tutorial will help you integrate Flexmonster with the Flutter framework.

    Prerequisites

    Run a sample Flutter project from GitHub

    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).

    Usage examples

    Our sample Flutter project contains several examples:

    Integrate Flexmonster into a Flutter project

    Follow the steps below to integrate Flexmonster into a Flutter project.

    Step 1. (optional) Create 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.

    Step 2. Get Flexmonster

    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.

    Step 3. Update build settings

    Flexmonster has certain requirements for Android and iOS versions used in your Flutter project.

    Android

    • 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

    • 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. Embed Flexmonster

    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. Run the project

    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).

    Flexmonster’s parameters

    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.

    Use methods and events in Flutter

    In this section, you will learn how to use Flexmonster’s methods and events in a Flutter application.

    Use methods

    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().

    Specifics of using Flexmonster’s methods in Flutter

    Most of Flexmonster’s methods work in Flutter just like in plain JavaScript. However, the following methods have certain usage specifics:

    Besides, some API calls are not available in Flutter natively. However, you can still use them through JavaScript if needed:

    Use events

    Subscribing to events

    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.

    Unsubscribing from events

    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); 

    Specifics of using Flexmonster’s events in Flutter

    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:

    Access Flexmonster functionality through JavaScript

    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.

    Troubleshooting

    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.

    Console error: ‘dart’ or ‘flutter’ command is not recognized

    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.

    Console error: Because flutter_flexmonster >=2.9.35 depends on webview_flutter ^3.0.4 and flutter_flexmonster <2.9.35 depends on webview_flutter ^2.0.4, every version of flutter_flexmonster requires webview_flutter ^2.0.4 or ^3.0.4.
    So, because <your project name> depends on both webview_flutter ^<version used in your project> and flutter_flexmonster any, version solving failed.

    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:

    What’s next?

    You may be interested in the following articles: