syncfusion_flutter_treemap 27.2.2

A Flutter Treemap library for creating interactive treemap to visualize flat and hierarchical data based on squarified, slice, and dice algorithms.

example/lib/main.dart

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

void main() {
  return runApp(const TreemapApp());
}

/// This widget will be the root of application.
class TreemapApp extends StatelessWidget {
  const TreemapApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Treemap Demo',
      home: MyHomePage(),
    );
  }
}

/// This widget is the home page of the application.
class MyHomePage extends StatefulWidget {
  /// Initialize the instance of the [MyHomePage] class.
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late List<SocialMediaUsers> _source;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Treemap demo')),
      body: SfTreemap(
        dataCount: _source.length,
        weightValueMapper: (int index) {
          return _source[index].usersInMillions;
        },
        levels: <TreemapLevel>[
          TreemapLevel(
            groupMapper: (int index) {
              return _source[index].country;
            },
            labelBuilder: (BuildContext context, TreemapTile tile) {
              return Padding(
                padding: const EdgeInsets.all(2.5),
                child: Text(
                  tile.group,
                  style: const TextStyle(color: Colors.black),
                ),
              );
            },
            tooltipBuilder: (BuildContext context, TreemapTile tile) {
              return Padding(
                padding: const EdgeInsets.all(10),
                child: Text(
                    '''Country          : ${tile.group}\nSocial media : ${tile.weight}M''',
                    style: const TextStyle(color: Colors.black)),
              );
            },
          ),
        ],
      ),
    );
  }
}

/// Represents the class for social media users.
class SocialMediaUsers {
  /// Constructor of [SocialMediaUsers].
  const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);

  /// Specifies the country.
  final String country;

  /// Specifies the type of social media.
  final String socialMedia;

  /// Specifies the users count.
  final double usersInMillions;
}