layoutDirection property Null safety

TreemapLayoutDirection layoutDirection

Represents the layout direction of the tiles.

  • The TreemapLayoutDirection.topLeft will layout the tiles from top-left to bottom-right of the rectangle.
  • The TreemapLayoutDirection.topRight will layout the tiles from top-right to bottom-left of the rectangle.
  • The TreemapLayoutDirection.bottomLeft will start layout the tiles from bottom-left to top-right of the rectangle.
  • The TreemapLayoutDirection.bottomRight will start layout the tiles from bottom-right to top-left of the rectangle.

Defaults to TreemapLayoutDirection.topLeft.

late List<SocialMediaUsers> _socialMediaUsersData;

void initState() {
  _socialMediaUsersData = <SocialMediaUsers>[
    SocialMediaUsers('India', 'Facebook', 280),
    SocialMediaUsers('India', 'Instagram', 88),
    SocialMediaUsers('USA', 'Facebook', 190),
    SocialMediaUsers('USA', 'Instagram', 120),
    SocialMediaUsers('Japan', 'Twitter', 48),
    SocialMediaUsers('Japan', 'Instagram', 31),

Widget build(BuildContext context) {
  return Scaffold(
    body: SfTreemap(
     dataCount: _socialMediaUsersData.length,
      weightValueMapper: (int index) {
        return _socialMediaUsersData[index].usersInMillions;
      layoutDirection: TreemapLayoutDirection.topRight,
      levels: [
            groupMapper: (int index) {
              return _socialMediaUsersData[index].country;

class SocialMediaUsers {
  const SocialMediaUsers(,

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

See also:


final TreemapLayoutDirection layoutDirection;