Introducing the New Flutter Treemap Widget | Syncfusion Blogs
Detailed Blog page Skeleton loader
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 2021 Volume 1 releaseTreemap. 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.

Squarified Layout in Flutter Treemap
Squarified Layout in Flutter Treemap

Slice

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

Slice Layout in Flutter Treemap
Slice Layout in Flutter Treemap

Dice

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

Dice Layout in Flutter Treemap
Dice Layout in Flutter Treemap

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.

Labels in Flutter Treemap
Labels in Flutter Treemap

Levels

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

Flat data

You can visualize a flat data collection.

Visualizing Flat Data in Flutter Treemap
Visualizing Flat Data in Flutter Treemap

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.

Visualizing Hierarchical Data in Flutter Treemap
Visualizing Hierarchical Data in Flutter Treemap

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.

Value Color Mapping in Flutter Treemap
Value Color Mapping in Flutter Treemap

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.

Range Color Mapping in Flutter Treemap
Range Color Mapping in Flutter Treemap

Legend

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

Legend Support in Flutter Treemap
Legend Support in Flutter Treemap

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.

Solid Bar Legend in Flutter Treemap
Solid Bar Legend in Flutter Treemap

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.

Highlighting the Selected Tile in Flutter Treemap
Highlighting the Selected Tile in Flutter Treemap

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.

Tooltip Support in Flutter Treemap
Tooltip Support in Flutter Treemap

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.

Custom Background in Flutter Treemap
Custom Background in Flutter Treemap

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;
}
Rendering a Basic Flutter Treemap
Rendering a Basic Flutter Treemap

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;
}
Adding Labels in Flutter Treemap
Labels in Flutter Treemap

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;
}
Adding Tooltip in Flutter Treemap
Tooltip in Flutter Treemap

Conclusion

In this blog post, we walked you through the new Syncfusion Flutter Treemap widget available in our 2021 Volume 1 release. It helps you to easily visualize both the flat and hierarchical data with its custom, vivid features. So, try this widget and share your feedback in the comments section below. You can check out the other new widgets and features added in this release on 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 forumDirect-Trac, or feedback portal. As always, we are happy to assist you!

googleplay.png

Related blogs

Be the first to get updates

Mohamed Samsudeen

Meet the Author

Mohamed Samsudeen

Mohamed Samsudeen is a Product Manager for Xamarin, Flutter, WinUI, and WPF products in Syncfusion. He has been a .NET developer since 2013 who is now prominently working in creating and managing custom components for WPF and WinUI platforms.