Integration with Flutter

This guide describes how to integrate WebDataRocks with Flutter.

Prerequisites

Flutter 2.17.6 or greater
Internet connection

This tutorial is split into the following sections:

Run our sample project from GitHub
Integrate with Flutter
WebDataRocks initialization parameters
Use methods and events
Access unsupported WebDataRocks features through JavaScript

Run our sample project from GitHub

Step 1. Download or clone the sample project from GitHub with the following commands:

git clone https://github.com/webdatarocks/pivot-flutter
cd pivot-flutter

Step 2. Install dependencies described in the pubspec.yaml file:

dart pub get

If you get an error on this step, add the Flutter SDK location to the PATH environment variable. Learn more in the Flutter docs.

Step 3. Connect a mobile device. Learn how to configure Android and iOS devices.

Step 4. Run the project:

flutter run

You can see the result on your mobile device.

To stop the project, press Ctrl + C (Control + C on macOS) in the console.

Available examples

The sample project contains the following examples:

Pivot table demo – Shows how to specify WebDataRocks initialization parameters in Flutter.
Using API calls – Shows how to invoke WebDataRocks API calls in Flutter.
Handling events – Shows how to handle WebDataRocks events in Flutter.
Customizing cells – Shows how to access all WebDataRocks features using JavaScript.

Integrate with Flutter

To integrate WebDataRocks into a Flutter app, take the following steps:

Step 1 (optional). Create a project

If you don’t have an existing Flutter project, create one with the following command:

flutter create wdr_project && cd wdr_project

If you get an error on this step, add the Flutter SDK location to the PATH environment variable. Learn more in the Flutter docs.

Step 2. Download WebDataRocks

Get WebDataRocks package for Flutter by running the following command from your project’s root folder:

flutter pub add flutter_webdatarocks

Note. Our flutter_webdatarocks wrapper loads WebDataRocks files from CDN.

Step 3. Configure build settings

Ensure the required Android and iOS versions are used in your Flutter project.

Android

compileSdkVersion ≥ 32.
targetSdkVersion ≥ 32.
minSdkVersion ≥ 19.

iOS

iOS Deployment Target ≥ 9.
MinimumOSVersion ≥ 9.

Learn how to configure Android and iOS build settings in Flutter.

Step 4. Add WebDataRocks

Step 4.1. Create a .dart file (e.g., WDR.dart) in the lib/ folder of your project:

import 'package:flutter/material.dart';
 
class WDR extends StatelessWidget {
  const WDR({super.key});
 
  @override
  Widget build(BuildContext context) {
  }
}

Step 4.2. Import flutter_webdatarocks into the WDR.dart file:

import 'package:flutter/material.dart';
import 'package:flutter_webdatarocks/flutter_webdatarocks.dart';

class WDR extends StatelessWidget {
  const WDR({super.key});
 
  @override
  Widget build(BuildContext context) {
  }
}

Step 4.3. Create a WebDataRocks instance and return it from the build() method:

import 'package:flutter/material.dart';
import 'package:flutter_webdatarocks/flutter_webdatarocks.dart';

class WDR extends StatelessWidget {
  const WDR({super.key});
 
  @override
  Widget build(BuildContext context) {
    WebDataRocks pivot = WebDataRocks(
      toolbar: true, 
      report: const {
        "dataSource": {
          "dataSourceType": "csv",
          "filename": "https://cdn.webdatarocks.com/data/data.csv"
        }
      }
    );
    return pivot;
  }
}

The toolbar and the report are WebDataRocks initialization parameters. See the list of supported parameters.

Step 4.4. Add the WebDataRocks instance to a Flutter widget where the pivot table should appear. For example, copy and paste the code below into your main.dart file:

import 'package:flutter/material.dart';
import 'WDR.dart';
 
void main() {
  runApp(MaterialApp(
    title: 'WebDataRocks Demo',
    home: Scaffold(
      appBar: AppBar(
        backgroundColor: const Color.fromARGB(255, 5, 152, 223),
        foregroundColor: const Color.fromARGB(255, 233, 233, 233),
        title: const Text('WebDataRocks Demo')),
      // The WebDataRocks instance
      body: const WDR()))
  ); 
}

