How to deep dive into drilldown feature of the SfTreemap?

This article demonstrates how to effectively use the drilldown feature of the SfTreemap widget in Flutter.

The SfTreemap widget is used for visualizing hierarchical data. It effectively displays data in a way that highlights relationships between different levels of hierarchy, such as countries and states, using nested rectangles. Each level in the treemap, configured through the TreemapLevel, can be customized to represent a specific hierarchical level. You can customize these levels with different labels, colors, and visual properties to improve clarity and distinguish between different sections of the data.

One of the interactive features of the SfTreemap. This functionality allows users to start with a high-level view, such as data by country, and then interactively drilldown to more detailed levels, like specific states within that country. When users click, the SfTreemap updates to show the next level of detail, making it easy to explore complex data step by step. This makes SfTreemap a valuable tool for visualizing and analyzing multi-level data.

Step 1: Prepare the data

Obtain data points from the buildDataSource method.

List<ProductSales> _source = _buildDataSource;

Step 2: Enable drilldown in SfTreemap

The enableDrilldown property in the SfTreemap widget is used to make the treemap interactive, allowing users to explore hierarchical data in more detail by clicking on different levels. This feature is essential for applications where users need to examine data at different levels.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfTreemap(
        dataCount: _source.length,
        enableDrilldown: true,
        weightValueMapper: (int index) => _source[index].salesAmount!,
        tooltipSettings: _buildTreemapTooltipSettings(),
        breadcrumbs: _buildTreemapBreadCrumbs(),
        levels: [
          _buildProductTreemapLevel(),
          _buildCountryTreemapLevel(),
          _buildStateTreemapLevel(),
        ],
      ),
    );
  }

Step 3: Configure tooltip and breadcrumb

In this step, set up the tooltip options and create the breadcrumbs for navigating the treemap.

  TreemapTooltipSettings _buildTreemapTooltipSettings() {
    return const TreemapTooltipSettings(
      color: Color.fromRGBO(45, 45, 45, 1),
    );
  }

  TreemapBreadcrumbs _buildTreemapBreadCrumbs() {
    return TreemapBreadcrumbs(
      builder: (BuildContext context, TreemapTile tile, bool isCurrent) {
        if (tile.group == 'Home') {
          return const Icon(Icons.home, color: Colors.black);
        } else {
          return Text(tile.group, style: const TextStyle(color: Colors.black));
        }
      },
      divider: const Icon(Icons.chevron_right, color: Colors.black),
      position: TreemapBreadcrumbPosition.top,
    );
  }

Step 4: Initial treemap level

Create the treemap for the product level as shown in the code snippet below:

  TreemapLevel _buildProductTreemapLevel() {
    return TreemapLevel(
      groupMapper: (int index) => _source[index].productName,
      labelBuilder: (BuildContext context, TreemapTile tile) {
        return const SizedBox.shrink();
      },
      colorValueMapper: (TreemapTile tile) {
        return _colors[_source[tile.indices[0]].productName] ?? Colors.grey;
      },
      itemBuilder: (BuildContext context, TreemapTile tile) {
        return _buildItemBuilder(tile);
      },
    );
  }

Step 5: Second treemap level

Create the treemap for the country level as shown in the code snippet below:

  TreemapLevel _buildCountryTreemapLevel() {
    return TreemapLevel(
      groupMapper: (int index) => _source[index].countryName,
      colorValueMapper: (TreemapTile tile) {
        final productName = _source[tile.indices[0]].productName;
        return _colors[productName];
      },
      labelBuilder: (BuildContext context, TreemapTile tile) {
        return const SizedBox.shrink();
      },
      tooltipBuilder: (BuildContext context, TreemapTile tile) {
        final int index = tile.indices[0];
        final product = _source[index];
        return Padding(
          padding: const EdgeInsets.fromLTRB(10.0, 7.0, 10.0, 8.5),
          child: SizedBox(
            height: 70,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                buildRichText(context, 'Country : ', product.countryName),
                buildRichText(context, 'Product : ', product.productName),
                buildRichText(context, 'Amount : ',
                    '\$${product.salesAmount?.toStringAsFixed(2)}'),
              ],
            ),
          ),
        );
      },
      itemBuilder: (BuildContext context, TreemapTile tile) {
        return _buildItemBuilderLevel(tile);
      },
    );
  }

Step 6: Third treemap level

Create the treemap for the state level as shown in the code snippet below:

TreemapLevel _buildStateTreemapLevel() {
    return TreemapLevel(
      groupMapper: (int index) => _source[index].state,
      colorValueMapper: (TreemapTile tile) {
        final productName = _source[tile.indices[0]].productName;
        return _colors[productName];
      },
      labelBuilder: (BuildContext context, TreemapTile tile) {
        return const SizedBox.shrink();
      },
      tooltipBuilder: (BuildContext context, TreemapTile tile) {
        final int index = tile.indices[0];
        final product = _source[index];
        return Padding(
          padding: const EdgeInsets.fromLTRB(10.0, 7.0, 10.0, 8.5),
          child: SizedBox(
            height: 70,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                buildRichText(context, 'State : ', product.state as String),
                buildRichText(context, 'Product : ', product.productName),
                buildRichText(context, 'Amount : ',
                    '\$${product.salesAmount?.toStringAsFixed(2)}'),
              ],
            ),
          ),
        );
      },
      itemBuilder: (BuildContext context, TreemapTile tile) {
        return _buildItemBuilderLevel(tile);
      },
    );
  }

By following the provided code snippets, you can effectively add a treemap with a drilldown feature to your Flutter application.

View the GitHub sample here.

Conclusion

I hope you enjoyed learning about how to implement the drilldown feature of the SfTreemap widget in Flutter.

You can refer to our Flutter Treemap feature tour page to learn about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through oursupport forums, Direct-Trac, or feedback portal. We are always happy to assist you!