diff --git a/Flutter/treemap/accessibility.md b/Flutter/treemap/accessibility.md index 83ffc0e22..009848987 100644 --- a/Flutter/treemap/accessibility.md +++ b/Flutter/treemap/accessibility.md @@ -1,8 +1,8 @@ --- layout: post -title: Accessibility in Flutter treemap widget | Syncfusion +title: Accessibility in Flutter treemap widget | Syncfusion description: Learn here all about the accessibility support in Syncfusion Flutter treemap (SfTreemap) widget and how to customize it. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- @@ -11,61 +11,64 @@ documentation: ug ## Screen reader -The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) can be accessed by the screen readers by wrapping the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. +The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) can be accessed by screen readers by wrapping the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) widget with the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapAccessibilityExample extends StatefulWidget { + const TreemapAccessibilityExample({super.key}); + + @override + State createState() => + _TreemapAccessibilityExampleState(); +} + +class _TreemapAccessibilityExampleState + extends State { late List _source; - late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent'; + final String _semanticLabel = + 'Asia is the most populated continent and Australia is the least populated continent'; @override void initState() { - _source = const [ - PopulationModel('Asia', 456.07), - PopulationModel('Africa', 121.61), - PopulationModel('Europe', 74.64), - PopulationModel('North America', 57.9), - PopulationModel('South America', 42.25), - PopulationModel('Australia', 2.54), + _source = [ + const PopulationModel('Asia', 456.07), + const PopulationModel('Africa', 121.61), + const PopulationModel('Europe', 74.64), + const PopulationModel('North America', 57.9), + const PopulationModel('South America', 42.25), + const PopulationModel('Australia', 2.54), ]; super.initState(); } - @override - void dispose() { - _source.clear(); - super.dispose(); - } - @override Widget build(BuildContext context) { return Scaffold( body: Semantics( - label: 'Syncfusion Flutter Treemap', - value: _semanticLabel, - child: Column( - children: [ - Expanded( - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInCrores; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - ), - ], - ), - ), - ], - ), + label: 'Syncfusion Flutter Treemap', + value: _semanticLabel, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInCrores; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + ), + ], ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInCrores); @@ -96,4 +99,4 @@ The font size of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flut ## Easier touch targets -The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) has touch target as 48 * 48 for all elements, following standard accessibility guidelines. \ No newline at end of file +The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) has touch targets of 48 × 48 pixels for all elements, following standard accessibility guidelines. \ No newline at end of file diff --git a/Flutter/treemap/color-customization.md b/Flutter/treemap/color-customization.md index b5ec25e01..3c0f062fc 100644 --- a/Flutter/treemap/color-customization.md +++ b/Flutter/treemap/color-customization.md @@ -1,105 +1,120 @@ --- layout: post title: Colors Customization in Flutter Treemap widget | Syncfusion -description: Learn here all about the Colors Customization feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +description: Learn here all about the Colors Customization feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +platform: flutter control: SfTreemap documentation: ug --- # Colors Customization in Flutter Treemap (SfTreemap) -This section explains about the customization of color for the tiles based on specific value or range of values. +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`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapLevelColorExample extends StatefulWidget { + const TreemapLevelColorExample({super.key}); + + @override + State createState() => + _TreemapLevelColorExampleState(); +} + +class _TreemapLevelColorExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'Germany', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), + 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: EdgeInsets.all(1.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.pink[200], - padding: EdgeInsets.all(10), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.green[400], - padding: EdgeInsets.all(10), - ), - ], - ), + 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}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -118,34 +133,47 @@ N> ## Equal color mapping -If you return a value of different type other than the color from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), then you must set the [`colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property which is a collection of [`TreemapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper-class.html). +If you return a value of a type other than color from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), then you must set the [`colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property, which is a collection of [`TreemapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper-class.html). The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html) callback will be used for the comparison in the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html). For the matched values, the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) will be applied to the respective tiles. N> You can customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) and the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html) properties respectively. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TreemapEqualColorMappingExample extends StatefulWidget { + const TreemapEqualColorMappingExample({super.key}); + + @override + State createState() => + _TreemapEqualColorMappingExampleState(); +} + +class _TreemapEqualColorMappingExampleState + extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - 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), + 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.value(value: 'Facebook', color: Colors.blue[200]!), - TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange), - TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!), - ]; + 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(); } @@ -153,28 +181,29 @@ N> You can customize the legend icons color and texts using the [`TreemapColorMa 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, - ), + 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); @@ -203,41 +232,57 @@ The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/do N> Customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) and the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapRangeColorMappingExample extends StatefulWidget { + const TreemapRangeColorMappingExample({super.key}); + @override + State createState() => + _TreemapRangeColorMappingExampleState(); +} + +class _TreemapRangeColorMappingExampleState + extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - 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), + 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.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]!), + 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(); } @@ -245,34 +290,35 @@ N> Customize the legend icons color and texts using the [`TreemapColorMapper.col @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, - ), + 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 { - SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); + const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); final String country; final String socialMedia; diff --git a/Flutter/treemap/drilldown.md b/Flutter/treemap/drilldown.md index e837f1e0e..cd447a103 100644 --- a/Flutter/treemap/drilldown.md +++ b/Flutter/treemap/drilldown.md @@ -9,12 +9,12 @@ documentation: ug # Drilldown in Flutter Treemap (SfTreemap) -The drilldown feature provides better visualization of larger set of hierarchical level data. +The drilldown feature provides better visualization of a larger set of hierarchical-level data. -To learn more about how to deep dive into the drill down feature in Flutter Treemap, you can watch this video. +To learn more about the drilldown feature in Flutter Treemap, you can watch this video. - - + + ## Enable drilldown @@ -22,180 +22,187 @@ You can drill down the tiles by setting the [`enableDrilldown`](https://pub.dev/ The widget returned by the [`TreemapBreadcrumbs.builder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbs/builder.html) will be added to the breadcrumbs item. While drilling down the tiles, it is called with the tapped tile details. -Selection for touch and mouse enabled devices, and tooltip for touch devices will work only for the tiles which don’t have descendants. +Selection for touch and mouse-enabled devices, and tooltip for touch devices, will work only for the tiles that don’t have descendants. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapDrilldownExample extends StatefulWidget { + const TreemapDrilldownExample({super.key}); + + @override + State createState() => + _TreemapDrilldownExampleState(); +} + +class _TreemapDrilldownExampleState extends State { late List _source; late Map _colors; @override void initState() { _source = [ - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), - CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), - CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), - CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), - CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), - CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), - CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), - CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), - CarSale(carName: 'Benz', model: 'E/ CLS-CLass', totalScale: 51312), - CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), - CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), - CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), - CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), - CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), - CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), - CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), - CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), - CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), - CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), - CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), - CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), - CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), - CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), - CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), - CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), - CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), - CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), - CarSale(carName: 'Jeep', model: 'Grand cherokee', totalScale: 240696), - CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), - CarSale(carName: 'Jeep', model: 'Renegada', totalScale: 103434), - CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), - CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), - CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), - CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), - CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), - CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), - CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Ford', model: 'F-series', totalScale: 896764), - CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), - CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), - CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), - CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), - CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), - CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), - CarSale(carName: 'Ford', model: 'E-series', totalScale: 53304), - CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), - CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), - CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), - CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), - CarSale(carName: 'Ford', model: 'Transit connect', totalScale: 34473), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 18390), + const CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), + const CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), + const CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), + const CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), + const CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), + const CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), + const CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), + const CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), + const CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), + const CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), + const CarSale(carName: 'Benz', model: 'E/CLS-Class', totalScale: 51312), + const CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), + const CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), + const CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), + const CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), + const CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), + const CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), + const CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), + const CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), + const CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), + const CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), + const CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), + const CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), + const CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), + const CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), + const CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), + const CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), + const CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), + const CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), + const CarSale(carName: 'Jeep', model: 'Grand Cherokee', totalScale: 240696), + const CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), + const CarSale(carName: 'Jeep', model: 'Renegade', totalScale: 103434), + const CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), + const CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), + const CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), + const CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), + const CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Ford', model: 'F-Series', totalScale: 896764), + const CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), + const CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), + const CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), + const CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), + const CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), + const CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), + const CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), + const CarSale(carName: 'Ford', model: 'E-Series', totalScale: 53304), + const CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), + const CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), + const CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), + const CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), + const CarSale(carName: 'Ford', model: 'Transit Connect', totalScale: 34473), ]; + _colors = { - 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), - 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), - 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), - 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), - 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), - 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), - 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), + 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), + 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), + 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), + 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), + 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), + 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), + 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), }; super.initState(); } - @override - void dispose() { - _source.clear(); - super.dispose(); - } - @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].totalScale!; + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].totalScale!; + }, + enableDrilldown: true, + breadcrumbs: TreemapBreadcrumbs( + builder: (BuildContext context, TreemapTile tile, bool isCurrent) { + return Text(tile.group, style: const TextStyle(color: Colors.black)); }, - enableDrilldown: true, - breadcrumbs: TreemapBreadcrumbs( - builder: - (BuildContext context, TreemapTile tile, bool isCurrent) { - return Text(tile.group, style: TextStyle(color: Colors.black)); + ), + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].carName, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; }, ), - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].carName, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - ), - TreemapLevel( - groupMapper: (int index) { - return _source[index].model; - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - ], - ), + TreemapLevel( + groupMapper: (int index) { + return _source[index].model; + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + ], ), ), + ), ); } +} class CarSale { - const CarSale( - {required this.carName, - this.model, - this.version, - this.versionNumber, - this.totalScale}); + const CarSale({ + required this.carName, + this.model, + this.version, + this.versionNumber, + this.totalScale, + }); + final String carName; final String? model; final String? version; @@ -210,195 +217,205 @@ class CarSale { ## Breadcrumb customization -The breadcrumb is used to display information about the drilled item and provides option to navigate back to previous level. You can customize the breadcrumb items using the following properties: +The breadcrumb is used to display information about the drilled item and provides an option to navigate back to the previous level. You can customize the breadcrumb items using the following properties: -* **Position** - Positions the breadcrumbs either top or bottom of the treemap. The default value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbs/position.html) is [` TreemapBreadcrumbPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbPosition.html#top). +* **Position** - Positions the breadcrumbs either at the top or bottom of the treemap. The default value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbs/position.html) is [`TreemapBreadcrumbPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbPosition.html#top). * **Divider** - Used to add a separator between two breadcrumbs. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapBreadcrumbCustomizationExample extends StatefulWidget { + const TreemapBreadcrumbCustomizationExample({super.key}); + + @override + State createState() => + _TreemapBreadcrumbCustomizationExampleState(); +} +class _TreemapBreadcrumbCustomizationExampleState + extends State { late List _source; late Map _colors; @override void initState() { _source = [ - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), - CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), - CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), - CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), - CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), - CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), - CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), - CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), - CarSale(carName: 'Benz', model: 'E/ CLS-CLass', totalScale: 51312), - CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), - CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), - CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), - CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), - CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), - CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), - CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), - CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), - CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), - CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), - CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), - CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), - CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), - CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), - CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), - CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), - CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), - CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), - CarSale(carName: 'Jeep', model: 'Grand cherokee', totalScale: 240696), - CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), - CarSale(carName: 'Jeep', model: 'Renegada', totalScale: 103434), - CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), - CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), - CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), - CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), - CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), - CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), - CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Ford', model: 'F-series', totalScale: 896764), - CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), - CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), - CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), - CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), - CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), - CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), - CarSale(carName: 'Ford', model: 'E-series', totalScale: 53304), - CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), - CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), - CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), - CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), - CarSale(carName: 'Ford', model: 'Transit connect', totalScale: 34473), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 18390), + const CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), + const CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), + const CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), + const CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), + const CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), + const CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), + const CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), + const CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), + const CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), + const CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), + const CarSale(carName: 'Benz', model: 'E/CLS-Class', totalScale: 51312), + const CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), + const CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), + const CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), + const CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), + const CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), + const CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), + const CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), + const CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), + const CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), + const CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), + const CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), + const CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), + const CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), + const CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), + const CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), + const CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), + const CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), + const CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), + const CarSale(carName: 'Jeep', model: 'Grand Cherokee', totalScale: 240696), + const CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), + const CarSale(carName: 'Jeep', model: 'Renegade', totalScale: 103434), + const CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), + const CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), + const CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), + const CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), + const CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Ford', model: 'F-Series', totalScale: 896764), + const CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), + const CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), + const CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), + const CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), + const CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), + const CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), + const CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), + const CarSale(carName: 'Ford', model: 'E-Series', totalScale: 53304), + const CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), + const CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), + const CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), + const CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), + const CarSale(carName: 'Ford', model: 'Transit Connect', totalScale: 34473), ]; + _colors = { - 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), - 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), - 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), - 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), - 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), - 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), - 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), + 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), + 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), + 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), + 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), + 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), + 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), + 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), }; super.initState(); } - @override - void dispose() { - _source.clear(); - super.dispose(); - } - @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].totalScale!; + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].totalScale!; + }, + enableDrilldown: true, + breadcrumbs: TreemapBreadcrumbs( + builder: (BuildContext context, TreemapTile tile, bool isCurrent) { + if (tile.group == 'Home') { + return const Icon(Icons.home, color: Colors.black); + } + + return Text( + tile.group, + style: const TextStyle(color: Colors.black), + ); }, - enableDrilldown: true, - breadcrumbs: TreemapBreadcrumbs( - builder: - (BuildContext context, TreemapTile tile, bool isCurrent) { - if (tile.group == 'Home') { - return Icon(Icons.home, color: Colors.black); - } else { - return Text(tile.group, - style: TextStyle(color: Colors.black)); - } + divider: const Icon(Icons.chevron_right, color: Colors.black), + position: TreemapBreadcrumbPosition.top, + ), + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].carName, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; }, - divider: Icon(Icons.chevron_right, color: Colors.black), - position: TreemapBreadcrumbPosition.top, ), - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].carName, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - ), - TreemapLevel( - groupMapper: (int index) { - return _source[index].model; - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - ], - ), + TreemapLevel( + groupMapper: (int index) { + return _source[index].model; + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + ], ), ), + ), ); } +} class CarSale { - const CarSale( - {required this.carName, - this.model, - this.version, - this.versionNumber, - this.totalScale}); - final String carName; - final String? model; - final String? version; - final String? versionNumber; - final double? totalScale; + const CarSale({ + required this.carName, + this.model, + this.version, + this.versionNumber, + this.totalScale, + }); + + final String carName; + final String? model; + final String? version; + final String? versionNumber; + final double? totalScale; } {% endhighlight %} diff --git a/Flutter/treemap/getting-started.md b/Flutter/treemap/getting-started.md index 06de542c4..a235b94d9 100644 --- a/Flutter/treemap/getting-started.md +++ b/Flutter/treemap/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting started with Flutter Treemap (SfTreemap) -This section explains the steps required to add the treemap widget and enable its features such as labels, tooltip, assigning colors based on region, and legends. This section covers only basic features needed to know to get started with Syncfusion® treemap. +This section explains the steps required to add the treemap widget and enable its features such as labels, tooltip, assigning colors based on region, and legends. This section covers only the basic features needed to get started with Syncfusion® treemap. -To get start quickly with our Flutter Treemap widget, you can check on this video. +To get started quickly with our Flutter Treemap widget, you can refer to this video. @@ -24,32 +24,34 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter Treemap dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: - -syncfusion_flutter_treemap: ^xx.x.xx - + syncfusion_flutter_treemap: ^xx.x.xx {% endhighlight %} +{% endtabs %} -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Treemap`](https://pub.dev/packages/syncfusion_flutter_treemap/versions) package. +N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Treemap`](https://pub.dev/packages/syncfusion_flutter_treemap/versions) package. It is recommended to use the latest available version from pub.dev. **Get packages** Run the following command to get the required packages. +{% tabs %} {% highlight dart %} $ flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. {% tabs %} -{% highlight Dart %} +{% highlight dart %} import 'package:syncfusion_flutter_treemap/treemap.dart'; @@ -63,25 +65,54 @@ After importing the package, initialize the treemap widget as a child of any wid To populate the data source, set its count to the [`dataCount`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/dataCount.html) property of the treemap. The data will be grouped based on the values returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) callback. You can have more than one TreemapLevel in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. The quantitative value of the underlying data has to be returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. Based on this value, every tile (rectangle) will have its size. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -90,26 +121,27 @@ To populate the data source, set its count to the [`dataCount`](https://pub.dev/ 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; - }, - ), - ], - ), + 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; + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -134,28 +166,57 @@ N> ## Add labels -You can add any type of custom widgets to the tiles as labels based on the index using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) property. +You can add any type of custom widgets to the tiles as labels based on the index using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) property. The following example extends the initial sample by adding a label builder. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -164,33 +225,36 @@ You can add any type of custom widgets to the tiles as labels based on the index 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; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - ), - ], - ), + 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; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + ), + ); + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -211,28 +275,57 @@ class SocialMediaUsers { ## Add tooltip -You can enable tooltip for any tile in the treemap and able to return the completely customized widget using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) property. +You can enable tooltip for any tile in the treemap and return a fully customized widget using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) property. The following example extends the initial sample by adding a tooltip builder. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -256,8 +349,11 @@ You can enable tooltip for any tile in the treemap and able to return the comple }, labelBuilder: (BuildContext context, TreemapTile tile) { return Padding( - padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: Text(tile.group, style: TextStyle(color: Colors.black)), + padding: const EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + ), ); }, tooltipBuilder: (BuildContext context, TreemapTile tile) { @@ -265,7 +361,7 @@ You can enable tooltip for any tile in the treemap and able to return the comple padding: const EdgeInsets.only(left: 5, right: 5, top: 2, bottom: 3), child: Text( 'Country : ${tile.group}\nSocial media : ${tile.weight}M', - style: TextStyle(color: Colors.black), + style: const TextStyle(color: Colors.black), ), ); }, @@ -276,6 +372,7 @@ You can enable tooltip for any tile in the treemap and able to return the comple ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -296,28 +393,57 @@ class SocialMediaUsers { ## Add legend -You can show legend by initializing the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property in the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). It is possible to customize the legend item's color and text using the [`SfTreemap.colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property. +You can show legend by initializing the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property in the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). It is possible to customize the legend item's color and text using the [`SfTreemap.colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property. The following example extends the initial sample by adding legend support. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -326,43 +452,46 @@ You can show legend by initializing the [`legend`](https://pub.dev/documentation 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; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - tooltipBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only( - left: 5, right: 5, top: 2, bottom: 3), - child: Text( - 'Country : ${tile.group}\nSocial media : ${tile.weight}M', - style: TextStyle(color: Colors.black)), - ); - }, - ), - ], - legend: TreemapLegend(), - ), + 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; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + ), + ); + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5, right: 5, top: 2, bottom: 3), + child: Text( + 'Country : ${tile.group}\nSocial media : ${tile.weight}M', + style: const TextStyle(color: Colors.black), + ), + ); + }, + ), + ], + legend: TreemapLegend(), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ diff --git a/Flutter/treemap/images/overview/treemap_overview.png b/Flutter/treemap/images/overview/treemap_overview.png new file mode 100644 index 000000000..7bc275b7d Binary files /dev/null and b/Flutter/treemap/images/overview/treemap_overview.png differ diff --git a/Flutter/treemap/item-builder.md b/Flutter/treemap/item-builder.md index 6d0382a90..11e131868 100644 --- a/Flutter/treemap/item-builder.md +++ b/Flutter/treemap/item-builder.md @@ -1,34 +1,45 @@ --- layout: post title: Item Builder in Flutter Treemap widget | Syncfusion -description: Learn here all about the Item Builder feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +description: Learn here all about the Item Builder feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +platform: flutter control: SfTreemap documentation: ug --- # Item Builder in Flutter Treemap (SfTreemap) -You can add any type of custom widgets such as image widget as a background of the tiles to easily visualize the type of data that a particular tile shows. +You can add any type of custom widget, such as an image widget as a background, to easily visualize the type of data that a particular tile shows. ## Add images You can add images as a background of the tiles using the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html) callback. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class ItemBuilderExample extends StatefulWidget { + const ItemBuilderExample({super.key}); + + @override + State createState() => _ItemBuilderExampleState(); +} + +class _ItemBuilderExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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), ]; super.initState(); } @@ -37,44 +48,43 @@ You can add images as a background of the tiles using the [`TreemapLevel.itemBui 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; - }, - itemBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Image.asset( - _getImageSource(tile)!, - ), - ); - }, - ), - ], - ), + child: SizedBox( + 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; + }, + itemBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Image.asset(_getImageSource(tile)!), + ); + }, + ), + ], ), ), + ), ); } -String? _getImageSource(TreemapTile tile) { - if (_source[tile.indices[0]].socialMedia == 'Facebook') { - return 'images/facebook.png'; - } else if (_source[tile.indices[0]].socialMedia == 'Instagram') { - return 'images/instagram.png'; - } else if (_source[tile.indices[0]].socialMedia == 'Twitter') { - return 'images/twitter.png'; - } - return null; + String? _getImageSource(TreemapTile tile) { + if (_source[tile.indices[0]].socialMedia == 'Facebook') { + return 'images/facebook.png'; + } else if (_source[tile.indices[0]].socialMedia == 'Instagram') { + return 'images/instagram.png'; + } else if (_source[tile.indices[0]].socialMedia == 'Twitter') { + return 'images/twitter.png'; + } + return null; + } } class SocialMediaUsers { diff --git a/Flutter/treemap/labels.md b/Flutter/treemap/labels.md index 96731eae6..0d0e5a608 100644 --- a/Flutter/treemap/labels.md +++ b/Flutter/treemap/labels.md @@ -2,76 +2,127 @@ layout: post title: Labels in Flutter Treemap widget | Syncfusion description: Learn here all about adding the Labels feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- # Labels in Flutter Treemap (SfTreemap) -You can add any type of widgets like text widget to improve the readability of the individual tiles by providing brief descriptions on labels. +You can add any type of widget, like a text widget, to improve the readability of the individual tiles by providing brief descriptions on labels. ## Add labels You can add labels on the tiles using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) callback which is available in the [`SfTreemap.levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection. +The examples below use the same job vacancy data source and differ only in how the labels are rendered. + {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LabelsExample extends StatefulWidget { + const LabelsExample({super.key}); + + @override + State createState() => _LabelsExampleState(); +} +class _LabelsExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + 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: 'America', + job: 'Management', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Accounts', + vacancy: 60, + ), + 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: 'Sales', + group: 'Executive', + vacancy: 30, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Analyst', + vacancy: 40, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30, + ), + const JobVacancyModel( + country: 'UK', + job: 'HR Executives', + vacancy: 60, + ), + const JobVacancyModel( + country: 'UK', + job: 'Marketing', + vacancy: 40, + ), ]; super.initState(); } @@ -80,59 +131,62 @@ You can add labels on the tiles using the [`TreemapLevel.labelBuilder`](https:// 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].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.pink, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.green, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.blue, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text(tile.group), - ); - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.pink, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.green, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.blue, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text(tile.group), + ); + }, + ), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -147,67 +201,116 @@ class JobVacancyModel { ## Overflow mode -You can trim or fade the label when it is overflowed from the tile using the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) property. The possible values are [`visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible), [`ellipsis`](https://api.flutter.dev/flutter/painting/TextOverflow.html#ellipsis), [`clip`](https://api.flutter.dev/flutter/painting/TextOverflow.html#clip) and [`fade`](https://api.flutter.dev/flutter/painting/TextOverflow.html#fade). The default value of the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html)property is [`TextOverflow.visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible). +You can trim or fade a label when it overflows the tile bounds by using the Flutter framework's [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) property inside the label builder. The possible values are [`visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible), [`ellipsis`](https://api.flutter.dev/flutter/painting/TextOverflow.html#ellipsis), [`clip`](https://api.flutter.dev/flutter/painting/TextOverflow.html#clip), and [`fade`](https://api.flutter.dev/flutter/painting/TextOverflow.html#fade). The default value of [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) is [`TextOverflow.visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible). -By default, the labels will render even if it overflows from the tile. +By default, the labels render even if they overflow from the tile. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class LabelsOverflowExample extends StatefulWidget { + const LabelsOverflowExample({super.key}); + + @override + State createState() => _LabelsOverflowExampleState(); +} + +class _LabelsOverflowExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + 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: 'America', + job: 'Management', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Accounts', + vacancy: 60, + ), + 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: 'Sales', + group: 'Executive', + vacancy: 30, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Analyst', + vacancy: 40, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30, + ), + const JobVacancyModel( + country: 'UK', + job: 'HR Executives', + vacancy: 60, + ), + const JobVacancyModel( + country: 'UK', + job: 'Marketing', + vacancy: 40, + ), ]; super.initState(); } @@ -215,69 +318,72 @@ By default, the labels will render even if it overflows from the tile. @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].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.pink, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text( - tile.group, - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.green, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text( - tile.group, - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.blue, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text( - tile.group, - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - ], - ), + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.pink, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text( + tile.group, + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.green, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text( + tile.group, + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.blue, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text( + tile.group, + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -292,65 +398,114 @@ class JobVacancyModel { ## Alignment -You can change the labels alignment by wrapping the text widget in the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget and setting the [`alignment`](https://api.flutter.dev/flutter/widgets/Align/alignment.html) property. +You can change the label alignment by wrapping the text widget in the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget and setting the [`alignment`](https://api.flutter.dev/flutter/widgets/Align/alignment.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LabelsAlignmentExample extends StatefulWidget { + const LabelsAlignmentExample({super.key}); + @override + State createState() => _LabelsAlignmentExampleState(); +} + +class _LabelsAlignmentExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + 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: 'America', + job: 'Management', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Accounts', + vacancy: 60, + ), + 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: 'Sales', + group: 'Executive', + vacancy: 30, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Analyst', + vacancy: 40, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30, + ), + const JobVacancyModel( + country: 'UK', + job: 'HR Executives', + vacancy: 60, + ), + const JobVacancyModel( + country: 'UK', + job: 'Marketing', + vacancy: 40, + ), ]; super.initState(); } @@ -359,59 +514,62 @@ You can change the labels alignment by wrapping the text widget in the [`Align`] 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].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.pink, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.green, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.blue, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Text(tile.group), - ); - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.pink, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.green, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.blue, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Text(tile.group), + ); + }, + ), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; diff --git a/Flutter/treemap/layout.md b/Flutter/treemap/layout.md index f81fb1595..e8db27f43 100644 --- a/Flutter/treemap/layout.md +++ b/Flutter/treemap/layout.md @@ -2,14 +2,14 @@ layout: post title: Layouts in Flutter Treemap widget | Syncfusion description: Learn here all about adding different layouts of the Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- # Layouts in Flutter Treemap (SfTreemap) -This section explains the different layouts in the treemap widget. The available layouts are, +This section explains the different layouts in the Treemap widget. The available layouts are: * Squarified * Slice @@ -17,22 +17,40 @@ This section explains the different layouts in the treemap widget. The available ## Squarified -The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.html) layout will arrange the rectangles in a row and wrap them to the next row according to the available size. The size of the particular rectangle is based on the value returned from [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. By default, squarified layout is used. +The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.html) layout arranges the rectangles in a row and wraps them to the next row according to the available size. The size of each rectangle is based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. By default, the squarified layout is used. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SquarifiedLayoutExample extends StatefulWidget { + const SquarifiedLayoutExample({super.key}); + + @override + State createState() => + _SquarifiedLayoutExampleState(); +} + +class _SquarifiedLayoutExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -40,23 +58,30 @@ The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/late @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _dataSource[index].continent; - }, - color: Colors.teal[200], - padding: const EdgeInsets.all(1.5), - ), - ], + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _dataSource[index].continent; + }, + color: Colors.teal[200], + padding: const EdgeInsets.all(1.5), + ), + ], + ), ), + ), ); } +} class PopulationModel { const PopulationModel({ @@ -75,22 +100,39 @@ class PopulationModel { ## Slice -The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.slice.html) layout will arrange each rectangle in a horizontal direction and the size of the rectangle will be based on the value returned from [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available height. +The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.slice.html) layout arranges each rectangle in a horizontal direction. The size of each rectangle is based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available height. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SliceLayoutExample extends StatefulWidget { + const SliceLayoutExample({super.key}); + @override + State createState() => _SliceLayoutExampleState(); +} + +class _SliceLayoutExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -98,23 +140,30 @@ The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/tr @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap.slice( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _dataSource[index].continent; - }, - color: Colors.teal[200], - padding: const EdgeInsets.all(1.5), - ), - ], + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap.slice( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _dataSource[index].continent; + }, + color: Colors.teal[200], + padding: const EdgeInsets.all(1.5), + ), + ], + ), ), + ), ); } +} class PopulationModel { const PopulationModel({ @@ -133,22 +182,39 @@ class PopulationModel { ## Dice -The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.dice.html) layout will arrange each rectangle in the vertical direction and the size of the rectangle will be based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available width. +The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.dice.html) layout arranges each rectangle in the vertical direction. The size of each rectangle is based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available width. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class DiceLayoutExample extends StatefulWidget { + const DiceLayoutExample({super.key}); + + @override + State createState() => _DiceLayoutExampleState(); +} +class _DiceLayoutExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -156,23 +222,30 @@ The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/tre @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap.dice( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _dataSource[index].continent; - }, - color: Colors.teal[200], - padding: const EdgeInsets.all(1.5), - ), - ], + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap.dice( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _dataSource[index].continent; + }, + color: Colors.teal[200], + padding: const EdgeInsets.all(1.5), + ), + ], + ), ), + ), ); } +} class PopulationModel { const PopulationModel({ @@ -196,19 +269,36 @@ Tiles start to layout from the top-left to the bottom-right of the rectangle by N> It is applicable for squarified treemap. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LayoutDirectionExample extends StatefulWidget { + const LayoutDirectionExample({super.key}); + + @override + State createState() => _LayoutDirectionExampleState(); +} +class _LayoutDirectionExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -217,33 +307,37 @@ N> It is applicable for squarified treemap. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - layoutDirection: TreemapLayoutDirection.bottomRight, - levels: [ - TreemapLevel(groupMapper: (int index) { + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + layoutDirection: TreemapLayoutDirection.bottomRight, + levels: [ + TreemapLevel( + groupMapper: (int index) { return _dataSource[index].continent; - }, labelBuilder: (BuildContext context, TreemapTile tile) { + }, + labelBuilder: (BuildContext context, TreemapTile tile) { return Padding( padding: const EdgeInsets.all(4.0), child: Text( tile.group, - style: TextStyle(color: Colors.black), + style: const TextStyle(color: Colors.black), ), ); - }), - ], - ), + }, + ), + ], ), + ), ), ); } +} class PopulationModel { const PopulationModel({ @@ -267,19 +361,36 @@ You can sort the tiles either in ascending or descending order based on the [`so N> It is applicable for slice and dice treemap. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SortingExample extends StatefulWidget { + const SortingExample({super.key}); + + @override + State createState() => _SortingExampleState(); +} + +class _SortingExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -288,33 +399,37 @@ N> It is applicable for slice and dice treemap. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap.slice( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - sortAscending: true, - levels: [ - TreemapLevel(groupMapper: (int index) { + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap.slice( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + sortAscending: true, + levels: [ + TreemapLevel( + groupMapper: (int index) { return _dataSource[index].continent; - }, labelBuilder: (BuildContext context, TreemapTile tile) { + }, + labelBuilder: (BuildContext context, TreemapTile tile) { return Padding( padding: const EdgeInsets.all(4.0), child: Text( tile.group, - style: TextStyle(color: Colors.black), + style: const TextStyle(color: Colors.black), ), ); - }), - ], - ), + }, + ), + ], ), + ), ), ); } +} class PopulationModel { const PopulationModel({ diff --git a/Flutter/treemap/legend.md b/Flutter/treemap/legend.md index 7e8e681d7..d8c385767 100644 --- a/Flutter/treemap/legend.md +++ b/Flutter/treemap/legend.md @@ -2,7 +2,7 @@ layout: post title: Legend in Flutter Treemap widget | Syncfusion description: Learn here all about adding the Legend feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- @@ -15,9 +15,22 @@ The legend provides clarity about the data plotted on the treemap. To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property. By default, the legend item's text is rendered based on the value of [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) property. The default value of the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property is `null`. +The examples in this section use the same data source and differ only in the legend constructor. + {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class DefaultLegendExample extends StatefulWidget { + const DefaultLegendExample({super.key}); + + @override + State createState() => _DefaultLegendExampleState(); +} +class _DefaultLegendExampleState extends State { late List _source; @override @@ -37,7 +50,7 @@ To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documen Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -58,6 +71,7 @@ To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documen ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -80,8 +94,19 @@ N> You can show bar shape legend by initializing the [`SfTreemap.legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property as [`TreemapLegend.bar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.bar.html). By default, the legend item's text is rendered based on the value of [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class BarLegendExample extends StatefulWidget { + const BarLegendExample({super.key}); + + @override + State createState() => _BarLegendExampleState(); +} + +class _BarLegendExampleState extends State { late List _source; @override @@ -101,7 +126,7 @@ You can show bar shape legend by initializing the [`SfTreemap.legend`](https://p Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -122,6 +147,7 @@ You can show bar shape legend by initializing the [`SfTreemap.legend`](https://p ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -141,11 +167,23 @@ N> ## Icon and text customization -Customize legend icons and text based on the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) and [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) properties respectively by default. It is possible to customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) based on the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/value.html) or [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. You can also customize the legend item's text using the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) when setting the [`TreemapColorMapper.range`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.range.html) color mapper constructor. +Legend icons and text are customized based on the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) and [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) properties by default. It is possible to customize the legend icon colors and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) based on the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/value.html) or [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. You can also customize the legend item's text using the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) when setting the [`TreemapColorMapper.range`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.range.html) color mapper constructor. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class IconTextCustomizationExample extends StatefulWidget { + const IconTextCustomizationExample({super.key}); + + @override + State createState() => + _IconTextCustomizationExampleState(); +} + +class _IconTextCustomizationExampleState extends State { late List _source; late List _colorMappers; @@ -192,6 +230,7 @@ Customize legend icons and text based on the [`TreemapLevel.color`](https://pub ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -213,8 +252,20 @@ You can customize the first segment label of the legend by using the [`TreemapCo By default, the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value appears at the start of the first segment, and the [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) value appears at the end. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class FirstSegmentLabelExample extends StatefulWidget { + const FirstSegmentLabelExample({super.key}); + + @override + State createState() => + _FirstSegmentLabelExampleState(); +} +class _FirstSegmentLabelExampleState extends State { late List _source; late List _colorMappers; @@ -264,6 +315,7 @@ By default, the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfu ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -280,13 +332,25 @@ class SocialMediaUsers { ## Scrollbar visibility -You can control the visibility of the scrollbar in the treemap legend using the [`shouldAlwaysShowScrollbar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/shouldAlwaysShowScrollbar.html) property. When set to `true`, the scrollbar for the legend will always be visible, making it easier to see and navigate through legend items, even if all items fit within the available space. +You can control the visibility of the scrollbar in the treemap legend using the [`shouldAlwaysShowScrollbar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/shouldAlwaysShowScrollbar.html) property. When set to `true`, the scrollbar for the legend will always be visible, making it easier to see and navigate through legend items, even if all items fit within the available space. The default value is `false`, so the scrollbar appears in legend only when the legend items exceed the available space and scrolling is needed. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class ScrollbarVisibilityExample extends StatefulWidget { + const ScrollbarVisibilityExample({super.key}); + + @override + State createState() => + _ScrollbarVisibilityExampleState(); +} + +class _ScrollbarVisibilityExampleState extends State { late List _source; @override @@ -306,7 +370,7 @@ The default value is `false`, so the scrollbar appears in legend only when the l Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -330,6 +394,7 @@ The default value is `false`, so the scrollbar appears in legend only when the l ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -349,8 +414,19 @@ You can set a title specifically for the legend in the treemap by using the [`ti By default, the value of the legend's [`title`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/title.html) property is `null`, indicating that no title is displayed for the legend, unless it is specified explicitly. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendTitleExample extends StatefulWidget { + const LegendTitleExample({super.key}); + + @override + State createState() => _LegendTitleExampleState(); +} + +class _LegendTitleExampleState extends State { late List _source; @override @@ -370,7 +446,7 @@ By default, the value of the legend's [`title`](https://pub.dev/documentation/sy Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -393,6 +469,7 @@ By default, the value of the legend's [`title`](https://pub.dev/documentation/sy ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -412,8 +489,19 @@ class SocialMediaUsers { You can position the legend items in different directions using the [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property. The default value of the [position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property is [`TreemapLegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html). The possible values are [`left`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#left), [`right`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#right), [`top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#top), and [`bottom`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#bottom). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendPositionExample extends StatefulWidget { + const LegendPositionExample({super.key}); + @override + State createState() => _LegendPositionExampleState(); +} + +class _LegendPositionExampleState extends State { late List _source; @override @@ -433,7 +521,7 @@ You can position the legend items in different directions using the [`TreemapLeg Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -456,6 +544,7 @@ You can position the legend items in different directions using the [`TreemapLeg ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -475,13 +564,24 @@ N> ## Offset -You can place the legend in custom position using the [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property. The default value of the [`offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property is `null`. +You can place the legend in a custom position using the [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property. The default value of the [`offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property is `null`. -If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) has been set with the property [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) as top, then the legend will be placed in top but with absolute position, i.e. legend will not take dedicated position for it and will be drawn at the top of the map. +If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) has been set with the property [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) as top, then the legend will be placed at the top but with an absolute position, meaning it will not take a dedicated position and will be drawn at the top of the map. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendOffsetExample extends StatefulWidget { + const LegendOffsetExample({super.key}); + + @override + State createState() => _LegendOffsetExampleState(); +} +class _LegendOffsetExampleState extends State { late List _source; @override @@ -501,7 +601,7 @@ If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusio Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -517,13 +617,14 @@ If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusio ), ], legend: TreemapLegend( - offset: Offset(70, 250), + offset: const Offset(70, 250), ), ), ), ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -549,8 +650,19 @@ If the legend position is `left` or `right`, then the default scroll direction i If the legend position is `top` or `bottom`, then the default scroll direction is `horizontal`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class OverflowModeExample extends StatefulWidget { + const OverflowModeExample({super.key}); + + @override + State createState() => _OverflowModeExampleState(); +} +class _OverflowModeExampleState extends State { late List _source; @override @@ -572,29 +684,30 @@ If the legend position is `top` or `bottom`, then the default scroll direction i 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; - }, - ), - ], - legend: TreemapLegend( - overflowMode: TreemapLegendOverflowMode.scroll, + child: SizedBox( + 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; + }, ), + ], + legend: TreemapLegend( + overflowMode: TreemapLegendOverflowMode.scroll, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -618,8 +731,19 @@ If the legend position is `left` or `right`, then the default scroll direction i If the legend position is `top` or `bottom`, then the default scroll direction is `horizontal`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class BarOverflowModeExample extends StatefulWidget { + const BarOverflowModeExample({super.key}); + + @override + State createState() => _BarOverflowModeExampleState(); +} +class _BarOverflowModeExampleState extends State { late List _source; @override @@ -639,29 +763,30 @@ If the legend position is `top` or `bottom`, then the default scroll direction i 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; - }, - ), - ], - legend: TreemapLegend.bar( - overflowMode: TreemapLegendOverflowMode.scroll, + child: SizedBox( + 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; + }, ), + ], + legend: TreemapLegend.bar( + overflowMode: TreemapLegendOverflowMode.scroll, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -684,19 +809,30 @@ N> You can customize the legend item's text style using the [`TreemapLegend.textStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/textStyle.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TextStyleExample extends StatefulWidget { + const TextStyleExample({super.key}); + + @override + State createState() => _TextStyleExampleState(); +} + +class _TextStyleExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -705,34 +841,35 @@ You can customize the legend item's text style using the [`TreemapLegend.textSty 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; - }, - ), - ], - legend: TreemapLegend( - textStyle: TextStyle( - color: Colors.red, - fontSize: 14, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - ), + child: SizedBox( + 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; + }, + ), + ], + legend: TreemapLegend( + textStyle: const TextStyle( + color: Colors.red, + fontSize: 14, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, ), ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -758,19 +895,31 @@ You can customize the legend items using the following properties. * **padding** - Used to set padding around the legend. The default value of the [`padding`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/padding.html) property is `EdgeInsets.all(10.0)`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendAppearanceExample extends StatefulWidget { + const LegendAppearanceExample({super.key}); + + @override + State createState() => + _LegendAppearanceExampleState(); +} + +class _LegendAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -779,33 +928,34 @@ You can customize the legend items using the following properties. 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; - }, - ), - ], - legend: TreemapLegend( - iconType: TreemapIconType.triangle, - iconSize: Size(12.0, 12.0), - spacing: 15, - padding: EdgeInsets.all(12.0), - direction: Axis.vertical, + child: SizedBox( + 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; + }, ), + ], + legend: TreemapLegend( + iconType: TreemapIconType.triangle, + iconSize: const Size(12.0, 12.0), + spacing: 15, + padding: const EdgeInsets.all(12.0), + direction: Axis.vertical, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -830,27 +980,38 @@ N> You can set solid color for the legend bar by using the [`TreemapLegendPaintingStyle.solid`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#solid). By defaults [`TreemapLegendPaintingStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html) will be [`solid`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#solid). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SolidBarLegendExample extends StatefulWidget { + const SolidBarLegendExample({super.key}); + + @override + State createState() => _SolidBarLegendExampleState(); +} +class _SolidBarLegendExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - 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), + 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), ]; _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), - ]; + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), + ]; super.initState(); } @@ -858,28 +1019,29 @@ You can set solid color for the legend bar by using the [`TreemapLegendPaintingS Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.solid, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.solid, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -899,27 +1061,39 @@ class SocialMediaUsers { You can set gradient color for the legend bar by using the [`TreemapLegendPaintingStyle.gradient`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#gradient). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class GradientBarLegendExample extends StatefulWidget { + const GradientBarLegendExample({super.key}); + + @override + State createState() => + _GradientBarLegendExampleState(); +} +class _GradientBarLegendExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - 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), + 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), ]; _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), - ]; + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), + ]; super.initState(); } @@ -927,28 +1101,29 @@ You can set gradient color for the legend bar by using the [`TreemapLegendPainti Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -975,19 +1150,31 @@ You can customize the legend items using the following properties. * **padding** - Used to set padding around the legend. The default value of the [`padding`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.bar.html) property is `EdgeInsets.all(10.0)`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class BarLegendAppearanceExample extends StatefulWidget { + const BarLegendAppearanceExample({super.key}); + + @override + State createState() => + _BarLegendAppearanceExampleState(); +} + +class _BarLegendAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('United Kingdom', 'Instagram', 4.93), - SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('United Kingdom', 'Instagram', 4.93), + SocialMediaUsers('France', 'Twitter', 7.54), ]; super.initState(); } @@ -996,34 +1183,35 @@ You can customize the legend items using the following properties. 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; - }, - ), - ], - legend: TreemapLegend.bar( - segmentSize: Size(60, 12), - labelOverflow: TreemapLabelOverflow.ellipsis, - edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, - padding: EdgeInsets.all(12), - direction: Axis.horizontal, - spacing: 5, + child: SizedBox( + 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; + }, ), + ], + legend: TreemapLegend.bar( + segmentSize: const Size(60, 12), + labelOverflow: TreemapLabelOverflow.ellipsis, + edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, + padding: const EdgeInsets.all(12), + direction: Axis.horizontal, + spacing: 5, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1047,27 +1235,39 @@ You can place the labels either between the segments or on the segments using th The labels are positioned between the segments when setting range color mapper without setting color mapper [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property. The [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value of the first item is positioned at starting point of the first segment and the [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) value of the first item is placed at the first segment end position. For other segments, the values of [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) is positioned as label between the other segments. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LabelPlacementRangeColorMapperExample extends StatefulWidget { + const LabelPlacementRangeColorMapperExample({super.key}); + + @override + State createState() => + _LabelPlacementRangeColorMapperExampleState(); +} +class _LabelPlacementRangeColorMapperExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - 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), + 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), ]; _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), - ]; + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), + ]; super.initState(); } @@ -1075,29 +1275,30 @@ The labels are positioned between the segments when setting range color mapper w Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1115,30 +1316,42 @@ class SocialMediaUsers { The labels are positioned between the segments when setting range color mapper along with setting color mapper [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property. The [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value of the first item is positioned at starting point of the first segment and the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) value of the first item is placed at the first segment end position. For Other segments, the value of [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) is positioned as label between the segments. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class NamedRangeColorMapperExample extends StatefulWidget { + const NamedRangeColorMapperExample({super.key}); + + @override + State createState() => + _NamedRangeColorMapperExampleState(); +} + +class _NamedRangeColorMapperExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - 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), + 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), ]; _colorMappers = [ - TreemapColorMapper.range( - from: 0, to: 10, color: Colors.blue[200]!, name: '<10'), - TreemapColorMapper.range( - from: 10, to: 20, color: Colors.deepOrange, name: '10 - 20'), - TreemapColorMapper.range( - from: 20, to: 30, color: Colors.blue[800]!, name: '20 - 30'), - ]; + TreemapColorMapper.range( + from: 0, to: 10, color: Colors.blue[200]!, name: '<10'), + TreemapColorMapper.range( + from: 10, to: 20, color: Colors.deepOrange, name: '10 - 20'), + TreemapColorMapper.range( + from: 20, to: 30, color: Colors.blue[800]!, name: '20 - 30'), + ]; super.initState(); } @@ -1146,29 +1359,30 @@ The labels are positioned between the segments when setting range color mapper a Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1186,7 +1400,20 @@ class SocialMediaUsers { The labels are positioned at the center of the segments when setting the [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.bar.html) property to [`TreemapLegendLabelsPlacement.onItem`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendLabelsPlacement.html#onItem). The labels will based on the value of [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property. If the value of [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property is null, labels will be based on the values of [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class BarLegendLabelPlacementExample extends StatefulWidget { + const BarLegendLabelPlacementExample({super.key}); + + @override + State createState() => + _BarLegendLabelPlacementExampleState(); +} + +class _BarLegendLabelPlacementExampleState extends State { late List _source; late List _colorMappers; @@ -1241,6 +1468,7 @@ The labels are positioned at the center of the segments when setting the [`label ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1260,7 +1488,20 @@ class SocialMediaUsers { The [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/labelsPlacement.html) option is not applicable for the legend label applied with equal color mapper. By default, the labels are positioned at center of the segment. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class PointerCustomizationExample extends StatefulWidget { + const PointerCustomizationExample({super.key}); + + @override + State createState() => + _PointerCustomizationExampleState(); +} + +class _PointerCustomizationExampleState extends State { late List _source; late List _colorMappers; @@ -1314,6 +1555,7 @@ The [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_treemap ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1333,8 +1575,19 @@ class SocialMediaUsers { You may show a pointer on the solid or gradient bar legend while hovering over a tile using the [`showPointerOnHover`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/showPointerOnHover.html) property. The default value of the [`showPointerOnHover`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/showPointerOnHover.html) property is `false`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class ShowPointerExample extends StatefulWidget { + const ShowPointerExample({super.key}); + + @override + State createState() => _ShowPointerExampleState(); +} +class _ShowPointerExampleState extends State { late List _population; late List _colorMappers; @@ -1362,37 +1615,36 @@ You may show a pointer on the solid or gradient bar legend while hovering over a @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _population.length, - weightValueMapper: (int index) => - _population[index].population.toDouble(), - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, - showPointerOnHover: true, - ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _population[index].state; - }, - colorValueMapper: (TreemapTile tile) { - return _population[tile.indices[0]].population / 10000; - }, - ) - ], - ), + return Scaffold( + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _population.length, + weightValueMapper: (int index) => + _population[index].population.toDouble(), + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + showPointerOnHover: true, ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _population[index].state; + }, + colorValueMapper: (TreemapTile tile) { + return _population[tile.indices[0]].population / 10000; + }, + ) + ], ), ), + ), ); } +} class IndianPopulation { const IndianPopulation(this.state, this.population); @@ -1415,8 +1667,19 @@ The pointer is used to indicate the exact color of the hovering tile on the lege The [`pointerBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerBuilder.html) will be called when the user interacts with the tiles i.e., while tapping in touch devices and hovering in the mouse enabled devices. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class PointerBuilderExample extends StatefulWidget { + const PointerBuilderExample({super.key}); + @override + State createState() => _PointerBuilderExampleState(); +} + +class _PointerBuilderExampleState extends State { late List _population; late List _colorMappers; @@ -1444,40 +1707,39 @@ The [`pointerBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/ @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _population.length, - weightValueMapper: (int index) => - _population[index].population.toDouble(), - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, - showPointerOnHover: true, - pointerBuilder: (BuildContext context, dynamic value) { - return Icon(Icons.arrow_downward, size: 15); - }, - ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _population[index].state; - }, - colorValueMapper: (TreemapTile tile) { - return _population[tile.indices[0]].population / 10000; - }, - ) - ], - ), + return Scaffold( + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _population.length, + weightValueMapper: (int index) => + _population[index].population.toDouble(), + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + showPointerOnHover: true, + pointerBuilder: (BuildContext context, dynamic value) { + return const Icon(Icons.arrow_downward, size: 15); + }, ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _population[index].state; + }, + colorValueMapper: (TreemapTile tile) { + return _population[tile.indices[0]].population / 10000; + }, + ) + ], ), ), + ), ); } +} class IndianPopulation { const IndianPopulation(this.state, this.population); @@ -1496,8 +1758,20 @@ class IndianPopulation { You can customize the size and color of the pointer using the [`pointerSize`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerSize.html) and [`pointerColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerColor.html) properties. The default value of the [`pointerSize`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerSize.html) property is `Size(16, 12)`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class PointerCustomizationExample extends StatefulWidget { + const PointerCustomizationExample({super.key}); + + @override + State createState() => + _PointerCustomizationExampleState(); +} + +class _PointerCustomizationExampleState extends State { late List _population; late List _colorMappers; @@ -1525,39 +1799,38 @@ You can customize the size and color of the pointer using the [`pointerSize`](ht @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _population.length, - weightValueMapper: (int index) => - _population[index].population.toDouble(), - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, - showPointerOnHover: true, - pointerSize: Size(20, 20), - pointerColor: Colors.deepPurple, - ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _population[index].state; - }, - colorValueMapper: (TreemapTile tile) { - return _population[tile.indices[0]].population / 10000; - }, - ) - ], - ), + return Scaffold( + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _population.length, + weightValueMapper: (int index) => + _population[index].population.toDouble(), + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + showPointerOnHover: true, + pointerSize: const Size(20, 20), + pointerColor: Colors.deepPurple, ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _population[index].state; + }, + colorValueMapper: (TreemapTile tile) { + return _population[tile.indices[0]].population / 10000; + }, + ) + ], ), ), + ), ); } +} class IndianPopulation { const IndianPopulation(this.state, this.population); diff --git a/Flutter/treemap/levels.md b/Flutter/treemap/levels.md index 793d49a0f..22d48cd28 100644 --- a/Flutter/treemap/levels.md +++ b/Flutter/treemap/levels.md @@ -2,14 +2,14 @@ layout: post title: Flat and Hierarchical Levels in Flutter Treemap | Syncfusion description: Learn here all about the Flat and Hierarchical Levels feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- # Flat and Hierarchical Levels in Flutter Treemap (SfTreemap) -The levels of the treemap can be categorized into the following two types, +The levels of the treemap can be categorized into the following two types: * Flat level. * Hierarchical level. @@ -18,22 +18,34 @@ The levels of the treemap can be categorized into the following two types, There will be a tile for each unique value returned in the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) callback which is added to the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection property of [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). -### Squarified +### Squarified flat level example {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapFlatLevelExample extends StatefulWidget { + const TreemapFlatLevelExample({super.key}); + + @override + State createState() => + _TreemapFlatLevelExampleState(); +} + +class _TreemapFlatLevelExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('South America', 19.11), - PopulationModel('North America', 13.3), - PopulationModel('Europe', 10.65), - PopulationModel('Africa', 7.54), - PopulationModel('Australia', 4.93), + const PopulationModel('Asia', 25.4), + const PopulationModel('South America', 19.11), + const PopulationModel('North America', 13.3), + const PopulationModel('Europe', 10.65), + const PopulationModel('Africa', 7.54), + const PopulationModel('Australia', 4.93), ]; super.initState(); } @@ -42,26 +54,27 @@ There will be a tile for each unique value returned in the [`TreemapLevel.groupM 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].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - ), - ], - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + ), + ], ), ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -83,69 +96,82 @@ N> ## Hierarchical level -Hierarchical level arrange the tiles in the form of nested rectangles. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data. You can have more than one [`TreemapLevel`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel-class.html) in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. +Hierarchical levels arrange the tiles in the form of nested rectangles. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data. You can have more than one [`TreemapLevel`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel-class.html) in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. The first level will work similarly to the flat level. From the next level in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection, the items returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) for the indices, will be placed inside the rectangle for the same indices returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) in the previous level. This will go on until the last level in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection. -### Squarified +### Squarified hierarchical level example {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapHierarchicalLevelExample extends StatefulWidget { + const TreemapHierarchicalLevelExample({super.key}); + + @override + State createState() => + _TreemapHierarchicalLevelExampleState(); +} +class _TreemapHierarchicalLevelExampleState + extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + 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: 'America', job: 'Management', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), + 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: 'Sales', group: 'Executive', vacancy: 30), + const JobVacancyModel( + country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30), + const JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), + const JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), ]; super.initState(); } @@ -154,33 +180,36 @@ The first level will work similarly to the flat level. From the next level in th 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].vacancy; - }, - levels: [ - TreemapLevel(groupMapper: (int index) => _source[index].country), - TreemapLevel(groupMapper: (int index) => _source[index].job), - TreemapLevel(groupMapper: (int index) => _source[index].group), - TreemapLevel(groupMapper: (int index) => _source[index].role), - ], - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel(groupMapper: (int index) => _source[index].country), + TreemapLevel(groupMapper: (int index) => _source[index].job), + TreemapLevel(groupMapper: (int index) => _source[index].group), + TreemapLevel(groupMapper: (int index) => _source[index].role), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -209,65 +238,77 @@ You can customize the levels using the following properties: * **Border** - Specifies the border color, border width and border radius for the group using the [`TreemapLevel.border`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/border.html) property. -### Squarified +### Squarified appearance example {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapAppearanceExample extends StatefulWidget { + const TreemapAppearanceExample({super.key}); + + @override + State createState() => + _TreemapAppearanceExampleState(); +} +class _TreemapAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + 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: 'America', job: 'Management', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), + 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: 'Sales', group: 'Executive', vacancy: 30), + const JobVacancyModel( + country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30), + const JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), + const JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), ]; super.initState(); } @@ -275,68 +316,77 @@ You can customize the levels using the following properties: @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.blue, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.blue, - width: 1, + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.blue, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.blue, + width: 1, + ), ), + padding: const EdgeInsets.all(2.5), ), - padding: EdgeInsets.all(2.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.orangeAccent, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.orangeAccent, - width: 1, + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.orangeAccent, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.orangeAccent, + width: 1, + ), ), + padding: const EdgeInsets.all(2.5), ), - padding: EdgeInsets.all(2.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.green[300], - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.green, - width: 1, + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.green[300], + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.green, + width: 1, + ), ), + padding: const EdgeInsets.all(5), ), - padding: EdgeInsets.all(5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].role, - color: Colors.pink[300], - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.pink, - width: 1, + TreemapLevel( + groupMapper: (int index) => _source[index].role, + color: Colors.pink[300], + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.pink, + width: 1, + ), ), + padding: const EdgeInsets.all(5), ), - padding: EdgeInsets.all(5), - ), - ], + ], + ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; diff --git a/Flutter/treemap/overview.md b/Flutter/treemap/overview.md index 7c853de8b..e69a0b6ef 100644 --- a/Flutter/treemap/overview.md +++ b/Flutter/treemap/overview.md @@ -2,7 +2,7 @@ layout: post title: About Flutter Treemap widget | Syncfusion description: Learn here all about the introduction of Syncfusion Flutter Treemap (SfTreemap) widget, its features, and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- @@ -11,7 +11,9 @@ documentation: ug Syncfusion® Flutter Treemap is a powerful and customizable widget that allows you to create interactive treemaps in Flutter applications. It offers a rich feature set including selection, legends, labels, tooltips, color mapping, and more. -### Features +![Flutter Treemap](images/overview/treemap_overview.png) + +## Features * **Layouts** - Utilize various layouts based on algorithms such as squarified, slice, and dice to represent both flat and hierarchically-structured data. @@ -28,3 +30,5 @@ Syncfusion® Flutter Treemap is a powerful and customizable widget * **Tooltip** - Use customizable tooltips to display additional information about the tiles on the treemap. * **Custom background widgets** - Add custom widgets, such as image widgets, as backgrounds of the tiles to enrich the UI and easily visualize the data type that a particular tile represents. + +For step-by-step installation and setup instructions, see [Getting Started with Flutter Treemap](getting-started.md). \ No newline at end of file diff --git a/Flutter/treemap/right-to-left.md b/Flutter/treemap/right-to-left.md index 3436732af..f963ec5a8 100644 --- a/Flutter/treemap/right-to-left.md +++ b/Flutter/treemap/right-to-left.md @@ -2,43 +2,59 @@ layout: post title: RTL in Flutter Treemap widget | Syncfusion description: Learn here all about enabling the RTL rendering in the Syncfusion Flutter Treemap (SfTreemap) widget. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- # Right to Left (RTL) in Flutter Treemap (SfTreemap) -## RTL rendering ways +## Enable RTL rendering -Right to left rendering can be achieved in the following ways: +Right-to-left rendering can be achieved in the following ways: -### Wrapping the SfTreemap with Directionality widget +### Wrapping the SfTreemap with the Directionality widget -The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to [`rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). +The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget, and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to [`rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLExample()); +} + +class RTLExample extends StatefulWidget { + const RTLExample({super.key}); + + @override + State createState() => _RTLExampleState(); +} + +class _RTLExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Column( + return MaterialApp( + home: Scaffold( + body: Column( children: [ Expanded( child: Directionality( @@ -66,8 +82,10 @@ The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev ), ], ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -81,10 +99,10 @@ class PopulationModel { ### Changing the locale to RTL languages -The treemap elements will render in right to left direction if the locale belongs to RTL languages such as (Arabic ,Persian ,Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html), [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html), [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) and adding the flutter_localizations package to your pubspec.yaml file. +The treemap elements will render in the right-to-left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, or Urdu. You can achieve this by specifying the MaterialApp properties such as [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html), [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html), [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html), and adding the flutter_localizations package to your pubspec.yaml file. {% tabs %} -{% highlight Dart %} +{% highlight yaml %} dependencies: flutter_localizations: @@ -94,19 +112,35 @@ dependencies: {% endtabs %} {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLLocaleExample()); +} + +class RTLLocaleExample extends StatefulWidget { + const RTLLocaleExample({super.key}); + @override + State createState() => _RTLLocaleExampleState(); +} + +class _RTLLocaleExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @@ -114,38 +148,37 @@ dependencies: @override Widget build(BuildContext context) { return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale("fa", "IR"), - ], - locale: Locale("fa", "IR"), - home: Scaffold( - backgroundColor: Colors.white, - body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - ), - ], - ), + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: const [Locale('fa', 'IR')], + locale: const Locale('fa', 'IR'), + home: Scaffold( + backgroundColor: Colors.white, + body: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, + ), + ], ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -164,62 +197,74 @@ class PopulationModel { Labels will be rendered from right to left direction. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLLabelsExample()); +} + +class RTLLabelsExample extends StatefulWidget { + const RTLLabelsExample({super.key}); + + @override + State createState() => _RTLLabelsExampleState(); +} +class _RTLLabelsExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( + return MaterialApp( + home: Scaffold( + body: Center( + child: SizedBox( height: 400, width: 400, - child: Column( - children: [ - Expanded( - child: Directionality( - textDirection: TextDirection.rtl, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - ), - ], - ), + child: Directionality( + textDirection: TextDirection.rtl, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, ), - ), - ], + ], + ), ), ), ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -238,63 +283,75 @@ class PopulationModel { Legend items will be rendered from right to left direction. It is applicable for both solid and bar type legend. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLLegendExample()); +} + +class RTLLegendExample extends StatefulWidget { + const RTLLegendExample({super.key}); + @override + State createState() => _RTLLegendExampleState(); +} + +class _RTLLegendExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( + return MaterialApp( + home: Scaffold( + body: Center( + child: SizedBox( height: 400, width: 400, - child: Column( - children: [ - Expanded( - child: Directionality( - textDirection: TextDirection.rtl, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - ), - ], - legend: TreemapLegend(), - ), + child: Directionality( + textDirection: TextDirection.rtl, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, ), - ), - ], + ], + legend: TreemapLegend(), + ), ), ), ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -313,98 +370,116 @@ class PopulationModel { Tooltip text will be rendered from right to left direction. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLTooltipExample()); +} + +class RTLTooltipExample extends StatefulWidget { + const RTLTooltipExample({super.key}); + + @override + State createState() => _RTLTooltipExampleState(); +} +class _RTLTooltipExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( + return MaterialApp( + home: Scaffold( + body: Center( + child: SizedBox( height: 400, width: 400, - padding: const EdgeInsets.all(5.0), - child: Column( - children: [ - Expanded( - child: Directionality( - textDirection: TextDirection.rtl, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - tooltipBuilder: - (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Continent : ', - style: TextStyle(color: Colors.white)), - Text(tile.group, - style: TextStyle(color: Colors.white)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Population : ', - style: TextStyle(color: Colors.white)), - Text(tile.weight.toString(), - style: TextStyle(color: Colors.white)), - ], - ), - ], - ), - ); - }, + child: Directionality( + textDirection: TextDirection.rtl, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text( + 'Continent : ', + style: TextStyle(color: Colors.white), + ), + Text( + tile.group, + style: const TextStyle(color: Colors.white), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text( + 'Population : ', + style: TextStyle(color: Colors.white), + ), + Text( + tile.weight.toString(), + style: const TextStyle(color: Colors.white), + ), + ], + ), + ], ), - ], - ), + ); + }, ), - ), - ], + ], + ), ), ), + ), ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); diff --git a/Flutter/treemap/selection.md b/Flutter/treemap/selection.md index e8a3077e1..b9c623b84 100644 --- a/Flutter/treemap/selection.md +++ b/Flutter/treemap/selection.md @@ -2,14 +2,14 @@ layout: post title: Tile selection in Flutter Treemap widget | Syncfusion description: Learn here all about the Tile selection feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- # Tile selection in Flutter Treemap (SfTreemap) -You can select a tile in order to highlight that area on a treemap. You can use the callback for performing any action during tile selection. +You can select a tile to highlight that area on the treemap. You can use the callback to perform any action during tile selection. ## Enable tile selection @@ -18,19 +18,30 @@ You can enable tile selection on a treemap using the [`SfTreemap.onSelectionChan The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/onSelectionChanged.html) callback will be called with the details of the selected tile when the user is selecting a tile by tapping and you will be able to do any specific functionalities like showing pop-up or navigate to a different page. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class EnableSelectionExample extends StatefulWidget { + const EnableSelectionExample({super.key}); + + @override + State createState() => _EnableSelectionExampleState(); +} + +class _EnableSelectionExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -39,27 +50,28 @@ The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_tree 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; - }, - onSelectionChanged: (TreemapTile) {}, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + onSelectionChanged: (TreemapTile tile) {}, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -85,19 +97,31 @@ You can customize the below appearance of the selected tile. * **Border** - Change the border color, border stroke width using the [`BorderSide.color`](https://api.flutter.dev/flutter/painting/BorderSide/color.html) and [`BorderSide.width`](https://api.flutter.dev/flutter/painting/BorderSide/width.html) properties in the [`RoundedRectangleBorder`](https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html). Also apply rounded border using the [`RoundedRectangleBorder.borderRadius`](https://api.flutter.dev/flutter/painting/RoundedRectangleBorder/borderRadius.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SelectionAppearanceExample extends StatefulWidget { + const SelectionAppearanceExample({super.key}); + + @override + State createState() => + _SelectionAppearanceExampleState(); +} +class _SelectionAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -106,37 +130,38 @@ You can customize the below appearance of the selected tile. 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; - }, - onSelectionChanged: (TreemapTile) {}, - selectionSettings: TreemapSelectionSettings( - color: Colors.orange, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.deepOrange, - width: 1, - ), - borderRadius: BorderRadius.circular(10), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + onSelectionChanged: (TreemapTile tile) {}, + selectionSettings: TreemapSelectionSettings( + color: Colors.orange, + border: RoundedRectangleBorder( + side: const BorderSide( + color: Colors.deepOrange, + width: 1, ), + borderRadius: BorderRadius.circular(10), ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -156,19 +181,30 @@ class SocialMediaUsers { You can customize the hovered tile color and border using the [`tileHoverColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/tileHoverColor.html) and [`tileHoverBorder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/tileHoverBorder.html) properties. The default value of the [`tileHoverColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/tileHoverColor.html) is `Colors.transparent`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class HoveredTileExample extends StatefulWidget { + const HoveredTileExample({super.key}); + + @override + State createState() => _HoveredTileExampleState(); +} +class _HoveredTileExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -176,43 +212,43 @@ You can customize the hovered tile color and border using the [`tileHoverColor`] @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; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(4), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - ), - ], - onSelectionChanged: (TreemapTile tile) {}, - tileHoverColor: Colors.tealAccent, - tileHoverBorder: RoundedRectangleBorder( - side: BorderSide( - color: Colors.teal, - width: 1, - ), - borderRadius: BorderRadius.circular(10), + body: Center( + child: SizedBox( + 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; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(4), + child: Text(tile.group, style: const TextStyle(color: Colors.black)), + ); + }, + ), + ], + onSelectionChanged: (TreemapTile tile) {}, + tileHoverColor: Colors.tealAccent, + tileHoverBorder: RoundedRectangleBorder( + side: const BorderSide( + color: Colors.teal, + width: 1, ), + borderRadius: BorderRadius.circular(10), ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); diff --git a/Flutter/treemap/tooltip.md b/Flutter/treemap/tooltip.md index 2de8780d5..2954e706f 100644 --- a/Flutter/treemap/tooltip.md +++ b/Flutter/treemap/tooltip.md @@ -2,35 +2,46 @@ layout: post title: Tooltip in Flutter Treemap widget | Syncfusion description: Learn here all about adding the Tooltip feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. -platform: Flutter +platform: flutter control: SfTreemap documentation: ug --- # Tooltip in Flutter Treemap (SfTreemap) -Tooltip is used to provide information about the tile during the tap, or click interaction. This section helps to learn about how to show tooltip on a tile and customize them. +Tooltip is used to provide information about a tile during tap or click interaction. This section helps you learn how to show a tooltip on a tile and customize it. ## Tooltip for the tiles -It is used to clearly indicate the tile information on the tap or click. To show tooltip for the tile, return a widget in [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html). This widget will then be wrapped in the builtin shape which comes with the nose at the bottom. +Tooltips are used to clearly indicate tile information on tap or click. To show a tooltip for the tile, return a widget in [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html). This widget is then wrapped in the built-in shape with the nose at the bottom. -The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) will be called with the corresponding tile details every time you interact with the tile i.e., while tapping in touch devices and hover enter in the mouse enabled devices. +The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) callback is called with the corresponding tile details every time you interact with the tile, while tapping on touch devices and hover-enter on mouse-enabled devices. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TooltipExample extends StatefulWidget { + const TooltipExample({super.key}); + + @override + State createState() => _TooltipExampleState(); +} + +class _TooltipExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -39,60 +50,61 @@ The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flu 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; - }, - tooltipBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Country : ', - style: TextStyle(color: Colors.black)), - Text(tile.group, - style: TextStyle(color: Colors.black)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Social media : ', - style: TextStyle(color: Colors.black)), - Text(tile.weight.toString(), - style: TextStyle(color: Colors.black)), - ], - ), - ], - ), - ); - }, - ), - ], - ), + child: SizedBox( + 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; + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Country : ', + style: TextStyle(color: Colors.black)), + Text(tile.group, + style: const TextStyle(color: Colors.black)), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Social media : ', + style: TextStyle(color: Colors.black)), + Text(tile.weight.toString(), + style: const TextStyle(color: Colors.black)), + ], + ), + ], + ), + ); + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -121,19 +133,31 @@ You can customize the appearance of the tooltip. * **Visibility** - Change the duration of the tooltip visibility using the [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/hideDelay.html) property. The default value of the [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/hideDelay.html) property is 3. By default, tooltip will hide automatically after 3 seconds of inactivity for mobile platforms. Also, you can increase or decrease the tooltip duration or show tooltip always by setting double.infinity to the [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/hideDelay.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TooltipAppearanceExample extends StatefulWidget { + const TooltipAppearanceExample({super.key}); + + @override + State createState() => + _TooltipAppearanceExampleState(); +} + +class _TooltipAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - 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), + 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(); } @@ -142,67 +166,68 @@ You can customize the appearance of the tooltip. 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; - }, - tooltipBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Country : ', - style: TextStyle(color: Colors.black)), - Text(tile.group, - style: TextStyle(color: Colors.black)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Social media : ', - style: TextStyle(color: Colors.black)), - Text(tile.weight.toString(), - style: TextStyle(color: Colors.black)), - ], - ), - ], - ), - ); - }, - ), - ], - tooltipSettings: TreemapTooltipSettings( - color: Colors.orange[300], - borderColor: Colors.deepOrange[900], - borderWidth: 2, - borderRadius: BorderRadius.circular(10), - hideDelay: 6, + child: SizedBox( + 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; + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Country : ', + style: TextStyle(color: Colors.black)), + Text(tile.group, + style: const TextStyle(color: Colors.black)), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Social media : ', + style: TextStyle(color: Colors.black)), + Text(tile.weight.toString(), + style: const TextStyle(color: Colors.black)), + ], + ), + ], + ), + ); + }, ), + ], + tooltipSettings: TreemapTooltipSettings( + color: Colors.orange[300], + borderColor: Colors.deepOrange[900], + borderWidth: 2, + borderRadius: BorderRadius.circular(10), + hideDelay: 6, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);