border property

RoundedRectangleBorder? border
final

Apply border to the selected by initializing the border property.

You can change the border color and border width of the selected tile using the RoundedRectangleBorder.side property and border radius applied using the RoundedRectangleBorder.borderRadius property.

late List<SocialMediaUsers> _source;

@override
void initState() {
  _source = <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: _source.length,
      weightValueMapper: (int index) {
        return _source[index].usersInMillions;
      },
      levels: [
        TreemapLevel(
          groupMapper: (int index) {
            return _source[index].country;
          },
        ),
      ],
      onSelectionChanged: (TreemapTile tile) {},
      selectionSettings: TreemapSelectionSettings(
        border: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.red,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(20),
        ),
      ),
    ),
  );
}

class SocialMediaUsers {
  const SocialMediaUsers(
    this.country,
    this.socialMedia,
    this.usersInMillions,
  );
  final String country;
  final String socialMedia;
  final double usersInMillions;
}

See also:

  • color, for changing the selected tile color.

Implementation

final RoundedRectangleBorder? border;