layoutDirection property Null safety

TreemapLayoutDirection layoutDirection
final

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;

@override
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),
  ];
  super.initState();
}

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

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

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

See also:

Implementation

final TreemapLayoutDirection layoutDirection;