diff --git a/Flutter/treemap/accessibility.md b/Flutter/treemap/accessibility.md index 27079afa2..83ffc0e22 100644 --- a/Flutter/treemap/accessibility.md +++ b/Flutter/treemap/accessibility.md @@ -16,56 +16,56 @@ The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/lates {% tabs %} {% highlight Dart %} -late List _source; -late 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), - ]; - 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; - }, - ), - ], + late List _source; + late 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), + ]; + 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; + }, + ), + ], + ), ), - ), - ], + ], + ), ), - ), - ); -} + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInCrores); diff --git a/Flutter/treemap/color-customization.md b/Flutter/treemap/color-customization.md index 9d2c42e0c..b5ec25e01 100644 --- a/Flutter/treemap/color-customization.md +++ b/Flutter/treemap/color-customization.md @@ -18,80 +18,80 @@ You can apply uniform color to the whole level using the [`TreemapLevel.color`]( {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + 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), - ), - ], - ), - ); -} + @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), + ), + ], + ), + ); + } class JobVacancyModel { const JobVacancyModel( @@ -127,54 +127,54 @@ N> You can customize the legend icons color and texts using the [`TreemapColorMa {% tabs %} {% highlight Dart %} -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), - ]; - - _colorMappers = [ - TreemapColorMapper.value(value: 'Facebook', color: Colors.blue[200]!), - TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange), - TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!), + 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), ]; - super.initState(); -} -@override -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, - ), - ); -} + _colorMappers = [ + 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(); + } + + @override + 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, + ), + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -198,78 +198,78 @@ If you return a range value in the [`TreemapLevel.colorValueMapper`](https://pub The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html) callback will be checked whether it lies in 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) range. 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. -* **MinSaturation and MaxSaturation** - The tiles with the lowest value which is `from` will be applied a `minSaturation` and the tiles with the highest value which is `to` will be applied a `maxSaturation`. The tiles with values in-between the range will get a saturation based on their respective value. +* **MinSaturation and MaxSaturation** - The tiles with the lowest value which is [`from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) will be applied a [`minSaturation`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/minSaturation.html) and the tiles with the highest value which is [`to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) will be applied a [`maxSaturation`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/maxSaturation.html). The tiles with values in-between the range will get a saturation based on their respective value. 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 %} -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), - ]; - - _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]!), - ]; - super.initState(); -} + 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), + ]; -@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, + _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]!), + ]; + super.initState(); + } + + @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, + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); diff --git a/Flutter/treemap/drilldown.md b/Flutter/treemap/drilldown.md index 054d4f778..a731e4a0d 100644 --- a/Flutter/treemap/drilldown.md +++ b/Flutter/treemap/drilldown.md @@ -18,176 +18,176 @@ To learn more about how to deep dive into the drill down feature in Flutter Tree ## Enable drilldown -You can drill down the tiles by setting the `enableDrilldown` property to `true`. In the UI, you can only see one level tiles at a time. When you tap a tile, it expands to the size of the viewport and loads its descendant tiles with smoother animation. +You can drill down the tiles by setting the [`enableDrilldown`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/enableDrilldown.html) property to `true`. In the UI, you can only see one level tiles at a time. When you tap a tile, it expands to the size of the viewport and loads its descendant tiles with smoother animation. -The widget returned by the `TreemapBreadcrumbs.builder` will be added to the breadcrumbs item. While drilling down the tiles, it is called with the tapped tile details. +The widget returned by the [`TreemapBreadcrumbs.builder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/enableDrilldown.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. {% tabs %} {% highlight Dart %} -late List _source; -late Map _colors; + 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), - ]; - _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), - }; - super.initState(); -} + @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), + ]; + _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), + }; + super.initState(); + } -@override -void dispose() { - _source.clear(); - super.dispose(); -} + @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!; - }, - enableDrilldown: true, - breadcrumbs: TreemapBreadcrumbs( - builder: - (BuildContext context, TreemapTile tile, bool isCurrent) { - return Text(tile.group, style: TextStyle(color: Colors.black)); + @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!; }, - ), - 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, - ), - ); + 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: 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, + ), + ); + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class CarSale { const CarSale( @@ -212,180 +212,180 @@ class CarSale { 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: -* **Position** - Positions the breadcrumbs either top or bottom of the treemap. The default value of the `position` is ` TreemapBreadcrumbPosition.top`. +* **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). * **Divider** - Used to add a separator between two breadcrumbs. {% tabs %} {% highlight Dart %} -late List _source; -late Map _colors; + 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), - ]; - _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), - }; - super.initState(); -} + @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), + ]; + _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), + }; + super.initState(); + } -@override -void dispose() { - _source.clear(); - super.dispose(); -} + @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!; - }, - 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)); - } + @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!; }, - 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, - ), - ); + 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: 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, + ), + ); + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class CarSale { const CarSale( diff --git a/Flutter/treemap/getting-started.md b/Flutter/treemap/getting-started.md index 89134556d..06de542c4 100644 --- a/Flutter/treemap/getting-started.md +++ b/Flutter/treemap/getting-started.md @@ -65,51 +65,51 @@ To populate the data source, set its count to the [`dataCount`](https://pub.dev/ {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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; - }, - ), - ], + 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), + ]; + super.initState(); + } + + @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; + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers({ @@ -139,58 +139,58 @@ You can add any type of custom widgets to the tiles as labels based on the index {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - ), - ], + 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), + ]; + super.initState(); + } + + @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: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: + Text(tile.group, style: TextStyle(color: Colors.black)), + ); + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers({ @@ -216,31 +216,31 @@ You can enable tooltip for any tile in the treemap and able to return the comple {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( + 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), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( child: Container( height: 400, width: 400, @@ -257,17 +257,16 @@ Widget build(BuildContext context) { 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: 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), + 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)), + 'Country : ${tile.group}\nSocial media : ${tile.weight}M', + style: TextStyle(color: Colors.black), + ), ); }, ), @@ -275,8 +274,8 @@ Widget build(BuildContext context) { ), ), ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers({ @@ -302,68 +301,68 @@ You can show legend by initializing the [`legend`](https://pub.dev/documentation {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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: 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(), + 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), + ]; + super.initState(); + } + + @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: 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(), + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers({ diff --git a/Flutter/treemap/images/legend/legend-title.png b/Flutter/treemap/images/legend/legend-title.png new file mode 100644 index 000000000..e447ee880 Binary files /dev/null and b/Flutter/treemap/images/legend/legend-title.png differ diff --git a/Flutter/treemap/item-builder.md b/Flutter/treemap/item-builder.md index 29764c7c6..6d0382a90 100644 --- a/Flutter/treemap/item-builder.md +++ b/Flutter/treemap/item-builder.md @@ -18,53 +18,53 @@ You can add images as a background of the tiles using the [`TreemapLevel.itemBui {% tabs %} {% highlight Dart %} -late List _source; + 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), - ]; - super.initState(); -} + @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), + ]; + super.initState(); + } -@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; - }, - itemBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Image.asset( - _getImageSource(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].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') { diff --git a/Flutter/treemap/labels.md b/Flutter/treemap/labels.md index bf2e99173..96731eae6 100644 --- a/Flutter/treemap/labels.md +++ b/Flutter/treemap/labels.md @@ -18,113 +18,113 @@ You can add labels on the tiles using the [`TreemapLevel.labelBuilder`](https:// {% tabs %} {% highlight Dart %} -late List _source; + 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), - ]; - super.initState(); -} + @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), + ]; + super.initState(); + } -@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), - ); - }, - ), - 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), - ); - }, - ), - ], + @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), + ); + }, + ), + 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), + ); + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class JobVacancyModel { const JobVacancyModel( @@ -147,129 +147,129 @@ 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`, `ellipsis`, `clip` and `fade`. The default value of the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html)property is `TextOverflow.visible`. +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). By default, the labels will render even if it overflows from the tile. {% tabs %} {% highlight Dart %} -late List _source; + 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), - ]; - super.initState(); -} + @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), + ]; + super.initState(); + } -@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, - ), - ); - }, - ), - ], + @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, + ), + ); + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class JobVacancyModel { const JobVacancyModel( @@ -297,113 +297,113 @@ You can change the labels alignment by wrapping the text widget in the [`Align`] {% tabs %} {% highlight Dart %} -late List _source; + 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), - ]; - super.initState(); -} + @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), + ]; + super.initState(); + } -@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 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), - ); - }, - ), - ], + @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 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( diff --git a/Flutter/treemap/layout.md b/Flutter/treemap/layout.md index c2734a24a..5f03e3965 100644 --- a/Flutter/treemap/layout.md +++ b/Flutter/treemap/layout.md @@ -22,41 +22,41 @@ The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/late {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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), - ), - ], - ), - ); -} + 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), + ]; + super.initState(); + } + + @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), + ), + ], + ), + ); + } class PopulationModel { const PopulationModel({ @@ -80,41 +80,41 @@ The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/tr {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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), - ), - ], - ), - ); -} + 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), + ]; + super.initState(); + } + + @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), + ), + ], + ), + ); + } class PopulationModel { const PopulationModel({ @@ -138,41 +138,41 @@ The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/tre {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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), - ), - ], - ), - ); -} + 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), + ]; + super.initState(); + } + + @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), + ), + ], + ), + ); + } class PopulationModel { const PopulationModel({ @@ -191,59 +191,59 @@ class PopulationModel { ## Layout direction -Tiles start to layout from the top-left to the bottom-right of the rectangle by default. The `layoutDirection` property allows you to start the layout from any corner of the rectangle. The possible `layoutDirection` values are `topLeft`, `topRight`, `bottomLeft`, and `bottomRight`. +Tiles start to layout from the top-left to the bottom-right of the rectangle by default. The [`layoutDirection`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/layoutDirection.html) property allows you to start the layout from any corner of the rectangle. The possible [`layoutDirection`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/layoutDirection.html) values are [`topLeft`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLayoutDirection.html#topLeft), [`topRight`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLayoutDirection.html#topRight), [`bottomLeft`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLayoutDirection.html#bottomLeft), and [`bottomRight`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLayoutDirection.html#bottomRight). N> It is applicable for squarified treemap. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -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) { - return _dataSource[index].continent; - }, labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(4.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - ), - ); - }), - ], + 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), + ]; + super.initState(); + } + + @override + 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) { + return _dataSource[index].continent; + }, labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(4.0), + child: Text( + tile.group, + style: TextStyle(color: Colors.black), + ), + ); + }), + ], + ), ), - ), - ), - ); -} + ), + ); + } class PopulationModel { const PopulationModel({ @@ -262,59 +262,59 @@ class PopulationModel { ## Sorting -You can sort the tiles either in ascending or descending order based on the `sortAscending` property. The default value of the `sortAscending` property is `false`. +You can sort the tiles either in ascending or descending order based on the [`sortAscending`] property. The default value of the [`sortAscending`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/sortAscending.html) property is `false`. N> It is applicable for slice and dice treemap. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -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) { - return _dataSource[index].continent; - }, labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(4.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - ), - ); - }), - ], + 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), + ]; + super.initState(); + } + + @override + 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) { + return _dataSource[index].continent; + }, labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(4.0), + child: Text( + tile.group, + style: TextStyle(color: Colors.black), + ), + ); + }), + ], + ), ), - ), - ), - ); -} + ), + ); + } class PopulationModel { const PopulationModel({ diff --git a/Flutter/treemap/legend.md b/Flutter/treemap/legend.md index 678042bd5..2338a3a56 100644 --- a/Flutter/treemap/legend.md +++ b/Flutter/treemap/legend.md @@ -18,46 +18,46 @@ To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documen {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, - ), - ], - legend: TreemapLegend(), + @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; + }, + ), + ], + legend: TreemapLegend(), + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -82,46 +82,46 @@ You can show bar shape legend by initializing the [`SfTreemap.legend`](https://p {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, - ), - ], - legend: TreemapLegend.bar(), + @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; + }, + ), + ], + legend: TreemapLegend.bar(), + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -141,37 +141,107 @@ 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` 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. +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. + +{% tabs %} +{% highlight Dart %} + + 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), + ]; + + _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]!), + ]; + super.initState(); + } + + @override + 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(), + ), + ); + } + +class SocialMediaUsers { + const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); + + final String country; + final String socialMedia; + final double usersInMillions; +} + +{% endhighlight %} +{% endtabs %} + +![legend icon color](images/legend/icon-color.png) + +## First segment label customization + +You can customize the first segment label of the legend using the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property with curly braces. The first curly brace value will be applied as segment start label and the next curly brace value will be applied as segment end label. By default, the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value is placed at the starting position of first segment and the [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) value is placed at the ending position of the first segment. {% tabs %} {% highlight Dart %} -late List _source; -late List _colorMappers; + late List _source; + late List _colorMappers; -@override -void initState() { - _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), - ]; + ]; - _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]!), + _colorMappers = [ + TreemapColorMapper.range( + from: 0, to: 10, color: Colors.blue[200]!, name: '{0M},{10M}'), + TreemapColorMapper.range( + from: 10, to: 20, color: Colors.deepOrange, name: '20M'), + TreemapColorMapper.range( + from: 20, to: 30, color: Colors.blue[800]!, name: '30M'), ]; - super.initState(); -} + super.initState(); + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfTreemap( + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfTreemap( dataCount: _source.length, weightValueMapper: (int index) { return _source[index].usersInMillions; @@ -189,9 +259,9 @@ Widget build(BuildContext context) { ], colorMappers: _colorMappers, legend: TreemapLegend.bar(), - ), - ); -} + ), + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -204,65 +274,120 @@ class SocialMediaUsers { {% endhighlight %} {% endtabs %} -![legend icon color](images/legend/icon-color.png) +![First label customization](images/legend/first-label-customization.png) -## First segment label customization +## Should always show scrollbar -You can customize the first segment label of the legend using the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property with curly braces. The first curly brace value will be applied as segment start label and the next curly brace value will be applied as segment end label. By default, the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value is placed at the starting position of first segment and the [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) value is placed at the ending position of the first segment. +You can control the visibility of the scrollbar in the treemap using the [`shouldAlwaysShowScrollbar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/shouldAlwaysShowScrollbar.html) property. When set to true, the scrollbar will always be visible, allowing easy navigation through the treemap content even when content is fully within view. The default value is `false`, meaning the scrollbar will only appear when the content is scrollable. {% tabs %} {% highlight Dart %} -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), - ]; - - _colorMappers = [ - TreemapColorMapper.range( - from: 0, to: 10, color: Colors.blue[200]!, name: '{0M},{10M}'), - TreemapColorMapper.range( - from: 10, to: 20, color: Colors.deepOrange, name: '20M'), - TreemapColorMapper.range( - from: 20, to: 30, color: Colors.blue[800]!, name: '30M'), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@override -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; - }, + @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; + }, + ), + ], + legend: TreemapLegend( + shouldAlwaysShowScrollbar: true, + overflowMode: TreemapLegendOverflowMode.scroll, + ), + ), + ), ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar(), - ), - ); + ); + } + +class SocialMediaUsers { + const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); + + final String country; + final String socialMedia; + final double usersInMillions; } +{% endhighlight %} +{% endtabs %} + +## Title + +You can set a title for the treemap using the [`title`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/title.html) property. This property allows you to provide a descriptive title that helps users understand the context or main focus of the treemap. By default, the [`title`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/title.html) is `null`, indicating that no title is displayed unless specified explicitly. + +{% tabs %} +{% highlight Dart %} + + 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), + ]; + super.initState(); + } + + @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; + }, + ), + ], + legend: TreemapLegend( + title: Text('Social media users'), + ), + ), + ), + ), + ); + } + class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -274,57 +399,57 @@ class SocialMediaUsers { {% endhighlight %} {% endtabs %} -![First label customization](images/legend/first-label-customization.png) +![legend title](images/legend/legend-title.png) ## Position -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` property is [`TreemapLegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html). The possible values are `left`, `right`, `top`, and `bottom`. +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 %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, + @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; + }, + ), + ], + legend: TreemapLegend( + position: TreemapLegendPosition.bottom, ), - ], - legend: TreemapLegend( - position: TreemapLegendPosition.bottom, ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -344,55 +469,55 @@ 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` property is `null`. +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`. 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. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, + @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; + }, + ), + ], + legend: TreemapLegend( + offset: Offset(70, 250), ), - ], - legend: TreemapLegend( - offset: Offset(70, 250), ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -411,7 +536,7 @@ class SocialMediaUsers { For default legend -You can wrap or scroll the legend items using the [`TreemapLegend.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property. The default value of the `overflowMode` property is [`TreemapLegendOverflowMode.wrap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode.html). The possible values are `scroll` and `wrap`. +You can wrap or scroll the legend items using the [`TreemapLegend.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property is [`TreemapLegendOverflowMode.wrap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode.html). The possible values are [`scroll`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode.html#scroll) and [`wrap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode.html#wrap). If the legend position is `left` or `right`, then the default scroll direction is `vertical`. @@ -420,50 +545,50 @@ If the legend position is `top` or `bottom`, then the default scroll direction i {% tabs %} {% highlight Dart %} -late List _source; - -@override -void initState() { - _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('China', 'Facebook', 12.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('South America', 'Twitter', 5.54), - SocialMediaUsers('United Kingdom', 'Instagram', 4.93), - ]; - super.initState(); -} + late List _source; + + @override + void initState() { + _source = [ + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('China', 'Facebook', 12.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('South America', 'Twitter', 5.54), + SocialMediaUsers('United Kingdom', 'Instagram', 4.93), + ]; + super.initState(); + } -@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; - }, + @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; + }, + ), + ], + legend: TreemapLegend( + overflowMode: TreemapLegendOverflowMode.scroll, ), - ], - legend: TreemapLegend( - overflowMode: TreemapLegendOverflowMode.scroll, ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -489,48 +614,48 @@ If the legend position is `top` or `bottom`, then the default scroll direction i {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, + @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; + }, + ), + ], + legend: TreemapLegend.bar( + overflowMode: TreemapLegendOverflowMode.scroll, ), - ], - legend: TreemapLegend.bar( - overflowMode: TreemapLegendOverflowMode.scroll, ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -555,53 +680,53 @@ You can customize the legend item's text style using the [`TreemapLegend.textSty {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, - ), - ], - legend: TreemapLegend( - textStyle: TextStyle( - color: Colors.red, - fontSize: 14, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, + @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; + }, + ), + ], + legend: TreemapLegend( + textStyle: TextStyle( + color: Colors.red, + fontSize: 14, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + ), ), ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -620,61 +745,61 @@ class SocialMediaUsers { You can customize the legend items using the following properties. -* **iconType** - Used to change the icon shape. The default value of the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.html) argument in the constructor is `TreemapIconType.circle`. The possible values are `circle`, `rectangle`, `triangle`, and `diamond`. +* **iconType** - Used to change the icon shape. The default value of the [`iconType`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.html) argument in the constructor is [`TreemapIconType.circle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapIconType.html#circle). The possible values are [`circle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapIconType.html#circle), [`rectangle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapIconType.html#rectangle), [`triangle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapIconType.html#triangle), and [`diamond`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapIconType.html#diamond). * **iconSize** - Used to change the size of the icon. The default value of [`iconSize`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.html) argument in the constructor is `Size(8.0, 8.0)`. * **spacing** - Used to provide space between the each legend items. The default value of the [`spacing`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/spacing.html) argument in the constructor is `10.0`. -* **direction** - Used to arrange the legend items in either horizontal or vertical direction. The default value of [`direction`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/direction.html) property is `horizontal`, if the value of the `position` property is `top`, `bottom` and defaults to `vertical`, if the value of the `position` property is `left` or `right`. +* **direction** - Used to arrange the legend items in either horizontal or vertical direction. The default value of [`direction`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/direction.html) property is `horizontal`, if the value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property is [`top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#top), [`bottom`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#bottom) and defaults to `vertical`, if the value of the [`position`] property is [`left`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#left) or [`right`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#right). * **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 %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, + @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; + }, + ), + ], + legend: TreemapLegend( + iconType: TreemapIconType.triangle, + iconSize: Size(12.0, 12.0), + spacing: 15, + padding: EdgeInsets.all(12.0), + direction: Axis.vertical, ), - ], - legend: TreemapLegend( - iconType: TreemapIconType.triangle, - iconSize: Size(12.0, 12.0), - spacing: 15, - padding: EdgeInsets.all(12.0), - direction: Axis.vertical, ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -696,59 +821,59 @@ N> ### Solid -You can set solid color for the bar by using the `TreemapLegendPaintingStyle.solid`. By defaults [`TreemapLegendPaintingStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html) will be `solid`. +You can set solid color for the 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 %} -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), - ]; - - _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]!), + 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), ]; - super.initState(); -} -@override -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 = [ + 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(); + } + + @override + 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, ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.solid, ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -765,59 +890,59 @@ class SocialMediaUsers { ### Gradient -You can set gradient color for the bar by using the [`TreemapLegendPaintingStyle.gradient`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html). +You can set gradient color for the bar by using the [`TreemapLegendPaintingStyle.gradient`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#gradient). {% tabs %} {% highlight Dart %} -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), - ]; - - _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]!), + 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), ]; - super.initState(); -} -@override -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 = [ + 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(); + } + + @override + 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, ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -846,53 +971,53 @@ You can customize the legend items using the following properties. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} + 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), + ]; + super.initState(); + } -@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; - }, + @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; + }, + ), + ], + legend: TreemapLegend.bar( + segmentSize: Size(60, 12), + labelOverflow: TreemapLabelOverflow.ellipsis, + edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, + padding: EdgeInsets.all(12), + direction: Axis.horizontal, + spacing: 5, ), - ], - legend: TreemapLegend.bar( - segmentSize: Size(60, 12), - labelOverflow: TreemapLabelOverflow.ellipsis, - edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, - padding: EdgeInsets.all(12), - direction: Axis.horizontal, - spacing: 5, ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -918,55 +1043,55 @@ The labels are positioned between the segments when setting range color mapper w {% tabs %} {% highlight Dart %} -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), - ]; - - _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]!), + 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), ]; - super.initState(); -} -@override -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 = [ + 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(); + } + + @override + 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, ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -986,58 +1111,58 @@ The labels are positioned between the segments when setting range color mapper a {% tabs %} {% highlight Dart %} -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), - ]; - - _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'), + 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), ]; - super.initState(); -} -@override -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 = [ + 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(); + } + + @override + 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, ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1052,64 +1177,64 @@ class SocialMediaUsers { ![Bar legend labels placement](images/legend/bar-legend-range-color-mapper-with-text.png) -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`. 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. +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 %} -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), - ]; - - _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'), + 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), ]; - super.initState(); -} -@override -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 = [ + 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(); + } + + @override + 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.onItem, + edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.onItem, - edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1126,63 +1251,63 @@ class SocialMediaUsers { Labels placement for equal color mapper -The `labelsPlacement` option is not applicable for the legend label applied with equal color mapper. By default, the labels are positioned at center of the segment. +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 %} -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), - ]; - - _colorMappers = [ - TreemapColorMapper.value(value: 'Facebook', color: Colors.blue[200]!), - TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange), - TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!), + 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), ]; - super.initState(); -} -@override -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 = [ + 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(); + } + + @override + 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, + legend: TreemapLegend.bar( + edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1199,69 +1324,69 @@ class SocialMediaUsers { ## Show pointer -You may show a pointer on the solid or gradient bar legend while hovering over a tile using the `showPointerOnHover` property. The default value of the `showPointerOnHover` property is `false`. +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 %} -late List _population; -late List _colorMappers; - -@override -void initState() { - _population = [ - IndianPopulation('Gujarat', 54612), - IndianPopulation('Bangalore', 473069), - IndianPopulation('Chennai', 210312), - IndianPopulation('Andra', 95419), - IndianPopulation('Kashmir', 80599), - IndianPopulation('Delhi', 39000), - IndianPopulation('Mumbai', 122897), - IndianPopulation('Kolkatta', 184135), - ]; - - _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blueGrey), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.green), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.lime), - TreemapColorMapper.range(from: 30, to: 50, color: Colors.teal), - ]; - super.initState(); -} + late List _population; + late List _colorMappers; + + @override + void initState() { + _population = [ + IndianPopulation('Gujarat', 54612), + IndianPopulation('Bangalore', 473069), + IndianPopulation('Chennai', 210312), + IndianPopulation('Andra', 95419), + IndianPopulation('Kashmir', 80599), + IndianPopulation('Delhi', 39000), + IndianPopulation('Mumbai', 122897), + IndianPopulation('Kolkatta', 184135), + ]; -@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, + _colorMappers = [ + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blueGrey), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.green), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.lime), + TreemapColorMapper.range(from: 30, to: 50, color: Colors.teal), + ]; + super.initState(); + } + + @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; + }, + ) + ], ), - 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); @@ -1281,72 +1406,72 @@ It returns a widget for the given value. The pointer is used to indicate the exact color of the hovering tile on the legend segment. -The `pointerBuilder` will be called when the user interacts with the tiles i.e., while tapping in touch devices and hovering in the mouse enabled devices. +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 %} -late List _population; -late List _colorMappers; - -@override -void initState() { - _population = [ - IndianPopulation('Gujarat', 54612), - IndianPopulation('Bangalore', 473069), - IndianPopulation('Chennai', 210312), - IndianPopulation('Andra', 95419), - IndianPopulation('Kashmir', 80599), - IndianPopulation('Delhi', 39000), - IndianPopulation('Mumbai', 122897), - IndianPopulation('Kolkatta', 184135), - ]; - - _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blueGrey), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.green), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.lime), - TreemapColorMapper.range(from: 30, to: 50, color: Colors.teal), - ]; - super.initState(); -} + late List _population; + late List _colorMappers; + + @override + void initState() { + _population = [ + IndianPopulation('Gujarat', 54612), + IndianPopulation('Bangalore', 473069), + IndianPopulation('Chennai', 210312), + IndianPopulation('Andra', 95419), + IndianPopulation('Kashmir', 80599), + IndianPopulation('Delhi', 39000), + IndianPopulation('Mumbai', 122897), + IndianPopulation('Kolkatta', 184135), + ]; -@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; + _colorMappers = [ + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blueGrey), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.green), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.lime), + TreemapColorMapper.range(from: 30, to: 50, color: Colors.teal), + ]; + super.initState(); + } + + @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; + }, + ) + ], + ), ), ), ), - ), - ); -} + ); + } class IndianPopulation { const IndianPopulation(this.state, this.population); @@ -1362,71 +1487,71 @@ class IndianPopulation { ## Pointer customization -You can customize the size and color of the pointer using the `pointerSize` and `pointerColor` properties. The default value of the `pointerSize` property is `Size(16, 12)`. +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 %} -late List _population; -late List _colorMappers; - -@override -void initState() { - _population = [ - IndianPopulation('Gujarat', 54612), - IndianPopulation('Bangalore', 473069), - IndianPopulation('Chennai', 210312), - IndianPopulation('Andra', 95419), - IndianPopulation('Kashmir', 80599), - IndianPopulation('Delhi', 39000), - IndianPopulation('Mumbai', 122897), - IndianPopulation('Kolkatta', 184135), - ]; - - _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blueGrey), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.green), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.lime), - TreemapColorMapper.range(from: 30, to: 50, color: Colors.teal), - ]; - super.initState(); -} + late List _population; + late List _colorMappers; + + @override + void initState() { + _population = [ + IndianPopulation('Gujarat', 54612), + IndianPopulation('Bangalore', 473069), + IndianPopulation('Chennai', 210312), + IndianPopulation('Andra', 95419), + IndianPopulation('Kashmir', 80599), + IndianPopulation('Delhi', 39000), + IndianPopulation('Mumbai', 122897), + IndianPopulation('Kolkatta', 184135), + ]; -@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, + _colorMappers = [ + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blueGrey), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.green), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.lime), + TreemapColorMapper.range(from: 30, to: 50, color: Colors.teal), + ]; + super.initState(); + } + + @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; + }, + ) + ], ), - 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 9abc32b98..793d49a0f 100644 --- a/Flutter/treemap/levels.md +++ b/Flutter/treemap/levels.md @@ -23,45 +23,45 @@ There will be a tile for each unique value returned in the [`TreemapLevel.groupM {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - ), - ], + 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), + ]; + super.initState(); + } + + @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].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -92,87 +92,87 @@ The first level will work similarly to the flat level. From the next level in th {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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), - TreemapLevel(groupMapper: (int index) => _source[index].job), - TreemapLevel(groupMapper: (int index) => _source[index].group), - TreemapLevel(groupMapper: (int index) => _source[index].role), - ], + 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), + ]; + super.initState(); + } + + @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), + 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( @@ -214,121 +214,121 @@ You can customize the levels using the following properties: {% tabs %} {% highlight Dart %} -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), - ]; - 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.blue, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.blue, - width: 1, - ), - ), - padding: EdgeInsets.all(2.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.orangeAccent, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.orangeAccent, - width: 1, + 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), + ]; + 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.blue, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.blue, + width: 1, + ), ), + padding: 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].job, + color: Colors.orangeAccent, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.orangeAccent, + width: 1, + ), ), + padding: EdgeInsets.all(2.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, - ), - ), - padding: EdgeInsets.all(5), - ), - ], - ), - ); -} + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.green[300], + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.green, + width: 1, + ), + ), + padding: EdgeInsets.all(5), + ), + TreemapLevel( + groupMapper: (int index) => _source[index].role, + color: Colors.pink[300], + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.pink, + width: 1, + ), + ), + padding: EdgeInsets.all(5), + ), + ], + ), + ); + } class JobVacancyModel { const JobVacancyModel( diff --git a/Flutter/treemap/right-to-left.md b/Flutter/treemap/right-to-left.md index 390f2413d..4a09531b3 100644 --- a/Flutter/treemap/right-to-left.md +++ b/Flutter/treemap/right-to-left.md @@ -15,59 +15,59 @@ Right to left rendering can be achieved in the following ways: ### Wrapping the SfTreemap with 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`. +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/package-intl_intl/TextDirection/RTL-constant.html). {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: 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), - ); - }, - ), - ], + 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), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: 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), + ); + }, + ), + ], + ), ), ), - ), - ], - ), - ); -} + ], + ), + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -81,7 +81,7 @@ 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`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file. +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. {% tabs %} {% highlight Dart %} @@ -96,56 +96,56 @@ dependencies: {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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), - ); - }, - ), - ], + 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), + ]; + super.initState(); + } + + @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), + ); + }, + ), + ], + ), ), - ), - ); -} + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -166,60 +166,60 @@ Labels will be rendered from right to left direction. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - 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), - ); - }, - ), - ], + 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), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + 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), + ); + }, + ), + ], + ), ), ), - ), - ], + ], + ), ), ), - ), - ); -} + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -240,61 +240,61 @@ Legend items will be rendered from right to left direction. It is applicable for {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - 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(), + 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), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + 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(), + ), ), ), - ), - ], + ], + ), ), ), - ), - ); -} + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -315,96 +315,96 @@ Tooltip text will be rendered from right to left direction. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - 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)), - ], - ), - ], - ), - ); - }, - ), - ], + 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), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + 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)), + ], + ), + ], + ), + ); + }, + ), + ], + ), ), ), - ), - ], + ], + ), ), - ), - ), - ); -} + ), + ); + } class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); diff --git a/Flutter/treemap/selection.md b/Flutter/treemap/selection.md index 31d0cbbce..e8a3077e1 100644 --- a/Flutter/treemap/selection.md +++ b/Flutter/treemap/selection.md @@ -20,46 +20,46 @@ The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_tree {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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; - }, - onSelectionChanged: (TreemapTile) {}, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], + 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), + ]; + super.initState(); + } + + @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; + }, + onSelectionChanged: (TreemapTile) {}, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -87,56 +87,56 @@ You can customize the below appearance of the selected tile. {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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; - }, - onSelectionChanged: (TreemapTile) {}, - selectionSettings: TreemapSelectionSettings( - color: Colors.orange, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.deepOrange, - width: 1, + 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), + ]; + super.initState(); + } + + @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; + }, + onSelectionChanged: (TreemapTile) {}, + selectionSettings: TreemapSelectionSettings( + color: Colors.orange, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.deepOrange, + width: 1, + ), + borderRadius: BorderRadius.circular(10), ), - 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); @@ -153,66 +153,66 @@ class SocialMediaUsers { ## Hovered tile customization -You can customize the hovered tile color and border using the `tileHoverColor` and `tileHoverBorder` properties. The default value of the `tileHoverColor` is `Colors.transparent`. +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 %} -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), - ]; - super.initState(); -} - -@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, + 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), + ]; + super.initState(); + } + + @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), ), - 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 3f8fa8cdd..2de8780d5 100644 --- a/Flutter/treemap/tooltip.md +++ b/Flutter/treemap/tooltip.md @@ -20,79 +20,79 @@ The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flu {% tabs %} {% highlight Dart %} -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), - ]; - super.initState(); -} - -@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; - }, - 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)), - ], - ), - ], - ), - ); - }, - ), - ], + 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), + ]; + super.initState(); + } + + @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; + }, + 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)), + ], + ), + ], + ), + ); + }, + ), + ], + ), ), ), - ), - ); -} + ); + } class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -118,91 +118,91 @@ You can customize the appearance of the tooltip. * **Border color** - Change the border color of the tooltip in the treemap using the [`TreemapTooltipSettings.borderColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/borderColor.html) property. * **Border width** - Change the border width of the tooltip in the treemap using the [`TreemapTooltipSettings.borderWidth`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/borderWidth.html) property. * **Border radius** - Change the border radius of the tooltip in the treemap using the [`TreemapTooltipSettings.borderRadius`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/borderRadius.html) property. -* **Visibility** - Change the duration of the tooltip visibility using the `hideDelay` property. The default value of the `hideDelay` 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` property. +* **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 %} -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), - ]; - super.initState(); -} - -@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; - }, - 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)), - ], - ), - ], - ), - ); - }, + 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), + ]; + super.initState(); + } + + @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; + }, + 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, ), - ], - 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);