Introducing the New Flutter Treemap Widget

As an addition to our existing gallery of Flutter widgets, we have added another popular data visualization widget in our Treemap. It visualizes flat and hierarchical data as rectangles that are sized and colored based on quantitative variables.

In this blog post, we will see an overview of the features included in the Flutter Treemap and how to get started with this new widget.

Different layouts

You can use layouts, namely squarified, slice, and dice, based on different algorithms for Treemap rendering.

Squarified

This layout arranges rectangles that are determined by the quantitative variable in a row and wrap them to the next row, depending on the available space.

Slice

This layout arranges all rectangles horizontally. The size of each rectangle is determined by the quantitative variable and available height.

Dice

This layout arranges all rectangles vertically. The size of each rectangle is determined by the quantitative variable and the available width.

Labels

Add any type of custom widget, typically a text widget, to improve the readability of individual tiles by providing brief descriptions as labels. It is also possible to position these custom widgets freely in the available space.

Levels

This feature supports visualizing both the single and multiples levels of data.

Flat data

You can visualize a flat data collection.

Hierarchical data

You can also arrange tiles in the form of nested rectangles. Each tile is filled with smaller rectangles representing subdata. You can have more than one level to form a hierarchical tree map.

Colors

Categorize the tiles on the Treemap widget by customizing their color based on levels. You can set the tile color for a specific value or for a range of values.

Value color mapping

With this feature, you can apply a specific color to a tile based on its data. For example, you can apply colors to countries based on their membership status in an organization.

Range color mapping

With this feature, you can easily apply colors to tiles if their data falls within a specific range. For example, you can apply colors to countries based on their population density.

Legend

Legends in the Treemap clearly provide information about data plotted in it.

Solid bar legend

You can also render a legend as a bar and customize the positions of its labels as needed. Use gradients as the legend bar background to show changes in regional data.

Selection

This feature highlights a tile when we tap or click on it. During this interaction, it also allows functionalities like page transitions, showing detailed information about a selected area, and more.

Tooltip

Display additional information about a tile using a completely customizable tooltip on the Treemap widget. You can customize the background color, stroke and corner radius of the tooltip.

Custom background

You can add any type of custom widget, such as an image widget, as a tile background to enrich the UI and enhance data visualization.

Add Flutter Treemap to your application

This section explains how to add the Flutter Treemap widget to your application and use its basic features.

Step 1: Create a basic Flutter application.

First things first, create a simple Flutter project with the instructions provided in Get started with your first Flutter app documentation.

Step 2: Add Flutter Treemap dependency.

Add the Syncfusion Flutter Treemap dependency in your pubspec.yaml file using the following code.

dependencies:
  syncfusion_flutter_treemap: ^19.1.55-beta
  //Use the latest available version.

Step 3: Get the packages.

Then, run the following command to get the required packages.

$ flutter pub get

Step 4: Import Flutter Treemap package.

Now, import the library using the following code.

import 'package:syncfusion_flutter_treemap/treemap.dart';

Step 5: Initialize Treemap and populate the data source.

After importing the package, initialize the Treemap widget as a child of any widget.

To populate the data source, set its count to the dataCount property of the Treemap. Then, the data will be grouped based on the values returned from the TreemapLevel.groupMapper callback. The quantitative value of the underlying data has to be returned from the weightValueMapper callback. Based on this value, every tile (rectangle) size will be rendered. You can have more than one TreemapLevel in the levels collection to form a hierarchical tree map.

Refer to the following code example.

late List _source;

