Data Visualization Libraries for Flutter: Create Pivot Tables
Tags: flutter, mobile
Published: 2022-12-30 17:05:51

### What’s Flutter?
For those who are not familiar with it yet, Flutter is Google’s SDK for cross-platform development. Originally it was meant only for Android and IOS, but with the release of Flutter 2 in 2021 and Flutter 3 in 2022 came the support for building apps for the web, Windows, Linux, and macOS. So now, Flutter is a cross-platform technology that can be used to create software for multiple platforms with a single codebase.
Crucial aspects of Flutter development are Dart and widgets. Dart is an object-oriented language developed by Google, which lies at the foundation of Flutter. And widgets are the main building blocks in Flutter development. Literally, any object here is a widget — from buttons to styling components.

### What’s good about Flutter?
Now, let’s go over some reasons why you should consider using Flutter.
#### Growing community
According to the [2022 Stack Overflow developer survey](https://survey.stackoverflow.co/2022/#most-popular-technologies-misc-tech), Flutter ranked 6th across Frameworks and libraries in different domains, overtaking React Native by 2 places. And it’s even more popular with developers who are just learning to code -17.63% versus 12.56% for professionals, which speaks for a perspective of Flutter’s usage rising even more.
#### More for less
Flutter is a cross-platform technology, which means that it allows you to create apps for multiple platforms with a single codebase. Therefore, the development process will be faster and require fewer resources.
#### High performance
Flutter is not just a Framework, it’s a complete SDK with its own [architecture](https://docs.flutter.dev/resources/architectural-overview?r=ntom1). One of the advantages this brings is that Dart compiles directly into native code. For this reason, Flutter, unlike other Frameworks, doesn’t need a JavaScript bridge, so apps built with Flutter are much better in terms of performance.
#### Faster development thanks to hot reload
Creating UI or fixing bugs often takes a lot of time due to the need to constantly reload the app to see the changes made in code. It can take quite a long time until you achieve the desired results. That’s why Flutter’s hot reload feature is so great — it allows you to see the changes almost immediately with no restart required, which significantly simplifies and speeds up the working process.
#### Widgets
Flutter provides a variety of highly customizable and built-in widgets, which saves a lot of time in creating UI. But even if you don’t like any of them, you can create your own either using already existing ones or from scratch. Also, since Flutter uses its own widgets that are not connected to the platform, compatibility problems are unlikely, which is definitely a huge plus.
#### Similarities with other languages
Although Dart is not a widely used language, it doesn’t require much time to learn. It’s object-oriented, and the syntax is not that far from Java or JavaScript. Also, the process of creating UI with widgets that have different properties is kind of similar to composing HTML elements. This means that anyone at least somewhat familiar with web development, for example, will be able to easily pick up working with Flutter.

### Data Visualization
Although using Flutter has a lot of advantages, there are some cons to it, one of which is very noticeable when it comes to Data Visualization stuff. That is the lack of third-party libraries for Dart. Of course, some might argue that Flutter itself is rich in components and it doesn’t require external libraries, but in this area, that’s just not the case.
In terms of charts, there are indeed many packages that offer a great variety of chart types and designs, but charts are not everything. If you have a large amount of data, using a grid or a pivot table is often more convenient. And that’s where the number of options drastically shrinks. The only table widget Flutter offers is its [DataTable class](https://api.flutter.dev/flutter/material/DataTable-class.html?r=ntom1). And in terms of third-party libraries, there are very few options none of which, in my opinion, have enough functionality.
But fortunately, recently, we got one more option: [Flexmonster Pivot & Charts](https://www.flexmonster.com/?r=ntom1) released their integration with Flutter. So, let’s see what it has to offer.

### Flexmonster sample project
For an overall review of Flexmonster for Flutter, I will look at their [sample project](https://github.com/flexmonster/pivot-flutter/?r=ntom1) by cloning it from GitHub and running it on an android emulator. Of course, using a pivot with a huge amount of data from a smartphone is not very convenient, but still, there are cases when you need to use it on the mobile version of the application and quickly check some insights in real-time. Besides that, you can use Flexmonster on tablets.
On the main page, there’s a Pivot Table Demo. It consists of the pivot with pre-loaded and pre-formatted data and the toolbar on top.
![main page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwxrusatuzrt3r0kvgj6.jpg)
I like that this pivot is highly and easily customizable. Here’s what you can do with it:
Expanding or collapsing sub-categories. In the screenshot, for example, we can see data for each quarter in 2019 and for each status in Japan, while for other rows and columns, only the total numbers are displayed.
Selecting, deselecting, and rearranging fields. This can be done by pressing on the diagonal arrow in the top right corner of the grid.
Sorting, filtering, and conditional formatting. Here, for example, they already highlighted values over 35k green and under 2k red.
Choosing another dataset. Flexmonster supports not only .csv and .json files but also OLAP and Elasticsearch. To select a dataset, press the corresponding buttons on the toolbar.
Charts. Flexmonster has built-in charts, which you can either configure in code or build while the app is already running by using the toolbar. In the case of this sample project, on the “Using API calls” tab, there’s a preconfigured pie chart with the total data for 2018. I like how here we also can choose right on the spot which data will be displayed.
![pie chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jax1eex4k87g7n6cjrwg.jpg)
So, the Flexmonster component does a great job of managing tabular data. It has great functionality and offers a wide range of tools for data analysis without complicating everything too much. If any time soon I need such a widget in my project, I’ll definitely consider using this one.

### Integrating Flexmonster into your project
The first thing to keep in mind if this review got you interested in the package, is that Flexmonster requires Flutter 2.17.6 or higher. If everything’s cool with that, then detailed instructions on how to integrate this package into your project can be found in [Flexmonster’s documentation](https://www.flexmonster.com/doc/integration-with-flutter/?r=ntom1).
Here’s a quick overview of the steps mentioned there:
add the package dependency
update build settings
embed Flexmonster (importing the wrapper, creating a Flexmonster instance, and adding that instance to the widget)
run the project
The documentation also contains a bunch of other useful topics like Flexmonster’s parameters in Flutter, the use of methods and events, accessing additional functionality through JavaScript, and Troubleshooting. 
Considering straightforward instructions and the coverage of nuances and possible troubles in the documentation, I think it’s safe to assume that the integration process should be quite easy

### Bottom line
Flutter is a cross-platform technology with great potential. Flutter development has a lot of minor and major advantages, although there still are some blank spots. But even those that can be covered with specific external packages. For example, in Data Viz you can use tools that already existed prior to Flutter but can be integrated with it. And besides quite well-known libraries such as [Highcharts package for Flutter](https://pub.dev/packages/high_chart?r=ntom1), or [Syncfusion](https://www.syncfusion.com/demos/flutter?r=ntom1), you can now also use [Flexmonster Pivot and Charts](https://www.flexmonster.com/doc/integration-with-flutter/?r=ntom1), a review on which you’ve already read in this article.