Color Customization in Flutter Treemap (SfTreemap)

6 Aug 202616 minutes to read

This section explains the customization of color for the tiles based on a specific value or range of values.

Level color

You can apply uniform color to the whole level using the TreemapLevel.color property.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_treemap/treemap.dart';

class TreemapLevelColorExample extends StatefulWidget {
  const TreemapLevelColorExample({super.key});

  @override
  State<TreemapLevelColorExample> createState() =>
      _TreemapLevelColorExampleState();
}

class _TreemapLevelColorExampleState extends State<TreemapLevelColorExample> {
  late List<JobVacancyModel> _source;

  @override
  void initState() {
    _source = <JobVacancyModel>[
      const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70),
      const JobVacancyModel(
          country: 'America', job: 'Technical', group: 'Testers', vacancy: 35),
      const JobVacancyModel(
          country: 'America',
          job: 'Technical',
          group: 'Developers',
          role: 'Windows',
          vacancy: 105),
      const JobVacancyModel(
          country: 'America',
          job: 'Technical',
          group: 'Developers',
          role: 'Web',
          vacancy: 40),
      const JobVacancyModel(
          country: 'India', job: 'Technical', group: 'Testers', vacancy: 25),
      const JobVacancyModel(
          country: 'India',
          job: 'Technical',
          group: 'Developers',
          role: 'Windows',
          vacancy: 155),
      const JobVacancyModel(
          country: 'India',
          job: 'Technical',
          group: 'Developers',
          role: 'Web',
          vacancy: 60),
      const JobVacancyModel(
          country: 'Germany', job: 'Technical', group: 'Testers', vacancy: 25),
      const JobVacancyModel(
          country: 'Germany',
          job: 'Technical',
          group: 'Developers',
          role: 'Windows',
          vacancy: 155),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfTreemap(
        dataCount: _source.length,
        weightValueMapper: (int index) {
          return _source[index].vacancy;
        },
        levels: [
          TreemapLevel(
            groupMapper: (int index) => _source[index].country,
            color: Colors.cyan,
            padding: const EdgeInsets.all(1.5),
          ),
          TreemapLevel(
            groupMapper: (int index) => _source[index].job,
            color: Colors.pink[200],
            padding: const EdgeInsets.all(10),
          ),
          TreemapLevel(
            groupMapper: (int index) => _source[index].group,
            color: Colors.green[400],
            padding: const EdgeInsets.all(10),
          ),
        ],
      ),
    );
  }
}

class JobVacancyModel {
  const JobVacancyModel({
    required this.country,
    required this.job,
    this.group,
    this.role,
    required this.vacancy,
  });

  final String country;
  final String job;
  final String? group;
  final String? role;
  final double vacancy;
}

Levels color customization

NOTE

Equal color mapping

If you return a value of a type other than color from the TreemapLevel.colorValueMapper, then you must set the colorMappers property, which is a collection of TreemapColorMapper.

The value returned from the TreemapLevel.colorValueMapper callback will be used for the comparison in the TreemapColorMapper.value. For the matched values, the TreemapColorMapper.color will be applied to the respective tiles.

NOTE

You can customize the legend icons color and texts using the TreemapColorMapper.color and the TreemapColorMapper.value properties respectively.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_treemap/treemap.dart';

class TreemapEqualColorMappingExample extends StatefulWidget {
  const TreemapEqualColorMappingExample({super.key});

  @override
  State<TreemapEqualColorMappingExample> createState() =>
      _TreemapEqualColorMappingExampleState();
}