@override
void initState() {
   _source = [
      SocialMediaUsers(
          country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
      SocialMediaUsers(
          country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
      SocialMediaUsers(
          country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
      SocialMediaUsers(
          country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
      SocialMediaUsers(
          country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
      SocialMediaUsers(
          country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
   ];
   super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: SfTreemap(
            dataCount: _source.length,
            weightValueMapper: (int index) {
              return _source[index].usersInMillions;
            },
            levels: [
              TreemapLevel(
                groupMapper: (int index) {
                  return _source[index].country;
                },
              ),
            ],
          ),
        ),
      ),
   );
}

class SocialMediaUsers {
  const SocialMediaUsers({
    required this.country,
    required this.socialMedia,
    required this.usersInMillions,
  });

  final String country;
  final String socialMedia;
  final double usersInMillions;
}

Step 6: Add labels.

Then, add any type of custom widget to the tiles based on the index using the TreemapLevel.labelBuilder property.

Refer to the following code.

late List _source;

@override
void initState() {
   _source = [
      SocialMediaUsers(
          country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
      SocialMediaUsers(
          country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
      SocialMediaUsers(
          country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
      SocialMediaUsers(
          country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
      SocialMediaUsers(
          country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
      SocialMediaUsers(
          country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
   ];
   super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: SfTreemap(
            dataCount: _source.length,
            weightValueMapper: (int index) {
              return _source[index].usersInMillions;
            },
            levels: [
              TreemapLevel(
                groupMapper: (int index) {
                  return _source[index].country;
                },
                labelBuilder: (BuildContext context, TreemapTile tile) {
                  return Padding(
                    padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1),
                    child: Text(tile.group),
                  );
                },
              ),
            ],
          ),
        ),
      ),
   );
}

class SocialMediaUsers {
   const SocialMediaUsers({
     required this.country,
     required this.socialMedia,
     required this.usersInMillions,
   });

   final String country;
   final String socialMedia;
   final double usersInMillions;
}

Step 7: Add tooltip.

Now, enable the tooltip in the tree map and return the completely customized widget using the tooltipBuilder property.

Refer to the following code.

late List _source;

@override
void initState() {
    _source = [
      SocialMediaUsers(
          country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4),
      SocialMediaUsers(
          country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11),
      SocialMediaUsers(
          country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3),
      SocialMediaUsers(
          country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65),
      SocialMediaUsers(
          country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54),
      SocialMediaUsers(
          country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93),
    ];
    super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
        child: Padding(
          padding: EdgeInsets.all(10),
          child: SfTreemap(
            dataCount: _source.length,
            weightValueMapper: (int index) {
              return _source[index].usersInMillions;
            },
            tooltipSettings: TreemapTooltipSettings(color: Colors.black),
            levels: [
              TreemapLevel(
                groupMapper: (int index) {
                  return _source[index].country;
                },
                labelBuilder: (BuildContext context, TreemapTile tile) {
                  return Padding(
                    padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1),
                    child: Text(tile.group),
                  );
                },
                tooltipBuilder: (BuildContext context, TreemapTile tile) {
                  return Padding(
                    padding: const EdgeInsets.only(
                         left: 5, right: 5, top: 2, bottom: 3),
                    child: Text(
                        'Country : ${tile.group}\nSocial media : ${tile.weight}M',
                        style: TextStyle(color: Colors.white)),
                  );
                },
              ),
            ],
          ),
        ),
      ),
   );
}

class SocialMediaUsers {
  const SocialMediaUsers({
    required this.country,
    required this.socialMedia,
    required this.usersInMillions,
  });

  final String country;
  final String socialMedia;
  final double usersInMillions;
}

Conclusion

In this blog post, we walked you through the new Syncfusion Flutter Treemap widget available in our Release Notes and What’s New page.

Check out the complete user guide for using Flutter Treemap and example projects. Additionally, you can check out our demo apps in Google Play Store, the App Store, and on our website.

If you need a new widget for the Flutter framework or new features in our existing widgets, you can contact us through our support forum, Direct-Trac, or feedback portal. As always, we are happy to assist you!

Related blogs

• What’s New in 2021 Volume 1: Flutter
• Introducing the New Flutter Linear Gauge Widget
• API Breaking Changes in Flutter DataGrid in 2021 Volume 1
• 5 Things Every Developer Must Know About Flutter 2