Step 5. Launch the app

Step 5.1. Run the following command to make sure a mobile device is connected:

flutter devices

If the device is not shown, check out Flutter setup guides for Android and iOS.

Step 5.2. Launch your app with the following command:

flutter run

See the results on the mobile device.

To stop the project, press Ctrl + C (Control + C on macOS) in the console.

WebDataRocks initialization parameters

In Flutter, most WebDataRocks initialization parameters are supported, except for the following:

container
customizeCell
Event handlers. See how to subscribe to WebDataRocks events.

Use methods and events

Using methods

You can invoke WebDataRocks methods via the variable with the WebDataRocks instance (e.g., pivot):

pivot.openFieldsList();

Check out an example on GitHub.

Note. In Flutter, all WebDataRocks API calls are asynchronous, except for on() and off().

Supported WebDataRocks methods

Most WebDataRocks methods are supported in Flutter, apart from the following:

Note. Unsupported methods can be accessed via JavaScript.

Using events

Subscribing

Attach a handler to a WebDataRocks event using the on() API call:

void updateHandler() {
  // Event handler
}

pivot.on("update", updateHandler);

An event handler can also be defined as an anonymous function:

pivot.on("update", () {
  // Event handler
});

To get data from an event, add the data input parameter to the handler:

pivot.on("cellclick", (data) {
  // Event handler
});

Check out an example on GitHub.

See the full list of WebDataRocks events.

Unsubscribing

Event handlers can be removed via the off() API call:

Remove all handlers from a specific event:
```
pivot.off("cellclick"); 
```

Remove a specific event handler:

pivot.off("cellclick", cellclickHandler);

Access unsupported WebDataRocks features through JavaScript

Using JavaScript, you can access WebDataRocks methods that are not directly supported in Flutter.

For instance, let’s highlight cells you click using customizeCell:

Step 1. Import webview_flutter in the .dart file with WebDataRocks (e.g., WDR.dart):

import 'package:flutter/material.dart';
import 'package:flutter_webdatarocks/flutter_webdatarocks.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
class WDR extends StatelessWidget {
  const WDR ({super.key});
 
  @override
  Widget build(BuildContext context) {
    WebDataRocks pivot = WebDataRocks(
      toolbar: true, 
      report: const {
        "dataSource": {
          "dataSourceType": "csv",
          "filename": "https://cdn.webdatarocks.com/data/data.csv"
        }
      }
    );
    return pivot;
  }
}

Step 2. Create an anonymous async handler for the cellclick event. JavaScript code will be run in the handler:

@override
Widget build(BuildContext context) {
  WebDataRocks pivot = WebDataRocks(
    toolbar: true, 
    report: const {
      "dataSource": {
        "dataSourceType": "csv",
        "filename": "https://cdn.webdatarocks.com/data/data.csv"
      }
    }
  );
  pivot.on("cellclick", (data) async {
    // Your JavaScript code will be run here
  });
  return pivot;
}

Step 3. Create a WebViewController instance (e.g., controller) in the handler:

pivot.on("cellclick", (data) async {
  // Your JavaScript code will be run here
  WebViewController controller = await pivot.controller.future;
});

Step 4. Call the runJavascript() method on the controller and specify JavaScript code as a parameter:

pivot.on("cellclick", (data) async {
  // Your JavaScript code will be run here
  WebViewController controller = await pivot.controller.future;
  controller.runJavascript('''
    webdatarocks.customizeCell((cellBuilder, cellData) => {
      if(cellData.label === "${data['label']}") {
        cellBuilder.style.background = "rgba(5, 152, 223, 0.5)";
      }
    });
  ''');
});

Note. runJavascript() does not return the result of your JavaScript code. To return the result, use the runJavascriptReturningResult() method instead.

Now every time you click a grid cell, it is highlighted with a blue color.

Check out another example of using JavaScript in our sample GitHub project.