class _TreemapEqualColorMappingExampleState
    extends State<TreemapEqualColorMappingExample> {
  late List<SocialMediaUsers> _source;
  late List<TreemapColorMapper> _colorMappers;

  @override
  void initState() {
    _source = <SocialMediaUsers>[
      const SocialMediaUsers('India', 'Facebook', 25.4),
      const SocialMediaUsers('USA', 'Instagram', 19.11),
      const SocialMediaUsers('Japan', 'Facebook', 13.3),
      const SocialMediaUsers('Germany', 'Instagram', 10.65),
      const SocialMediaUsers('France', 'Twitter', 7.54),
      const SocialMediaUsers('UK', 'Instagram', 4.93),
    ];

    _colorMappers = <TreemapColorMapper>[
      TreemapColorMapper.value(value: 'Facebook', color: Colors.blue[200]!),
      TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange),
      TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfTreemap(
        dataCount: _source.length,
        weightValueMapper: (int index) {
          return _source[index].usersInMillions;
        },
        levels: [
          TreemapLevel(
            padding: const EdgeInsets.all(2.5),
            groupMapper: (int index) {
              return _source[index].country;
            },
            labelBuilder: (BuildContext context, TreemapTile tile) {
              return Text(_source[tile.indices[0]].socialMedia);
            },
            colorValueMapper: (TreemapTile tile) {
              return _source[tile.indices[0]].socialMedia;
            },
          ),
        ],
        colorMappers: _colorMappers,
      ),
    );
  }
}

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

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

Equal color mapping

NOTE

Range color mapping

If you return a range value in the TreemapLevel.colorValueMapper, then you must set the colorMappers property.

The value returned from the TreemapLevel.colorValueMapper callback will be checked whether it lies in the TreemapColorMapper.from and TreemapColorMapper.to range. For the matched values, the TreemapColorMapper.color will be applied to the respective tiles.

  • MinSaturation and MaxSaturation - The tiles with the lowest value which is from will be applied a minSaturation and the tiles with the highest value which is to will be applied a maxSaturation. The tiles with values in-between the range will get a saturation based on their respective value.

NOTE

Customize the legend icons color and texts using the TreemapColorMapper.color and the TreemapColorMapper.from and TreemapColorMapper.to properties.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_treemap/treemap.dart';

class TreemapRangeColorMappingExample extends StatefulWidget {
  const TreemapRangeColorMappingExample({super.key});

  @override
  State<TreemapRangeColorMappingExample> createState() =>
      _TreemapRangeColorMappingExampleState();
}

class _TreemapRangeColorMappingExampleState
    extends State<TreemapRangeColorMappingExample> {
  late List<SocialMediaUsers> _source;
  late List<TreemapColorMapper> _colorMappers;

  @override
  void initState() {
    _source = <SocialMediaUsers>[
      const SocialMediaUsers('India', 'Facebook', 25.4),
      const SocialMediaUsers('USA', 'Instagram', 19.11),
      const SocialMediaUsers('Japan', 'Facebook', 13.3),
      const SocialMediaUsers('Germany', 'Instagram', 10.65),
      const SocialMediaUsers('France', 'Twitter', 7.54),
      const SocialMediaUsers('UK', 'Instagram', 4.93),
    ];

    _colorMappers = <TreemapColorMapper>[
      TreemapColorMapper.range(
        from: 0,
        to: 10,
        minSaturation: 0.5,
        maxSaturation: 1,
        color: Colors.blue[200]!,
      ),
      TreemapColorMapper.range(
        from: 10,
        to: 20,
        minSaturation: 0.5,
        maxSaturation: 1,
        color: Colors.deepOrange,
      ),
      TreemapColorMapper.range(
        from: 20,
        to: 30,
        minSaturation: 0.5,
        maxSaturation: 1,
        color: Colors.blue[800]!,
      ),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 400,
          width: 400,
          child: SfTreemap(
            dataCount: _source.length,
            weightValueMapper: (int index) {
              return _source[index].usersInMillions;
            },
            levels: [
              TreemapLevel(
                groupMapper: (int index) {
                  return _source[index].country;
                },
                colorValueMapper: (TreemapTile tile) {
                  return tile.weight;
                },
              ),
            ],
            colorMappers: _colorMappers,
          ),
        ),
      ),
    );
  }
}

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

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

Range color mapping

NOTE