diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut.JPG deleted file mode 100644 index 4d8cf3519..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_angle.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_angle.JPG deleted file mode 100644 index fd6dca368..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_angle.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_colormapping.png b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_colormapping.png deleted file mode 100644 index fe1f76b2c..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_colormapping.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_elevation.png b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_elevation.png deleted file mode 100644 index cd0a538f3..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_elevation.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_explode.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_explode.JPG deleted file mode 100644 index 60d67e035..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_explode.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_explodeAll.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_explodeAll.JPG deleted file mode 100644 index 033a3d002..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_explodeAll.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_grouping.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_grouping.JPG deleted file mode 100644 index 1893f3c76..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_grouping.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_innerRadius.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_innerRadius.JPG deleted file mode 100644 index 0b55cdc17..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_innerRadius.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_roundCorner.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_roundCorner.JPG deleted file mode 100644 index fb9ac6808..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_roundCorner.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_size.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_size.JPG deleted file mode 100644 index d6dbd50ae..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/doughnut_size.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/overfilled-radial-bar.jpg b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/overfilled-radial-bar.jpg deleted file mode 100644 index 1173e217b..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/overfilled-radial-bar.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie.JPG deleted file mode 100644 index d14b81f0c..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_angle.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_angle.JPG deleted file mode 100644 index 7edfb0382..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_angle.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_explode.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_explode.JPG deleted file mode 100644 index 423b3aff9..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_explode.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_explodeAll.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_explodeAll.JPG deleted file mode 100644 index c33e227b0..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_explodeAll.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_grouping.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_grouping.JPG deleted file mode 100644 index 68fb2c278..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_grouping.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_radius.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_radius.JPG deleted file mode 100644 index 946e1a990..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_radius.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_sizing.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_sizing.JPG deleted file mode 100644 index af1d5e454..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/pie_sizing.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar.JPG deleted file mode 100644 index bd39b44d9..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_dataLabel.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_dataLabel.JPG deleted file mode 100644 index b04009118..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_dataLabel.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_innerRadius.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_innerRadius.JPG deleted file mode 100644 index b1db520ec..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_innerRadius.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_roundCorner.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_roundCorner.JPG deleted file mode 100644 index 0fcc0e26c..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_roundCorner.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_sizing.JPG b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_sizing.JPG deleted file mode 100644 index 12af832e3..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/radialbar_sizing.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/trackcustomization.png b/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/trackcustomization.png deleted file mode 100644 index dc3b4a29f..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/chart-types/circular-chart-types-images/trackcustomization.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/Adding-code-snippent.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/Adding-code-snippent.png deleted file mode 100644 index de0c8c9e6..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/Adding-code-snippent.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/code-snippet.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/code-snippet.png deleted file mode 100644 index cb9a63553..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/code-snippet.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/compile-code.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/compile-code.png deleted file mode 100644 index ae2372de7..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/compile-code.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/copy-package.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/copy-package.png deleted file mode 100644 index 5194bb95b..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/copy-package.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/copy-version.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/copy-version.png deleted file mode 100644 index b6517860d..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/copy-version.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/dependency.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/dependency.png deleted file mode 100644 index f68a78670..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/dependency.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/import-package-flutterflow.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/import-package-flutterflow.png deleted file mode 100644 index 6d3f2b988..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/import-package-flutterflow.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/page.png b/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/page.png deleted file mode 100644 index 1db67aaf1..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/page.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/annotation/annotation_positioning.jpg b/chart-sdk/flutter/3d-circular-charts/images/annotation/annotation_positioning.jpg deleted file mode 100644 index 804297426..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/annotation/annotation_positioning.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/annotation/default_annotation.jpg b/chart-sdk/flutter/3d-circular-charts/images/annotation/default_annotation.jpg deleted file mode 100644 index dfe934be2..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/annotation/default_annotation.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/annotation/watermark.jpg b/chart-sdk/flutter/3d-circular-charts/images/annotation/watermark.jpg deleted file mode 100644 index 1f250c4c0..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/annotation/watermark.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/chart-title/chart_title.jpg b/chart-sdk/flutter/3d-circular-charts/images/chart-title/chart_title.jpg deleted file mode 100644 index c60ebd815..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/chart-title/chart_title.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/color-mapping.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/color-mapping.jpg deleted file mode 100644 index 2ed971897..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/color-mapping.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/color_palette.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/color_palette.jpg deleted file mode 100644 index ec4e2371a..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/color_palette.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/doughnut_radial.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/doughnut_radial.jpg deleted file mode 100644 index 28b97e30e..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/doughnut_radial.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/emptypointcustomization.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/emptypointcustomization.jpg deleted file mode 100644 index 427a8216e..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/emptypointcustomization.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/emptypoints.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/emptypoints.jpg deleted file mode 100644 index 2d19c48b3..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/emptypoints.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_imageshader.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_imageshader.jpg deleted file mode 100644 index 0922b7d89..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_imageshader.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_linear.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_linear.jpg deleted file mode 100644 index f792f13f6..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_linear.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_pointshadermapper.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_pointshadermapper.jpg deleted file mode 100644 index b17932305..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_pointshadermapper.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_rendermode.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_rendermode.jpg deleted file mode 100644 index 115d32ca8..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/pie_rendermode.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/radialbar_sweep.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/radialbar_sweep.jpg deleted file mode 100644 index 23fe788da..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/radialbar_sweep.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/sortings.jpg b/chart-sdk/flutter/3d-circular-charts/images/circular-customization/sortings.jpg deleted file mode 100644 index 0c6397412..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/circular-customization/sortings.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/circular_overflow.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/circular_overflow.jpg deleted file mode 100644 index 07c79773a..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/circular_overflow.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/circular_saturation.png b/chart-sdk/flutter/3d-circular-charts/images/datalabel/circular_saturation.png deleted file mode 100644 index b4f7277c2..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/circular_saturation.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/connector_line.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/connector_line.jpg deleted file mode 100644 index 8042e099d..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/connector_line.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_0_value.png b/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_0_value.png deleted file mode 100644 index 8c6041d8f..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_0_value.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_format.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_format.jpg deleted file mode 100644 index b7aa6836e..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_format.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_position.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_position.jpg deleted file mode 100644 index c847f8ff4..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_position.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_template.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_template.jpg deleted file mode 100644 index c20355254..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/datalabel_template.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/default_datalabel.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/default_datalabel.jpg deleted file mode 100644 index 818ccaffe..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/default_datalabel.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/smart_datalabel.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/smart_datalabel.jpg deleted file mode 100644 index 4dfd84be4..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/smart_datalabel.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/use_series_color.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/use_series_color.jpg deleted file mode 100644 index b38f7e657..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/use_series_color.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/datalabel/value_mapper.jpg b/chart-sdk/flutter/3d-circular-charts/images/datalabel/value_mapper.jpg deleted file mode 100644 index 40ca087cb..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/datalabel/value_mapper.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/export-circular-chart/pdf_view.png b/chart-sdk/flutter/3d-circular-charts/images/export-circular-chart/pdf_view.png deleted file mode 100644 index 4ae8d6be2..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/export-circular-chart/pdf_view.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/getting-started/data_source.JPG b/chart-sdk/flutter/3d-circular-charts/images/getting-started/data_source.JPG deleted file mode 100644 index d14b81f0c..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/getting-started/data_source.JPG and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/getting-started/datalabel.png b/chart-sdk/flutter/3d-circular-charts/images/getting-started/datalabel.png deleted file mode 100644 index 9c5a59db2..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/getting-started/datalabel.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/getting-started/legend.png b/chart-sdk/flutter/3d-circular-charts/images/getting-started/legend.png deleted file mode 100644 index 59b4ea845..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/getting-started/legend.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/getting-started/title_chart.jpg b/chart-sdk/flutter/3d-circular-charts/images/getting-started/title_chart.jpg deleted file mode 100644 index 3c4b27105..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/getting-started/title_chart.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/getting-started/tooltip.png b/chart-sdk/flutter/3d-circular-charts/images/getting-started/tooltip.png deleted file mode 100644 index ac74c5b83..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/getting-started/tooltip.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/customized_legend.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/customized_legend.jpg deleted file mode 100644 index bb567f4a7..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/customized_legend.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/default_legend.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/default_legend.jpg deleted file mode 100644 index 031d3e555..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/default_legend.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/legend_position.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/legend_position.jpg deleted file mode 100644 index 7ebcb42c6..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/legend_position.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/legend_template.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/legend_template.jpg deleted file mode 100644 index 1553e507d..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/legend_template.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/legend_title.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/legend_title.jpg deleted file mode 100644 index 900ce3bf7..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/legend_title.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/overflow_wrap.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/overflow_wrap.jpg deleted file mode 100644 index 287616c25..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/overflow_wrap.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/legend/toggle_visibility.jpg b/chart-sdk/flutter/3d-circular-charts/images/legend/toggle_visibility.jpg deleted file mode 100644 index 67c640d2a..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/legend/toggle_visibility.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/overview/chart_legend_circular.png b/chart-sdk/flutter/3d-circular-charts/images/overview/chart_legend_circular.png deleted file mode 100644 index c56e5e6ac..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/overview/chart_legend_circular.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/overview/chart_types_circular.png b/chart-sdk/flutter/3d-circular-charts/images/overview/chart_types_circular.png deleted file mode 100644 index 5eee776c0..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/overview/chart_types_circular.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/overview/overview.png b/chart-sdk/flutter/3d-circular-charts/images/overview/overview.png deleted file mode 100644 index ced2f464a..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/overview/overview.png and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/rtl-support/circular_legend_rtl.jpg b/chart-sdk/flutter/3d-circular-charts/images/rtl-support/circular_legend_rtl.jpg deleted file mode 100644 index 3ba78fc55..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/rtl-support/circular_legend_rtl.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/rtl-support/circular_tooltip_rtl.jpg b/chart-sdk/flutter/3d-circular-charts/images/rtl-support/circular_tooltip_rtl.jpg deleted file mode 100644 index ccafb3ee1..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/rtl-support/circular_tooltip_rtl.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/selection/customizing_segments.jpg b/chart-sdk/flutter/3d-circular-charts/images/selection/customizing_segments.jpg deleted file mode 100644 index d437e9c4b..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/selection/customizing_segments.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/selection/default_selection.jpg b/chart-sdk/flutter/3d-circular-charts/images/selection/default_selection.jpg deleted file mode 100644 index 5c4f22ec8..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/selection/default_selection.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/selection/deselection.gif b/chart-sdk/flutter/3d-circular-charts/images/selection/deselection.gif deleted file mode 100644 index 99dd59852..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/selection/deselection.gif and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/selection/multi_select.jpg b/chart-sdk/flutter/3d-circular-charts/images/selection/multi_select.jpg deleted file mode 100644 index 54322d318..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/selection/multi_select.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/tooltip/customized_tooltip.jpg b/chart-sdk/flutter/3d-circular-charts/images/tooltip/customized_tooltip.jpg deleted file mode 100644 index 69c9e7fda..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/tooltip/customized_tooltip.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/tooltip/default_tooltip.jpg b/chart-sdk/flutter/3d-circular-charts/images/tooltip/default_tooltip.jpg deleted file mode 100644 index 3efa6dbe0..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/tooltip/default_tooltip.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/tooltip/tooltip_pointer.jpg b/chart-sdk/flutter/3d-circular-charts/images/tooltip/tooltip_pointer.jpg deleted file mode 100644 index 4a1498609..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/tooltip/tooltip_pointer.jpg and /dev/null differ diff --git a/chart-sdk/flutter/3d-circular-charts/images/tooltip/tooltip_template.jpg b/chart-sdk/flutter/3d-circular-charts/images/tooltip/tooltip_template.jpg deleted file mode 100644 index 62e3f27c2..000000000 Binary files a/chart-sdk/flutter/3d-circular-charts/images/tooltip/tooltip_template.jpg and /dev/null differ diff --git a/chart-sdk/flutter/barcode-generator/accessibility.md b/chart-sdk/flutter/barcode-generator/accessibility.md index 7c2a039ab..1ac5e2bd0 100644 --- a/chart-sdk/flutter/barcode-generator/accessibility.md +++ b/chart-sdk/flutter/barcode-generator/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Flutter Barcodes widget | Syncfusion -description: Learn here all about Accessibility feature of Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget and more. +title: Accessibility in Flutter Barcodes | Syncfusion® +description: Learn about accessibility support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including screen readers, keyboard navigation, and more. platform: chart-sdk control: SfBarcodeGenerator documentation: ug @@ -14,10 +14,14 @@ documentation: ug The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to customize colors for all UI elements. You can customize colors for the following elements: -* [Bar color](https://help.syncfusion.com/flutter/barcode/barcode-customization) -* [Background color](https://help.syncfusion.com/flutter/barcode/barcode-customization) +* [Bar color](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/barcode-customization) +* [Background color](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/barcode-customization) ## Large fonts The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) automatically adjusts font size based on device settings and scales according to the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all text elements in the barcode generator. -* [Input value of barcode](https://help.syncfusion.com/flutter/barcode/barcode-customization#text-customization) \ No newline at end of file +* [Input value of barcode](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/barcode-customization#text-customization) + +## Screen reader support + +The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) supports Flutter's built-in [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) framework, which provides voice-over and TalkBack screen reader support. You can wrap the barcode generator in a [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget and provide a descriptive label using the label property so that screen readers can announce the barcode's input value. Alternatively, the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget can be placed on the parent container holding the [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html). This improves accessibility for visually impaired users, especially since barcodes are inherently visual elements that cannot be interpreted by screen readers without a meaningful label. \ No newline at end of file diff --git a/chart-sdk/flutter/barcode-generator/barcode-customization.md b/chart-sdk/flutter/barcode-generator/barcode-customization.md index 9ee712b55..c99d37691 100644 --- a/chart-sdk/flutter/barcode-generator/barcode-customization.md +++ b/chart-sdk/flutter/barcode-generator/barcode-customization.md @@ -1,8 +1,7 @@ --- layout: post -title: Customization in Flutter Barcodes widget | Syncfusion -description: Learn all about the customization features of the Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget and more. -platform: chart-sdk +title: Customization in Flutter Barcodes | Syncfusion® +description: Learn about customization options in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including appearance, sizing, colors, and styling. platform: chart-sdk control: SfBarcodeGenerator documentation: ug @@ -10,120 +9,174 @@ documentation: ug # Customization in Flutter Barcodes (SfBarcodeGenerator) +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. + ## Text customization **Displaying input value** To display the input value of the barcode, enable its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, it is set to false. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 300, - child: SfBarcodeGenerator(value: '12634388927', showValue: true), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 300, + child: SfBarcodeGenerator(value: '12634388927', showValue: true), + ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![show text](images/text-customization/show-text.jpg) **Text style customization** The text style can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the barcode generator. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 300, - child: SfBarcodeGenerator( - value: '12634388927', - textStyle: TextStyle( - fontFamily: 'Times', - fontSize: 16, - fontStyle: FontStyle.italic, - fontWeight: FontWeight.bold, - color: Colors.red, + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 300, + child: SfBarcodeGenerator( + value: '12634388927', + textStyle: TextStyle( + fontFamily: 'Times', + fontSize: 16, + fontStyle: FontStyle.italic, + fontWeight: FontWeight.bold, + color: Colors.red, + ), + showValue: true, ), - showValue: true, ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![text customization](images/text-customization/text-style.jpg) **Text spacing** Control the space between the text and the barcode with the [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) property of barcode generator. By default, it is set to 2. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 300, - child: SfBarcodeGenerator( - value: '12634388927', - textSpacing: 25, - showValue: true, + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 300, + child: SfBarcodeGenerator( + value: '12634388927', + textSpacing: 25, + showValue: true, + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![text spacing](images/text-customization/text-spacing.jpg) **Horizontal text alignment** The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. Position the displayed text at the [`start`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#start), [`center`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#center) or [`end`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#end) of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center. +{% tabs %} + {% highlight dart %} - - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 240, - child: SfBarcodeGenerator( - value: '12634', - textAlign: TextAlign.end, - showValue: true, + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 240, + child: SfBarcodeGenerator( + value: '12634', + textAlign: TextAlign.end, + showValue: true, + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![text align](images/text-customization/text-align.png) ## Bar customization @@ -134,167 +187,245 @@ Both one-dimensional and two-dimensional symbologies support the [`module`](http For one-dimensional barcodes, if not set, the smallest bar line size depends on the available width. -The following code snippet shows the one dimensional barcode with [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property, +The following code snippet shows the one-dimensional barcode with the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. The only difference between this and the sample without the `module` property is the `module` value passed to the symbology. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - showValue: true, - symbology: Codabar(module: 1), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + showValue: true, + symbology: Codabar(module: 1), + ), ), ), - ), - ); + ); + } } - {% endhighlight %} +{% endhighlight %} + +{% endtabs %} ![with module value](images/text-customization/with-module.jpg) N> In the image above, the smallest bar line width is 1 logical pixel. -Below code snippet shows the one dimensional barcode without the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property, +The following code snippet shows the one-dimensional barcode without the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - showValue: true, - symbology: Codabar(), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + showValue: true, + symbology: Codabar(), + ), ), ), - ), - ); + ); + } } - {% endhighlight %} +{% endhighlight %} + +{% endtabs %} ![without module value](images/text-customization/without-module.jpg) -For two dimensional barcode , if the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property is not set, the smallest dot size is calculated based on the minimum of available width or height. +For two-dimensional barcodes, if the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property is not set, the smallest dot size is calculated based on the minimum of available width or height. + +The following code snippet shows the two-dimensional barcode with the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. -The following code snippet shows the two dimensional barcode with [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property, +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - symbology: QRCode(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + symbology: QRCode(module: 2), + ), ), ), - ), - ); + ); + } } - {% endhighlight %} +{% endhighlight %} + +{% endtabs %} - ![QR with module value](images/text-customization/qr-with-module.jpg) +![QR with module value](images/text-customization/qr-with-module.jpg) - Below code snippet shows the two dimensional barcode without the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property, +The following code snippet shows the two-dimensional barcode without the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. - {% highlight dart %} +{% tabs %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - symbology: QRCode(), +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + symbology: QRCode(), + ), ), ), - ), - ); + ); + } } - {% endhighlight %} +{% endhighlight %} + +{% endtabs %} - ![QR without module value](images/text-customization/qr-without-module.jpg) +![QR without module value](images/text-customization/qr-without-module.jpg) **Bar color customization** -Customize the barcode's bar color using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as like the following code snippet, +Customize the barcode's bar color using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as shown in the following code snippet. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 240, - child: SfBarcodeGenerator( - value: '12634', - barColor: Colors.deepPurple, + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 240, + child: SfBarcodeGenerator( + value: '12634', + barColor: Colors.deepPurple, + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![bar color](images/text-customization/bar-color.jpg) **Background color customization** -You can customize the barcode's background color with the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property of barcode generator as like the below code snippet, +You can customize the barcode's background color with the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property of barcode generator as shown in the following code snippet. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - width: 230, - child: SfBarcodeGenerator( - backgroundColor: Color.fromRGBO(193, 250, 250, 1), - value: '123456789', - symbology: Codabar(), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + width: 230, + child: SfBarcodeGenerator( + backgroundColor: Color.fromRGBO(193, 250, 250, 1), + value: '123456789', + symbology: Codabar(), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![background color](images/text-customization/background-color.jpg) diff --git a/chart-sdk/flutter/barcode-generator/getting-started.md b/chart-sdk/flutter/barcode-generator/getting-started.md index f27d6a150..4f070832e 100644 --- a/chart-sdk/flutter/barcode-generator/getting-started.md +++ b/chart-sdk/flutter/barcode-generator/getting-started.md @@ -1,13 +1,13 @@ --- layout: post -title: Getting started with Flutter Barcodes widget | Syncfusion -description: Learn here about getting started with Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget, its elements, and more. +title: Getting Started with Flutter Barcodes | Syncfusion® +description: Learn how to get started with the Syncfusion® Flutter Barcodes (SfBarcodeGenerator). Explore setup, barcode generation, and customization options. platform: chart-sdk control: SfBarcodeGenerator documentation: ug --- -# Getting started with Flutter Barcodes (SfBarcodeGenerator) +# Getting Started with Flutter Barcodes (SfBarcodeGenerator) This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion® barcode generator widget. @@ -20,6 +20,8 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter Barcode dependency to your pubspec.yaml file. +{% tabs %} + {% highlight dart %} dependencies: @@ -28,50 +30,73 @@ Add the Syncfusion® Flutter Barcode dependency to your pubspec.ya {% endhighlight %} -N> Here **xx.x.xx** denotes the current version of the [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes/versions) package. +{% endtabs %} + +N> Here **xx.x.xx** denotes the current version of the [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes/versions) package. You can check the latest version available on [pub.dev](https://pub.dev/packages/syncfusion_flutter_barcodes/install). **Get packages** Run the following command to get the required packages. +{% tabs %} + {% highlight dart %} $ flutter pub get {% endhighlight %} +{% endtabs %} + **Import package** Import the following package in your Dart code. +{% tabs %} + {% highlight dart %} import 'package:syncfusion_flutter_barcodes/barcodes.dart'; {% endhighlight %} +{% endtabs %} + ## Initialize the barcode -Add the Barcode Generator widget as a child of any widget. Here, the widget is added as a child of the container widget and the height to the container is specified (otherwise it will take full container height). +Add the Barcode Generator widget as a child of any widget. Here, the widget is added as a child of the container widget and the height to the container is specified (otherwise, it will occupy the full available height). + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator(value: 'http://www.syncfusion.com'), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator(value: 'http://www.syncfusion.com'), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + N> The default symbology of SfBarcodeGenerator is [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html). ![Initialize barcode generator](images/getting-started/getting_started1.jpg) @@ -80,57 +105,83 @@ N> The default symbology of SfBarcodeGenerator is [`Code128`](https://pub.dev/do You can set the required symbology type to the barcode generator based on input value by initializing the [`symbology`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology-class.html) property. In the following code snippet, the QR code is set as the barcode symbology. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 350, - width: 350, - child: SfBarcodeGenerator( - value: 'http://www.syncfusion.com', - symbology: QRCode(), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + height: 350, + width: 350, + child: SfBarcodeGenerator( + value: 'http://www.syncfusion.com', + symbology: QRCode(), + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![symbology to barcode](images/getting-started/getting_started2.jpg) ## Display input value -The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of barcode as like the following code snippet, +The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of barcode as shown in the following code snippet. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 350, - width: 350, - child: SfBarcodeGenerator( - value: 'http://www.syncfusion.com', - showValue: true, - textSpacing: 15, - symbology: QRCode(), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + height: 350, + width: 350, + child: SfBarcodeGenerator( + value: 'http://www.syncfusion.com', + showValue: true, + textSpacing: 15, + symbology: QRCode(), + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![Text to barcode](images/getting-started/getting_started3.jpg) diff --git a/chart-sdk/flutter/barcode-generator/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/barcode-generator/how-to/custom-widget-on-flutterflow.md index d6b8f4c1a..ad16ea432 100644 --- a/chart-sdk/flutter/barcode-generator/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/barcode-generator/how-to/custom-widget-on-flutterflow.md @@ -1,75 +1,77 @@ --- layout: post -title: Barcodes Widget in FlutterFlow | Syncfusion -description: You can learn here all about adding Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget in FlutterFlow. +title: How to Add Barcodes in FlutterFlow | Syncfusion® +description: Learn how to add and use Syncfusion® Flutter Barcodes (SfBarcodeGenerator) in FlutterFlow, including setup, integration, and configuration. platform: chart-sdk control: SfBarcodeGenerator documentation: ug --- -# How to add Syncfusion® Barcodes widget in FlutterFlow? +# How to Add Barcodes in FlutterFlow (SfBarcodeGenerator) ## Overview -[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfBarcodeGenerator widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). +[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our `SfBarcodeGenerator` widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). + +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. ### Create a new project Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) and click the `+ Create New` button to create a new project. -### Creating the custom widget +### Create the custom widget 1. Navigate to the `Custom Code` section in the left side navigation menu. 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. -4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. +4. Click on the `View Boilerplate Code` button on the right side, represented by the `[]` icon. 5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) -### Add Barcodes widget as a dependency +### Add the Barcodes widget as a dependency -1. Click on `+ Add Dependency`, a text editor will appear. +1. Click on `+ Add Dependency`; a text editor will appear. 2. Navigate to [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. ![Version](how-to-section-images/copy-version.png) -3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. +3. Paste the copied dependency into the text editor, then click `Refresh` and save it. ->**Note**: The live version of [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +N> The live version of [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) ->**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. +N> If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. ->**Note**: Since [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. +N> Since [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. ### Import the package 1. Navigate to the `Installing` tab on the [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) page. Under the `Import it` section, copy the package import statement. ![Package](how-to-section-images/copy-package.png) -2. Paste the copied import statement into the code editor and then `Save` it. +2. Paste the copied import statement into the code editor, and then save it. ![Import](how-to-section-images/import-package-flutterflow.png) -### Add widget code snippet in code editor +### Add a widget code snippet in the code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_barcodes/example) tab in [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_barcodes/example) tab on the [Syncfusion® Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) page, and copy the widget-specific code. ![Code](how-to-section-images/code-snippet.png) -2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. +2. Paste the copied code sample into the code editor, click `Format Code`, and then save it. ![Code snippet](how-to-section-images/Adding-code-snippent.png) -### Compiling the codes +### Compile the code -1. Click the 'Compile Code' button located in the top right corner. +1. Click the `Compile Code` button located in the top right corner. 2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process. ![Compile code](how-to-section-images/compile-code.png) ->**Note**: The compilation progress takes 2 to 3 minutes to complete. +N> The compilation progress takes 2 to 3 minutes to complete. -### Utilizing the custom widget +### Use the custom widget 1. Navigate to `Widget Palette` located in the left side navigation menu. 2. Click on the `Components` tab. -3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. +3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget onto your page. ![Page](how-to-section-images/page.png) diff --git a/chart-sdk/flutter/barcode-generator/one-dimensional.md b/chart-sdk/flutter/barcode-generator/one-dimensional.md index c6263141c..855a29b44 100644 --- a/chart-sdk/flutter/barcode-generator/one-dimensional.md +++ b/chart-sdk/flutter/barcode-generator/one-dimensional.md @@ -1,15 +1,17 @@ --- layout: post -title: One-dimensional symbology in Flutter Barcodes widget | Syncfusion -description: Learn here all about One-dimensional symbology feature of Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget and more. +title: One-Dimensional Symbology in Flutter Barcodes | Syncfusion® +description: Learn about one-dimensional symbology support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including Code128, EAN, UPC, Codabar, and Code39. platform: chart-sdk control: SfBarcodeGenerator documentation: ug --- -# One-dimensional symbology in Flutter Barcodes (SfBarcodeGenerator) +# One-Dimensional Symbology in Flutter Barcodes (SfBarcodeGenerator) -One-dimensional barcodes represent data by varying the widths and spacings of parallel lines. These barcode types are also known as linear barcode types. The Syncfusion® flutter barcode generator supports the following one-dimensional barcode types: +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. + +One-dimensional barcodes represent data by varying the widths and spacings of parallel lines. These barcode types are also known as linear barcodes. The Syncfusion® flutter barcode generator supports the following one-dimensional barcode types: * [`Codabar`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Codabar-class.html) * [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html) @@ -32,27 +34,40 @@ One-dimensional barcodes represent data by varying the widths and spacings of pa * Each character has three bars and four spaces. * Uses characters of A, B, C, D as start and stop characters. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '123456789', - showValue: true, - symbology: Codabar(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '123456789', + showValue: true, + symbology: Codabar(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![codabar symbology](images/one-dimensional/codabar.jpg) ## Code39 @@ -62,88 +77,127 @@ One-dimensional barcodes represent data by varying the widths and spacings of pa * Allows character set of digits (0-9), upper case alphabets (A-Z), and symbols like space, minus (-), plus (+), period (.), dollar sign ($), slash (/), and percent (%). * Each character is encoded with 5 bars and 4 spaces where 3 are wide and 6 are narrow. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: 'CODE39', - showValue: true, - symbology: Code39(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: 'CODE39', + showValue: true, + symbology: Code39(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code39 symbology](images/one-dimensional/code39.jpg) -The [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39/enableCheckSum.html) property of [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html) barcode allows to add the check digit along with the input value. The default value of [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39/enableCheckSum.html) property is true. +The [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39/enableCheckSum.html) property of [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html) barcode allows you to add the check digit along with the input value. The default value of [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39/enableCheckSum.html) property is true. ## Code39 Extended [`Code39 Extended`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39Extended-class.html) symbology is an extended version of Code39 that supports all 128 ASCII characters set. So, it encodes lower case alphabets (a-z) as well as special characters. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '051091', - showValue: true, - symbology: Code39Extended(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '051091', + showValue: true, + symbology: Code39Extended(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code39 extended symbology](images/one-dimensional/code39-extended.jpg) -As like [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html), the [`Code39 Extended`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39Extended-class.html) supports the [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39/enableCheckSum.html) property. +Like [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html), the [`Code39 Extended`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39Extended-class.html) supports the [`enableCheckSum`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39/enableCheckSum.html) property. ## Code93 -[`Code93`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code93-class.html) is designed to complement and enhance [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html). It represents the complete ASCII character set by using a combination of 2 characters. It is a continuous, variable-length symbology and produces a denser code. +[`Code93`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code93-class.html) is designed to complement and enhance [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html). It represents the complete ASCII character set using a combination of two characters. It is a continuous, variable-length symbology and produces a denser code. * Encodes character set of uppercase alphabets (A-Z), digits (0-9), and special characters such as asterisk (*), dash (-), dollar ($), percent (%), Space, dot (.), slash (/), plus (+) and so on. * The asterisk (*) is not a true encoding character, but it is the start and stop symbol for [`Code93`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code93-class.html) Symbology. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '01234567', - showValue: true, - symbology: Code93(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '01234567', + showValue: true, + symbology: Code93(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code93 symbology](images/one-dimensional/code93.jpg) ## Code128 @@ -152,108 +206,160 @@ As like [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/lat The [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html) symbology encodes the input symbols supported by [`Code128A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128A-class.html), [`Code128B`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128B-class.html), [`Code128C`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128C-class.html). The default symbology type of barcode generator is [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html) +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: 'CODE128', - showValue: true, - symbology: Code128(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: 'CODE128', + showValue: true, + symbology: Code128(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code128 symbology](images/one-dimensional/code128.jpg) ## Code128A [`Code128A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128A-class.html) (or Chars Set A) includes all the standard upper case U.S. alphanumeric keyboard characters and punctuation characters together with the control characters, (characters with ASCII values from 0 to 95 inclusive), and seven special characters. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: 'CODE128A', - showValue: true, - symbology: Code128A(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: 'CODE128A', + showValue: true, + symbology: Code128A(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code128A symbology](images/one-dimensional/code128A.jpg) ## Code128B [`Code128B`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128B-class.html) (or Chars Set B) includes all the standard upper case alphanumeric keyboard characters and punctuation characters together with lower case alphabetic characters (characters with ASCII values from 32 to 127 inclusive), and seven special characters. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: 'CODE128B', - showValue: true, - symbology: Code128B(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: 'CODE128B', + showValue: true, + symbology: Code128B(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code128B symbology](images/one-dimensional/code128B.jpg) ## Code128C -[`Code128C`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128C-class.html) (or Chars Set C) includes a set of 100 digit pairs from 00 to 99 inclusive, as well as three special characters. This allows numeric data to be encoded as two data digits per symbol character effectively twice the density of standard data. +[`Code128C`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128C-class.html) (or Chars Set C) includes a set of 100 digit pairs from 00 to 99 inclusive, as well as three special characters. This allows numeric data to be encoded as two data digits per symbol character, effectively twice the density of standard data. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '1234567890', - showValue: true, - symbology: Code128C(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '1234567890', + showValue: true, + symbology: Code128C(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![code128C symbology](images/one-dimensional/code128c.jpg) **Code 128 Special characters** @@ -266,114 +372,166 @@ The last seven characters of Code Sets A and B (character values 96 - 102) and t * This type is mainly used for worldwide retail. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '72527273070', - showValue: true, - symbology: UPCA(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '72527273070', + showValue: true, + symbology: UPCA(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![UPCA symbology](images/one-dimensional/upca-symbology.png) ## UPC-E -As like [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html), the [`UPC-E`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html) symbology supports only numeric character. It is a zero suppressed version of [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html) symbology where it uses only 6 digits of product code and does not use the middle guard. By default, the number system(0) will add at the front and check digit at the end along with 6 digits of the input product code. +As like [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html), the [`UPC-E`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html) symbology supports only numeric character. It is a zero suppressed version of [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html) symbology where it uses only 6 digits of product code and does not use the middle guard. By default, the number system (0) is added at the front and check digit at the end along with 6 digits of the input product code. * This type is mainly used on products with very small packaging details. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '310194', - showValue: true, - symbology: UPCE(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '310194', + showValue: true, + symbology: UPCE(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![UPCE symbology](images/one-dimensional/upce.png) ## EAN-13 -[`EAN-13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html), based on the UPC-A standard. As like [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html), it supports only the numeric character. It encodes the 12 digits of input data with the check digit at its end. +[`EAN-13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html), based on the UPC-A standard. Like [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html), it supports only the numeric character. It encodes the 12 digits of input data with the check digit at its end. + +* The difference between the [`UPCA`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html) and [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) is that number system used in the [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) is 2 digits ranges from 00 to 99 whereas the number system used in [`UPCA`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html) is single digits range from 0 to 9. -* This difference between the [`UPCA`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html) and [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) is that number system used in the [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) is 2 digits ranges from 00 to 99 whereas the number system used in [`UPCA`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html) is single digits range from 0 to 9. +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '9735940564824', - showValue: true, - symbology: EAN13(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '9735940564824', + showValue: true, + symbology: EAN13(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![EAN13 symbology](images/one-dimensional/ean-13.png) ## EAN-8 [`EAN8`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN8-class.html) is equivalent to the [`UPCE`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html) for small packaging details. It is shorter than the [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) barcode and it is longer than [`UPCE`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html). -As like [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) and [`UPCE`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html), it encodes 7 digits of numeric data with the check digit at its end. +Like [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html) and [`UPCE`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html), it encodes 7 digits of numeric data with the check digit at its end. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 150, - child: SfBarcodeGenerator( - value: '11223344', - showValue: true, - symbology: EAN8(module: 2), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 150, + child: SfBarcodeGenerator( + value: '11223344', + showValue: true, + symbology: EAN8(module: 2), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![EAN8 symbology](images/one-dimensional/ean-8.png) -All the one dimensional symbology supports the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. The property is used to define the size of the smallest line or dot of the barcode. If this property is not set, the size of the smallest line of the barcode is calculated based on the available size and total number of bars for the provided input value. \ No newline at end of file +All the one-dimensional symbologies support the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. The property is used to define the size of the smallest line or dot of the barcode. If this property is not set, the size of the smallest line of the barcode is calculated based on the available size and total number of bars for the provided input value. \ No newline at end of file diff --git a/chart-sdk/flutter/barcode-generator/overview.md b/chart-sdk/flutter/barcode-generator/overview.md index af106d088..e0ba159cc 100644 --- a/chart-sdk/flutter/barcode-generator/overview.md +++ b/chart-sdk/flutter/barcode-generator/overview.md @@ -1,16 +1,18 @@ --- layout: post -title: About Flutter Barcodes widget | Syncfusion -description: Learn here all about introduction of Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget, its features, and more. +title: About Flutter Barcode Generator | Syncfusion® +description: Learn about the Syncfusion® Flutter Barcodes (SfBarcodeGenerator), its features, barcode symbologies, and customization options. platform: chart-sdk control: SfBarcodeGenerator documentation: ug --- -# Flutter Barcodes (SfBarcodeGenerator) Overview +# About Flutter Barcode Generator (SfBarcodeGenerator) The Syncfusion® Flutter Barcode Generator is a data visualization widget designed to generate and display data in a machine-readable format. It offers an efficient way to encode text using supported symbology types. +To get started with the Flutter Barcode Generator, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. + ![Overview flutter barcode](images/getting-started/overview1.jpg) ![Overview flutter QR Code](images/getting-started/getting_started3.jpg) @@ -24,7 +26,7 @@ To quickly get started with our Flutter Barcode Generator widget, watch the tuto * **One-dimensional barcodes** - The Barcode Generator supports different one-dimensional barcode symbologies such as [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html), [`EAN8`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN8-class.html), [`EAN13`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/EAN13-class.html), [`UPC-A`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCA-class.html), [`UPC-E`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/UPCE-class.html), [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html), [`Code39 Extended`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39Extended-class.html), [`Code93`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code93-class.html), and [`Codabar`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Codabar-class.html). * **Two-dimensional barcode** - Barcode Generator supports popular [`QR code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode-class.html) and [`Data Matrix`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix-class.html). -* **Barcode customization** - Customize the visual appearance of barcodes using the backgroundColor and barColor properties and adjust the size of smallest line or dot of the code using the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. +* **Barcode customization** - Customize the visual appearance of barcodes using the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) and [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) properties and adjust the size of smallest line or dot of the code using the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. * **Text customization** - Configure to display the barcode value and customize the position and style of the barcode text. -You can get the sample in the following link: [`Flutter Barcodes`](https://github.com/syncfusion/flutter-examples). \ No newline at end of file +You can get the barcode sample in the following link: [`Flutter Barcode Examples`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes). \ No newline at end of file diff --git a/chart-sdk/flutter/barcode-generator/two-dimensional.md b/chart-sdk/flutter/barcode-generator/two-dimensional.md index 0c959304a..3be4daf6c 100644 --- a/chart-sdk/flutter/barcode-generator/two-dimensional.md +++ b/chart-sdk/flutter/barcode-generator/two-dimensional.md @@ -1,15 +1,17 @@ --- layout: post -title: Two-dimensional symbology in Flutter Barcodes widget | Syncfusion -description: Learn here all about Two-dimensional symbology feature of Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget and more. +title: Two-Dimensional Symbology in Flutter Barcodes | Syncfusion® +description: Learn about two-dimensional symbology support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including QR Code, Data Matrix, and PDF417. platform: chart-sdk control: SfBarcodeGenerator documentation: ug --- -# Two-dimensional symbology in Flutter Barcodes (SfBarcodeGenerator) +# Two-Dimensional Symbology in Flutter Barcodes (SfBarcodeGenerator) -Two dimensional Barcode is a way to represent information by using the two-dimensional approach. It is similar to one dimensional Barcode, but can represent more data per unit area. The barcode generator control supports the following two dimensional symbology: +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. + +Two-dimensional barcode is a way to represent information by using the two-dimensional approach. It is similar to one-dimensional barcode, but can represent more data per unit area. The barcode generator control supports the following two-dimensional symbology: * [`QR Code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode-class.html) * [`Data Matrix`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix-class.html) @@ -22,28 +24,41 @@ A [`QR Code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/b * Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. * The QR Barcodes are designed for industrial uses and also commonly used in consumer advertising. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: QRCode(), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: QRCode(), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![qr-code](images/two-dimensional/qr-code.jpg) The data that can be stored in the QR code depends upon the following property: @@ -53,76 +68,102 @@ The data that can be stored in the QR code depends upon the following property: * [`Input mode`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode/inputMode.html) -As like one dimensional symbology, the two dimensional symbology also supports the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. +Like one-dimensional symbology, the two-dimensional symbology also supports the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property. The property is used to define the size of the smallest line or dot of the barcode. If this property is not set, the size of the smallest dot of the barcode is calculated based on the available size. **Error correction level** The [`errorCorrectionLevel`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode/errorCorrectionLevel.html) property employs error correction to generate a series of error correction code words that are added to the data code word sequence in order to enable the symbol to withstand damage without loss of data. By default, its value is set as high. -Low - it recovers the data up to 7% -Medium - it recovers the data up to 15% -Quartile - it recovers the data up to 25% -High - it recovers the data up to 30% +Low - It recovers the data up to 7% +Medium - It recovers the data up to 15% +Quartile - It recovers the data up to 25% +High - It recovers the data up to 30% + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: QRCode(errorCorrectionLevel: ErrorCorrectionLevel.high), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: QRCode(errorCorrectionLevel: ErrorCorrectionLevel.high), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![error correction level](images/two-dimensional/qr-code.jpg) The data can be read from the damaged image based on the error correction level, -![eror correction level](images/two-dimensional/error-correction.jpg) +![error correction level](images/two-dimensional/error-correction.jpg) **Input mode** -The [`inputMode`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode/inputMode.html) property allows you to select a specific set of input characters. You may select the most suitable input mode. By default, its value is set as [`binaryMode`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRInputMode-class.html). +The [`inputMode`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode/inputMode.html) property allows you to select a specific set of input characters. You may select the most suitable input mode. By default, its value is set as [`binaryMode`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRInputMode.html). + +Numeric - supports from 0 to 9 +AlphaNumeric - supports 0 to 9, A to Z, space, $, %, *, +, -,., /, : +Binary - supports byte data (0-255) -numeric - supports from 0 to 9 -alphaNumeric - supports 0 to 9, A to Z, space, $, %, *, +, -,., /, : -binary - supports Shift JIS characters +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: '1263438892737643894930872', - showValue: true, - symbology: QRCode(inputMode: QRInputMode.numeric), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: '1263438892737643894930872', + showValue: true, + symbology: QRCode(inputMode: QRInputMode.numeric), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![input mode](images/two-dimensional/input-mode.jpg) **QR code version** @@ -133,59 +174,85 @@ The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 module The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules. +{% tabs %} + {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: QRCode(codeVersion: QRCodeVersion.version09), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: QRCode(codeVersion: QRCodeVersion.version09), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![QR version](images/two-dimensional/version09.jpg) ## Data Matrix -[`Data Matrix`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix-class.html) barcode is a two dimensional barcode that consists of a grid of dark and light dots or blocks forming a square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. +[`Data Matrix`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix-class.html) barcode is a two-dimensional barcode that consists of a grid of dark and light dots or blocks forming a square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. + +{% tabs %} {% highlight dart %} - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.white, - body: Center( - child: Container( - height: 300, - width: 300, - child: SfBarcodeGenerator( - value: 'www.syncfusion.com', - showValue: true, - symbology: DataMatrix(), + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_barcodes/barcodes.dart'; + + void main() { + runApp(MyApp()); + } + + class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.white, + body: Center( + child: Container( + height: 300, + width: 300, + child: SfBarcodeGenerator( + value: 'www.syncfusion.com', + showValue: true, + symbology: DataMatrix(), + ), ), ), - ), - ); + ); + } } {% endhighlight %} +{% endtabs %} + ![Data matrix](images/two-dimensional/data-matrix.png) -**Data matrix format** +**Data Matrix format** Length - Data Matrix can store up to 2335 alphanumeric characters or 3116 numbers from the ASCII range. @@ -197,18 +264,18 @@ Type - Data Matrix supports the following data types, The [`encoded data size`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix/dataMatrixSize.html) depends upon the length and data type of provided input values. -**Encoding Methods** +**Encoding methods** -Data Matrix supports following [`encoding types`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix/encoding.html), +Data Matrix supports the following [`encoding types`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/DataMatrix/encoding.html), * Auto * ASCII * ASCIINumeric * Base256 -By default, the encoding types is `auto`. +By default, the encoding type is `auto`. -When the encoding type is `ASCII`, the code word will be calculated as like follows, +When the encoding type is `ASCII`, the code word will be calculated as follows, Code word = ASCII value + 1. @@ -218,7 +285,7 @@ When the encoding type is `base256`, then the first code word will be calculated The `base256` value ranges from 128 to 255. -When the encoding type is `ASCIINumeric`, then the code word will be calculated as like follows, +When the encoding type is `ASCIINumeric`, then the code word will be calculated as follows, Code word = numerical value pair + 130. diff --git a/chart-sdk/flutter/cartesian-chart/accessibility.md b/chart-sdk/flutter/cartesian-chart/accessibility.md index ff6859c40..f073c67b8 100644 --- a/chart-sdk/flutter/cartesian-chart/accessibility.md +++ b/chart-sdk/flutter/cartesian-chart/accessibility.md @@ -1,54 +1,54 @@ --- layout: post -title: Accessibility in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about Accessibility feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Accessibility in Flutter Cartesian Chart | Syncfusion® +description: The accessibility support in Flutter Cartesian Chart offers sufficient contrast, large fonts, and tappable targets for an inclusive user experience. platform: chart-sdk control: Chart documentation: ug --- -# Accessibility in Flutter Cartesian Charts (SfCartesianChart) +# Accessibility in Flutter Cartesian Chart ## Sufficient contrast The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. -The customization of colors can be done for the following chart elements. -* [Chart title](https://help.syncfusion.com/flutter/cartesian-charts/chart-title) -* [Axis title](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-title) -* [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-customization) -* [Series color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping for data points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Gradient fill](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) -* [Data label](https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#data-label) -* [Legend title](https://help.syncfusion.com/flutter/cartesian-charts/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/cartesian-charts/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/cartesian-charts/tooltip#customizing-the-appearance) -* [Trackball tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball) -* [Crosshair tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#show-axis-tooltip) -* [Plot band](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands) -* [Empty points data](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-point-customization) -* [Selected data points](https://help.syncfusion.com/flutter/cartesian-charts/selection#customizing-the-segments) -* [Selection zooming](https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan#selection-zooming) +The colors can be customized for the following chart elements. +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/chart-title) +* [Axis title](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#axis-title) +* [Axis label](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#axis-label-customization) +* [Series color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping for data points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Gradient fill](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/marker-datalabel#data-label) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/tooltip#customizing-the-appearance) +* [Trackball tooltip](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/trackball-crosshair#trackball) +* [Crosshair tooltip](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/trackball-crosshair#show-axis-tooltip) +* [Plot band](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#plot-bands) +* [Empty points data](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-point-customization) +* [Selected data points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/selection#customizing-the-segments) +* [Selection zooming](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/zoom-pan#selection-zooming) ## Large fonts -The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in Cartesian chart. -* [Chart title](https://help.syncfusion.com/flutter/cartesian-charts/chart-title) -* [Axis title](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-title) -* [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-customization) -* [Data label](https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#data-label) -* [Legend title](https://help.syncfusion.com/flutter/cartesian-charts/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/cartesian-charts/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/cartesian-charts/tooltip#customizing-the-appearance) -* [Trackball tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball) -* [Crosshair tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#show-axis-tooltip) -* [Plot band text](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands) +The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) font size can be adjusted automatically based on device settings, and the font size is scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the Cartesian chart. +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/chart-title) +* [Axis title](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#axis-title) +* [Axis label](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#axis-label-customization) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/marker-datalabel#data-label) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/tooltip#customizing-the-appearance) +* [Trackball tooltip](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/trackball-crosshair#trackball) +* [Crosshair tooltip](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/trackball-crosshair#show-axis-tooltip) +* [Plot band text](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#plot-bands) ## Easily tappable targets -The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides callback support to notify when tapping on the essential elements in the chart. -* [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onaxislabeltapped) -* [Data points](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onpointtapped) -* [Data label](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ondatalabeltapped) -* [Legend](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onlegendtapped) +The [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides callback support to notify when the essential elements in the chart are tapped. +* [Axis label](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#onaxislabeltapped) +* [Data points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#onpointtapped) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#ondatalabeltapped) +* [Legend](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#onlegendtapped) diff --git a/chart-sdk/flutter/cartesian-chart/annotations.md b/chart-sdk/flutter/cartesian-chart/annotations.md index f9a1719f8..7e9899da2 100644 --- a/chart-sdk/flutter/cartesian-chart/annotations.md +++ b/chart-sdk/flutter/cartesian-chart/annotations.md @@ -1,15 +1,15 @@ --- layout: post -title: Annotation in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control annotations in Syncfusion Flutter Cartesian Charts (SfCartesianChart)—learn to add, style annotations, and more key features. +title: Annotation in Flutter Cartesian Chart | Syncfusion® +description: The annotation support in Flutter Cartesian Chart offers custom content placement within the chart area to highlight insights and enhance visualization. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Annotation (SfCartesianChart) +# Annotation in Flutter Cartesian Chart -Chart supports annotations which, allows you to mark the specific area of interest in the chart area. You can add custom widgets using this annotations feature as depicted below. +The chart supports annotations, which allow you to mark a specific area of interest in the chart area. You can add custom widgets using this annotation feature as shown below. {% tabs %} {% highlight dart %} @@ -47,11 +47,11 @@ Chart supports annotations which, allows you to mark the specific area of intere ## Positioning the annotation -The [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) values can be specified with axis units or pixel units or percentage units, and these can be identified by using [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) property. When logicalPixel is specified, the annotation will be placed with respect to pixel values. When point is specified, the annotation will be placed with respect to series point values. +The [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) values can be specified with axis units, pixel units, or percentage units, and these can be identified by using the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) property. When [`CoordinateUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#logicalPixel) is specified, the annotation will be placed with respect to pixel values. When [`CoordinateUnit.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#point) is specified, the annotation will be placed with respect to series point values. **Positioning based on coordinateUnit as point** -To position the annotation based on axis, set the [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties based on axis range values, and set the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#point). +To position the annotation based on the axis, set the [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties based on axis range values, and set the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value to [`CoordinateUnit.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#point). {% tabs %} @@ -88,7 +88,7 @@ To position the annotation based on axis, set the [`x`](https://pub.dev/document **Positioning based on coordinateUnit as pixels** -To position the annotation based on the pixel values, set the [`CoordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#logicalPixel), and the pixel values in [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of annotation as shown in the following code snippet. +To position the annotation based on pixel values, set the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value to [`CoordinateUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#logicalPixel), and set the pixel values in the [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of the annotation as shown in the following code snippet. {% tabs %} {% highlight dart hl_lines="15" %} @@ -126,7 +126,7 @@ To position the annotation based on the pixel values, set the [`CoordinateUnit`] **Positioning based on coordinateUnit as percentage** -To position the annotation based on the percentage values, set the [`CoordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value as [`CoordinateUnit.percentage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#percentage), and the percentage values in [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of annotation as shown in the following code snippet. +To position the annotation based on percentage values, set the [`coordinateUnit`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/coordinateUnit.html) value to [`CoordinateUnit.percentage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CoordinateUnit.html#percentage), and set the percentage values in the [`x`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/x.html) and [`y`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/y.html) properties of the annotation as shown in the following code snippet. {% tabs %} @@ -183,7 +183,7 @@ To position the annotation based on the percentage values, set the [`CoordinateU **Positioning based on region** -Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html#plotArea) or [`AnnotationRegion.chart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html#chart) using [`region`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/region.html) property. +Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html#plotArea) or [`AnnotationRegion.chart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AnnotationRegion.html#chart) by using the [`region`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/region.html) property. {% tabs %} {% highlight dart hl_lines="13" %} @@ -218,9 +218,9 @@ Annotations can be placed with respect to either [`AnnotationRegion.plotArea`](h ## Alignment of annotation -[`CartesianChartAnnotation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation-class.html) can be aligned to center, near and far using the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/horizontalAlignment.html) and [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/verticalAlignment.html) properties of annotation. +[`CartesianChartAnnotation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation-class.html) can be aligned to the center, near, or far using the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/horizontalAlignment.html) and [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/verticalAlignment.html) properties of the annotation. -The following code example demonstrates how to set the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/horizontalAlignment.html) for annotation +The following code example demonstrates how to set the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianChartAnnotation/horizontalAlignment.html) for an annotation. {% tabs %} {% highlight dart hl_lines="17" %} @@ -256,7 +256,7 @@ The following code example demonstrates how to set the [`horizontalAlignment`](h ## Adding multiple annotations -You can add multiple annotations to the Chart by adding multiple widgets to the [`annotations`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/annotations.html) property as depicted in below code snippet. +You can add multiple annotations to the chart by adding multiple widgets to the [`annotations`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/annotations.html) property, as shown in the following code snippet. {% tabs %} {% highlight dart %} @@ -454,4 +454,4 @@ Chart supports watermark which allows you to mark the specific area of interest ![Chart with Watermark](images/annotation/watermark.png) ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. \ No newline at end of file +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/axis-customization.md b/chart-sdk/flutter/cartesian-chart/axis-customization.md index 4ff374a9f..393287523 100644 --- a/chart-sdk/flutter/cartesian-chart/axis-customization.md +++ b/chart-sdk/flutter/cartesian-chart/axis-customization.md @@ -1,21 +1,21 @@ --- layout: post -title: Axis Customization in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control axes in Syncfusion Flutter Cartesian Charts—configure axis titles, labels, grid lines, and key features. +title: Axis Customization in Flutter Cartesian Chart | Syncfusion® +description: The axis customization support in Flutter Cartesian Chart offers control over axis labels, ticks, ranges, and intervals for tailored data visualization. platform: chart-sdk control: Cartesian Charts documentation: ug --- -# Flutter Cartesian Charts Axis Customization (SfCartesianChart) +# Axis Customization in Flutter Cartesian Chart ## Common axis features -Customization of features such as axis title, labels, grid lines and tick lines are common to all the axes. Each of these features are explained in this section. +Customization of features such as axis titles, labels, grid lines, and tick lines is common to all axes. Each of these features is explained in this section. ### Axis Visibility -Axis visibility can be controlled using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isVisible.html) property of axis. Default value of [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isVisible.html) is `true`. When the axis visibility is set to false, then the axis elements like ticks, labels, title, etc will be hidden. +Axis visibility can be controlled using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isVisible.html) property of the axis. The default value of [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isVisible.html) is `true`. When axis visibility is set to false, the axis elements such as ticks, labels, and title will be hidden. {% tabs %} {% highlight dart hl_lines="9" %} @@ -43,7 +43,7 @@ Axis visibility can be controlled using the [`isVisible`](https://pub.dev/docume ### Axis title -The [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/title.html) property in axis provides options to customize the text and font of axis title. Axis does not display title by default. The title can be customized using following properties, +The [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/title.html) property of the axis provides options to customize the text and font of the axis title. The axis does not display a title by default. The title can be customized using the following properties, * [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisTitle/text.html) - used to set the title for axis. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisTitle/textStyle.html) - used to change the text color, size, font family, font style, and font weight. @@ -87,7 +87,7 @@ The [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha ### Axis label rotation -The [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelRotation.html) property of axis can be used to rotate the axis labels position. Default value of [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelRotation.html) property is 0. +The [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelRotation.html) property of the axis can be used to rotate the axis labels. The default value of the [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelRotation.html) property is 0. {% tabs %} {% highlight dart hl_lines="9" %} @@ -115,7 +115,7 @@ The [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/la ### Axis line customization -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to customize the style of the axis line by defining the [`axisLine`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisLine.html) property as shown in the below code snippet. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support for customizing the style of the axis line by defining the [`axisLine`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisLine.html) property, as shown in the following code snippet. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLine/color.html) - used to change the stroke color of axis line. * [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLine/width.html) - used to change the stroke width of axis line. @@ -150,7 +150,7 @@ The [`labelRotation`](https://pub.dev/documentation/syncfusion_flutter_charts/la ### Axis label customization -The [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelStyle.html) property in axis provides options to customize the font of axis label. The axis label can be customized using following properties, +The [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelStyle.html) property of the axis provides options to customize the font of the axis label. The axis label can be customized using the following properties, * [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelStyle.html) - used to change the text color, size, font family, font style, and font weight. * [`color`](https://api.flutter.dev/flutter/painting/TextStyle/color.html) - used to change the color of the axis label. @@ -190,7 +190,7 @@ The [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/lates ### Axis border customization -The color and width of the axis border can be customized with [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderWidth.html) properties respectively. The border types can be changed using the [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) property and the default value is [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#rectangle). Another value of [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) is [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#withoutTopAndBottom). +The color and width of the axis border can be customized with the [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/borderWidth.html) properties, respectively. The border type can be changed using the [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) property, and the default value is [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#rectangle). Another value of [`axisBorderType`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/axisBorderType.html) is [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#withoutTopAndBottom). * [`AxisBorderType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#rectangle) - Renders the border as a rectangle around a label. * [`AxisBorderType.withoutTopAndBottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisBorderType.html#withoutTopAndBottom) - Renders the border without the top and bottom of a rectangle. @@ -265,7 +265,8 @@ On setting the [`enableAxisAnimation`](https://pub.dev/documentation/syncfusion_ ### Formatting axis label content -The [`labelFormat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/labelFormat.html) property is used to add prefix or suffix with the axis label. +The [`labelFormat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/labelFormat.html) property is used to add a prefix or suffix to the axis label. + {% tabs %} {% highlight dart hl_lines="11" %} @@ -297,7 +298,7 @@ Also refer [number format](./axis-types#formatting-the-labels) and [date format] ### Label and tick positioning -Axis labels and ticks can be positioned inside or outside the chart area by using [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelPosition.html) and [`tickPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/tickPosition.html) properties of ChartAxis. By default labels and ticks will be positioned outside the chart area. +Axis labels and ticks can be positioned inside or outside the chart area by using the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelPosition.html) and [`tickPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/tickPosition.html) properties of `ChartAxis`. By default, labels and ticks are positioned outside the chart area. {% tabs %} {% highlight dart hl_lines="8 9" %} @@ -325,7 +326,7 @@ Axis labels and ticks can be positioned inside or outside the chart area by usin ### Edge label placement -Labels with long text at the edges of an axis may appear partially outside the chart. The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) property can be used to avoid the partial appearance of labels at the corners. Default value of this property is [`EdgeLabelPlacement.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#none). Other available options of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) are shift and hide. [`EdgeLabelPlacement.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#shift) option will move the edge labels inside the axis bounds, where the [`EdgeLabelPlacement.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#hide) option will hides the edge labels. +Labels with long text at the edges of an axis may appear partially outside the chart. The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) property can be used to avoid partially displayed labels at the corners. The default value of this property is [`EdgeLabelPlacement.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#none). Other available options of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/edgeLabelPlacement.html) are shift and hide. The [`EdgeLabelPlacement.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#shift) option moves the edge labels inside the axis bounds, while the [`EdgeLabelPlacement.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EdgeLabelPlacement.html#hide) option hides the edge labels. {% tabs %} {% highlight dart hl_lines="9" %} @@ -353,7 +354,7 @@ Labels with long text at the edges of an axis may appear partially outside the c ### Grid lines customization -The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorGridLines/width.html) property is used to control the visibility of grid lines. [`majorGridLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorGridLines.html) and [`minorGridLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/minorGridLines.html) properties in axis are used to customize the major grid lines and minor grid lines of an axis respectively. We have provided options to change the width, dashes, color of grid lines. By default minor grid lines will not be visible. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorGridLines/width.html) property is used to control the visibility of grid lines. The [`majorGridLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorGridLines.html) and [`minorGridLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/minorGridLines.html) properties in an axis are used to customize the major grid lines and minor grid lines of an axis, respectively. You can change the width, dashes, and color of grid lines. By default, minor grid lines are not visible. {% tabs %} {% highlight dart %} @@ -390,7 +391,7 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha ### Tick lines customization -The [`majorTickLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorTickLines.html) and [`minorTickLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/minorTickLines.html) properties in axis are used to customize the major tick lines of an axis and minor tick lines of an axis respectively. We have provided options to customize the [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorTickLines/width.html), [`size`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorTickLines/size.html), [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorTickLines/color.html) and [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/minorTicksPerInterval.html) of tick lines. By default minor tick lines will not be visible. +The [`majorTickLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/majorTickLines.html) and [`minorTickLines`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/minorTickLines.html) properties in an axis are used to customize the major tick lines and minor tick lines of an axis, respectively. You can customize the [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorTickLines/width.html), [`size`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorTickLines/size.html), [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MajorTickLines/color.html), and [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/minorTicksPerInterval.html) properties of the tick lines. By default, minor tick lines are not visible. {% tabs %} {% highlight dart %} @@ -427,7 +428,7 @@ The [`majorTickLines`](https://pub.dev/documentation/syncfusion_flutter_charts/l ### Inversing axis -Axis can be inversed using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property of an axis. Default value of [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property is `false`. +An axis can be inversed using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property of the axis. The default value of the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property is `false`. {% tabs %} {% highlight dart hl_lines="9" %} @@ -455,7 +456,7 @@ Axis can be inversed using the [`isInversed`](https://pub.dev/documentation/sync ### Placing axes at the opposite side -The [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property of axis can be used to place the axis at the opposite side of its default position. Default value of [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property is `false`. +The [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property of the axis can be used to place the axis on the opposite side of its default position. The default value of the [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/opposedPosition.html) property is `false`. {% tabs %} {% highlight dart hl_lines="9" %} @@ -483,7 +484,7 @@ The [`opposedPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/ ### Maximum number of labels per 100 logical pixels -By default, a maximum of 3 labels are displayed for each 100 logical pixels in axis. The maximum number of labels that should be present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/maximumLabels.html) property of an axis. This property is applicable only for automatic range calculation and will not work if you set value for `interval` property of an axis. +By default, a maximum of three labels are displayed for every 100 logical pixels on an axis. The maximum number of labels that should be present within 100 logical pixels can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/maximumLabels.html) property of the axis. This property is applicable only for automatic range calculation and will not work if you set a value for the `interval` property of the axis. {% tabs %} {% highlight dart hl_lines="8" %} @@ -562,7 +563,7 @@ The [`initialVisibleMaximum`](https://pub.dev/documentation/syncfusion_flutter_c ### Plot offset -The [`plotOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotOffset.html) property is used to offset the rendering of the axis at start and end position. The following code snippet demonstrates how to apply the plot offset of an axis. +The [`plotOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/plotOffset.html) property is used to offset the rendering of the axis at the start and end positions. The following code snippet demonstrates how to apply plot offset to an axis. {% tabs %} {% highlight dart hl_lines="9" %} @@ -646,7 +647,7 @@ The [`plotOffsetEnd`](https://pub.dev/documentation/syncfusion_flutter_charts/la ## Smart axis labels -Axis labels may overlap with each other based on chart dimensions and label size. The [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) property of axis is used to avoid overlapping of axis labels. The default value of the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) is [`AxisLabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#hide). Other available values are [`AxisLabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#none), [`AxisLabelIntersectAction.wrap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#wrap), [`AxisLabelIntersectAction.multipleRows`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#multipleRows), [`AxisLabelIntersectAction.rotate45`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#rotate45) and [`AxisLabelIntersectAction.rotate90`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#rotate90). +Axis labels may overlap with each other based on chart dimensions and label size. The [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) property of the axis is used to avoid overlapping axis labels. The default value of the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/labelIntersectAction.html) is [`AxisLabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#hide). Other available values are [`AxisLabelIntersectAction.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#none), [`AxisLabelIntersectAction.wrap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#wrap), [`AxisLabelIntersectAction.multipleRows`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#multipleRows), [`AxisLabelIntersectAction.rotate45`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#rotate45), and [`AxisLabelIntersectAction.rotate90`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AxisLabelIntersectAction.html#rotate90). {% tabs %} {% highlight dart hl_lines="9" %} @@ -829,10 +830,11 @@ Plot band can be added to the category axis by specifying index values to the [` child: SfCartesianChart( primaryXAxis:CategoryAxis( plotBands: [ - PlotBand( - isVisible: true, - start: 1, - end: 2, + PlotBand( + isVisible: true, + start: 1, + end: 2,), + ], ), ) ) diff --git a/chart-sdk/flutter/cartesian-chart/axis-types.md b/chart-sdk/flutter/cartesian-chart/axis-types.md index ae18ac84e..32791177f 100644 --- a/chart-sdk/flutter/cartesian-chart/axis-types.md +++ b/chart-sdk/flutter/cartesian-chart/axis-types.md @@ -1,17 +1,17 @@ --- layout: post -title: Axis Types in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to explore axis types in Syncfusion Flutter Cartesian Charts—learn about numeric, category, date-time axes, and key features. +title: Axis Types in Flutter Cartesian Chart | Syncfusion® +description: The axis types support in Flutter Cartesian Chart offers numeric, category, date-time, logarithmic, and custom axes for diverse data visualization needs. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Axis Types (SfCartesianChart) +# Types of Axis in Flutter Cartesian Chart -Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis, and a horizontal (X) axis. +Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis and a horizontal (X) axis. -The vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports the following types of scale: +The vertical (Y) axis always uses a numerical scale. The horizontal (X) axis supports the following types of scale: * Category * Numeric @@ -21,7 +21,7 @@ The vertical(Y) axis always uses numerical scale. Horizontal(X) axis supports th ## Numeric axis -Numeric axis uses numerical scale and displays numbers as labels. By default, [`NumericAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis-class.html) is set to both horizontal axis and vertical axis. +Numeric axis uses a numerical scale and displays numbers as labels. By default, [`NumericAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis-class.html) is set for both the horizontal axis and the vertical axis. {% tabs %} {% highlight dart hl_lines="14 15" %} @@ -74,7 +74,7 @@ Numeric axis uses numerical scale and displays numbers as labels. By default, [` ### Inversed numeric axis -By using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property in Cartesian charts, the numeric axis can be inverted. Axis is rendered from the minimum value to the maximum value by default, and can be inverted from the maximum value to the minimum value. +By using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/isInversed.html) property in Cartesian charts, the numeric axis can be inverted. The axis is rendered from the minimum value to the maximum value by default and can be inverted from the maximum value to the minimum value. {% tabs %} {% highlight dart hl_lines="18 19" %} @@ -123,7 +123,7 @@ By using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_cha ### Customizing range -To customize the range of an axis, use the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/maximum.html) properties of [`NumericAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/NumericAxis.html). By default, nice range will be calculated automatically based on the provided data. +To customize the range of an axis, use the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/maximum.html) properties of [`NumericAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/NumericAxis/NumericAxis.html). By default, a nice range is calculated automatically based on the provided data. {% tabs %} {% highlight dart hl_lines="15 16" %} @@ -164,7 +164,7 @@ To customize the range of an axis, use the [`minimum`](https://pub.dev/documenta ### Customizing interval -Axis interval can be customized using the [`interval`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/interval.html) property of [`ChartAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis-class.html). By default, nice interval will be calculated based on the minimum and maximum values of the provided data. +Axis interval can be customized using the [`interval`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/interval.html) property of [`ChartAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis-class.html). By default, a nice interval is calculated based on the minimum and maximum values of the provided data. {% tabs %} {% highlight dart hl_lines="9" %} @@ -1519,4 +1519,4 @@ By using the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_cha * [Applying currency format to axis labels](https://support.syncfusion.com/kb/article/9852/how-to-apply-the-currency-format-to-the-axis-labels-sfcartesianchart). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/callbacks.md b/chart-sdk/flutter/cartesian-chart/callbacks.md index c3ffcba1f..6e613e2ac 100644 --- a/chart-sdk/flutter/cartesian-chart/callbacks.md +++ b/chart-sdk/flutter/cartesian-chart/callbacks.md @@ -1,15 +1,15 @@ --- layout: post -title: Callbacks in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to handle callback events in Syncfusion Flutter Cartesian Charts—handle tooltip, data label, legend, and configure key features. +title: Callbacks in Flutter Cartesian Chart | Syncfusion® +description: The callback support in Flutter Cartesian Chart offers events for selection, zooming, tooltips, axes, rendering, and user interactions. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Callback Events (SfCartesianChart) +# Callbacks in Flutter Cartesian Chart -This document describes the callbacks available for the Cartesian chart +This document describes the callbacks available for the Cartesian chart. ## onTooltipRender @@ -1198,7 +1198,7 @@ Defaults to `null`. The [`onCreateShader`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateShader.html) provides options to get the outer rect, inner rect, and render type (either series or legend) using [`ChartShaderDetails`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartShaderDetails-class.html) class. The onCreateShader callback is called once while rendering -the data points and legend. For further reference on this callback, Check the [`Gradient fill`](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill) section. +the data points and legend. For further reference on this callback, Check the [`Gradient fill`](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) section. {% tabs %} {% highlight dart %} @@ -1380,4 +1380,4 @@ Triggers while rendering the multi-level labels. Text and text styles such as co * [To Synchronize panning in multiple charts](https://support.syncfusion.com/kb/article/9939/how-to-synchronize-panning-in-multiple-charts-sfcartesianchart). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. \ No newline at end of file +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-appearance.md b/chart-sdk/flutter/cartesian-chart/chart-appearance.md index 1e1c8d6b5..c4e017cc5 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-appearance.md +++ b/chart-sdk/flutter/cartesian-chart/chart-appearance.md @@ -1,17 +1,17 @@ --- layout: post -title: Customization in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control chart appearance in Syncfusion Flutter Cartesian Charts—learn to set chart size, margin, border, and more key features. +title: Customization in Flutter Cartesian Chart | Syncfusion® +description: The customization support in Flutter Cartesian Chart offers extensive control over chart appearance, layout, styling, colors, and interactive behavior. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Customization (SfCartesianChart) +# Customization in Flutter Cartesian Chart ## Chart sizing -Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +The chart renders based on the parent widget size. If you need the chart to be rendered in a specific size, set the size (width/height) on the parent widget. You can also customize the following properties: * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/backgroundColor.html) - used to change the background color of the chart. diff --git a/chart-sdk/flutter/cartesian-chart/chart-title.md b/chart-sdk/flutter/cartesian-chart/chart-title.md index 4874c977a..1999cb90a 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-title.md +++ b/chart-sdk/flutter/cartesian-chart/chart-title.md @@ -1,15 +1,15 @@ --- layout: post -title: Chart title in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about Chart title feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Chart title in Flutter Cartesian Chart | Syncfusion® +description: The chart title support in Flutter Cartesian Chart offers customizable titles with appearance settings to enhance context and visual presentation. platform: chart-sdk control: Chart documentation: ug --- -# Chart title in Flutter Cartesian Charts (SfCartesianChart) +# Chart title in Flutter Cartesian Chart -You can define and customize the Chart title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. +You can define and customize the chart title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the title text. The following properties can be used to customize its appearance. diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/area-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/area-chart.md index d46baaa5e..c0721f00d 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/area-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/area-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Area Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Area Chart in Syncfusion Flutter Cartesian Charts—add area series, style, and configure key features. +title: Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The area chart support in Flutter Cartesian Chart offers filled line visualizations to highlight trends, variations, and magnitudes across data points. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Area Chart (SfCartesianChart) +# Area Chart in Flutter Cartesian Chart -To create a Flutter area chart quickly, you can check this video. +To create a Flutter area chart quickly, you can watch this video. @@ -261,12 +261,12 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) >**Note**: You can refer to our [Flutter Area Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/area-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Area Chart example](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/area/default-area-chart) that shows how to easily configure with built-in support for creating stunning visual effects. \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/bar-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/bar-chart.md index c2b2d4cac..486bf01c8 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/bar-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/bar-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Bar Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Bar Chart in Syncfusion Flutter Cartesian Charts—add bar series, style, and configure key features. +title: Bar Chart in Flutter Cartesian Chart | Syncfusion® +description: The bar chart support in Flutter Cartesian Chart offers horizontal or vertical data comparison with customizable styling and flexible data representation. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Bar Chart (SfCartesianChart) +# Bar Chart in Flutter Cartesian Chart -To create a Flutter bar chart quickly, you can check this video. +To create a Flutter bar chart quickly, you can watch this video. diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/box-and-whisker-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/box-and-whisker-chart.md index 6e2e85b6e..99c447b01 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/box-and-whisker-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/box-and-whisker-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Box and Whisker Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about box and whisker chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Box and Whisker Chart in Flutter Cartesian Chart | Syncfusion® +description: The box and whisker chart support in Flutter Cartesian Chart offers statistical data visualization to display distribution, quartiles, and outliers effectively. platform: chart-sdk control: Chart documentation: ug --- -# Box and Whisker Chart in Flutter Cartesian Charts (SfCartesianChart) +# Box and Whisker Chart in Flutter Cartesian Chart -The [Flutter Box and Whisker Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/box-and-whisker-chart) can be used to visualize a group of numerical data through their quartiles. It is also referred to as box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. +The [Flutter Box and Whisker Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/box-and-whisker-chart) can be used to visualize a group of numerical data through their quartiles. It is also referred to as a box plot. Box plots may also have lines extending vertically from the boxes (whiskers), indicating variability outside the upper and lower quartiles. To render a Box and Whisker chart, create an instance of [`BoxAndWhiskerSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BoxAndWhiskerSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance. @@ -51,9 +51,9 @@ To render a Box and Whisker chart, create an instance of [`BoxAndWhiskerSeries`] #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/bubble-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/bubble-chart.md index 552423011..0c143b710 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/bubble-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/bubble-chart.md @@ -1,17 +1,17 @@ --- layout: post -title: Bubble Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Bubble Chart in Syncfusion Flutter Cartesian Charts—add bubble series, style, and configure key features. +title: Bubble Chart in Flutter Cartesian Chart | Syncfusion® +description: The bubble chart support in Flutter Cartesian Chart offers multi-dimensional data visualization using varying bubble sizes to represent additional values. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Bubble Chart (SfCartesianChart) +# Bubble Chart in Flutter Cartesian Chart To render a bubble chart, create an instance of [`BubbleSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). -Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, [`sizeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/sizeValueMapper.html) is used to map the size of each bubble segment from data source. +Bubble chart requires three fields (X, Y, and Size) to plot a point. Here, [`sizeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/BubbleSeries/sizeValueMapper.html) is used to map the size of each bubble segment from the data source. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/color.html) - changes the color of the series. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/candle-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/candle-chart.md index d5ce2b48c..5a91df1a7 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/candle-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/candle-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Candle Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Candle Chart in Syncfusion Flutter Cartesian Charts—add candle series, style, and configure key features. +title: Candle Chart in Flutter Cartesian Chart | Syncfusion® +description: The candle chart support in Flutter Cartesian Chart offers financial data visualization with open, high, low, and close values for trend analysis. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Candle Chart (SfCartesianChart) +# Candle Chart in Flutter Cartesian Chart -To create a Flutter candle chart quickly, you can check this video. +To create a Flutter candle chart quickly, you can watch this video. @@ -241,8 +241,8 @@ The following are the types of indication when the combination of high, low, ope #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/column-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/column-chart.md index e1f78dd5b..0dca1037c 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/column-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/column-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Column Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Column Chart in Syncfusion Flutter Cartesian Charts—add column series, style, and configure key features. +title: Column Chart in Flutter Cartesian Chart | Syncfusion® +description: The column chart support in Flutter Cartesian Chart offers vertical data comparison with customizable styling to visualize trends and category-based values. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Column Chart (SfCartesianChart) +# Column Chart in Flutter Cartesian Chart To render a column chart, create an instance of [`ColumnSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ColumnSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance: @@ -249,11 +249,11 @@ Renders columns with tracks. A track is a rectangular bar rendered from the star #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) >**Note**: You can refer to our [Flutter Column Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/column-chart) feature tour page for its groundbreaking feature representations. \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/error-bar-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/error-bar-chart.md index 60d160dcc..8bbabd60a 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/error-bar-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/error-bar-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Error bar chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about error bar chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Error bar chart in Flutter Cartesian Chart | Syncfusion® +description: The error bar chart support in Flutter Cartesian Chart offers data variability visualization with customizable error indicators for accurate analysis. platform: chart-sdk control: Chart documentation: ug --- -# Error bar chart in Flutter Cartesian Charts (SfCartesianChart) +# Error bar chart in Flutter Cartesian Chart Error bars are graphical representations of the variability of data and used on graphs to indicate the error or uncertainty in a reported measurement. @@ -288,9 +288,9 @@ The [`capLength`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/fast-line-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/fast-line-chart.md index f01430979..2b8c21722 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/fast-line-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/fast-line-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Fast Line Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Fast Line Chart in Syncfusion Flutter Cartesian Charts—add fast line series, style, and configure key features. +title: Fast Line Chart in Flutter Cartesian Chart | Syncfusion® +description: The fast line chart support in Flutter Cartesian Chart offers high-performance rendering for large datasets, enabling smooth and efficient trend visualization. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Fast Line Chart (SfCartesianChart) +# Fast Line Chart in Flutter Cartesian Chart [`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html) is a line chart that loads faster than [`LineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LineSeries-class.html). You can use this when there are a large number of points to be loaded in a chart. To render a fast line chart, create an instance of [`FastLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FastLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of fast line segment: @@ -47,9 +47,9 @@ documentation: ug #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/hilo-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/hilo-chart.md index d6b1a2ac2..2822841a3 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/hilo-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/hilo-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: HiLo Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about hiLo chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: HiLo Chart in Flutter Cartesian Chart | Syncfusion® +description: The HiLo chart support in Flutter Cartesian Chart offers visualization of high and low values across categories for effective range analysis. platform: chart-sdk control: Chart documentation: ug --- -# HiLo Chart in Flutter Cartesian Charts (SfCartesianChart) +# HiLo Chart in Flutter Cartesian Chart To create a Flutter hilo chart quickly, you can check this video. @@ -57,8 +57,8 @@ To render a HiLo chart, create an instance of [`HiloSeries`](https://pub.dev/doc #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/histogram-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/histogram-chart.md index 944007132..6028b1cf7 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/histogram-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/histogram-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Histogram Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about histogram chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Histogram Chart in Flutter Cartesian Chart | Syncfusion® +description: The histogram chart support in Flutter Cartesian Chart offers data distribution visualization by grouping values into bins for statistical analysis. platform: chart-sdk control: Chart documentation: ug --- -# Histogram Chart in Flutter Cartesian Charts (SfCartesianChart) +# Histogram Chart in Flutter Cartesian Chart Histogram chart is a graphical representation that organizes a group of data points into user-specified ranges. It is similar in appearance to a bar chart. The histogram condenses a data series into an easily interpreted visual by taking many data points and grouping them into logical ranges. @@ -166,9 +166,9 @@ You can collapse the normal distribution curve using the [`showNormalDistributio #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/line-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/line-chart.md index c7fb66e13..aca5da78f 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/line-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/line-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Line Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about line chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Line Chart in Flutter Cartesian Chart | Syncfusion® +description: The line chart support in Flutter Cartesian Chart offers trend visualization with customizable lines, markers, and styling for effective data analysis. platform: chart-sdk control: Chart documentation: ug --- -# Line Chart in Flutter Cartesian Charts (SfCartesianChart) +# Line Chart in Flutter Cartesian Chart To create a Flutter line chart quickly, you can check this video. @@ -155,9 +155,9 @@ To render a multi-colored line series, map the individual colors to the data usi #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/ohlc-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/ohlc-chart.md index 192d3a361..b4ff08486 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/ohlc-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/ohlc-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Open High Low Close in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about open high low close chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Open High Low Close in Flutter Cartesian Chart | Syncfusion® +description: The open high low close chart support in Flutter Cartesian Chart offers financial data visualization for market analysis. platform: chart-sdk control: Chart documentation: ug --- -# Open High Low Close in Flutter Cartesian Charts (SfCartesianChart) +# Open High Low Close in Flutter Cartesian Chart To create a Flutter open high low close chart quickly, you can check this video. @@ -127,8 +127,8 @@ The following are the types of indication when the combination of high, low, ope #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/range-area-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/range-area-chart.md index bca7074af..1c326dba6 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/range-area-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/range-area-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Range area Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about range area Chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Range Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The range area chart support in Flutter Cartesian Chart offers visualization of value ranges between upper and lower bounds to highlight data variation. platform: chart-sdk control: Chart documentation: ug --- -# Range area Chart in Flutter Cartesian Charts (SfCartesianChart) +# Range Area Chart in Flutter Cartesian Chart To create a Flutter range area chart quickly, you can check this video. @@ -96,9 +96,9 @@ The borders of the range area chart can be customized using the [`borderDrawMode #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/range-column-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/range-column-chart.md index dbd3da5f7..dbbfd768f 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/range-column-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/range-column-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Range Column Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Range Column Chart in Syncfusion Flutter Cartesian Charts—add range column series, style, and configure key features. +title: Range Column Chart in Flutter Cartesian Chart | Syncfusion® +description: The range column chart support in Flutter Cartesian Chart offers visualization of value ranges using columns to compare upper and lower bounds effectively. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Range Column Chart (SfCartesianChart) +# Range Column Chart in Flutter Cartesian Chart To create a Flutter range column chart quickly, you can check this video. @@ -147,9 +147,9 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/scatter-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/scatter-chart.md index 51ce8c248..2376361d4 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/scatter-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/scatter-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Scatter Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Scatter Chart in Syncfusion Flutter Cartesian Charts—add scatter series, style, and configure key features. +title: Scatter Chart in Flutter Cartesian Chart | Syncfusion® +description: The scatter chart support in Flutter Cartesian Chart offers visualization of data relationships and distributions using customizable data points. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Scatter Chart (SfCartesianChart) +# Scatter Chart in Flutter Cartesian Chart To render a scatter chart, create an instance of [`ScatterSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ScatterSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the scatter segment appearance. @@ -105,9 +105,9 @@ The [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/spline-area-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/spline-area-chart.md index 0e2337c3c..fb9fdce92 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/spline-area-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/spline-area-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Spline Area Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to customize Spline Area Chart in Syncfusion Flutter Cartesian Charts—add, style, and configure spline area series, and key features. +title: Spline Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The spline area chart support in Flutter Cartesian Chart offers smooth, filled curve visualizations to highlight trends and variations across data points. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Spline Area Chart (SfCartesianChart) +# Spline Area Chart in Flutter Cartesian Chart To render a spline area chart, create an instance of [`SplineAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineAreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the spline area chart: @@ -162,9 +162,9 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/spline-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/spline-chart.md index 633ba9191..63965f0ca 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/spline-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/spline-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Spline Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Spline Chart in Syncfusion Flutter Cartesian Charts—add spline series, style, and configure key features. +title: Spline Chart in Flutter Cartesian Chart | Syncfusion® +description: The spline chart support in Flutter Cartesian Chart offers smooth curve visualizations to display trends and patterns with enhanced visual continuity. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Spline Chart (SfCartesianChart) +# Spline Chart in Flutter Cartesian Chart To render a spline chart, create an instance of [`SplineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SplineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the spline segment: @@ -201,9 +201,9 @@ The [`isTransposed`](https://pub.dev/documentation/syncfusion_flutter_charts/lat #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/spline-range-area-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/spline-range-area-chart.md index 37f8fadd6..308d914f6 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/spline-range-area-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/spline-range-area-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Spline range area in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about spline range area chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Spline Range Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The spline range area chart support in Flutter Cartesian Chart offers smooth visualization of value ranges between upper and lower bounds across data points. platform: chart-sdk control: Chart documentation: ug --- -# Spline range area Chart in Flutter Cartesian Charts (SfCartesianChart) +# Spline Range Area Chart in Flutter Cartesian Chart To create a Flutter spline range area chart quickly, you can check this video. @@ -141,9 +141,9 @@ The borders of the spline range area chart can be customized using the [`borderD #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-100-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-100-chart.md index 7bd77488e..0a711bff0 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-100-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-100-chart.md @@ -1,14 +1,14 @@ --- layout: post -title: 100% Stacked area in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about 100% stacked area chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: 100% Stacked Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The 100% stacked area chart support in Flutter Cartesian Chart offers proportional trend visualization, showing each series contribution as a percentage. platform: chart-sdk control: Chart documentation: ug --- -# 100% Stacked area Chart in Flutter Cartesian Charts (SfCartesianChart) +# 100% Stacked Area Chart in Flutter Cartesian Chart To create a Flutter 100% stacked area chart quickly, you can check this video. @@ -68,9 +68,9 @@ To render a 100% stacked area chart, create an instance of [`StackedArea100Serie #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-chart.md index 0aa0d4741..f1c2293ff 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-area-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked area Chart in Flutter Cartesian Charts | Syncfusion -description: Learn here all about stacked area chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Stacked Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The stacked area chart support in Flutter Cartesian Chart offers visualization of cumulative trends by stacking series values to show overall contribution. platform: chart-sdk control: Chart documentation: ug --- -# Stacked area Chart in Flutter Cartesian Charts (SfCartesianChart) +# Stacked Area Chart in Flutter Cartesian Chart To create a Flutter stacked area chart quickly, you can check this video. @@ -179,9 +179,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-100-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-100-chart.md index ec9b5de78..51309fd47 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-100-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-100-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked bar in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about 100% stacked bar chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: 100% Stacked Bar Chart in Flutter Cartesian Chart | Syncfusion® +description: The 100% stacked bar chart support in Flutter Cartesian Chart offers proportional data comparison, showing each series contribution as a percentage of the total platform: chart-sdk control: Chart documentation: ug --- -# 100% Stacked bar Chart in Flutter Cartesian Charts (SfCartesianChart) +# 100% Stacked Bar Chart in Flutter Cartesian Chart To create a Flutter 100% stacked bar chart quickly, you can check this video. @@ -131,9 +131,9 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-chart.md index 8b01e89a8..dde82ea5d 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-bar-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Bar Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Stacked Bar Chart in Syncfusion Flutter Cartesian Charts—add stacked bar series, style, and configure key features. +title: Stacked Bar Chart in Flutter Cartesian Chart | Syncfusion® +description: The stacked bar chart support in Flutter Cartesian Chart offers cumulative data comparison by stacking series values to show overall contribution. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Stacked Bar Chart (SfCartesianChart) +# Stacked Bar Chart in Flutter Cartesian Chart To create a Flutter stacked bar chart quickly, you can check this video. @@ -168,9 +168,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-100-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-100-chart.md index 1c7c1ecdc..1c8bfeb2c 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-100-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-100-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked column in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about 100% stacked Column chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: 100% Stacked Column Chart in Flutter Cartesian Chart | Syncfusion® +description: The 100% stacked column chart support in Flutter Cartesian Chart offers proportional data comparison, showing each series contribution as a percentage. platform: chart-sdk control: Chart documentation: ug --- -# 100% Stacked column in Flutter Cartesian Charts (SfCartesianChart) +# 100% Stacked Column Chart in Flutter Cartesian Chart To create a Flutter 100% stacked column chart quickly, you can check this video. @@ -110,9 +110,9 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/cha #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-chart.md index 33597d0f6..4bad050be 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-column-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Column Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Stacked Column Chart in Syncfusion Flutter Cartesian Charts—add stacked column series, and configure key features. +title: Stacked Column Chart in Flutter Cartesian Chart | Syncfusion® +description: The stacked column chart support in Flutter Cartesian Chart offers cumulative data comparison by stacking series values to show overall contribution. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Stacked Column Chart (SfCartesianChart) +# Stacked Column Chart in Flutter Cartesian Chart To create a Flutter stacked column chart quickly, you can check this video. @@ -216,9 +216,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also * [Cumulative and non-cumulative values on the stacked column charts](https://support.syncfusion.com/kb/article/11406/how-to-show-cumulative-and-non-cumulative-values-on-the-stacked-column-charts). -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-100-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-100-chart.md index 29c9c41f8..f74d0800e 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-100-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-100-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked line in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about 100% stacked line chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: 100% Stacked Line Chart in Flutter Cartesian Chart | Syncfusion® +description: The 100% stacked line chart support in Flutter Cartesian Chart offers proportional trend visualization, showing each series contribution as a percentage. platform: chart-sdk control: Chart documentation: ug --- -# 100% Stacked line Chart in Flutter Cartesian Charts (SfCartesianChart) +# 100% Stacked Line Chart in Flutter Cartesian Chart To create a Flutter 100% stacked line chart quickly, you can check this video. @@ -116,9 +116,9 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-chart.md index 6da76653a..00e0f6f64 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/stacked-line-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Line Chart in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create and customize Stacked Line Chart in Syncfusion Flutter Cartesian Charts—add stacked line series, and configure key features. +title: Stacked Line Chart in Flutter Cartesian Chart | Syncfusion® +description: The stacked line chart support in Flutter Cartesian Chart offers cumulative trend visualization by stacking series values to show overall contribution. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Stacked Line Chart (SfCartesianChart) +# Stacked Line Chart in Flutter Cartesian Chart To create a Flutter stacked line chart quickly, you can check this video. @@ -183,9 +183,9 @@ You can show the cumulative data label values using the [`showCumulativeValues`] #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/step-area-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/step-area-chart.md index 4481217d9..e187f2bfe 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/step-area-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/step-area-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Step area Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about step area chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Step Area Chart in Flutter Cartesian Chart | Syncfusion® +description: The step area chart support in Flutter Cartesian Chart offers stepped, filled visualizations to highlight changes that occur at discrete intervals. platform: chart-sdk control: Chart documentation: ug --- -# Step area Chart in Flutter Cartesian Charts (SfCartesianChart) +# Step Area Chart in Flutter Cartesian Chart To render a step area chart, create an instance of [`StepAreaSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepAreaSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/SfCartesianChart.html). The following properties can be used to customize the appearance of the step area chart. @@ -83,9 +83,9 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/step-line-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/step-line-chart.md index 32ea89dc1..abcbcf3fc 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/step-line-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/step-line-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Step line Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about step line chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Step Line Chart in Flutter Cartesian Chart | Syncfusion® +description: The step line chart support in Flutter Cartesian Chart offers stepped trend visualization to represent data changes that occur at distinct intervals. platform: chart-sdk control: Chart documentation: ug --- -# Step line Chart in Flutter Cartesian Charts (SfCartesianChart) +# Step Line Chart in Flutter Cartesian Chart To render a step line chart, create an instance of [`StepLineSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/StepLineSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) collection property of [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance of the step line chart: @@ -98,9 +98,9 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) \ No newline at end of file +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/chart-types/waterfall-chart.md b/chart-sdk/flutter/cartesian-chart/chart-types/waterfall-chart.md index c6d7899f8..543c932c3 100644 --- a/chart-sdk/flutter/cartesian-chart/chart-types/waterfall-chart.md +++ b/chart-sdk/flutter/cartesian-chart/chart-types/waterfall-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Waterfall Chart in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about waterfall chart of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Waterfall Chart in Flutter Cartesian Chart | Syncfusion® +description: The waterfall chart support in Flutter Cartesian Chart offers visualization of cumulative positive and negative changes to analyze value progression. platform: chart-sdk control: Chart documentation: ug --- -# Waterfall Chart in Flutter Cartesian Charts (SfCartesianChart) +# Waterfall Chart in Flutter Cartesian Chart The waterfall chart explains gradual changes in the quantitative value of an entity that is subject to changes by increments or decrements. Using the waterfall chart, you can quickly illustrate changes in revenues. @@ -82,9 +82,9 @@ To render a waterfall chart, create an instance of [`WaterfallSeries`](https://p #### See Also -* [Color palette](/flutter/cartesian-charts/series-customization#color-palette) -* [Color mapping](/flutter/cartesian-charts/series-customization#color-mapping-for-data-points) -* [Animation](/flutter/cartesian-charts/series-customization#animation) -* [Gradient](/flutter/cartesian-charts/series-customization#gradient-fill) -* [Empty points](/flutter/cartesian-charts/series-customization#empty-points) -* [Sorting](/flutter/cartesian-charts/series-customization#sorting) +* [Color palette](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-palette) +* [Color mapping](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#color-mapping-for-data-points) +* [Animation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#animation) +* [Gradient](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#gradient-fill) +* [Empty points](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#empty-points) +* [Sorting](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/series-customization#sorting) diff --git a/chart-sdk/flutter/cartesian-chart/charts-type.md b/chart-sdk/flutter/cartesian-chart/charts-type.md index 5b075929e..45f79c0f0 100644 --- a/chart-sdk/flutter/cartesian-chart/charts-type.md +++ b/chart-sdk/flutter/cartesian-chart/charts-type.md @@ -1,15 +1,15 @@ --- layout: post -title: Chart Types in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to explore chart types in Syncfusion Flutter Cartesian Charts—compare, select, and configure key features for each type. +title: Chart Types in Flutter Cartesian Chart | Syncfusion® +description: The chart types support in Flutter Cartesian Chart offers a wide range of chart series to visualize trends, comparisons, distributions, and financial data. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Chart Types (SfCartesianChart) +# Chart Types in Flutter Cartesian Chart -This page helps to navigate to the Chart types available in the Syncfusion® Flutter Cartesian Charts widgets. +This page helps you navigate the chart types available in the Syncfusion®® Flutter Cartesian Charts widgets. @@ -17,7 +17,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Line Chart @@ -25,7 +25,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Fast line Chart @@ -33,7 +33,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Area Chart @@ -41,7 +41,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Spline Chart @@ -49,7 +49,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Column Chart @@ -57,7 +57,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Bar Chart @@ -65,7 +65,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Bubble Chart @@ -73,7 +73,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Scatter Chart @@ -81,7 +81,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Step line Chart @@ -89,7 +89,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Range column Chart @@ -97,7 +97,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Range area Chart @@ -105,7 +105,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Spline area Chart @@ -113,7 +113,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Spline range area Chart @@ -121,7 +121,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Step area Chart @@ -129,7 +129,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Histogram Chart @@ -137,7 +137,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked line Chart @@ -145,7 +145,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked area Chart @@ -153,7 +153,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked column Chart @@ -161,7 +161,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked bar Chart @@ -169,7 +169,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked area 100 Chart @@ -177,7 +177,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked column 100 Chart @@ -185,7 +185,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked bar 100 Chart @@ -193,7 +193,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Stacked line 100 Chart @@ -201,7 +201,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& HiLo Chart @@ -209,7 +209,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& OHLC Chart @@ -217,7 +217,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Candle Chart @@ -225,7 +225,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Box and Whisker Chart @@ -233,7 +233,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Waterfall Chart @@ -241,7 +241,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Error bar Chart
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
- Link + Link
diff --git a/chart-sdk/flutter/cartesian-chart/export-cartesian-chart.md b/chart-sdk/flutter/cartesian-chart/export-cartesian-chart.md index 05a351ec0..a501a02d0 100644 --- a/chart-sdk/flutter/cartesian-chart/export-cartesian-chart.md +++ b/chart-sdk/flutter/cartesian-chart/export-cartesian-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Exporting in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to export Syncfusion Flutter Cartesian Charts (SfCartesianChart) as images or PDF—learn to export charts programmatically, customize export settings, and more key features. +title: Exporting in Flutter Cartesian Chart | Syncfusion® +description: The exporting support in Flutter Cartesian Chart offers image and document export options for easy sharing, reporting, and presentation. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Exporting (SfCartesianChart) +# Exporting in Flutter Cartesian Chart -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to export the Cartesian chart as a PNG image or as a PDF document. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support for exporting the Cartesian chart as a PNG image or a PDF document. ## Export image diff --git a/chart-sdk/flutter/cartesian-chart/getting-started.md b/chart-sdk/flutter/cartesian-chart/getting-started.md index f2038cbe7..486c48fd3 100644 --- a/chart-sdk/flutter/cartesian-chart/getting-started.md +++ b/chart-sdk/flutter/cartesian-chart/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting started with Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to set up Syncfusion Flutter Cartesian Charts—add dependencies, import, create SfCartesianChart, and configure key features. +title: Getting Started with Flutter Cartesian Chart | Syncfusion +description: Learn how to get started with Flutter Cartesian Chart provides step-by-step guidance to create, configure, and display interactive charts quickly. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Getting Started (SfCartesianChart) +# Getting Started with Flutter Cartesian Chart -This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart. +This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the essential features needed to get started with the chart. -To get started quickly with our Flutter chart widget, you can check out this video. +To get started quickly with our Flutter chart widget, you can watch this video. @@ -22,7 +22,7 @@ Create a simple project using the instructions given in the [Getting Started wit **Add dependency** -Add the Syncfusion® Flutter Chart dependency to your pub spec file. +Add the Syncfusion®® Flutter Chart dependency to your pubspec.yaml file. {% tabs %} {% highlight dart %} @@ -34,7 +34,7 @@ Add the Syncfusion® Flutter Chart dependency to your pub spec fil {% endhighlight %} {% endtabs %} ->**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. +>**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion® Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. **Get packages** @@ -62,7 +62,7 @@ Import the following package in your Dart code. ## Initialize chart -Once the package has been imported, initialize the chart as a child of any widget. SfCartesianChart is used to render all kinds of charts which need to be plotted in Cartesian coordinates. Here, as we are plotting line chart, initialize SfCartesianChart widget as a child of Container widget. +Once the package has been imported, initialize the chart as a child of any widget. SfCartesianChart is used to render charts that are plotted in Cartesian coordinates. Here, as we are plotting a line chart, initialize the SfCartesianChart widget as a child of the Container widget. {% tabs %} {% highlight dart hl_lines="7" %} @@ -144,7 +144,7 @@ To know more about how to create Flutter Charts from JSON data, you can watch th ## Add title -You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet. +You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/title.html) to the chart to provide quick information about the plotted data. The chart title can be set as demonstrated in the following code snippet. {% tabs %} {% highlight dart %} @@ -244,9 +244,9 @@ You can add data labels to improve the readability of the chart using the [`data The legend provides information about the series rendered in the chart. -You can use legend in chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). +You can enable the legend in a chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). -Additionally, the series [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property can be used to set the label for each series. The labels will be displayed in corresponding legends. +Additionally, the series [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property can be used to set the label for each series. The labels will be displayed in the corresponding legend. {% tabs %} {% highlight dart %} @@ -357,9 +357,9 @@ The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/ ![Tooltip in Flutter Charts.](images/getting-started/flutter-charts-tooltip.png) -You can find the complete getting started example from this [`link`](https://support.syncfusion.com/kb/article/9941/how-to-integrate-syncfusion-charts-in-flutter-web-application-sfcartesianchart). +You can find the complete getting started example from this [link](https://support.syncfusion.com/kb/article/9941/how-to-integrate-syncfusion-charts-in-flutter-web-application-sfcartesianchart). ->**Note**: You can refer to our [`Flutter Charts`](https://www.syncfusion.com/flutter-widgets/flutter-charts) feature tour page for its groundbreaking feature representations. You can also explore our [`Flutter Charts example`](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/line/default-line-chart) that shows how to render various chart types as well as how to easily configure with built-in support for creating stunning visual effects. +>**Note**: You can refer to our [`Flutter Charts`](https://www.syncfusion.com/flutter-widgets/flutter-charts) feature tour page for its feature highlights. You can also explore our [`Flutter Charts example`](https://flutter.syncfusion.com/#/cartesian-charts/chart-types/line/default-line-chart) to see how to render various chart types and configure them with built-in support for creating visual effects. #### See Also diff --git a/chart-sdk/flutter/cartesian-chart/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/cartesian-chart/how-to/custom-widget-on-flutterflow.md index fc908dd12..ebff64004 100644 --- a/chart-sdk/flutter/cartesian-chart/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/cartesian-chart/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: Flutter Cartesian Charts in FlutterFlow | Syncfusion -description: Step-by-step guide to add and use Syncfusion Flutter Cartesian Charts widget in FlutterFlow—learn to create a custom widget, add dependencies, import packages, use code snippets, and integrate charts visually. +title: How to add Syncfusion® Cartesian Chart in FlutterFlow | Syncfusion® +description: Add Syncfusion® Cartesian Chart in FlutterFlow to visualize data with interactive chart features, customizable axes, and rich data presentation options. platform: chart-sdk control: Chart documentation: ug --- -# How to add Syncfusion® Cartesian Chart widget in FlutterFlow? +# How to add Syncfusion® Cartesian Chart in FlutterFlow ## Overview diff --git a/chart-sdk/flutter/cartesian-chart/legend.md b/chart-sdk/flutter/cartesian-chart/legend.md index dc5c9a836..48d72db11 100644 --- a/chart-sdk/flutter/cartesian-chart/legend.md +++ b/chart-sdk/flutter/cartesian-chart/legend.md @@ -1,15 +1,15 @@ --- layout: post -title: Legend in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control legends in Syncfusion Flutter Cartesian Charts—enable, position, style, and configure key features. +title: Legend in Flutter Cartesian Chart | Syncfusion® +description: The legend support in Flutter Cartesian Chart offers customizable legend items, layouts, and positioning to improve chart readability. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Legend (SfCartesianChart) +# Legend in Flutter Cartesian Chart -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) contains a list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/legend.html) contains a list of chart series or data points in the chart. The information provided in each legend item helps identify the corresponding data series in the chart. {% tabs %} {% highlight dart hl_lines="9" %} @@ -557,4 +557,4 @@ You can customize the appearance of legend items with your template by using [`l {% endhighlight %} {% endtabs %} ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/localization.md b/chart-sdk/flutter/cartesian-chart/localization.md index 74f2e3d82..9acd6377b 100644 --- a/chart-sdk/flutter/cartesian-chart/localization.md +++ b/chart-sdk/flutter/cartesian-chart/localization.md @@ -1,15 +1,15 @@ --- layout: post -title: Localization in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about Localization feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Localization in Flutter Cartesian Chart | Syncfusion® +description: The localization support in Flutter Cartesian Chart offers region-specific formatting and translated chart elements for global audience support. platform: chart-sdk control: Chart documentation: ug --- -# Localization in Flutter Cartesian Charts (SfCartesianChart) +# Localization in Flutter Cartesian Chart -By default, the Cartesian charts widget supports US English localizations. You can change the other languages by specifying the [`MaterialApp`](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html) properties and adding the `flutter_localizations` package to your application. +By default, the Cartesian charts widget supports US English localization. You can change it to other languages by specifying the [`MaterialApp`](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html) properties and adding the `flutter_localizations` package to your application. To use `flutter_localizations`, add the package as dependency to `pubspec.yaml` file. diff --git a/chart-sdk/flutter/cartesian-chart/marker-datalabel.md b/chart-sdk/flutter/cartesian-chart/marker-datalabel.md index 24cd9ad87..ab20a52a1 100644 --- a/chart-sdk/flutter/cartesian-chart/marker-datalabel.md +++ b/chart-sdk/flutter/cartesian-chart/marker-datalabel.md @@ -1,17 +1,17 @@ --- layout: post -title: Marker and Data Label Customization in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control markers and data labels in Syncfusion Flutter Cartesian Charts—enable, style, and configure key features. +title: Marker and Data Label in Flutter Cartesian Chart | Syncfusion® +description: The marker and data label support in Flutter Cartesian Chart offers customizable markers and labels to enhance data visibility and interpretation. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Marker and Data Label (SfCartesianChart) +# Marker and Data Label in Flutter Cartesian Chart ## Marker -Markers are used to provide information about the exact point location. You can add a shape to adorn each data point. Markers can be enabled by using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property of [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/markerSettings.html). You can use the following properties to customize the appearance. +Markers are used to provide information about the exact point location. You can add a shape to adorn each data point. Markers can be enabled by using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/isVisible.html) property of [`markerSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/markerSettings.html). You can use the following properties to customize their appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/color.html) - used to change the color of the marker shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/MarkerSettings/borderWidth.html) - used to change the stroke width of the marker shape. @@ -581,4 +581,4 @@ If the user didn't provide text color to the data label, then by default, the sa ![label_saturation](images/marker-datalabel/cartesian_saturation.png) ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/methods.md b/chart-sdk/flutter/cartesian-chart/methods.md index 69a113302..8ed80ea56 100644 --- a/chart-sdk/flutter/cartesian-chart/methods.md +++ b/chart-sdk/flutter/cartesian-chart/methods.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to use methods in Syncfusion Flutter Cartesian Charts—show or hide tooltips, trackball, zoom, and configure key features. +title: Methods in Flutter Cartesian Chart | Syncfusion® +description: The methods in Flutter Cartesian Chart documentation provide publicly accessible APIs for performing chart-related operations programmatically. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Methods (SfCartesianChart) +# Methods in Flutter Cartesian Chart ## Methods in Plot band @@ -15,7 +15,7 @@ documentation: ug The `drawRect` method is used to customize the appearance of the plot band. -This following code sample shows how to customize the appearance of the plot band by using drawRect method. +The following code sample shows how to customize the appearance of the plot band by using the drawRect method. {% tabs %} {% highlight dart %} @@ -1245,7 +1245,7 @@ The [`drawHorizontalAxisTooltip`](https://pub.dev/documentation/syncfusion_flutt The [`drawVerticalAxisTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CrosshairBehavior/drawVerticalAxisTooltip.html) method is used to customize the tooltip label, position, and style for vertical axis tooltip. -For further reference, please consult the [`drawHorizontalAxisTooltip`](https://help.syncfusion.com/flutter/cartesian-charts/methods#drawhorizontalaxistooltip-method-in-crosshairbehavior) code sample. +For further reference, please consult the [`drawHorizontalAxisTooltip`](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/methods#drawhorizontalaxistooltip-method-in-crosshairbehavior) code sample. ![Crosshair Vertical Axis Tooltip](images\trackball-crosshair/custom_crosshair_vertical_tooltip.png) @@ -2377,4 +2377,4 @@ and funnel charts. * [Show or hide trackball dynamically in Cartesian chart](https://support.syncfusion.com/kb/article/9960/how-to-show-or-hide-trackball-dynamically-in-flutter-cartesian-charts-sfcartesianchart). * [Show or hide crosshair dynamically in Cartesian chart](https://support.syncfusion.com/kb/article/9911/how-to-show-or-hide-crosshair-dynamically-in-flutter-cartesian-charts-sfcartesianchart). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/multiple-charts.md b/chart-sdk/flutter/cartesian-chart/multiple-charts.md index 9a97c35e2..bed2b558e 100644 --- a/chart-sdk/flutter/cartesian-chart/multiple-charts.md +++ b/chart-sdk/flutter/cartesian-chart/multiple-charts.md @@ -1,17 +1,17 @@ --- layout: post -title: Multiple Charts in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to create multiple charts in Syncfusion Flutter Cartesian Charts—add series, use axes, combine types, and configure key features. +title: Multiple Charts in Flutter Cartesian Chart | Syncfusion® +description: The multiple charts support in Flutter Cartesian Chart offers displaying and arranging multiple chart instances to compare and analyze datasets together. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Multiple Charts (SfCartesianChart) +# Multiple Charts in Flutter Cartesian Chart ## Multiple series -You can add multiple series to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) property of the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) class. By default, all the series are rendered based on the [`PrimaryXAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) and [`PrimaryYAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) in [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). If you want to plot different unit or value that is specific to a particular series, specify separate axis for that series using the [`xAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/xAxisName.html) and [`yAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/yAxisName.html) properties of series. +You can add multiple series to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/series.html) property of the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) class. By default, all the series are rendered based on the [`PrimaryXAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryXAxis.html) and [`PrimaryYAxis`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/primaryYAxis.html) in [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). If you want to plot a different unit or value that is specific to a particular series, specify a separate axis for that series using the [`xAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/xAxisName.html) and [`yAxisName`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/yAxisName.html) properties of the series. {% tabs %} {% highlight dart %} @@ -123,5 +123,5 @@ Also refer [multiple axes](./axis-customization#multiple-axes) for customizing t * Cartesian type series cannot be combined with circular series (pie, doughnut, and radial bar). >**Note**: -* `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +* `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. * You can refer to our [Flutter Combination Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/combination-chart) feature tour page for its groundbreaking feature representations. \ No newline at end of file diff --git a/chart-sdk/flutter/cartesian-chart/on-demand-loading.md b/chart-sdk/flutter/cartesian-chart/on-demand-loading.md index 6e907c9b5..249becfcf 100644 --- a/chart-sdk/flutter/cartesian-chart/on-demand-loading.md +++ b/chart-sdk/flutter/cartesian-chart/on-demand-loading.md @@ -1,15 +1,15 @@ --- layout: post -title: On-demand loading in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about On-demand loading feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: On-demand loading in Flutter Cartesian Chart | Syncfusion® +description: The on-demand loading support in Flutter Cartesian Chart offers dynamic data loading as users interact, improving performance with large datasets. platform: chart-sdk control: Chart documentation: ug --- -# On-demand loading in Flutter Cartesian Charts (SfCartesianChart) +# On-demand loading in Flutter Cartesian Chart -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support to return a widget which can be used to load more data to the chart when the visible range reaches the end on dragging in the chart with the help of the [`loadMoreIndicatorBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/loadMoreIndicatorBuilder.html) builder. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides support for returning a widget that can be used to load more data to the chart when the visible range reaches the end while dragging in the chart, with the help of the [`loadMoreIndicatorBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/loadMoreIndicatorBuilder.html) builder. To learn more about how to lazy load data while panning in Flutter Charts, you can watch this video. @@ -69,7 +69,7 @@ The example below demonstrates the infinite scrolling by showing the ci ![Infinite_scrolling](images/on-demand-loading/infinite_scrolling.gif) ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. #### See Also diff --git a/chart-sdk/flutter/cartesian-chart/overview.md b/chart-sdk/flutter/cartesian-chart/overview.md index 8286f7092..cfd8c74b6 100644 --- a/chart-sdk/flutter/cartesian-chart/overview.md +++ b/chart-sdk/flutter/cartesian-chart/overview.md @@ -1,15 +1,15 @@ --- layout: post -title: Overview of Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide about Syncfusion Flutter Cartesian Charts—explore chart types, axis types, legends, and configure key features for Flutter apps. +title: About Syncfusion® Flutter Cartesian Chart | Syncfusion® +description: Learn here all about introduction of Syncfusion® Flutter Cartesian Chart widget, its features, and more details platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Overview (SfCartesianChart) +# About Syncfusion® Flutter Cartesian Chart -Syncfusion® Flutter Cartesian Charts (SfCartesianChart) widget is written natively in Dart for creating beautiful and high-performance Cartesian charts, which are used to craft high-quality applications using Flutter. +Syncfusion® Flutter Cartesian Charts (SfCartesianChart) widget is written natively in Dart for creating beautiful, high-performance Cartesian charts that are used to craft high-quality applications using Flutter. ![Overview flutter chart](images/overview/overview.png) diff --git a/chart-sdk/flutter/cartesian-chart/right-to-left.md b/chart-sdk/flutter/cartesian-chart/right-to-left.md index 1dcf76a4d..e349f4063 100644 --- a/chart-sdk/flutter/cartesian-chart/right-to-left.md +++ b/chart-sdk/flutter/cartesian-chart/right-to-left.md @@ -1,15 +1,15 @@ --- layout: post -title: RTL support in Flutter Cartesian Charts widget | Syncfusion -description: Learn here about the RTL support in Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Right To Left (RTL) support in Flutter Cartesian Chart | Syncfusion® +description: The RTL support in Flutter Cartesian Chart offers right-to-left rendering for chart elements, improving usability in RTL language applications. platform: chart-sdk control: Chart documentation: ug --- -# Right To Left (RTL) in Flutter Cartesian Chart (SfCartesianChart) +# Right To Left (RTL) in Flutter Cartesian Chart -Cartesian chart supports the right to left rendering. However chart axis, series, and other chart elements rendering will be the same for both LTR and RTL except trackball, tooltip, and legend. +Cartesian chart supports right-to-left rendering. However, chart axes, series, and other chart elements render the same for both LTR and RTL except for trackball, tooltip, and legend. ## RTL rendering ways diff --git a/chart-sdk/flutter/cartesian-chart/selection.md b/chart-sdk/flutter/cartesian-chart/selection.md index 09cfce4a6..b37c3de6e 100644 --- a/chart-sdk/flutter/cartesian-chart/selection.md +++ b/chart-sdk/flutter/cartesian-chart/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about Selection feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Selection in Flutter Cartesian Chart | Syncfusion® +description: The selection support in Flutter Cartesian Chart offers interactive point and series selection with customizable styles to highlight data insights. platform: chart-sdk control: Chart documentation: ug --- -# Selection in Flutter Cartesian Charts (SfCartesianChart) +# Selection in Flutter Cartesian Chart -The selection feature in chart let you to select a segment in a series or the series itself. This feature allows you to select either individual or cluster of segments in the chart series. +The selection feature in the chart lets you select a segment in a series or the series itself. This feature allows you to select either an individual segment or a cluster of segments in the chart series. {% tabs %} {% highlight dart %} @@ -357,10 +357,10 @@ Defaults to `true`. ![Toggle selection](images/selection/cartesian_deselection.gif) -Also refer [selection event](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onselectionchanged) for customizing the selection further. +Also refer [selection event](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#onselectionchanged) for customizing the selection further. #### See Also * [Dynamically selecting the data points in a chart](https://support.syncfusion.com/kb/article/10146/how-to-select-the-data-points-dynamically-in-cartesian-charts-sfcartesianchart). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/series-customization.md b/chart-sdk/flutter/cartesian-chart/series-customization.md index d45038fb8..a1e733171 100644 --- a/chart-sdk/flutter/cartesian-chart/series-customization.md +++ b/chart-sdk/flutter/cartesian-chart/series-customization.md @@ -1,17 +1,17 @@ --- layout: post -title: Series Customization in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control series in Syncfusion Flutter Cartesian Charts—enable animation, handle empty points, and configure key features. +title: Series Customization in Flutter Cartesian Chart | Syncfusion® +description: The series customization support in Flutter Cartesian Chart offers control over colors, borders, spacing, animations, and series appearance. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Series Customization (SfCartesianChart) +# Series Customization in Flutter Cartesian Chart ## Animation -[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides animation support for the series. Series will be animated during rendering. Animation is enabled by default, and you can control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting this property to 0. +[`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html) provides animation support for the series. The series are animated during rendering. Animation is enabled by default, and you can control the duration of the animation using the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting this property to 0. {% tabs %} {% highlight dart hl_lines="13" %} @@ -696,4 +696,4 @@ The chart’s data source can be sorted using the [`sortingOrder`](https://pub.d * [Rendering a chart using JSON data retrieved from a fire base](https://support.syncfusion.com/kb/article/10589/how-to-render-the-flutter-chart-using-json-data-stored-in-firebase-database). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/technical-indicators.md b/chart-sdk/flutter/cartesian-chart/technical-indicators.md index 67c8d9dad..298261b58 100644 --- a/chart-sdk/flutter/cartesian-chart/technical-indicators.md +++ b/chart-sdk/flutter/cartesian-chart/technical-indicators.md @@ -1,13 +1,13 @@ --- layout: post -title: Technical Indicators in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to add technical indicators in Syncfusion Flutter Cartesian Charts—configure AD, ATR, EMA, MACD, RSI, and key features. +title: Technical Indicators in Flutter Cartesian Chart | Syncfusion® +description: The technical indicators support in Flutter Cartesian Chart offers built-in financial indicators to analyze trends, momentum, and market movements effectively. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Technical Indicators (SfCartesianChart) +# Technical Indicators in Flutter Cartesian Chart The different types of technical indicators available in the chart are as follows: @@ -26,7 +26,7 @@ The different types of technical indicators available in the chart are as follow ## Adding Technical indicator into Chart -To render any indicator, add it to the [`TechnicalIndicators`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator-class.html) collection using the indicators in [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html).The following properties can be used to customize the appearance: +To render any indicator, add it to the [`TechnicalIndicators`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator-class.html) collection using the indicators in [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). The following properties can be used to customize the appearance: * [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/isVisible.html) - To check the visibility of the indicator. * [`period`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/AtrIndicator/period.html)- Used to indicates the moving average period. @@ -761,7 +761,7 @@ Refer the following example below #### See Also -* [Refer this link for technical indicators callback](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderdetailsupdate). +* [Refer this link for technical indicators callback](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#onrenderdetailsupdate). * [Bind data source to technical indicators in Flutter Cartesian chart](https://support.syncfusion.com/kb/article/11420/bind-data-source-to-technical-indicators-in-flutter-cartesian-chart). @@ -790,4 +790,4 @@ Refer the following example below * [`Weighted moving average indicator`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/WmaIndicator-class.html) (WMA) - can be rendered with five value mappers ([`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/xValueMapper.html), [`lowValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/lowValueMapper.html), [`highValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/highValueMapper.html), [`openValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/openValueMapper.html), [`closeValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TechnicalIndicator/closeValueMapper.html)). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/tooltip.md b/chart-sdk/flutter/cartesian-chart/tooltip.md index cf104b868..284f05ee3 100644 --- a/chart-sdk/flutter/cartesian-chart/tooltip.md +++ b/chart-sdk/flutter/cartesian-chart/tooltip.md @@ -1,15 +1,15 @@ --- layout: post -title: Tooltip in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control tooltips in Syncfusion Flutter Cartesian Charts—enable, format, style tooltips, and configure key features. +title: Tooltip in Flutter Cartesian Chart | Syncfusion® +description: The tooltip support in Flutter Cartesian Chart offers interactive data insights with customizable content and appearance for better user engagement. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Tooltip (SfCartesianChart) +# Tooltip in Flutter Cartesian Chart -Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you can set the [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/enable.html) property of [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) to *true*. By default, the tooltip is set to *false*. You need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property to *true* to enable tooltip for a particular series alone. +The chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you can set the [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/enable.html) property of [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) to *true*. By default, the tooltip is set to *false*. You need to set the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property to *true* to enable the tooltip for a particular series only. The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. diff --git a/chart-sdk/flutter/cartesian-chart/trackball-crosshair.md b/chart-sdk/flutter/cartesian-chart/trackball-crosshair.md index 5d3cb3dfc..fbaae00ce 100644 --- a/chart-sdk/flutter/cartesian-chart/trackball-crosshair.md +++ b/chart-sdk/flutter/cartesian-chart/trackball-crosshair.md @@ -1,17 +1,17 @@ --- layout: post -title: Trackball and Crosshair Customization in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to control trackball and crosshair in Syncfusion Flutter Cartesian Charts—enable, format, style, and configure key features. +title: Trackball and Crosshair in Flutter Cartesian Chart | Syncfusion® +description: The trackball and crosshair support in Flutter Cartesian Chart offers precise data inspection with interactive pointers for accurate analysis and comparison. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Trackball and Crosshair (SfCartesianChart) +# Trackball and Crosshair in Flutter Cartesian Chart ## Trackball -Trackball feature displays the tooltip for the data points that are closer to the point where you touch on the chart area. This feature, especially, can be used instead of data label feature when you cannot show data labels for all data points due to space constraint. This feature can be enabled using [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/enable.html) property of [`trackballBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/trackballBehavior.html). Trackball will be activated once you long-press anywhere on the chart area. Once it is activated, it will appear in the UI and move based on your touch movement until you stop touching on the chart. +The trackball feature displays the tooltip for the data points that are closer to the point where you touch the chart area. This feature can be used instead of the data label feature when you cannot show data labels for all data points due to space constraints. It can be enabled using the [`enable`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/enable.html) property of [`trackballBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/trackballBehavior.html). The trackball is activated once you long-press anywhere on the chart area. Once activated, it appears in the UI and moves based on your touch movement until you stop touching the chart. The trackball state will be preserved on the device's orientation change and on browser resize. For example, if the trackball's [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TrackballBehavior/hideDelay.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of trackball display, the trackball will be displayed for the next 5,000ms in landscape mode before disappearing. @@ -891,10 +891,10 @@ The ActivationMode enum contains the following values: {% endhighlight %} {% endtabs %} -Also refer [`crosshair`](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncrosshairpositionchanging) and [`trackball`](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ontrackballpositionchanging) events for customizing the crosshair and trackball further. +Also refer [`crosshair`](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#oncrosshairpositionchanging) and [`trackball`](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#ontrackballpositionchanging) events for customizing the crosshair and trackball further. #### See Also * [Disabling trackball tooltip for particular series in Cartesian chart](https://support.syncfusion.com/kb/article/10176/how-to-disable-trackball-tooltip-for-particular-series-in-cartesian-charts-sfcartesianchart). ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/trendline.md b/chart-sdk/flutter/cartesian-chart/trendline.md index 4fe3db09b..a1eea3560 100644 --- a/chart-sdk/flutter/cartesian-chart/trendline.md +++ b/chart-sdk/flutter/cartesian-chart/trendline.md @@ -1,15 +1,15 @@ --- layout: post -title: Trendlines in Flutter Cartesian Charts widget | Syncfusion -description: Learn here all about Trendlines feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more. +title: Trendlines in Flutter Cartesian Chart | Syncfusion® +description: The trendlines support in Flutter Cartesian Chart offers built-in trend analysis by displaying data patterns and forecasting directions visually. platform: chart-sdk control: Chart documentation: ug --- -# Trendlines in Flutter Cartesian Charts (SfCartesianChart) +# Trendlines in Flutter Cartesian Chart -Trendlines are used to show the direction and speed of price. +Trendlines are used to show the direction and speed of price changes. Trendlines can be generated for the Cartesian type series (Line, Column, Scatter, Area, Candle, HiLo, etc.) except bar type series. You can add more than one trendline to a series. @@ -534,6 +534,6 @@ Chart will display details about the points through tooltip when user interactio ![tooltip](images/trendline/tooltip.png) -Also refer [`trendline event`](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onrenderdetailsupdate-trendline) for customizing the tooltip further. +Also refer [`trendline event`](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/callbacks#onrenderdetailsupdate-trendline) for customizing the tooltip further. ->**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/flutter/cartesian-charts/getting-started#bind-data-source) topic for more details. +>**Note**: `chartData` in the above code snippets is a class type list and holds the data for binding to the chart series. Refer [Bind data source](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/getting-started#bind-data-source) topic for more details. diff --git a/chart-sdk/flutter/cartesian-chart/zoom-pan.md b/chart-sdk/flutter/cartesian-chart/zoom-pan.md index f9ed56329..d1dc8e177 100644 --- a/chart-sdk/flutter/cartesian-chart/zoom-pan.md +++ b/chart-sdk/flutter/cartesian-chart/zoom-pan.md @@ -1,13 +1,13 @@ --- layout: post -title: Zooming and Panning in Flutter Cartesian Charts | Syncfusion -description: Step-by-step guide to enable zooming and panning in Syncfusion Flutter Cartesian Charts—use pinch, double-tap, selection, and configure key features. +title: Zooming and Panning in Flutter Cartesian Chart | Syncfusion® +description: The zooming and panning support in Flutter Cartesian Chart offers intuitive navigation to explore, inspect, and analyze large datasets efficiently. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Cartesian Charts Zooming and Panning (SfCartesianChart) +# Zooming and Panning in Flutter Cartesian Chart ## Pinch zooming @@ -50,7 +50,7 @@ Pinch zooming can be enabled by setting the [`enablePinching`](https://pub.dev/d ## Directional zooming -The directional zooming feature improves the zoom experience by allowing users to zoom in and out in a specific direction (horizontal, vertical, or diagonal) based on their finger gesture. To enable this feature, set the [`enableDirectionalZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableDirectionalZooming.html) property to `true`, the default value is `false`. The following code sample demonstrates how to enable directional zooming. +The directional zooming feature improves the zoom experience by allowing users to zoom in and out in a specific direction (horizontal, vertical, or diagonal) based on their finger gesture. To enable this feature, set the [`enableDirectionalZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableDirectionalZooming.html) property to `true`. The default value is `false`. The following code sample demonstrates how to enable directional zooming. {% tabs %} {% highlight dart hl_lines="7" %} @@ -391,7 +391,7 @@ Also refer [`zooming`](./callbacks#onzooming), [`zoom start`](./callbacks#onzoom ### Calculate range based on visible points -The [`anchorRangeToVisiblePoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/anchorRangeToVisiblePoints.html) property can be used to calculate the value axis range based on the visible points. When the property is set to false the value axis range will be calculated based on all the data points in the chart irrespective of visible points. For further reference, check this [AutoRangeCalculation](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#auto-range-calculation) section. +The [`anchorRangeToVisiblePoints`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAxis/anchorRangeToVisiblePoints.html) property can be used to calculate the value axis range based on the visible points. When the property is set to false the value axis range will be calculated based on all the data points in the chart irrespective of visible points. For further reference, check this [AutoRangeCalculation](https://help.syncfusion.com/chart-sdk/flutter/cartesian-chart/axis-customization#auto-range-calculation) section. #### See Also diff --git a/chart-sdk/flutter/circular-chart/accessibility.md b/chart-sdk/flutter/circular-chart/accessibility.md index b2af5b032..d8fbd0a99 100644 --- a/chart-sdk/flutter/circular-chart/accessibility.md +++ b/chart-sdk/flutter/circular-chart/accessibility.md @@ -1,41 +1,41 @@ --- layout: post -title: Accessibility in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Accessibility feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Accessibility in Flutter Circular Chart | Syncfusion® +description: The accessibility support in Flutter Circular Chart offers sufficient contrast, large fonts, and tappable targets for an inclusive user experience. platform: chart-sdk control: Chart documentation: ug --- -# Accessibility in Flutter Circular Charts (SfCircularChart) +# Accessibility in Flutter Circular Chart ## Sufficient contrast -The [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. +The [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set colors for all UI elements. The customization of colors can be done for the following chart elements. -* [Chart title](https://help.syncfusion.com/flutter/circular-charts/chart-title) -* [Series palette](https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#color-palette) -* [Color mapping for data points](https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#color-mapping-for-data-points) -* [Shader for data points](https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#gradient-and-image-shader) -* [Data label](https://help.syncfusion.com/flutter/circular-charts/datalabel) -* [Legend title](https://help.syncfusion.com/flutter/circular-charts/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/circular-charts/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/circular-charts/tooltip#customizing-the-appearance) -* [Selected segments](https://help.syncfusion.com/flutter/circular-charts/selection#customizing-the-segments) +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/chart-title) +* [Series palette](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/circular-series-customization#color-palette) +* [Color mapping for data points](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/circular-series-customization#color-mapping-for-data-points) +* [Shader for data points](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/circular-series-customization#gradient-and-image-shader) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/datalabel) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/tooltip#customizing-the-appearance) +* [Selected segments](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/selection#customizing-the-segments) ## Large fonts -The [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in Circular chart. -* [Chart title](https://help.syncfusion.com/flutter/circular-charts/chart-title) -* [Data label](https://help.syncfusion.com/flutter/circular-charts/datalabel) -* [Legend title](https://help.syncfusion.com/flutter/circular-charts/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/circular-charts/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/circular-charts/tooltip#customizing-the-appearance) +The [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) font size can be adjusted automatically based on device settings and scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the circular chart. +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/chart-title) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/datalabel) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/tooltip#customizing-the-appearance) ## Easily tappable targets -The [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides callback support to notify when tapping on the essential elements in the chart. -* [Data points](https://help.syncfusion.com/flutter/circular-charts/callbacks#onpointtap) -* [Data labels](https://help.syncfusion.com/flutter/circular-charts/callbacks#ondatalabeltapped) -* [Legend](https://help.syncfusion.com/flutter/circular-charts/callbacks#onlegendtapped) \ No newline at end of file +The [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides callback support to notify when tapping essential elements in the chart. +* [Data points](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/callbacks#onpointtap) +* [Data labels](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/callbacks#ondatalabeltapped) +* [Legend](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/callbacks#onlegendtapped) \ No newline at end of file diff --git a/chart-sdk/flutter/circular-chart/annotations.md b/chart-sdk/flutter/circular-chart/annotations.md index 3e637e0d2..fce8d7cc2 100644 --- a/chart-sdk/flutter/circular-chart/annotations.md +++ b/chart-sdk/flutter/circular-chart/annotations.md @@ -1,15 +1,15 @@ --- layout: post -title: Annotation in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Annotation feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Annotation in Flutter Circular Chart | Syncfusion® +description: The annotation support in Flutter Circular Chart offers custom content placement within the chart area to highlight insights and enhance visualization. platform: chart-sdk control: Chart documentation: ug --- -# Annotation in Flutter Circular Charts (SfCircularChart) +# Annotation in Flutter Circular Chart -Chart supports annotations which allows you to mark the specific area of interest in the chart area. You can add the custom widgets using this annotations feature as depicted below. +The chart supports annotations, which allow you to mark a specific area of interest in the chart area. You can add custom widgets using this annotation feature, as shown below. {% tabs %} {% highlight dart %} @@ -43,13 +43,13 @@ Chart supports annotations which allows you to mark the specific area of interes ## Positioning the annotation -The [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/horizontalAlignment.html) and [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/verticalAlignment.html) values can be specified to align the annotation widget either horizontally or vertically, and the also the property [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/radius.html) can be used for placing the annotation whose values range from `0%` to `100%`. +The [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/horizontalAlignment.html) and [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/verticalAlignment.html) values can be specified to align the annotation widget horizontally or vertically, and the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/radius.html) property can be used to place the annotation, with values ranging from `0%` to `100%`. Defaults to `0%`. **Positioning based on Alignment and Radius** -To place the annotation based on the radius values, set the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/radius.html), and for changing the alignment of the annotation use the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/horizontalAlignment.html) and [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/verticalAlignment.html) properties of annotation are shown in the following code snippet. +To place the annotation based on the radius value, set the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/radius.html). To change the annotation alignment, use the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/horizontalAlignment.html) and [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartAnnotation/verticalAlignment.html) properties, as shown in the following code snippet. {% tabs %} {% highlight dart %} @@ -85,7 +85,7 @@ To place the annotation based on the radius values, set the [`radius`](https://p ## Chart with watermark -Chart supports watermark which allows you to mark the specific area of interest in the chart area. You can add the custom widgets and watermarks using this annotations feature as depicted below. +The chart supports watermark, which allows you to mark a specific area of interest in the chart area. You can add custom widgets and watermarks using this annotation feature, as shown below. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/circular-chart/callbacks.md b/chart-sdk/flutter/circular-chart/callbacks.md index aa5a914f9..4c59d2211 100644 --- a/chart-sdk/flutter/circular-chart/callbacks.md +++ b/chart-sdk/flutter/circular-chart/callbacks.md @@ -1,13 +1,13 @@ --- layout: post -title: Callbacks in Flutter Circular Charts widget | Syncfusion -description: Learn here all about available Callbacks feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Callbacks in Flutter Circular Chart | Syncfusion® +description: The callback support in Flutter Circular Chart offers events for selection, legend, data labels, tooltips, and rendering to enable interactive experiences. platform: chart-sdk control: Chart documentation: ug --- -# Callbacks in Flutter Circular Charts (SfCircularChart) +# Callbacks in Flutter Circular Chart Circular chart contains the below listed callbacks diff --git a/chart-sdk/flutter/circular-chart/chart-appearance.md b/chart-sdk/flutter/circular-chart/chart-appearance.md index 2c267312f..ed4592b8a 100644 --- a/chart-sdk/flutter/circular-chart/chart-appearance.md +++ b/chart-sdk/flutter/circular-chart/chart-appearance.md @@ -1,17 +1,17 @@ --- layout: post -title: Customization in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Customization of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Customization in Flutter Circular Chart | Syncfusion® +description: The customization support in Flutter Circular Chart offers extensive control over chart appearance, series styling, colors, animations, and layout settings. platform: chart-sdk control: Chart documentation: ug --- -# Customization in Flutter Circular Charts (SfCircularChart) +# Customization in Flutter Circular Chart ## Chart sizing -Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. By default initializing only the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) without defining any of its properties renders a white screen. +The chart renders based on the parent widget size. If you need the chart to be rendered in a specific size, set the size (width and height) on the parent widget. By default, initializing only the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) without defining any of its properties renders a white screen. {% tabs %} {% highlight dart hl_lines="8 10" %} @@ -38,7 +38,7 @@ Chart renders based on the parent widget size. If you need the chart to be rende ## Chart margin -Margin to the chart can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/margin.html) property. +The chart margin can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/margin.html) property. {% tabs %} {% highlight dart hl_lines="13" %} @@ -68,7 +68,7 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume ## Chart area customization -You can customize the area of the chart using the below properties. +You can customize the chart area using the following properties. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/backgroundColor.html) - used to change the chart area background color. * [`backgroundImage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/backgroundImage.html) - used to set the image path. diff --git a/chart-sdk/flutter/circular-chart/chart-title.md b/chart-sdk/flutter/circular-chart/chart-title.md index 80747c9cf..67b6f02ac 100644 --- a/chart-sdk/flutter/circular-chart/chart-title.md +++ b/chart-sdk/flutter/circular-chart/chart-title.md @@ -1,17 +1,17 @@ --- layout: post -title: Chart title in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Chart title feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Chart title in Flutter Circular Chart | Syncfusion® +description: The chart title support in Flutter Circular Chart offers customizable titles with appearance settings to enhance context and visual presentation. platform: chart-sdk control: Chart documentation: ug --- -# Chart title in Flutter Circular Charts (SfCircularChart) +# Chart title in Flutter Circular Chart -You can define and customize the chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html) property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. +You can define and customize the chart title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html) property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the title text. -Following properties can be used to customize its appearance. +The following properties can be used to customize its appearance. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/backgroundColor.html) - used to change the background color. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/borderColor.html) - used to change the border color. @@ -25,7 +25,7 @@ Following properties can be used to customize its appearance. ### Text Alignment -You can align the title text content horizontally to the near, center or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html). +You can align the title text content horizontally to the near, center, or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html). {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/circular-chart/chart-types/doughnut-chart.md b/chart-sdk/flutter/circular-chart/chart-types/doughnut-chart.md index 030f223bc..94298cf67 100644 --- a/chart-sdk/flutter/circular-chart/chart-types/doughnut-chart.md +++ b/chart-sdk/flutter/circular-chart/chart-types/doughnut-chart.md @@ -1,20 +1,20 @@ --- layout: post -title: Doughnut Chart in Flutter Circular Charts | Syncfusion -description: Step-by-step guide to create and customize Doughnut Chart in Syncfusion Flutter Circular Charts—add, style, and configure doughnut series, and key features. +title: Doughnut Chart in Flutter Circular Chart | Syncfusion® +description: The doughnut chart support in Flutter Circular Chart offers customizable ring-shaped visualizations to display proportions and part-to-whole relationships. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Doughnut Chart (SfCircularChart) +# Doughnut Chart in Flutter Circular Chart -To create a Flutter doughnut chart quickly, you can check this video. +To create a Flutter doughnut chart quickly, you can watch this video. -To render a doughnut chart, create an instance of [`DoughnutSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/series.html) collection property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The following properties can be used to customize the appearance of doughnut segment: +To render a doughnut chart, create an instance of [`DoughnutSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/series.html) collection property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The following properties can be used to customize the appearance of a doughnut segment: * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. * [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. @@ -101,7 +101,7 @@ The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/late ## Doughnut with center elevation -You can use the Annotations property in charts, to provide center elevation text in doughnut charts as shown below: +You can use the annotations property in charts to provide center elevation text in doughnut charts, as shown below: {% tabs %} {% highlight dart %} @@ -150,7 +150,7 @@ You can use the Annotations property in charts, to provide center elevation text ## Doughnut with color mapping -You can use the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) property to provide different color mappings to the doughnut charts as shown below: +You can use the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) property to provide different color mappings to doughnut charts, as shown below: {% tabs %} {% highlight dart %} @@ -185,7 +185,7 @@ You can use the [`pointColorMapper`](https://pub.dev/documentation/syncfusion_fl ## Changing the doughnut size -You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property to change the diameter of the doughnut chart with respect to the plot area. The default value of this property is 80%. +You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/radius.html) property to change the diameter of the doughnut chart with respect to the plot area. The default value of this property is `80%`. {% tabs %} {% highlight dart hl_lines="13" %} @@ -219,7 +219,7 @@ You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_char ## Changing doughnut inner radius -You can change the inner radius of doughnut chart using the [`innerRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/innerRadius.html) property with respect to the plot area. The value ranges from 0% to 100%. +You can change the inner radius of the doughnut chart using the [`innerRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/innerRadius.html) property with respect to the plot area. The value ranges from `0%` to `100%`. {% tabs %} {% highlight dart hl_lines="13" %} @@ -362,7 +362,7 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts ## Grouping data points -The small segments in the doughnut chart can be grouped into **others** category using the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) and [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) properties of [`DoughnutSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html). The [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is used to specify the grouping type based on the actual data point value or by points length, and the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is used to set the limit to group data points into a single slice. The grouped segment is labeled as **Others** in legend and toggled as any other segment. The default value of the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is null, and the default value of [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is [`CircularChartGroupMode.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartGroupMode.html#point). +The small segments in the doughnut chart can be grouped into the **Others** category using the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) and [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) properties of [`DoughnutSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DoughnutSeries-class.html). The [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is used to specify the grouping type based on the actual data point value or the points length, and the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is used to set the limit for grouping data points into a single slice. The grouped segment is labeled as **Others** in the legend and toggled like any other segment. The default value of the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is `null`, and the default value of the [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is [`CircularChartGroupMode.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartGroupMode.html#point). {% tabs %} {% highlight dart hl_lines="13 14" %} diff --git a/chart-sdk/flutter/circular-chart/chart-types/pie-chart.md b/chart-sdk/flutter/circular-chart/chart-types/pie-chart.md index 582ffcc88..b056e2ce7 100644 --- a/chart-sdk/flutter/circular-chart/chart-types/pie-chart.md +++ b/chart-sdk/flutter/circular-chart/chart-types/pie-chart.md @@ -1,20 +1,20 @@ --- layout: post -title: Pie Chart in Flutter Circular Charts | Syncfusion -description: Step-by-step guide to create and customize Pie Chart in Syncfusion Flutter Circular Charts—add, style, and configure pie series, and key features. +title: Pie Chart in Flutter Circular Chart | Syncfusion® +description: The pie chart support in Flutter Circular Chart offers customizable slice-based visualizations to represent proportions and part-to-whole relationships. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Pie Chart (SfCircularChart) +# Pie Chart in Flutter Circular Chart -To create a Flutter pie chart quickly, you can check this video. +To create a Flutter pie chart quickly, you can watch this video. -To render a pie chart, create an instance of [`PieSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PieSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/series.html) collection property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The following properties can be used to customize the appearance of pie segment: +To render a pie chart, create an instance of [`PieSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PieSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/series.html) collection property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The following properties can be used to customize the appearance of a pie segment: * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. * [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. @@ -208,7 +208,7 @@ Using the [`explodeAll`](https://pub.dev/documentation/syncfusion_flutter_charts ## Grouping data points -The small segments in the pie chart can be grouped into **others** category using the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) and [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) properties of [`PieSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PieSeries-class.html). The [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property specifies the grouping type based on the actual data point value or by points length, and the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property sets the limit to group data points into a single slice. The grouped segment is labeled as **Others** in legend and toggled as any other segment. The default value of the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is null, and the default value of [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is [`CircularChartGroupMode.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartGroupMode.html#point). +The small segments in the pie chart can be grouped into the **Others** category using the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) and [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) properties of [`PieSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PieSeries-class.html). The [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property specifies the grouping type based on the actual data point value or the points length, and the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property sets the limit for grouping data points into a single slice. The grouped segment is labeled as **Others** in the legend and toggled like any other segment. The default value of the [`groupTo`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupTo.html) property is `null`, and the default value of the [`groupMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/groupMode.html) property is [`CircularChartGroupMode.point`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularChartGroupMode.html#point). {% tabs %} {% highlight dart hl_lines="12 14" %} @@ -243,7 +243,7 @@ The small segments in the pie chart can be grouped into **others** category usin ## Various radius for each slice -The [`pointRadiusMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/pointRadiusMapper.html) maps the field name, which will be considered for calculating the radius of the data points. +The [`pointRadiusMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/pointRadiusMapper.html) maps the field name that is considered when calculating the radius of the data points. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/circular-chart/chart-types/radial-bar-chart.md b/chart-sdk/flutter/circular-chart/chart-types/radial-bar-chart.md index ad2d00bc4..887d354ec 100644 --- a/chart-sdk/flutter/circular-chart/chart-types/radial-bar-chart.md +++ b/chart-sdk/flutter/circular-chart/chart-types/radial-bar-chart.md @@ -1,28 +1,28 @@ --- layout: post -title: Radial Bar Chart in Flutter Circular Charts | Syncfusion -description: Step-by-step guide to create and customize Radial Bar Chart in Syncfusion Flutter Circular Charts—add, style, and configure radial bar series, and key features. +title: Radial Bar Chart in Flutter Circular Chart | Syncfusion® +description: The radial bar chart support in Flutter Circular Chart offers customizable radial visuals to represent values, progress, and comparative data effectively. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Radial Bar Chart (SfCircularChart) +# Radial Bar Chart in Flutter Circular Chart -To create a Flutter radial bar chart quickly, you can check this video. +To create a Flutter radial bar chart quickly, you can watch this video. -The radial bar chart is used for showing the comparisons among the categories using the circular shapes. To render a radial bar chart, create an instance of [`RadialBarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries-class.html), and add to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/series.html) collection property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The following properties can be used to customize the appearance of radial bar segment: +The radial bar chart is used to show comparisons among categories using circular shapes. To render a radial bar chart, create an instance of [`RadialBarSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/series.html) collection property of [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html). The following properties can be used to customize the appearance of a radial bar segment: * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. * [`strokeWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. * [`strokeColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/borderColor.html) - changes the stroke color of the series. * [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) - maps the color for individual points from the data source. * [`gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/gap.html) - changes the spacing between two individual segments. The default value of spacing is 1%. -* [`maximumValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/maximumValue.html) - represents the entire span of an individual circle. The default value of the this property is null. +* [`maximumValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/maximumValue.html) - represents the entire span of an individual circle. The default value of this property is `null`. * [`pointShaderMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/pointShaderMapper.html) - maps the shader (gradient or image shader) for individual points from the data source. {% tabs %} @@ -100,7 +100,7 @@ You can use the [`radius`](https://pub.dev/documentation/syncfusion_flutter_char ## Changing the radial bar inner radius -You can change the inner radius of radial bar chart using the [`innerRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/innerRadius.html) property with respect to the plot area. The value ranges from 0% to 100%. +You can change the inner radius of the radial bar chart using the [`innerRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/innerRadius.html) property with respect to the plot area. The value ranges from `0%` to `100%`. {% tabs %} {% highlight dart hl_lines="13" %} @@ -131,7 +131,7 @@ You can change the inner radius of radial bar chart using the [`innerRadius`](ht ## Rounded corners -The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/cornerStyle.html) property specifies the corner type for radial bar chart. The corners can be customized using the [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#bothFlat), [`CornerStyle.bothCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#bothCurve), [`CornerStyle.startCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#startCurve), and [`CornerStyle.endCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#endCurve) options. The default value of this property is [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#bothFlat). +The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries/cornerStyle.html) property specifies the corner type for the radial bar chart. The corners can be customized using the [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#bothFlat), [`CornerStyle.bothCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#bothCurve), [`CornerStyle.startCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#startCurve), and [`CornerStyle.endCurve`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#endCurve) options. The default value of this property is [`CornerStyle.bothFlat`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CornerStyle.html#bothFlat). {% tabs %} {% highlight dart hl_lines="13" %} @@ -165,11 +165,11 @@ The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/late ## Track customization The radial bar series renders above the track area. The following properties are used to customize the appearance. -[`trackColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackColor.html) - changes the color of the track area. -[`trackBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackBorderColor.html) - changes the stroke color of the track area. -[`trackBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackBorderWidth.html) - changes the stroke width of the track area. -[`trackOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackOpacity.html) - specifies the opacity of the track area. -[`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/useSeriesColor.html) - uses the point color for filling the track area. +* [`trackColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackColor.html) - changes the color of the track area. +* [`trackBorderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackBorderColor.html) - changes the stroke color of the track area. +* [`trackBorderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackBorderWidth.html) - changes the stroke width of the track area. +* [`trackOpacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/trackOpacity.html) - specifies the opacity of the track area. +* [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/RadialBarSeries/useSeriesColor.html) - uses the point color for filling the track area. {% tabs %} {% highlight dart hl_lines="14 15" %} @@ -210,7 +210,7 @@ The radial bar series renders above the track area. The following properties are ## Rendering data labels -Data labels can be enabled using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). The appearance of label can be customized using the following properties: +Data labels can be enabled using the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property of [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). The appearance of the label can be customized using the following properties: * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - changes the label background color. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - changes the text color, size, font family, fontStyle, and font weight. diff --git a/chart-sdk/flutter/circular-chart/charts-type.md b/chart-sdk/flutter/circular-chart/charts-type.md index 5301eb87b..bf31467c5 100644 --- a/chart-sdk/flutter/circular-chart/charts-type.md +++ b/chart-sdk/flutter/circular-chart/charts-type.md @@ -1,15 +1,15 @@ --- layout: post -title: Chart Types in Flutter Circular Charts widget | Syncfusion -description: Learn here all about available chart types of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Chart Types in Flutter Circular Chart | Syncfusion® +description: The chart types support in Flutter Circular Chart offers pie, doughnut, radial bar charts for diverse data visualization needs. platform: chart-sdk control: Chart documentation: ug --- -# Chart Types in Flutter Circular Charts (SfCircularChart) +# Chart Types in Flutter Circular Chart -This page helps to navigate to the Chart types available in the Syncfusion® Flutter Circular Charts widgets. +This page helps you navigate to the chart types available in the Syncfusion® Flutter Circular Charts widgets. @@ -17,7 +17,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Pie Chart @@ -25,7 +25,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Doughnut Chart @@ -33,7 +33,7 @@ This page helps to navigate to the Chart types available in the Syncfusion& Radial Bar Chart
- Link + Link
- Link + Link
- Link + Link
diff --git a/chart-sdk/flutter/circular-chart/circular-series-customization.md b/chart-sdk/flutter/circular-chart/circular-series-customization.md index be549547f..edfcebf29 100644 --- a/chart-sdk/flutter/circular-chart/circular-series-customization.md +++ b/chart-sdk/flutter/circular-chart/circular-series-customization.md @@ -1,17 +1,17 @@ --- layout: post -title: Series Customization in Flutter Circular Charts | Syncfusion -description: Step-by-step guide to create and customize series in Syncfusion Flutter Circular Charts—add, style, and configure series, and key features. +title: Series Customization in Flutter Circular Chart | Syncfusion® +description: The series customization support in Flutter Circular Chart offers control over colors, borders, spacing, animations, and segment appearance. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Series customization (SfCircularChart) +# Series Customization in Flutter Circular Chart ## Animation -[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. +[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default. You can also control the duration of the animation using the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting the value to 0. {% tabs %} {% highlight dart hl_lines="14" %} @@ -43,7 +43,7 @@ documentation: ug ### Animation delay -The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. +The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes a millisecond value as input. By default, the series animates for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series begins to animate after the specified duration. Defaults to `0`. {% tabs %} {% highlight dart hl_lines="17" %} @@ -84,12 +84,12 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l ### Dynamic animation -[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) also provide the dynamic animation support for the series. The series can be dynamically added to the charts, it will animate by setting the timer value. when you set the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) value to 0, the series won't be animated. +[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) also provides dynamic animation support for the series. The series can be dynamically added to the chart, and it animates by setting the timer value. When you set the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) value to 0, the series is not animated. ## Color Palette -[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides support for color palette property called [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/palette.html) for the data points in the chart series. If the series color is not specified, then the series will be rendered with appropriate palette color. Ten colors are available by default. +[`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides support for a color palette property called [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/palette.html) for the data points in the chart series. If the series color is not specified, then the series is rendered with an appropriate palette color. Ten colors are available by default. {% tabs %} @@ -164,8 +164,7 @@ The [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts ## Gradient and image shader -The [`onCreateShader`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/onCreateShader.html) callback is used to fill the circular chart series data points with gradient and image shader. This callback is called once while rendering -the data points and legend. +The [`onCreateShader`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/onCreateShader.html) callback is used to fill the circular chart series data points with gradient and image shader. This callback is called once while rendering the data points and legend. >**Note**: All the data points of the circular chart are considered together as a single segment and the shader is applied commonly. @@ -540,7 +539,7 @@ The [`pointRenderMode`](https://pub.dev/documentation/syncfusion_flutter_charts/ ## Empty points The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). - +Data points that have null values are considered empty points. Empty data points are ignored and not plotted in the chart. By using the [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in a series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop), and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). The d {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/circular-chart/datalabel.md b/chart-sdk/flutter/circular-chart/datalabel.md index 66fe046ba..f5df5b5bf 100644 --- a/chart-sdk/flutter/circular-chart/datalabel.md +++ b/chart-sdk/flutter/circular-chart/datalabel.md @@ -1,15 +1,15 @@ --- layout: post -title: Flutter Circular Charts Data Label Guide | Syncfusion -description: Step-by-step guide to create and customize data labels in Syncfusion Flutter Circular Charts—add, style, and configure data labels, and key features. +title: Data Labels in Flutter Circular Chart | Syncfusion® +description: The data label support in Flutter Circular Chart offers customizable labels, smart positioning, and flexible formatting for clear data presentation. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Data label (SfCircularChart) +# Data Labels in Flutter Circular Chart -Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. +Data labels can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) property in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize their appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. @@ -64,7 +64,7 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// ## Formatting label content -Data label considers the format used in the Circular series by default. In the below code snippet, we have specified format for the data label in the [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelMapper.html) and you can see that the same format is applied to the data label. +Data labels consider the format used in the circular series by default. In the following code snippet, we have specified the format for the data label in the [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelMapper.html), and the same format is applied to the data label. {% tabs %} {% highlight dart %} @@ -107,7 +107,7 @@ Data label considers the format used in the Circular series by default. In the b ## Positioning the labels -The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Circular chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. +The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position circular chart data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle). By default, labels are positioned as [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto). You can move the labels horizontally and vertically using the OffsetX and OffsetY properties, respectively. The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the circular series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside). By default the label of circular chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) the series. @@ -147,7 +147,7 @@ The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/la ## Smart labels -This feature is used to arrange the data labels smartly and avoid the intersection when there is overlapping of labels. The enum property called the [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift) in [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is used to arrange the data labels smartly when labels get intersect. By default, the label intersection action property is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift). +This feature is used to arrange data labels smartly and avoid intersections when labels overlap. The enum property [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift) in [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is used to arrange data labels smartly when labels intersect. By default, the label intersection action property is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift). If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.shift`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#shift), then the overlapped labels will shift to outside the slices and arrange smartly. If the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) is [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) and the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) is [`LabelIntersectAction.hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LabelIntersectAction.html#hide), then the overlapped labels will be hidden. diff --git a/chart-sdk/flutter/circular-chart/export-circular-chart.md b/chart-sdk/flutter/circular-chart/export-circular-chart.md index 920afe3d8..de3be0aff 100644 --- a/chart-sdk/flutter/circular-chart/export-circular-chart.md +++ b/chart-sdk/flutter/circular-chart/export-circular-chart.md @@ -1,19 +1,19 @@ --- layout: post -title: Exporting in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Exporting feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Exporting in Flutter Circular Chart | Syncfusion® +description: The exporting support in Flutter Circular Chart offers image and document export options for easy sharing, reporting, and presentation. platform: chart-sdk control: Chart documentation: ug --- -# Exporting in Flutter Circular Charts (SfCircularChart) +# Exporting in Flutter Circular Chart [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) provides support to export the circular chart as a PNG image or as PDF document. ## Export image -To export the circular chart as a PNG image, we can get the image by calling [`toImage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChartState/toImage.html) method in repaint boundary. +To export the circular chart as a PNG image, you can get the image by calling the [`toImage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChartState/toImage.html) method on the repaint boundary. {% tabs %} {% highlight dart %} @@ -111,7 +111,7 @@ Similar to the above way, we can also export the rendered circular chart as a PD **Add dependency** -Add the following additional packages to the dependencies in your pubspec.yaml file. +Add the following additional packages to the dependencies in your pubspec.yaml file: {% highlight dart %} diff --git a/chart-sdk/flutter/circular-chart/getting-started.md b/chart-sdk/flutter/circular-chart/getting-started.md index ff1a1d2bd..61fe558ff 100644 --- a/chart-sdk/flutter/circular-chart/getting-started.md +++ b/chart-sdk/flutter/circular-chart/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with Flutter Circular Charts | Syncfusion -description: Step-by-step guide to set up Syncfusion Flutter Circular Charts—add dependencies, import, create SfCircularChart, and configure key features. +title: Getting Started with Flutter Circular Chart | Syncfusion® +description: Learn how to get started with Flutter Circular Chart provides step-by-step guidance to create, configure, and display interactive circular charts quickly. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Getting Started (SfCircularChart) +# Getting Started with Flutter Circular Chart This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart. -To get start quickly with our Flutter chart widget, you can check out this video. +To get started quickly with our Flutter chart widget, you can check out this video. @@ -22,7 +22,7 @@ Create a simple project using the instructions given in the [Getting Started wit **Add dependency** -Add the Syncfusion® [Flutter Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) dependency to your pub spec file. +Add the Syncfusion® [Flutter Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) dependency to your pubspec.yaml file. {% tabs %} {% highlight dart %} @@ -33,7 +33,7 @@ Add the Syncfusion® [Flutter Chart](https://www.syncfusion.com/fl {% endhighlight %} {% endtabs %} ->**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. +>**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion® Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. **Get packages** @@ -61,7 +61,7 @@ Import the following package in your Dart code. ## Initialize chart -Once the package has been imported, initialize the chart as a child of any widget. SfCircularChart can be used to render pie, doughnut and radial bar charts. Here, as we are rendering pie chart, initialize SfCircularChart widget as a child of Container widget. +Once the package has been imported, initialize the chart as a child of any widget. SfCircularChart can be used to render pie, doughnut and radial bar charts. Here, since we are rendering a pie chart, initialize the SfCircularChart widget as a child of a Container widget. {% tabs %} {% highlight dart hl_lines="7" %} @@ -85,7 +85,7 @@ Once the package has been imported, initialize the chart as a child of any widge ## Bind data source -Based on your data, initialize the series type. In the series, you need to map the data source and the fields for x and y data points. Here, pie series is rendered that is demonstrated in the following code snippet. +Based on your data, initialize the appropriate series type. In the series, you need to map the data source and the fields for x and y data points. Here, a pie series is rendered, as demonstrated in the following code snippet. {% tabs %} {% highlight dart %} @@ -127,7 +127,7 @@ Based on your data, initialize the series type. In the series, you need to map t ## Add title -You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet. +You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The chart title can be set as demonstrated in the following code snippet. {% tabs %} {% highlight dart hl_lines="10" %} @@ -213,7 +213,7 @@ You can add data labels to improve the readability of the chart using the [`data The legend provides information about the series rendered in the chart. -You can use legend in chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html). +You can enable the legend in the chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html). {% tabs %} {% highlight dart hl_lines="8" %} @@ -257,7 +257,7 @@ You can use legend in chart by setting the [`isVisible`](https://pub.dev/documen The tooltip is used when you cannot display information using the data labels due to space constraints. -The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for all the series whereas the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property in series is used to toggle the tooltip visibility of each series. The tooltip can be enabled as demonstrated in the following code snippet. +The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for all the series. The [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property in series is used to toggle the tooltip visibility of each series. The tooltip can be enabled as demonstrated in the following code snippet. {% tabs %} {% highlight dart hl_lines="5" %} diff --git a/chart-sdk/flutter/circular-chart/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/circular-chart/how-to/custom-widget-on-flutterflow.md index 29b1ef5f9..48c60699c 100644 --- a/chart-sdk/flutter/circular-chart/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/circular-chart/how-to/custom-widget-on-flutterflow.md @@ -1,17 +1,17 @@ --- layout: post -title: Circular Chart Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Circular Chart (SfCircularChart) widget in FlutterFlow. +title: How to add Syncfusion® Circular Chart in FlutterFlow | Syncfusion® +description: Add Syncfusion® Flutter Circular Chart in FlutterFlow to create compact, interactive charts that visualize trends and data patterns with ease. platform: chart-sdk control: Chart documentation: ug --- -# How to add Syncfusion® Circular Chart widget in FlutterFlow? +# How to add Syncfusion® Circular Chart in FlutterFlow ## Overview -[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfCircularChart widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). +[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our `SfCircularChart` widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). ### Create a new project @@ -19,35 +19,35 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Creating the custom widget -1. Navigate to the `Custom Code` section in the left side navigation menu. -2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. +1. Navigate to the `Custom Code` section in the left-side navigation menu. +2. Click the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. -4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +4. Click the `View Boilerplate Code` button on the right side, represented by the `[]` icon. +5. A popup appears with startup code; locate the ` Copy to Editor` button and click it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) ### Add Circular Chart widget as a dependency -1. Click on `+ Add Dependency`, a text editor will appear. -2. Navigate to [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. +1. Click `+ Add Dependency`; a text editor appears. +2. Navigate to [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) on [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. ![Version](how-to-section-images/copy-version.png) -3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. +3. Paste the copied dependency into the text editor, then click `Refresh` and `Save`. ->**Note**: The live version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The latest version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) has been migrated to the latest Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) ->**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. +>**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix from the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. ->**Note**: Since [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. +>**Note**: Since [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency by following the same steps mentioned above. ### Import the package 1. Navigate to the `Installing` tab on the [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) page. Under the `Import it` section, copy the package import statement. ![Package](how-to-section-images/copy-package.png) -2. Paste the copied import statement into the code editor and then `Save` it. +2. Paste the copied import statement into the code editor, and then `Save` it. ![Import](how-to-section-images/import-package-flutterflow.png) ### Add widget code snippet in code editor diff --git a/chart-sdk/flutter/circular-chart/legend.md b/chart-sdk/flutter/circular-chart/legend.md index dff9a52fd..41cf81a73 100644 --- a/chart-sdk/flutter/circular-chart/legend.md +++ b/chart-sdk/flutter/circular-chart/legend.md @@ -1,15 +1,15 @@ --- layout: post -title: Legend in Flutter Circular Charts | Syncfusion -description: Step-by-step guide to create and customize legend in Syncfusion Flutter Circular Charts—add, style, and configure legend, and key features. +title: Legend in Flutter Circular Chart | Syncfusion® +description: The legend support in Flutter Circular Chart offers customizable legend items, layouts, and positioning to improve chart readability. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts Legend (SfCircularChart) +# Legend in Flutter Circular Chart -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) contains list of data points in chart. The information provided in each legend item helps to identify the corresponding data points in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) contains the list of data points in the chart. The information provided in each legend item helps identify the corresponding data points in the chart. {% tabs %} {% highlight dart hl_lines="13" %} @@ -52,7 +52,7 @@ The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch ## Customizing legend -The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`CircularSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries-class.html) is used to define the label for the corresponding series legend item and for [`CircularSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries-class.html) type chart by default values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) will be displayed. The appearance of the label can be customized using the below properties. +The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`CircularSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries-class.html) is used to define the label for the corresponding series legend item, and for [`CircularSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeries-class.html) chart types, the values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) are displayed by default. The appearance of the label can be customized using the following properties. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderColor.html) - used to change the stroke color of the legend shape. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/backgroundColor.html) - used to change the background color of legend shape. @@ -151,7 +151,7 @@ The following properties can be used to define and customize the [`title`](https ## Toggles the series visibility -You can control the visibility of the series by tapping the legend item. You can enable this feature by enabling the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property. +You can control the visibility of the series by tapping the legend item. You can enable this feature by setting the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property to true. {% tabs %} {% highlight dart hl_lines="10" %} @@ -185,7 +185,7 @@ You can control the visibility of the series by tapping the legend item. You can ## Legend visibility -The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) is used to toggle the visibility of legend. +The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart/legend.html) is used to toggle the visibility of the legend. {% tabs %} {% highlight dart hl_lines="9" %} @@ -218,7 +218,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ## Legend overflow -The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). +The legend items can be placed in multiple rows, or scrolling can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if the total legend items exceed the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). {% tabs %} {% highlight dart hl_lines="10" %} @@ -255,7 +255,7 @@ The legend items can be placed in multiple rows or scroll can be enabled using t ## Positioning the legend -You can change the position of the legend inside the chart. The following properties are used to customize the position of legend. [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto) position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. +You can change the position of the legend inside the chart. The following properties are used to customize the position of the legend. [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto) will place the legend at the right if the chart's width is greater than its height. Otherwise, the legend will be placed at the bottom. * [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto). * [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is [`LegendItemOrientation.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#auto). Also you can set this to [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#horizontal) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#vertical). diff --git a/chart-sdk/flutter/circular-chart/methods.md b/chart-sdk/flutter/circular-chart/methods.md index 16f2df1cf..0a3f25423 100644 --- a/chart-sdk/flutter/circular-chart/methods.md +++ b/chart-sdk/flutter/circular-chart/methods.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Flutter Circular Charts widget | Syncfusion -description: Learn here all about available Methods of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Methods in Flutter Circular Chart | Syncfusion® +description: The methods in Flutter Circular Chart documentation provide publicly accessible APIs for performing chart-related operations programmatically. platform: chart-sdk control: Chart documentation: ug --- -# Methods in Flutter Circular Charts (SfCircularChart) +# Methods in Flutter Circular Chart ## Methods in tooltipBehavior @@ -73,7 +73,7 @@ The [`show`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/char The [`showByIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByIndex.html) method is used to display the tooltip at the specified series and point index. -The below mentioned arguments are given to the [`showByIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByIndex.html) method: +The following arguments are given to the [`showByIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByIndex.html) method: [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/seriesIndex.html) - index of the series for which the pointIndex is specified. @@ -136,7 +136,7 @@ The below mentioned arguments are given to the [`showByIndex`](https://pub.dev/d The [`showByPixel`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/showByPixel.html) method is used to display the tooltip at the specified x and y-positions. -x & y - logical pixel values to position the tooltip. +x and y are logical pixel values used to position the tooltip. {% tabs %} {% highlight dart %} @@ -192,7 +192,7 @@ x & y - logical pixel values to position the tooltip. ### Hide method in tooltipBehavior -The [`hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/hide.html) method is used to hide the displaying tooltip programmatically. +The [`hide`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/hide.html) method is used to hide the displayed tooltip programmatically. {% tabs %} {% highlight dart %} @@ -313,9 +313,9 @@ The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts ## PixelToPoint -Converts logical pixel value to the data point value. +Converts a logical pixel value to the data point value. -The [`pixelToPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeriesController/pixelToPoint.html) method takes logical pixel value as input and returns a chart data point. +The [`pixelToPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CircularSeriesController/pixelToPoint.html) method takes a logical pixel value as input and returns a chart data point. >**Note**: The method will return the center value of the segment. diff --git a/chart-sdk/flutter/circular-chart/overview.md b/chart-sdk/flutter/circular-chart/overview.md index 7d18f6887..aca03acc4 100644 --- a/chart-sdk/flutter/circular-chart/overview.md +++ b/chart-sdk/flutter/circular-chart/overview.md @@ -1,32 +1,32 @@ --- layout: post -title: About Flutter Circular Charts widget | Syncfusion -description: Learn here all about introduction of Syncfusion Flutter Circular Charts (SfCircularChart) widget, its features, and more. +title: About Syncfusion® Flutter Circular Chart widget | Syncfusion® +description: Learn here all about introduction of Syncfusion® Flutter Circular Charts widget, its features, and more details. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Circular Charts (SfCircularChart) Overview +# About Syncfusion® Flutter Circular Chart -Syncfusion® Flutter Circular Charts (SfCircularChart) widget is written natively in Dart for creating beautiful and high-performance Circular charts, which are used to craft high-quality applications using Flutter. +Syncfusion® Flutter Circular Charts (SfCircularChart) widget is written natively in Dart for creating beautiful and high-performance circular charts, which are used to build high-quality Flutter applications. ![Overview Flutter chart](images/overview/overview.png) -To get started quickly with our Flutter circular chart widget, you can check out this video. +To get started quickly with our Flutter circular chart widget, you can watch this video. ## Key Features -* **Chart types** - Supports 3 different series types such as [`pie`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pie-chart), [`doughnut`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/doughnut-chart), and [`radial bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/radial-bar-chart) series. Each type represents data in a unique style. These charts are user-friendly and provide enhanced UI visualization. +* **Chart types** - Supports three series types: [`pie`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/pie-chart), [`doughnut`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/doughnut-chart), and [`radial bar`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/radial-bar-chart). Each type represents data in a unique style. These charts are user-friendly and provide enhanced UI visualization. ![Chart Types](images/overview/chart_types_circular.png) -* **User interaction** - The end-user experience is greatly enhanced by including the user interaction features such as callbacks, selection, tooltip, and explode in chart. +* **User interaction** - The end-user experience is enhanced by user interaction features such as callbacks, selection, tooltip, and explode in the chart. -* **Legends** - Display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if an item exceeds the available bounds. +* **Legends** - Display additional information about the chart series. The chart legend can also be used to collapse the series. Legends can be wrapped or scrolled if an item exceeds the available bounds. ![Legend](images/overview/chart_legend_circular.png) diff --git a/chart-sdk/flutter/circular-chart/right-to-left.md b/chart-sdk/flutter/circular-chart/right-to-left.md index d17fbfb71..50c686e57 100644 --- a/chart-sdk/flutter/circular-chart/right-to-left.md +++ b/chart-sdk/flutter/circular-chart/right-to-left.md @@ -1,15 +1,15 @@ --- layout: post -title: RTL support in Flutter Circular Charts widget | Syncfusion -description: Learn here about the RTL support in Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: RTL support in Flutter Circular Chart | Syncfusion® +description: The RTL support in Flutter Circular Chart offers right-to-left rendering for chart elements, improving usability in RTL language applications. platform: chart-sdk control: Chart documentation: ug --- -# Right To Left (RTL) in Flutter Circular Chart (SfCircularChart) +# RTL support in Flutter Circular Chart -Circular chart supports right to left rendering. But series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. +Circular charts support right-to-left rendering. However, series and other chart elements render the same for both LTR and RTL, except for the legend and tooltip. ## RTL rendering ways @@ -17,7 +17,7 @@ Right to left rendering can be switched in the following ways: ### Wrapping the SfCircularChart with Directionality widget -To change the rendering direction from right to left, you can wrap the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). +To change the rendering direction from right to left, you can wrap the [`SfCircularChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCircularChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} {% highlight dart hl_lines="5" %} diff --git a/chart-sdk/flutter/circular-chart/selection.md b/chart-sdk/flutter/circular-chart/selection.md index 3b9817cde..9ad4eadc0 100644 --- a/chart-sdk/flutter/circular-chart/selection.md +++ b/chart-sdk/flutter/circular-chart/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Selection feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Selection in Flutter Circular Chart | Syncfusion® +description: The selection support in Flutter Circular Chart offers interactive point and segment selection with customizable styles to highlight data insights. platform: chart-sdk control: Chart documentation: ug --- -# Selection in Flutter Circular Charts (SfCircularChart) +# Selection in Flutter Circular Chart -The selection feature in chart lets you select a segment in a series or the series itself. This features allows you to select either individual or cluster of segments in the chart series. +The selection feature in the chart lets you select a segment in a series or the series itself. This feature allows you to select either an individual segment or a cluster of segments in the chart series. {% tabs %} {% highlight dart hl_lines="7" %} @@ -51,7 +51,7 @@ The selection feature in chart lets you select a segment in a series or the seri ## Customizing the segments -You can customize the segments using the below properties. +You can customize the segments using the following properties. * [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedColor.html) - used to change the background color of selected segment. * [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedColor.html) - used to change the background color of unselected segment. @@ -127,8 +127,8 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub ## Toggle selection -You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property `true` or `false`. If set to true, deselection will be performed else the point will not get deselected. -This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. +You can decide whether to deselect the selected data point or series, or keep it selected when interacted with again, by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property to `true` or `false`. If set to `true`, deselection is performed; otherwise, the point is not deselected. +This works even while calling public methods, in various selection modes, with multi-selection, and during dynamic changes. Defaults to `true`. {% tabs %} @@ -170,7 +170,7 @@ Defaults to `true`. ![Toggle selection](images/selection/deselection.gif) -Also refer [`selection event`](https://help.syncfusion.com/flutter/circular-charts/callbacks#onselectionchanged) for customizing the selection further. +Also refer [`selection event`](https://help.syncfusion.com/chart-sdk/flutter/circular-chart/callbacks#onselectionchanged) for customizing the selection further. #### See Also diff --git a/chart-sdk/flutter/circular-chart/tooltip.md b/chart-sdk/flutter/circular-chart/tooltip.md index 332e0ca36..307a7b8ac 100644 --- a/chart-sdk/flutter/circular-chart/tooltip.md +++ b/chart-sdk/flutter/circular-chart/tooltip.md @@ -1,17 +1,17 @@ --- layout: post -title: Tooltip in Flutter Circular Charts widget | Syncfusion -description: Learn here all about Tooltip feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more. +title: Tooltip in Flutter Circular Chart | Syncfusion® +description: The tooltip support in Flutter Circular Chart offers interactive data insights with customizable content and appearance for better user engagement. platform: chart-sdk control: Chart documentation: ug --- -# Tooltip in Flutter Circular Charts (SfCircularChart) +# Tooltip in Flutter Circular Chart -Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as `true`. +The chart provides tooltip support for all the series. It is used to show information about the segment when you tap the segment. To enable the tooltip, you need to set the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property to `true`. -The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. +The tooltip state is preserved during device orientation changes and browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000 ms, and you change the orientation of your device from portrait to landscape after 5,000 ms of tooltip display, the tooltip is displayed for the next 5,000 ms in landscape mode before disappearing. {% tabs %} {% highlight dart hl_lines="5" %} diff --git a/chart-sdk/flutter/funnel-chart/accessibility.md b/chart-sdk/flutter/funnel-chart/accessibility.md index 9ee1af87e..8978e7a65 100644 --- a/chart-sdk/flutter/funnel-chart/accessibility.md +++ b/chart-sdk/flutter/funnel-chart/accessibility.md @@ -1,40 +1,40 @@ --- layout: post -title: Accessibility in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Accessibility feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Accessibility in Flutter Funnel Chart | Syncfusion® +description: The accessibility support in Flutter Funnel Chart offers sufficient contrast, large fonts, and tappable targets for an inclusive user experience. platform: chart-sdk control: Chart documentation: ug --- -# Accessibility in Flutter Funnel Charts (SfFunnelChart) +# Accessibility in Flutter Funnel Chart ## Sufficient contrast The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. -The customization of colors can be done for the following chart elements. -* [Chart title](https://help.syncfusion.com/flutter/funnel-chart/chart-title) -* [Palette for data points](https://help.syncfusion.com/flutter/funnel-chart/funnel-customization#applying-palette-color) -* [Color mapping for data points](https://help.syncfusion.com/flutter/funnel-chart/series-customization#color-mapping-for-data-points) -* [Data label](https://help.syncfusion.com/flutter/funnel-chart/datalabel) -* [Legend title](https://help.syncfusion.com/flutter/funnel-chart/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/funnel-chart/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/funnel-chart/tooltip#customizing-the-appearance) -* [Selected segments](https://help.syncfusion.com/flutter/funnel-chart/selection#customizing-the-segments) +You can customize colors for the following chart elements. +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/chart-title) +* [Palette for data points](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/funnel-customization#applying-palette-color) +* [Color mapping for data points](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/series-customization#color-mapping-for-data-points) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/datalabel) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/tooltip#customizing-the-appearance) +* [Selected segments](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/selection#customizing-the-segments) ## Large fonts -The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). And also it allows to change the font size of all elements in Funnel chart. -* [Chart title](https://help.syncfusion.com/flutter/funnel-chart/chart-title) -* [Data label](https://help.syncfusion.com/flutter/funnel-chart/datalabel) -* [Legend title](https://help.syncfusion.com/flutter/funnel-chart/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/funnel-chart/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/funnel-chart/tooltip#customizing-the-appearance) +The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) font size can be adjusted automatically based on device settings, and the font size is scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the funnel chart. +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/chart-title) +* [Data labels](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/datalabel) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/tooltip#customizing-the-appearance) ## Easily tappable targets -The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides callback support to notify when tapping on the essential elements in the chart. -* [Data points](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onpointtap) -* [Data labels](https://help.syncfusion.com/flutter/funnel-chart/callbacks#ondatalabeltapped) -* [Legend](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onlegendtapped) +The [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides callback support to notify when essential chart elements are tapped. +* [Data points](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/callbacks#onpointtap) +* [Data labels](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/callbacks#ondatalabeltapped) +* [Legend](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/callbacks#onlegendtapped) diff --git a/chart-sdk/flutter/funnel-chart/callbacks.md b/chart-sdk/flutter/funnel-chart/callbacks.md index 56af03f00..6125b3474 100644 --- a/chart-sdk/flutter/funnel-chart/callbacks.md +++ b/chart-sdk/flutter/funnel-chart/callbacks.md @@ -1,19 +1,19 @@ --- layout: post -title: Callbacks in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Callbacks feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Callbacks in Flutter Funnel Chart | Syncfusion® +description: The callback support in Flutter Funnel Chart offers events for selection, legend, data labels, tooltips, and rendering to enable interactive experiences. platform: chart-sdk control: Chart documentation: ug --- -# Callbacks in Flutter Funnel Chart (SfFunnelChart) +# Callbacks in Flutter Funnel Chart -The below Callbacks are for Funnel chart. +The following callbacks are available for the Funnel chart. ## onLegendItemRender -Triggers when the legend item is rendering. Here, you can customize the legend's text, and shape. The [`onLegendItemRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onLegendItemRender.html) Callback contains the following arguments. +Triggers when the legend item is rendered. Here, you can customize the legend's text and shape. The [`onLegendItemRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onLegendItemRender.html) callback contains the following arguments. * [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/text.html) - specifies the content of the legend. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendRenderArgs/pointIndex.html) - specifies the current point index that is applicable for Funnel chart type alone. @@ -45,7 +45,7 @@ Triggers when the legend item is rendering. Here, you can customize the legend's ## onTooltipRender -Triggers while tooltip is rendering. Here, you can customize the text, header, x and y-positions. The [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onTooltipRender.html) Callback contains the following arguments. +Triggers while the tooltip is rendering. Here, you can customize the text, header, and x and y positions. The [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onTooltipRender.html) callback contains the following arguments. * [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/text.html) - specifies the content of the tooltip. * [`header`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipArgs/header.html) - specifies the header content of the tooltip. @@ -87,7 +87,7 @@ Triggers while tooltip is rendering. Here, you can customize the text, header, x ## onDataLabelRender -Triggers when data label is rendering. Text and text styles such as color, font size, and font weight can be customized. The [`onDataLabelRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelRender.html) Callback contains the following arguments. +Triggers when the data label is rendered. Text and text styles such as color, font size, and font weight can be customized. The [`onDataLabelRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelRender.html) callback contains the following arguments. * [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/text.html) - specifies the content of the data label. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelRenderArgs/textStyle.html) - used to change the text color, size, font family, font style, and font weight. @@ -123,7 +123,7 @@ Triggers when data label is rendering. Text and text styles such as color, font ## onLegendTapped -Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onLegendTapped.html) Callback contains the following arguments. +Triggers when the legend item is tapped. The [`onLegendTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onLegendTapped.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendTapArgs/pointIndex.html) - specifies the current point index that is applicable for Funnel series. @@ -153,7 +153,7 @@ Triggers when tapping the legend item. The [`onLegendTapped`](https://pub.dev/do ## onSelectionChanged -Triggers while selection changes. Here you can customize the selectedColor, unselectedColor, selectedBorderColor, selectedBorderWidth, unselectedBorderColor, and unselectedBorderWidth properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onSelectionChanged.html) Callback contains the following arguments. +Triggers while selection changes. Here, you can customize the `selectedColor`, `unselectedColor`, `selectedBorderColor`, `selectedBorderWidth`, `unselectedBorderColor`, and `unselectedBorderWidth` properties. The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onSelectionChanged.html) callback contains the following arguments. * [`seriesRenderer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesRenderer.html) - specifies current series. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - specifies the current series index. @@ -201,7 +201,7 @@ Triggers while selection changes. Here you can customize the selectedColor, unse ## onDataLabelTapped -Triggers when tapping on the data label of the data point in the series. The [`onDataLabelTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelTapped.html) Callback contains the following arguments. +Triggers when the data label of the data point in the series is tapped. The [`onDataLabelTapped`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onDataLabelTapped.html) callback contains the following arguments. * [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/position.html) - specifies the position of the tapped data label in logical pixels. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/seriesIndex.html) - Specifies the series index of the tapped data label. @@ -210,7 +210,7 @@ Triggers when tapping on the data label of the data point in the series. The [`o * [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/dataLabelSettings.html) - to get the data label customization options specified in that particular series. * [`viewportPointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelTapDetails/viewportPointIndex.html) - to get the viewport index value of the tapped data label. ->**Note**: This callback will not be called, when the builder is specified for data label (data label template). For this case, custom widget specified in the [`DataLabelSettings.builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property can be wrapped using the [`GestureDetector`](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html) and this functionality can be achieved in the application level. +>**Note**: This callback will not be called when the builder is specified for the data label (data label template). In this case, the custom widget specified in the [`DataLabelSettings.builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/builder.html) property can be wrapped using the [`GestureDetector`](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html), and this functionality can be achieved at the application level. {% tabs %} {% highlight dart %} @@ -237,7 +237,7 @@ Triggers when tapping on the data label of the data point in the series. The [`o ## onPointTap -Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html) callback contains the following arguments. +Triggers when the series point is tapped. The [`onPointTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -268,7 +268,7 @@ Triggers when tapping on the series point. The [`onPointTap`](https://pub.dev/do ## onPointDoubleTap -Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointDoubleTap.html) callback contains the following arguments. +Triggers when the series point is double-tapped. The [`onPointDoubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointDoubleTap.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. @@ -299,7 +299,7 @@ Triggers when double-tap the series point. The [`onPointDoubleTap`](https://pub. ## onPointLongPress -Triggers when long press on the series point. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointLongPress.html) callback contains the following arguments. +Triggers when the series point is long-pressed. The [`onPointLongPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/onPointLongPress.html) callback contains the following arguments. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/seriesIndex.html) - specifies the current series index. * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartPointDetails/pointIndex.html) - specifies the current point index. diff --git a/chart-sdk/flutter/funnel-chart/chart-appearance.md b/chart-sdk/flutter/funnel-chart/chart-appearance.md index 1bb68e23c..cae9996e2 100644 --- a/chart-sdk/flutter/funnel-chart/chart-appearance.md +++ b/chart-sdk/flutter/funnel-chart/chart-appearance.md @@ -1,17 +1,17 @@ --- layout: post -title: Appearance customization in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Appearance customization of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Appearance customization in Flutter Funnel Chart | Syncfusion® +description: The appearance customization support in Flutter Funnel Chart offers chart sizing, margins, and chart area settings for flexible visual design. platform: chart-sdk control: Chart documentation: ug --- -# Appearance customization in Flutter Funnel Chart (SfFunnelChart) +# Appearance customization in Flutter Funnel Chart ## Chart sizing -Chart renders based on the parent widget size. If you need the chart to be rendered in specific size, then set the size(width/height) to the parent widget. +The chart renders based on the parent widget's size. If you need the chart to be rendered in a specific size, set the width and height on the parent widget. {% tabs %} {% highlight dart hl_lines="7 8" %} @@ -36,7 +36,7 @@ Chart renders based on the parent widget size. If you need the chart to be rende ## Chart margin -Margin to the chart can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/margin.html) property. +The chart margin can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/margin.html) property. {% tabs %} {% highlight dart hl_lines="20" %} @@ -59,7 +59,7 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume child: SfFunnelChart( borderColor: Colors.red, borderWidth: 2, - // Sets 15 logical pixels as margin for all the 4 sides. + // Sets 15 logical pixels as margin for all four sides. margin: EdgeInsets.all(15), series: FunnelSeries( dataSource: chartData, @@ -81,7 +81,7 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume ## Chart area customization -You can customize the area of the chart using the below properties. +You can customize the chart area using the following properties. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/backgroundColor.html) - used to change the chart area background color. * [`backgroundImage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/backgroundImage.html) - used to set the image path. diff --git a/chart-sdk/flutter/funnel-chart/chart-title.md b/chart-sdk/flutter/funnel-chart/chart-title.md index 3e625bf17..707df3670 100644 --- a/chart-sdk/flutter/funnel-chart/chart-title.md +++ b/chart-sdk/flutter/funnel-chart/chart-title.md @@ -1,7 +1,7 @@ --- layout: post -title: Chart title in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Chart title feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Chart title in Flutter Funnel Chart widget | Syncfusion® +description: The chart title support in Flutter Funnel Chart widget offers customizable titles with appearance settings to enhance context and visual presentation. platform: chart-sdk control: Chart documentation: ug @@ -9,14 +9,14 @@ documentation: ug # Chart title in Flutter Funnel Chart (SfFunnelChart) -You can define and customize the Chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. +You can define and customize the chart title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the title text. Following properties can be used to customize its appearance. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/backgroundColor.html) - used to change the background color. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/borderColor.html) - used to change the border color. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/borderWidth.html) - used to change the border width. -* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/textStyle.html) - used to change the text color, size, font family, fontStyle, and font weight. +* [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/textStyle.html) - used to change the text color, size, font family, font style, and font weight. * [`color`](https://api.flutter.dev/flutter/painting/TextStyle/color.html) - used to change the color of the text. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for chart title. * [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the chart title. @@ -24,7 +24,7 @@ Following properties can be used to customize its appearance. ### Title Alignment -You can align the title text content horizontally to the near, center or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html). +You can align the title text horizontally to the near, center, or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html). {% tabs %} {% highlight dart %} @@ -49,7 +49,7 @@ You can align the title text content horizontally to the near, center or far of fontSize: 14, ) ), - // Initialize category axis + // Initialize the chart series series: FunnelSeries( dataSource: [ // Bind data source diff --git a/chart-sdk/flutter/funnel-chart/datalabel.md b/chart-sdk/flutter/funnel-chart/datalabel.md index 85c46e209..7625956f8 100644 --- a/chart-sdk/flutter/funnel-chart/datalabel.md +++ b/chart-sdk/flutter/funnel-chart/datalabel.md @@ -1,31 +1,31 @@ --- layout: post -title: Data label in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Data label feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Data label in Flutter Funnel Chart | Syncfusion® +description: The data label support in Flutter Funnel Chart offers customizable labels, smart positioning, and overflow handling for clear data presentation. platform: chart-sdk control: Chart documentation: ug --- -# Data label in Flutter Funnel Chart (SfFunnelChart) +# Data label in Flutter Funnel Chart -Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. +Data labels can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. * [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the data label color. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. * [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the data label. * [`fontWeight`](https://api.flutter.dev/flutter/painting/TextStyle/fontWeight.html) - used to change the font weight for the data label. * [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the data label. * [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/margin.html) - used to change the margin size for data labels. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/opacity.html) - used to control the transparency of the data label. -* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Funnel data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle). +* [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) - used to align the Funnel data label positions. The available options to customize the positions are [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle). * [`borderRadius`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderRadius.html) - used to add the rounded corners to the data label shape. -* [`angle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/angle.html) - used to rotate the labels. +* [`angle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/angle.html) - used to rotate the labels. {% tabs %} {% highlight dart hl_lines="8" %} @@ -70,9 +70,9 @@ Data label can be added to a chart series by enabling the [`isVisible`](https:// ## Positioning the labels -The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Funnel chart type data labels at [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer) and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle) position of the actual data point position. By default, labels are [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto) positioned. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively. +The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Funnel chart data labels at the [`ChartDataLabelAlignment.top`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#top), [`ChartDataLabelAlignment.bottom`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#bottom), [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto), [`ChartDataLabelAlignment.outer`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#outer), and [`ChartDataLabelAlignment.middle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#middle) positions relative to the actual data point. By default, labels are positioned at [`ChartDataLabelAlignment.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelAlignment.html#auto). You can move the labels horizontally and vertically using the OffsetX and OffsetY properties respectively. -The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the Funnel series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside). By default the label of Funnel chart is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) the series. +The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to place the Funnel series data labels either [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) or [`ChartDataLabelPosition.outside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#outside). By default, the Funnel chart label is placed [`ChartDataLabelPosition.inside`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartDataLabelPosition.html#inside) the series. {% tabs %} {% highlight dart hl_lines="14" %} @@ -104,11 +104,11 @@ The [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/la ![Data label position](images/datalabel/datalabel_position.png) ->**Note**: The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Funnel chart labels whereas [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to position the Funnel chart labels. +>**Note**: The [`labelAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelAlignment.html) property is used to position the Funnel chart labels, whereas the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelPosition.html) property is used to position the Funnel chart labels. ## Apply series color -The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/useSeriesColor.html) property is used to apply the series color to background color of the data labels. The default value of this property is `false`. +The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/useSeriesColor.html) property is used to apply the series color to the background color of the data labels. The default value of this property is `false`. {% tabs %} {% highlight dart hl_lines="16" %} @@ -144,7 +144,7 @@ The [`useSeriesColor`](https://pub.dev/documentation/syncfusion_flutter_charts/l ## Hide data label for 0 value -Data label and its connector line in the Funnel charts for the point value 0 can be hidden using the [`showZeroValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/showZeroValue.html) property. This defaults to `true`. +Data labels and their connector lines in the Funnel chart for points with a value of 0 can be hidden using the [`showZeroValue`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/showZeroValue.html) property. This defaults to `true`. {% tabs %} {% highlight dart hl_lines="17" %} @@ -180,17 +180,17 @@ Data label and its connector line in the Funnel charts for the point value 0 can ## Data label saturation color -If the user didn't provide text color to the data label, then by default, the saturation color is applied to the data label text. i.e., if the data points background color intensity is dark, then the data label will render in white color (#FFFFFF) and if the data points background color intensity is light, data label will render in black color (#000000). +If the user doesn't provide a text color for the data label, then the saturation color is applied to the data label text by default. That is, if the data point background color intensity is dark, the data label will render in white color (#FFFFFF), and if the data point background color intensity is light, the data label will render in black color (#000000). ![label_saturation](images/datalabel/funnel_saturation.png) ## Overflow mode -Action on data labels when it’s overflowing from its region area. The overflowing data label rendering behavior can be changed based on this. If [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) property is set to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none) then the [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes the priority, else [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) takes the priority. +The action for data labels when they overflow their region can be changed based on this property. If the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) property is set to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none), then [`labelIntersectAction`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/labelIntersectAction.html) takes priority; otherwise, [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/overflowMode.html) takes priority. -Defaults to [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none). +The default is [`OverflowMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/OverflowMode.html#none). ->**Note**: This is applicable for pie, doughnut, pyramid, and funnel series types alone. +>**Note**: This is applicable only to pie, doughnut, pyramid, and funnel series types. {% tabs %} {% highlight dart hl_lines="7" %} diff --git a/chart-sdk/flutter/funnel-chart/export-funnel-chart.md b/chart-sdk/flutter/funnel-chart/export-funnel-chart.md index a69182487..eb1e0dd08 100644 --- a/chart-sdk/flutter/funnel-chart/export-funnel-chart.md +++ b/chart-sdk/flutter/funnel-chart/export-funnel-chart.md @@ -1,19 +1,19 @@ --- layout: post -title: Exporting in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Exporting feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Exporting in Flutter Funnel Chart | Syncfusion® +description: The exporting support in Flutter Funnel Chart offers image and document export options for easy sharing, reporting, and presentation. platform: chart-sdk control: Chart documentation: ug --- -# Exporting in Flutter Funnel Chart (SfFunnelChart) +# Exporting in Flutter Funnel Chart -[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides support to export the funnel chart as a PNG image or as a PDF document. +[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides support for exporting the funnel chart as a PNG image or as a PDF document. ## Export image -To export the funnel chart as a PNG image, we can get the image by calling [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method in repaint boundary. +To export the funnel chart as a PNG image, you can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method on the repaint boundary. {% tabs %} {% highlight dart %} @@ -136,7 +136,7 @@ Add the following additional packages to the dependencies in your pubspec.yaml f {% endhighlight %} -Include the following code snippet in the main.dart file of your flutter application to export the rendered Funnel chart as a PDF document. +Include the following code snippet in the main.dart file of your Flutter application to export the rendered Funnel chart as a PDF document. {% tabs %} {% highlight dart %} @@ -152,7 +152,7 @@ Include the following code snippet in the main.dart file of your flutter applica /// Chart import. import 'package:syncfusion_flutter_charts/charts.dart'; - /// Pdf import. + /// PDF import. import 'package:syncfusion_flutter_pdf/pdf.dart'; @@ -228,15 +228,15 @@ Include the following code snippet in the main.dart file of your flutter applica bitmap, Rect.fromLTWH(0, 0, pageSize.width, pageSize.height)); final List bytes = document.saveSync(); document.dispose(); - //Get external storage directory + // Get external storage directory final Directory directory = await getApplicationSupportDirectory(); - //Get directory path + // Get directory path final String path = directory.path; - //Create an empty file to write PDF data + // Create an empty file to write PDF data File file = File('$path/Output.pdf'); - //Write PDF bytes data + // Write PDF bytes data await file.writeAsBytes(bytes, flush: true); - //Open the PDF document in mobile + // Open the PDF document on mobile OpenFile.open('$path/Output.pdf'); } @@ -258,4 +258,4 @@ Include the following code snippet in the main.dart file of your flutter applica {% endhighlight %} {% endtabs %} - ![pdf_export](images/export-funnel-chart/pdf_view.png) \ No newline at end of file +![pdf_export](images/export-funnel-chart/pdf_view.png) \ No newline at end of file diff --git a/chart-sdk/flutter/funnel-chart/funnel-customization.md b/chart-sdk/flutter/funnel-chart/funnel-customization.md index 0676177eb..eaa852ad9 100644 --- a/chart-sdk/flutter/funnel-chart/funnel-customization.md +++ b/chart-sdk/flutter/funnel-chart/funnel-customization.md @@ -1,20 +1,20 @@ --- layout: post -title: Customization in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Customization of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Customization in Flutter Funnel Chart | Syncfusion® +description: The customization support in Flutter Funnel Chart offers control over funnel size, neck size, segment gaps, explode behavior, and palette colors. platform: chart-sdk control: Chart documentation: ug --- -# Customization in Flutter Funnel Chart (SfFunnelChart) +# Customization in Flutter Funnel Chart -To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/series.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The following properties are used to customize the appearance of a funnel segment: +To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/series.html) property of [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html). The following properties are used to customize the appearance of a funnel segment: * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/opacity.html) - controls the transparency of the chart series. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/borderWidth.html) - changes the stroke width of the series. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/borderColor.html) - changes the stroke color of the series. -* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) - Maps the color from data source. +* [`pointColorMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/pointColorMapper.html) - maps the color from the data source. {% tabs %} {% highlight dart %} @@ -32,7 +32,7 @@ To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev ChartData('Soybeans', 446), ChartData('Black beans', 341), ChartData('Mushrooms', 296), - ChartData('Avacado', 160), + ChartData('Avocado', 160), ], xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y) @@ -44,8 +44,8 @@ To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev class ChartData { ChartData(this.x, this.y); - final String x; - final double y; + final String x; + final double y; } {% endhighlight %} @@ -55,7 +55,7 @@ To render a funnel chart, create an instance of [`FunnelSeries`](https://pub.dev ## Changing funnel size -You can modify the size of funnel series using the [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/width.html) properties. It ranges from 0% to 100%. +You can modify the size of the funnel series using the [`height`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/width.html) properties. It ranges from 0% to 100%. {% tabs %} {% highlight dart %} @@ -92,7 +92,7 @@ You can modify the size of funnel series using the [`height`](https://pub.dev/do ## Changing neck size -You can modify the neck size of funnel series using the [`neckHeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/neckHeight.html) and [`neckWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/neckWidth.html) properties. It ranges from 0% to 100%. +You can modify the neck size of the funnel series using the [`neckHeight`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/neckHeight.html) and [`neckWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/neckWidth.html) properties. It ranges from 0% to 100%. {% tabs %} {% highlight dart %} @@ -165,9 +165,9 @@ You can control the gap between the two segments using the [`gapRatio`](https:// ## Explode segments -You can explode a funnel segment using the [`explodeIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/explodeIndex.html) property. The [`explodeOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/explodeOffset.html) property is used to specify the exploded segment's distance. +You can explode a funnel segment using the [`explodeIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/explodeIndex.html) property. The [`explodeOffset`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries/explodeOffset.html) property is used to specify the distance of the exploded segment. -Also, the segments can be exploded by tapping the segment. +Also, the segments can be exploded by tapping them. {% tabs %} {% highlight dart %} @@ -205,7 +205,7 @@ Also, the segments can be exploded by tapping the segment. ## Applying palette color -The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/palette.html) property is used to define colors for the series available in chart. By default, a set of 10 colors is predefined for applying it to the series. If the colors specified in the series are less than the number of series, then the remaining series will be filled with the specified palette colors rotationally. +The [`palette`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/palette.html) property is used to define colors for the series available in the chart. By default, a set of 10 colors is predefined for applying it to the series. If the colors specified in the series are fewer than the number of series, then the remaining series will be filled with the specified palette colors rotationally. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/funnel-chart/getting-started.md b/chart-sdk/flutter/funnel-chart/getting-started.md index 7f49cacac..23226f7d9 100644 --- a/chart-sdk/flutter/funnel-chart/getting-started.md +++ b/chart-sdk/flutter/funnel-chart/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting started with Flutter Funnel Chart widget | Syncfusion -description: Learn here about getting started with Syncfusion Flutter Funnel Chart (SfFunnelChart) widget, its elements, and more. +title: Getting started with Flutter Funnel Chart | Syncfusion® +description: Learn how to get started with Syncfusion® Flutter Funnel Chart widget, its elements, and more customization details. platform: chart-sdk control: Chart documentation: ug --- -# Getting started with Flutter Funnel Chart (SfFunnelChart) +# Getting started with Flutter Funnel Chart This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart. -To get start quickly with our Flutter chart widget, you can check out this video. +To get started quickly with our Flutter chart widget, you can check out this video. @@ -22,7 +22,7 @@ Create a simple project using the instructions given in the [Getting Started wit **Add dependency** -Add the Syncfusion® [Flutter Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) dependency to your pub spec file. +Add the Syncfusion® [Flutter Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) dependency to your pubspec.yaml file. {% tabs %} {% highlight dart %} @@ -33,7 +33,7 @@ Add the Syncfusion® [Flutter Chart](https://www.syncfusion.com/fl {% endhighlight %} {% endtabs %} ->**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. +>**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion® Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. **Get packages** @@ -61,7 +61,7 @@ Import the following package in your Dart code. ## Initialize chart -Once the package has been imported, initialize the chart as a child of any widget. SfFunnelChart can be used to render Funnel charts. Here, as we are rendering Funnel chart, initialize SfFunnelChart widget as a child of Container widget. +Once the package has been imported, initialize the chart as a child of any widget. SfFunnelChart can be used to render Funnel charts. Here, since we are rendering a Funnel chart, initialize the SfFunnelChart widget as a child of a Container widget. {% tabs %} {% highlight dart hl_lines="7" %} @@ -81,7 +81,7 @@ Once the package has been imported, initialize the chart as a child of any widge {% endhighlight %} {% endtabs %} ->**Note**: An empty chart will be displayed. This is the charts default behavior. +>**Note**: An empty chart will be displayed. This is the chart's default behavior. ## Bind data source @@ -127,7 +127,7 @@ Based on your data, initialize the series type. In the series, you need to map t ## Add title -You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet. +You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title of the chart can be set as demonstrated in the following code snippet. {% tabs %} {% highlight dart %} @@ -173,7 +173,7 @@ You can add data labels to improve the readability of the chart using the [`data dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, - // Render the data label + // Render data labels dataLabelSettings:DataLabelSettings(isVisible : true) ) ) @@ -191,7 +191,7 @@ You can add data labels to improve the readability of the chart using the [`data The legend provides information about the series rendered in the chart. -You can use legend in chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). +You can display a legend in the chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). {% tabs %} {% highlight dart %} @@ -224,7 +224,7 @@ You can use legend in chart by setting the [`isVisible`](https://pub.dev/documen The tooltip is used when you cannot display information using the data labels due to space constraints. -The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for the Funnel series. The tooltip is enabled as demonstrated in the following code snippet. +The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/tooltipBehavior.html) property in the chart is used to enable and customize the tooltip for the Funnel series. The tooltip is enabled as demonstrated in the following code snippet. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/funnel-chart/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/funnel-chart/how-to/custom-widget-on-flutterflow.md index c1d601d34..9b4b25fcc 100644 --- a/chart-sdk/flutter/funnel-chart/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/funnel-chart/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: Funnel Chart Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Funnel Chart ( SfFunnelChart Widget ) widget in FlutterFlow . +title: How to add Syncfusion® Funnel Chart in FlutterFlow | Syncfusion® +description: Add Syncfusion® Flutter Funnel Chart in FlutterFlow to create compact, interactive charts that visualize trends and data patterns with ease. platform: chart-sdk control: Chart documentation: ug --- -# How to add Syncfusion® Funnel Chart widget in FlutterFlow? +# How to add Syncfusion® Funnel Chart in FlutterFlow ## Overview @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The live version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) has been migrated to the latest version of the Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -50,21 +50,21 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 2. Paste the copied import statement into the code editor and then `Save` it. ![Import](how-to-section-images/import-package-flutterflow.png) -### Add widget code snippet in code editor +### Add widget code snippet in the code editor 1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_charts/example) tab in [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) and copy the widget specific codes. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. ![Code snippet](how-to-section-images/Adding-code-snippent.png) -### Compiling the codes +### Compiling the code -1. Click the 'Compile Code' button located in the top right corner. +1. Click the 'Compile Code' button located in the top-right corner. 2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process. ![Compile code](how-to-section-images/compile-code.png) ->**Note**: The compilation progress takes 2 to 3 minutes to complete. +>**Note**: The compilation process takes 2 to 3 minutes to complete. ### Utilizing the custom widget diff --git a/chart-sdk/flutter/funnel-chart/legend.md b/chart-sdk/flutter/funnel-chart/legend.md index f40a36cd1..9654202a3 100644 --- a/chart-sdk/flutter/funnel-chart/legend.md +++ b/chart-sdk/flutter/funnel-chart/legend.md @@ -1,15 +1,15 @@ --- layout: post -title: Legend in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Legend feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Legend in Flutter Funnel Chart | Syncfusion® +description: The legend support in Flutter Funnel Chart offers customizable legend items and positioning to improve chart readability and data understanding. platform: chart-sdk control: Chart documentation: ug --- -# Legend in Flutter Funnel Chart (SfFunnelChart) +# Legend in Flutter Funnel Chart -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) contains a list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) contains a list of chart series or data points in the chart. The information provided in each legend item helps identify the corresponding data series in the chart. {% tabs %} {% highlight dart hl_lines="14" %} @@ -51,7 +51,7 @@ The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/ch ## Customizing legend -The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) is used to define the label for the corresponding series legend item and for [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) type chart by default values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) will be displayed. The appearance of the label can be customized using the below properties. +The [`name`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/name.html) property of [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) is used to define the label for the corresponding series legend item, and for [`FunnelSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeries-class.html) type charts, the values mapped with [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/xValueMapper.html) are displayed by default. The appearance of the label can be customized using the following properties. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderWidth.html) - used to change the stroke width of the legend shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/borderColor.html) - used to change the stroke color of the legend shape. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/backgroundColor.html) - used to change the background color of legend shape. @@ -143,9 +143,9 @@ The following properties can be used to define and customize the [`title`](https ![Legend title](images/legend/legend_title.png) -## Toggles the series visibility +## Toggle the series visibility -You can control the visibility of the series by tapping the legend item. You can enable this feature by enabling the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property. +You can control the visibility of the series by tapping the legend item. You can enable this feature by setting the [`toggleSeriesVisibility`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/toggleSeriesVisibility.html) property to `true`. {% tabs %} {% highlight dart hl_lines="10" %} @@ -177,7 +177,7 @@ You can control the visibility of the series by tapping the legend item. You can ## Legend visibility -The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) is used to toggle the visibility of legend. +The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html) is used to toggle the visibility of the legend. {% tabs %} {% highlight dart hl_lines="10" %} @@ -209,7 +209,7 @@ The [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest ## Legend overflow -The legend items can be placed in multiple rows or scroll can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if size of the total legend items exceeds the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). +The legend items can be placed in multiple rows, or scrolling can be enabled using the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property if the total legend items exceed the available size. The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/overflowMode.html) property is [`LegendItemOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOverflowMode.html#scroll). {% tabs %} {% highlight dart hl_lines="11" %} @@ -245,7 +245,7 @@ The legend items can be placed in multiple rows or scroll can be enabled using t ## Positioning the legend -You can change the position of the legend inside the chart. The following properties are used to customize the position of legend. **auto** position will place the legend at the right, if the chart's width is greater than the chart's height. Else the legend will be placed at the bottom position. +You can change the position of the legend inside the chart. The following properties are used to customize the position of the legend. The **auto** position will place the legend on the right if the chart's width is greater than its height; otherwise, the legend will be placed at the bottom. * [`position`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/position.html) - used to position the legend relatively. The available options are auto, bottom, left, right, and top. Defaults to [`LegendPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendPosition.html#auto). * [`orientation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/orientation.html) - used to change the orientation of the legend, the default value is [`LegendItemOrientation.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#auto). Also you can set [`LegendItemOrientation.horizontal`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#horizontal) or [`LegendItemOrientation.vertical`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/LegendItemOrientation.html#vertical). @@ -307,9 +307,9 @@ Also, the legend will not take a dedicated position for it and will be drawn on } class ChartData { - ChartData(this.x, this.y); - final String x; - final double? y; + ChartData(this.x, this.y); + final String x; + final double? y; } @@ -318,7 +318,7 @@ Also, the legend will not take a dedicated position for it and will be drawn on ## Legend item template -You can customize the appearance of legend items with your template by using [`legendItemBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/legendItemBuilder.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html). Here you can specify the content that needs to be displayed in the legend text as widget. +You can customize the appearance of legend items with a template by using the [`legendItemBuilder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/legendItemBuilder.html) property of [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/legend.html). Here you can specify the content that needs to be displayed as a widget in the legend text. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/funnel-chart/methods.md b/chart-sdk/flutter/funnel-chart/methods.md index 9bf3c9df6..a6b427bc9 100644 --- a/chart-sdk/flutter/funnel-chart/methods.md +++ b/chart-sdk/flutter/funnel-chart/methods.md @@ -1,26 +1,26 @@ --- layout: post -title: Methods in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about available methods of Syncfusion Flutter Funnel Chart(SfFunnelChart) widget and more. +title: Methods in Flutter Funnel Chart | Syncfusion® +description: The methods in Flutter Funnel Chart documentation provide publicly accessible APIs for performing chart-related operations programmatically. platform: chart-sdk control: Chart documentation: ug --- -# Methods in Flutter Funnel Chart (SfFunnelChart) +# Methods in Flutter Funnel Chart ## PixelToPoint -Converts logical pixel value to the data point value. +Converts a logical pixel value to a data point value. -The [`pixelToPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeriesController/pixelToPoint.html) method takes logical pixel value as input and returns a chart data point. +The [`pixelToPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/FunnelSeriesController/pixelToPoint.html) method takes a logical pixel value as input and returns a chart data point. ->**Note**: The method will return the center value of the segment. +>**Note**: The method returns the center value of the segment. {% tabs %} {% highlight dart %} - //Initialize the series controller + // Initialize the series controller FunnelSeriesController? seriesController; @override diff --git a/chart-sdk/flutter/funnel-chart/overview.md b/chart-sdk/flutter/funnel-chart/overview.md index 45b5492cd..026118ad0 100644 --- a/chart-sdk/flutter/funnel-chart/overview.md +++ b/chart-sdk/flutter/funnel-chart/overview.md @@ -1,7 +1,7 @@ --- layout: post -title: About Flutter Funnel Chart widget | Syncfusion -description: Learn here all about introduction of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget, its features, and more +title: About Flutter Funnel Chart widget | Syncfusion® +description: Learn here all about introduction of Syncfusion® Flutter Funnel Chart widget, its features, and more details platform: chart-sdk control: Chart documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Flutter Funnel Chart (SfFunnelChart) Overview -Syncfusion® Flutter Funnel Chart (SfFunnelChart) widget is written natively in Dart for creating beautiful and high-performance Funnel chart, which are used to craft high-quality applications using Flutter. +The Syncfusion® Flutter Funnel Chart (SfFunnelChart) widget is written natively in Dart for creating beautiful, high-performance funnel charts, which are used to craft high-quality applications using Flutter. ![Overview Flutter chart](images/overview/overview.png) ## Key Features -* It supports [`Funnel`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/funnel-chart) chart series and it is more user friendly and has greater UI visualization. +* It supports the [`Funnel`](https://www.syncfusion.com/flutter-widgets/flutter-charts/chart-types/funnel-chart) chart series and is more user-friendly with better UI visualization. -* The end-user experience is greatly enhanced by including the user interaction features such as callbacks, selection, tooltip, and explode in chart. +* The end-user experience is greatly enhanced by user interaction features such as callbacks, selection, tooltip, and explode in the chart. -* Legends display additional information about the chart series. The chart legend can also be used to collapse the series. The legends can be wrapped or scrolled if an item exceeds the available bounds. +* Legends display additional information about the chart series. The chart legend can also be used to collapse the series. Legends can be wrapped or scrolled if an item exceeds the available bounds. -* Provides various options to customize the chart features, labels, legends, series, etc. and visualize them accordingly. +* It provides various options to customize chart features, labels, legends, series, and more. diff --git a/chart-sdk/flutter/funnel-chart/right-to-left.md b/chart-sdk/flutter/funnel-chart/right-to-left.md index af71b5628..b522a44e7 100644 --- a/chart-sdk/flutter/funnel-chart/right-to-left.md +++ b/chart-sdk/flutter/funnel-chart/right-to-left.md @@ -1,23 +1,23 @@ --- layout: post -title: RTL support in Flutter Funnel Chart widget | Syncfusion -description: Learn here about the RTL support in Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: RTL support in Flutter Funnel Chart | Syncfusion® +description: The RTL support in Flutter Funnel Chart offers right-to-left rendering for chart elements, improving usability in RTL language applications. platform: chart-sdk control: Chart documentation: ug --- -# Right To Left (RTL) in Flutter Funnel Chart (SfFunnelChart) +# Right to Left (RTL) support in Flutter Funnel Chart -Funnel chart supports right to left rendering. However, series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. +The funnel chart supports right-to-left rendering. However, series and other chart elements render the same for both LTR and RTL, except for the legend and tooltip. ## RTL rendering ways Right to left rendering can be switched in the following ways: -### Wrapping the SfFunnelChart with Directionality widget +### Wrapping the SfFunnelChart with the Directionality widget -To change the rendering direction from right to left, you can wrap the [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property as [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). +To change the rendering direction from right to left, you can wrap the [`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) widget inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to [`TextDirection.rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} {% highlight dart hl_lines="5" %} @@ -39,7 +39,7 @@ To change the rendering direction from right to left, you can wrap the [`SfFunne ### Changing the locale to RTL languages -To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. +To change the chart rendering direction from right to left, you can change the [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any RTL language such as Arabic, Persian, Hebrew, Pashto, or Urdu. {% tabs %} {% highlight dart %} @@ -74,11 +74,11 @@ To change the chart rendering direction from right to left, you can change the [ {% endhighlight %} {% endtabs %} -## RTL supported chart elements +## RTL-supported chart elements ### Legend -Right to left rendering is effective for the legend in the chart. Legend items will be rendered from right to left direction, i.e., the legend text will appear on the left first, followed by the legend icon on the right. +Right-to-left rendering affects the legend in the chart. Legend items are rendered from right to left; that is, the legend text appears on the left first, followed by the legend icon on the right. {% tabs %} {% highlight dart %} @@ -120,7 +120,7 @@ Right to left rendering is effective for the legend in the chart. Legend items w ### Tooltip -Right-to-left rendering is applicable for [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) elements. By default, the tooltip content will be `point.x : point.y`, in RTL rendering the tooltip content will be `point.y : point.x`. If you wish the format to be applied as it is despite RTL rendering in this case, you can make use of [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onTooltipRender.html) callback. +Right-to-left rendering is applicable to [`tooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior-class.html) elements. By default, the tooltip content is `point.x : point.y`; in RTL rendering, the tooltip content becomes `point.y : point.x`. If you want the format to remain unchanged despite RTL rendering, you can use the [`onTooltipRender`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/onTooltipRender.html) callback. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/funnel-chart/selection.md b/chart-sdk/flutter/funnel-chart/selection.md index 9cc3c5212..17a4a18d8 100644 --- a/chart-sdk/flutter/funnel-chart/selection.md +++ b/chart-sdk/flutter/funnel-chart/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Selection feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Selection in Flutter Funnel Chart | Syncfusion® +description: The selection support in Flutter Funnel Chart offers interactive segment selection with customizable styles to highlight and analyze data points. platform: chart-sdk control: Chart documentation: ug --- -# Selection in Flutter Funnel Chart (SfFunnelChart) +# Selection in Flutter Funnel Chart -The selection feature in chart lets you to select a segment in a series or the series itself. This feature allows you to select either individual or clusters of segments in the chart series. +The selection feature in the chart lets you select a segment in a series or the series itself. This feature allows you to select either individual segments or clusters of segments in the chart series. {% tabs %} {% highlight dart %} @@ -48,7 +48,7 @@ The selection feature in chart lets you to select a segment in a series or the s ## Customizing the segments -You can customize the segments using the below properties. +You can customize the segments using the following properties. * [`selectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/selectedColor.html) - used to change the background color of selected segment. * [`unselectedColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/unselectedColor.html) - used to change the background color of unselected segment. @@ -100,7 +100,7 @@ You can customize the segments using the below properties. ## Multi-selection -Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/enableMultiSelection.html) property of chart. +Multiple selection can be enabled using the [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart/enableMultiSelection.html) property of the chart. {% tabs %} {% highlight dart %} @@ -126,7 +126,7 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub ## Selection on initial rendering -You can select a point or series programmatically on a chart using [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/initialSelectedDataIndexes.html) property of chart. +You can select a point or series programmatically on a chart using the [`initialSelectedDataIndexes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/initialSelectedDataIndexes.html) property of the chart. {% tabs %} {% highlight dart %} @@ -151,8 +151,8 @@ You can select a point or series programmatically on a chart using [`initialSele ## Toggle selection -You can decide whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property true or false. If set to true, deselection will be performed else the point will not get deselected. -This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. +You can decide whether to deselect the selected data point or series, or keep it selected when it is interacted with again, by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property to true or false. If set to true, deselection will be performed; otherwise, the point will not be deselected. +This works even while calling public methods, in various selection modes, with multi-selection, and during dynamic changes. Defaults to `true`. {% tabs %} @@ -186,7 +186,7 @@ Defaults to `true`. {% endhighlight %} {% endtabs %} -Also refer [selection event](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onselectionchanged) for customizing the selection further. +Also refer to the [selection event](https://help.syncfusion.com/chart-sdk/flutter/funnel-chart/callbacks#onselectionchanged) for further selection customization. ## Methods in SelectionBehavior @@ -197,7 +197,7 @@ The [`selectDataPoints`](https://pub.dev/documentation/syncfusion_flutter_charts * [`pointIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/pointIndex.html) - index of the point which needs to be selected. * [`seriesIndex`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionArgs/seriesIndex.html) - index of the series for which the pointIndex is specified and this is an optional parameter. By default it will be considered as 0. ->**Note**: The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) is also applicable for this but it is based on the API values specified in the chart. +>**Note**: The [`enableMultiSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart/enableMultiSelection.html) property is also applicable here, but it depends on the API values specified in the chart. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/funnel-chart/series-customization.md b/chart-sdk/flutter/funnel-chart/series-customization.md index 35b5f53b3..a5b970047 100644 --- a/chart-sdk/flutter/funnel-chart/series-customization.md +++ b/chart-sdk/flutter/funnel-chart/series-customization.md @@ -1,17 +1,17 @@ --- layout: post -title: Series customization in Flutter Funnel Chart widget | Syncfusion -description: Learn here all about Series customization feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more. +title: Series customization in Flutter Funnel Chart | Syncfusion® +description: The series customization support in Flutter Funnel Chart offers control over segment appearance, spacing, colors, and rendering for tailored visualizations. platform: chart-sdk control: Chart documentation: ug --- -# Series customization in Flutter Funnel Chart (SfFunnelChart) +# Series customization in Flutter Funnel Chart ## Animation -[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides animation support for the series. Series will be animated while rendering. Animation is enabled by default, you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. +[`SfFunnelChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfFunnelChart-class.html) provides animation support for the series. The series is animated while rendering. Animation is enabled by default, and you can also control the duration of the animation using the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting that property to 0. {% tabs %} {% highlight dart %} @@ -39,7 +39,7 @@ documentation: ug ### Animation delay -The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. +The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes a millisecond value as input. By default, the series will animate for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin animating after the specified duration. The default is `0`. {% tabs %} {% highlight dart %} @@ -80,7 +80,7 @@ The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/l ## Empty points -The data points that has null value are considered as empty points. Empty data points are ignored and not plotted in the chart. By using [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop) and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). Default mode of the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). +Data points that have null values are considered empty points. Empty data points are ignored and not plotted in the chart. By using the [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html) property in the series, you can decide the action taken for empty points. Available [`modes`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/mode.html) are [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap), [`EmptyPointMode.zero`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#zero), [`EmptyPointMode.drop`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#drop), and [`EmptyPointMode.average`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#average). The default mode for the empty point is [`EmptyPointMode.gap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointMode.html#gap). {% tabs %} {% highlight dart %} @@ -117,7 +117,7 @@ The data points that has null value are considered as empty points. Empty data p ### Empty point customization -Specific color for empty point can be set by [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. +You can set a specific color for an empty point by using the [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/color.html) property in [`emptyPointSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/emptyPointSettings.html). The [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderWidth.html) property is used to change the stroke width of the empty point, and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/EmptyPointSettings/borderColor.html) is used to change the stroke color of the empty point. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/funnel-chart/tooltip.md b/chart-sdk/flutter/funnel-chart/tooltip.md index 161056e3e..21b368fab 100644 --- a/chart-sdk/flutter/funnel-chart/tooltip.md +++ b/chart-sdk/flutter/funnel-chart/tooltip.md @@ -1,17 +1,17 @@ --- layout: post -title: Tooltip in Flutter Funnel Chart | Syncfusion -description: Step-by-step guide to customize tooltips in Syncfusion Flutter Funnel Chart—enable, format, style tooltips, set activation modes, and key features. +title: Tooltip in Flutter Funnel Chart | Syncfusion® +description: The tooltip support in Flutter Funnel Chart offers interactive data insights with customizable content and appearance for better user engagement. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Funnel Chart Tooltip (SfFunnelChart) +# Tooltip in Flutter Funnel Chart -Chart provides tooltip support for all the series. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as true. +The chart provides tooltip support for all series. It is used to show information about the segment when you tap the segment. To enable the tooltip, you need to set the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property to true. -The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. +The tooltip state is preserved when the device orientation changes or when the browser is resized. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000 ms, and you change the orientation of your device from portrait to landscape after 5,000 ms of tooltip display, the tooltip will continue for the next 5,000 ms in landscape mode before disappearing. {% tabs %} {% highlight dart %} @@ -19,14 +19,14 @@ The tooltip state will be preserved on the device's orientation change and on br late TooltipBehavior _tooltipBehavior; @override - void initState(){ + void initState() { _tooltipBehavior = TooltipBehavior(enable: true); super.initState(); } @override Widget build(BuildContext context) { - List chartData = [ + final List chartData = [ ChartData('Jan', 35), ChartData('Feb', 28), ChartData('Mar', 38), @@ -48,7 +48,7 @@ The tooltip state will be preserved on the device's orientation change and on br ) ); } - class ChartData{ + class ChartData { ChartData(this.x, this.y); final String x; final double? y; @@ -68,7 +68,7 @@ You can use the following properties to customize the tooltip appearance. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/borderColor.html) - used to change the stroke color of the tooltip. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/opacity.html) - used to control the transparency of the tooltip. * [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) - specifies the duration for displaying the tooltip that defaults to `3000`. -* [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/animationDuration.html) - specifies the duration for animating the tooltip that default to 350. +* [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/animationDuration.html) - specifies the duration for animating the tooltip, and the default is 350. * [`elevation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/elevation.html) - specifies the elevation of tooltip. * [`canShowMarker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/canShowMarker.html) - toggles the visibility of the marker in the tooltip. * [`header`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/header.html) - specifies the header for tooltip. By default, the series name will be displayed in the header. @@ -232,16 +232,16 @@ You can customize the appearance of the tooltip with your own widget by using th ![Tooltip template](images/tooltip/tooltip_template.png) -## Activation mode +## Activation mode -The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict tooltip visibility based on touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). The ActivationMode enum contains the following values: -* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates tooltip only when performing the long press action. -* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap) - activates tooltip only when performing single tap action. -* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - activates tooltip only when performing double tap action. -* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - hides the visibility of tooltip when setting activation mode to none. +* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#longPress) - activates the tooltip only when performing the long-press action. +* [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap) - activates the tooltip only when performing a single-tap action. +* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#doubleTap) - activates the tooltip only when performing a double-tap action. +* [`ActivationMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#none) - hides the tooltip when activation mode is set to none. {% tabs %} {% highlight dart %} @@ -274,4 +274,4 @@ The ActivationMode enum contains the following values: {% endhighlight %} {% endtabs %} -Also refer [`tooltip event`](./callbacks#ontooltiprender) for customizing the tooltip further. \ No newline at end of file +Also refer to the [`tooltip event`](./callbacks#ontooltiprender) for further tooltip customization. \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/accessibility.md b/chart-sdk/flutter/linear-gauge/accessibility.md index 756b50482..a1ff5047d 100644 --- a/chart-sdk/flutter/linear-gauge/accessibility.md +++ b/chart-sdk/flutter/linear-gauge/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about the accessibility support in Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and how to customize it. +title: Accessibility in Flutter Linear Gauge | Syncfusion® +description: Learn about accessibility support in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including screen readers, keyboard navigation, and more. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -14,21 +14,33 @@ documentation: ug The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be made accessible to screen readers by wrapping it with the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. {% tabs %} -{% highlight Dart %} +{% highlight dart %} - double _value = 50; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Semantics( - label: 'Syncfusion Flutter Linear Gauge', - value: _value.toString(), - child: - SfLinearGauge(markerPointers: [LinearShapePointer(value: _value)]), + double value = 50; + return MaterialApp( + title: 'Linear Gauge Demo', + home: Scaffold( + body: Semantics( + label: 'Syncfusion Flutter Linear Gauge', + value: value.toString(), + child: SfLinearGauge( + markerPointers: [LinearShapePointer(value: value)], + ), + ), ), ); } +} {% endhighlight %} {% endtabs %} @@ -37,22 +49,22 @@ The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/la You can customize the color of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following APIs to ensure sufficient contrast. -* [`Axis solid color`](https://help.syncfusion.com/flutter/linear-gauge/axis#apply-solid-color) -* [`Axis gradient`](https://help.syncfusion.com/flutter/linear-gauge/axis#apply-gradient) -* [`Ticks`](https://help.syncfusion.com/flutter/linear-gauge/ticks#customize-tick-style) -* [`Labels`](https://help.syncfusion.com/flutter/linear-gauge/labels#customize-label-styles) -* [`Range`](https://help.syncfusion.com/flutter/linear-gauge/getting-started#add-range) -* [`Radial gradient`](https://help.syncfusion.com/flutter/linear-gauge/range#apply-radial-gradient-to-a-range) -* [`Linear gradient`](https://help.syncfusion.com/flutter/linear-gauge/range#apply-linear-gradient-to-a-range) -* [`Sweep gradient`](https://help.syncfusion.com/flutter/linear-gauge/range#apply-sweep-gradient-to-a-range) -* [`Bar pointer`](https://help.syncfusion.com/flutter/linear-gauge/bar-pointer#change-the-color-of-bar-pointer) -* [`Marker`](https://help.syncfusion.com/flutter/linear-gauge/shape-marker-pointer#customize-color) +* [`Axis solid color`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/axis#apply-solid-color) +* [`Axis gradient`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/axis#apply-gradient) +* [`Ticks`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/ticks#customize-tick-style) +* [`Labels`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/labels#customize-label-styles) +* [`Range`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/getting-started#add-range) +* [`Radial gradient`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/range#apply-radial-gradient-to-a-range) +* [`Linear gradient`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/range#apply-linear-gradient-to-a-range) +* [`Sweep gradient`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/range#apply-sweep-gradient-to-a-range) +* [`Bar pointer`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/bar-pointer#change-the-color-of-bar-pointer) +* [`Marker`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/shape-marker-pointer#customize-color) ## Large fonts You can adjust the font size of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following API: -* [`Labels`](https://help.syncfusion.com/flutter/linear-gauge/labels#customize-label-styles) +* [`Labels`]https://help.syncfusion.com/chart-sdk/flutter/linear-gauge/labels#customize-label-styles) ## Easily touch targets diff --git a/chart-sdk/flutter/linear-gauge/animation.md b/chart-sdk/flutter/linear-gauge/animation.md index 88c10724d..989023e4a 100644 --- a/chart-sdk/flutter/linear-gauge/animation.md +++ b/chart-sdk/flutter/linear-gauge/animation.md @@ -1,7 +1,7 @@ --- layout: post -title: Animation in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing animation of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Animation in Flutter Linear Gauge | Syncfusion® +description: Learn about animation support in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including pointer animations, duration settings, and visual effects. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -15,8 +15,17 @@ All Linear Gauge elements such as axis (along with ticks and labels), range, bar The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) and [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animationDuration.html) properties in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) are used to animate the axis track along with the ticks and labels. The axis will have a fade-in with opacity animation when [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) is set to true. By default, the [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateAxis.html) is set to false. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -30,8 +39,10 @@ The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/late ), ); } +} {% endhighlight %} +{% endtabs %} ![Animate axis in linear gauge](images/animation/animation-axis-range/animation-axis.gif) @@ -39,8 +50,17 @@ The [`animateAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/late The [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) and [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animationDuration.html) properties in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) are used to animate ranges. The range will have a fade-in with opacity animation when [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) is set to true. By default, the [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/animateRange.html) is set to false. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -54,10 +74,12 @@ The [`animateRange`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat ), ); } +} - {% endhighlight %} +{% endhighlight %} +{% endtabs %} - ![Animate range in linear gauge](images/animation/animation-axis-range/animation-range.gif) +![Animate range in linear gauge](images/animation/animation-axis-range/animation-range.gif) ## Pointer animation @@ -83,7 +105,16 @@ The [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/la The following code example demonstrates how to customize the animation for bar pointer: -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -103,8 +134,10 @@ The following code example demonstrates how to customize the animation for bar p ), ); } +} {% endhighlight %} +{% endtabs %} ### Animate marker pointers (Shape and Widget Pointers) @@ -112,4 +145,41 @@ Both the shape and widget marker pointers have the same set of properties and be ### Marker pointer with `bounceOut` animation +The following code example demonstrates how to animate a shape marker pointer with `bounceOut` animation type: + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + markerPointers: [ + LinearShapePointer( + value: 60, + animationType: LinearAnimationType.bounceOut, + animationDuration: 2000, + enableAnimation: true, + ), + ], + ), + ), + ), + ); + } +} + +{% endhighlight %} +{% endtabs %} + ![Animate marker pointer in linear gauge](images/animation/shape-pointer/bounceout.gif) diff --git a/chart-sdk/flutter/linear-gauge/axis.md b/chart-sdk/flutter/linear-gauge/axis.md index f11e4780b..dee84dea2 100644 --- a/chart-sdk/flutter/linear-gauge/axis.md +++ b/chart-sdk/flutter/linear-gauge/axis.md @@ -1,10 +1,9 @@ --- layout: post -title: Axis in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Axis of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Axis in Flutter Linear Gauge | Syncfusion® +description: Learn about axis customization in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including ranges, labels, ticks, intervals, and styling options. platform: chart-sdk control: SfLinearGauge - documentation: ug --- @@ -14,10 +13,19 @@ The Linear Gauge axis is a scale where a set of values can be plotted. An axis c ## Default axis -By default axis will have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) axis value as 0 and a [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) axis value of 100. Without any customization, the default axis of the Linear Gauge will be displayed as follows: +By default, the axis will have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) value of 0 and a [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) value of 100. Without any customization, the default axis of the Linear Gauge will be displayed as follows: +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -28,17 +36,28 @@ By default axis will have a [`minimum`](https://pub.dev/documentation/syncfusion ), ); } +} {% endhighlight %} +{% endtabs %} ![Initialize linear gauge for axis](images/getting-started/default_linear_gauge.png) ## Customize minimum and maximum axis values -The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) properties of a Linear Gauge can be used to customize the axis values. In the example below, the axis is customized to have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) value of -50 to [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) value of 50. The axis values are displayed by labels. which can be further customized as explained in later sections. +The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) properties of a Linear Gauge can be used to customize the axis values. In the example below, the axis is customized to have a [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) value from -50 to a [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) value of 50. The axis values are displayed by labels, which can be further customized as explained in later sections. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -49,8 +68,10 @@ The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/g ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Update linear gauge for axis scale](images/axis/minmax_axis_linear_gauge.png) @@ -89,8 +110,17 @@ The following code sample demonstrates how to customize the [`thickness`](https: The code snippet below sets a solid color to the axis track: +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -103,10 +133,12 @@ The code snippet below sets a solid color to the axis track: ), ); } +} {% endhighlight %} +{% endtabs %} -![Apply color to axis in linear guage](images/axis/axis_solid_color.png) +![Apply color to axis in linear gauge](images/axis/axis_solid_color.png) ## Apply gradient @@ -114,23 +146,30 @@ The [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The following code sample applies a gradient to the axis track. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( - child: Container( - child: SfLinearGauge( - axisTrackStyle: LinearAxisTrackStyle( - gradient: LinearGradient( - colors: [Colors.purple, Colors.blue], - begin: Alignment.centerLeft, - end: Alignment.centerRight, - stops: [0.1, 0.5], - tileMode: TileMode.clamp, - ), + child: SfLinearGauge( + axisTrackStyle: LinearAxisTrackStyle( + gradient: LinearGradient( + colors: [Colors.purple, Colors.blue], + begin: Alignment.centerLeft, + end: Alignment.centerRight, + stops: [0.1, 0.5], + tileMode: TileMode.clamp, ), ), ), @@ -138,10 +177,12 @@ The following code sample applies a gradient to the axis track. ), ); } +} {% endhighlight %} +{% endtabs %} -![Apply color to axis in linear guage](images/axis/axis_gradient.png) +![Apply color to axis in linear gauge](images/axis/axis_gradient.png) ## Customize borders @@ -149,8 +190,17 @@ The [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/late The code snippet below sets a border to the axis track: +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -160,7 +210,7 @@ The code snippet below sets a border to the axis track: axisTrackStyle: LinearAxisTrackStyle( // Sets axis thickness for the better visibility of border thickness: 15, - // Hides axis axis color for the better visibility of border + // Hides axis color for the better visibility of border color: Colors.transparent, //Sets the border color borderColor: Colors.blueGrey, @@ -172,8 +222,10 @@ The code snippet below sets a border to the axis track: ), ); } +} {% endhighlight %} +{% endtabs %} ![Customize axis track border](images/axis/axis_border.png) @@ -181,8 +233,17 @@ The code snippet below sets a border to the axis track: The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/edgeStyle.html) property of [`axisTrackStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearAxisTrackStyle/LinearAxisTrackStyle.html) specifies the corner type for the axis track. The corners can be customized with `bothFlat`, `bothCurve`, `startCurve`, and `endCurve` options. The default value is `bothFlat`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -198,18 +259,28 @@ The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest ), ); } +} {% endhighlight %} +{% endtabs %} ![Change axis track edge style](images/axis/axis_corner_style.png) ## Inverse the axis -The direction of linear gauge axis can be customized using the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property. -When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is set to true, the axis will be displayed in an inverse direction. The default value is false. +The direction of the linear gauge axis can be customized using the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property. When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isAxisInversed.html) property is set to true, the axis will be displayed in an inverse direction. The default value is false. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -220,8 +291,10 @@ When the [`isAxisInversed`](https://pub.dev/documentation/syncfusion_flutter_gau ), ); } +} {% endhighlight %} +{% endtabs %} You can see that the axis values are displayed from 100 to 0 as the axis track is inversed. @@ -229,23 +302,34 @@ You can see that the axis values are displayed from 100 to 0 as the axis track i ## Extend the axis -The axis track can be extended using the [`axisTrackExtent`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/axisTrackExtent.html) property. This will extend the axis track at both ends. The following code sample demonstrates this: +The axis track can be extended using the [`axisTrackExtent`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/axisTrackExtent.html) property. This will extend the axis track at both ends. The following code sample demonstrates this: +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( color: Colors.white, home: Scaffold( body: Center( - child: child: SfLinearGauge(maximum: 50, axisTrackExtent: 50), + child: SfLinearGauge(maximum: 50, axisTrackExtent: 50), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![Extend linear gauge axis tack](images/axis/extend_axis.png) @@ -253,8 +337,17 @@ The axis track can be extended using the [`axisTrackExtent`](https://pub.dev/doc You can hide the axis track by setting the [`showAxisTrack`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/showAxisTrack.html) property to false. The default value of this property is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -265,17 +358,33 @@ You can hide the axis track by setting the [`showAxisTrack`](https://pub.dev/doc ), ); } +} {% endhighlight %} +{% endtabs %} ![Hide linear gauge axis track](images/axis/hide_axis_track.png) ## Customize axis values -Linear gauge allows you to display a set of values along with a custom axis based on your business logic by using the [`onGenerateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/onGenerateLabels.html) and [`valueToFactorCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/valueToFactorCallback.html) callbacks. +Linear Gauge allows you to display a set of values along with a custom axis based on your business logic using the [`onGenerateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/onGenerateLabels.html) and [`valueToFactorCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/valueToFactorCallback.html) callbacks. The `valueToFactorCallback` allows you to convert axis values into a factor between 0 and 1, while `onGenerateLabels` enables you to define custom labels for specific intervals. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double pointerValue = 50.0; // To return the label value based on interval @@ -302,66 +411,76 @@ Linear gauge allows you to display a set of values along with a custom axis base } Widget _getLinearGauge() { - return Container( - child: SfLinearGauge( - minimum: 0, - maximum: 150.0, - interval: 18.75, - animateAxis: true, - animateRange: true, - labelPosition: LinearLabelPosition.outside, - tickPosition: LinearElementPosition.outside, - valueToFactorCallback: (value) { - if (value >= 0 && value <= 2) { - return (value * 0.125) / 2; - } else if (value > 2 && value <= 5) { - return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); - } else if (value > 5 && value <= 10) { - return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); - } else if (value > 10 && value <= 20) { - return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); - } else if (value > 20 && value <= 30) { - return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); - } else if (value > 30 && value <= 50) { - return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); - } else if (value > 50 && value <= 100) { - return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); - } else if (value > 100 && value <= 150) { - return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); - } else { - return 1; - } - }, - onGenerateLabels: () { - final List _visibleLabels = []; - for (num i = 0; i < 9; i++) { - final double _value = _calculateLabelValue(i); - final LinearAxisLabel label = LinearAxisLabel( - text: _value.toInt().toString(), - value: (i * 18.75).toDouble()); - _visibleLabels.add(label); - } - - return _visibleLabels; - }, - markerPointers: [ - LinearShapePointer( - value: pointerValue, - onChanged: (value) => - { - setState(() => {pointerValue = value}) - }, - color: Color(0xff06589C), - width: 24, - position: LinearElementPosition.cross, - shapeType: LinearShapePointerType.triangle, - height: 16) - ], + return SfLinearGauge( + minimum: 0, + maximum: 150.0, + interval: 18.75, + animateAxis: true, + animateRange: true, + labelPosition: LinearLabelPosition.outside, + tickPosition: LinearElementPosition.outside, + valueToFactorCallback: (value) { + if (value >= 0 && value <= 2) { + return (value * 0.125) / 2; + } else if (value > 2 && value <= 5) { + return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); + } else if (value > 5 && value <= 10) { + return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); + } else if (value > 10 && value <= 20) { + return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); + } else if (value > 20 && value <= 30) { + return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); + } else if (value > 30 && value <= 50) { + return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); + } else if (value > 50 && value <= 100) { + return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); + } else if (value > 100 && value <= 150) { + return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); + } else { + return 1; + } + }, + onGenerateLabels: () { + final List _visibleLabels = []; + for (num i = 0; i < 9; i++) { + final double _value = _calculateLabelValue(i); + final LinearAxisLabel label = LinearAxisLabel( + text: _value.toInt().toString(), + value: (i * 18.75).toDouble()); + _visibleLabels.add(label); + } + return _visibleLabels; + }, + markerPointers: [ + LinearShapePointer( + value: pointerValue, + onChanged: (value) { + setState(() { + pointerValue = value; + }); + }, + color: Color(0xff06589C), + width: 24, + position: LinearElementPosition.cross, + shapeType: LinearShapePointerType.triangle, + height: 16) + ], + ); + } + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: _getLinearGauge(), + ), ), - margin: EdgeInsets.all(10) ); } +} {% endhighlight %} +{% endtabs %} ![Custom axis track](images/axis/custom_axis.png) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/bar-pointer.md b/chart-sdk/flutter/linear-gauge/bar-pointer.md index cab0cbe6a..1f084fe93 100644 --- a/chart-sdk/flutter/linear-gauge/bar-pointer.md +++ b/chart-sdk/flutter/linear-gauge/bar-pointer.md @@ -1,7 +1,7 @@ --- layout: post -title: Bar Pointer in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Bar Pointer of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Bar Pointer in Flutter Linear Gauge | Syncfusion® +description: Learn about bar pointers in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including value representation, customization, animation, and styling options. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -13,10 +13,19 @@ A bar pointer is an accenting line or shaded background that can be placed on a ## Default bar pointer -The following code sample creates a default bar pointer with the value 50. +The following code sample creates a default bar pointer with the value 50. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -33,17 +42,28 @@ The following code sample creates a default bar pointer with the value 50. ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Initialize linear gauge for bar pointer](images/bar-pointer/default_bar_pointer.png) ## Customize bar pointer thickness -The thickness can be changed by the [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/thickness.html) property of the bar pointer. The following code sample demonstrates the same. +The thickness can be changed by the [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/thickness.html) property of the bar pointer. The following code sample demonstrates the same. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -62,17 +82,28 @@ The thickness can be changed by the [`thickness`](https://pub.dev/documentation/ ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change the bar pointer thickness](images/bar-pointer/bar_thickness.png) ## Customize edge style -The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/edgeStyle.html) property of the bar pointer. The edge style can be any of the `startCurve`, `endCurve`, `bothCurve`, and `bothFlat` options.The default value is `bothFlat`. +The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/edgeStyle.html) property of the bar pointer. The edge style can be any of the `startCurve`, `endCurve`, `bothCurve`, and `bothFlat` options. The default value is `bothFlat`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -94,8 +125,10 @@ The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentati ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change the bar pointer edge style](images/bar-pointer/edge_style.png) @@ -103,8 +136,17 @@ The edge style can be changed with the [`edgeStyle`](https://pub.dev/documentati By default, the bar pointer is positioned cross to the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/position.html) property of a bar pointer. It is possible to position the bar pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the bar pointer position to inside the axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -122,17 +164,28 @@ By default, the bar pointer is positioned cross to the axis. This position can b ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize linear gauge for bar pointer position](images/bar-pointer/bar_pointer_change_position.png) ## Customize the offset -In addition to positioning the bar pointer, it is also possible to change the offset of the bar pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) is the distance from the axis and it cannot be negative. Cross-positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the bar pointer. +In addition to positioning the bar pointer, it is also possible to change the offset of the bar pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) is the distance from the axis and it cannot be negative. Cross-positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the bar pointer. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -152,17 +205,28 @@ In addition to positioning the bar pointer, it is also possible to change the of ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize linear gauge bar pointer offset](images/bar-pointer/bar_pointer_offset.png) -## Change the color of bar pointer +## Change the color of bar pointer -The color of the bar pointer can be changed by the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/color.html) property. The following code sample demonstrates the same. +The color of the bar pointer can be changed by the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/color.html) property. The following code sample demonstrates the same. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -182,8 +246,10 @@ The color of the bar pointer can be changed by the [`color`](https://pub.dev/doc ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Apply color to bar pointer](images/bar-pointer/bar_color.png) @@ -191,8 +257,17 @@ The color of the bar pointer can be changed by the [`color`](https://pub.dev/doc The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/shaderCallback.html) property of bar pointer. The following code sample demonstrates how to apply a radial gradient to the bar pointer. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -205,21 +280,23 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu value: 100, //Apply radial gradient shaderCallback: (bounds) => RadialGradient( - radius: 30, - colors: [ - Colors.redAccent, - Colors.blueAccent, - Colors.greenAccent, - ], - ).createShader(bounds)) + radius: 30, + colors: [ + Colors.redAccent, + Colors.blueAccent, + Colors.greenAccent, + ], + ).createShader(bounds)) ], ), ), ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Apply radial gradient to bar pointer](images/bar-pointer/radial_gradient_bar.png) @@ -227,8 +304,17 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/shaderCallback.html) property of bar pointer. The following code sample demonstrates how to apply a linear gradient to the bar pointer. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -253,8 +339,10 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Apply linear gradient to bar pointer](images/bar-pointer/linear_gradient_bar.png) @@ -262,8 +350,17 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/shaderCallback.html) property of the bar pointer. The following code sample demonstrates how to apply a sweep gradient to the bar pointer. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -275,26 +372,28 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu LinearBarPointer( value: 100, thickness: 10, - //Apply linear gradient + //Apply sweep gradient shaderCallback: (bounds) => SweepGradient( - startAngle: 0.1, - endAngle: 0.2, - colors: [ - Colors.blueAccent, - Colors.greenAccent, - Colors.orangeAccent, - ], - tileMode: TileMode.mirror, - center: Alignment.bottomRight, - ).createShader(bounds)) + startAngle: 0.1, + endAngle: 0.2, + colors: [ + Colors.blueAccent, + Colors.greenAccent, + Colors.orangeAccent, + ], + tileMode: TileMode.mirror, + center: Alignment.bottomRight, + ).createShader(bounds)) ], ), ), ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Apply sweep gradient to bar pointer](images/bar-pointer/sweep_gradient_bar.png) @@ -303,8 +402,17 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu The border can be customized with [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/borderWidth.html) and [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/borderColor.html) properties of the bar pointer. The following code examples demonstrates the same. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -324,19 +432,30 @@ The border can be customized with [`borderWidth`](https://pub.dev/documentation/ ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize linear gauge bar pointer border](images/bar-pointer/bar_border.png) ## Add multiple bar pointers -You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). The bar pointers by default will overlap each other. So while adding a bar pointer, offset value is needed to be specified. The below code example demonstrates adding two bar pointer with different offsets: +You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). The bar pointers by default will overlap each other. When adding multiple bar pointers, specify an offset value to separate them. Use an offset value greater than the bar pointer thickness to avoid overlap. The below code example demonstrates adding two bar pointers with different offsets: +{% tabs %} {% highlight dart %} -@override +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( @@ -349,7 +468,7 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta ), LinearBarPointer( value: 40, - // Setting offset to move the bar from previos one + // Setting offset to move the bar from previous one offset: 10, position: LinearElementPosition.outside ), @@ -359,8 +478,10 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta ), ); } +} {% endhighlight %} +{% endtabs %} ![Add multiple bar pointers in a linear gauge](images/bar-pointer/multiple_bar_pointer.PNG) @@ -368,8 +489,17 @@ You can add multiple bar pointers in a [`LinearGauge`](https://pub.dev/documenta The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/onAnimationCompleted.html) callback in the [`LinearBarPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer-class.html) will be triggered when the bar pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearBarPointer/onAnimationCompleted.html) callback is `null`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -379,7 +509,8 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga barPointers:[ LinearBarPointer( onAnimationCompleted: () { - print("Bar Pointer animation is completed"); + // Bar Pointer animation is completed + debugPrint('Bar Pointer animation is completed'); }, ), ], @@ -388,5 +519,7 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga ), ); } +} {% endhighlight %} +{% endtabs %} diff --git a/chart-sdk/flutter/linear-gauge/getting-started.md b/chart-sdk/flutter/linear-gauge/getting-started.md index c121533f7..22005bdfa 100644 --- a/chart-sdk/flutter/linear-gauge/getting-started.md +++ b/chart-sdk/flutter/linear-gauge/getting-started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with Flutter Linear Gauge | Syncfusion -description: Step-by-step guide to set up Syncfusion Flutter Linear Gauge (SfLinearGauge)—add dependencies, import, create `SfLinearGauge`, and configure key features. +title: Getting Started with Flutter Linear Gauge | Syncfusion® +description: Learn how to get started with the Syncfusion® Flutter Linear Gauge (SfLinearGauge). Explore setup, gauge configuration, and customization options. platform: chart-sdk control: SfLinearGauge documentation: ug --- -# Flutter Linear Gauge Getting Started (SfLinearGauge) +# Getting Started with Flutter Linear Gauge (SfLinearGauge) -This section explains the steps required to add the Linear Gauge and its elements such as axis, range, and pointer, and also covers basic features needed to get started with the Linear Gauge widget. +This section explains the steps required to add the Linear Gauge and its elements such as axis, range, and pointer. It also covers the basic features needed to get started with the Linear Gauge widget. To get started quickly with our Flutter Linear Gauge widget, you can check out this video: @@ -24,13 +24,14 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter Gauge dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} - dependencies: - - syncfusion_flutter_gauges: ^xx.x.xx +dependencies: + syncfusion_flutter_gauges: ^xx.x.xx {% endhighlight %} +{% endtabs %} N> Here **xx.x.xx** denotes the current version of the [`Syncfusion Flutter Gauge`](https://pub.dev/packages/syncfusion_flutter_gauges/versions) package. @@ -38,40 +39,55 @@ N> Here **xx.x.xx** denotes the current version of the [`Syncfusion Flutter Gaug Run the following command to get the required packages. +{% tabs %} {% highlight dart %} - $ flutter pub get +flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. +{% tabs %} {% highlight dart %} - import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; {% endhighlight %} +{% endtabs %} ## Initialize the Linear Gauge After the package has been imported, initialize the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) as a child of any widget such as a container widget. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( - child:SfLinearGauge() + child: SfLinearGauge() ) ) ); } +} {% endhighlight %} +{% endtabs %} ![Initialize linear gauge](images/getting-started/default_linear_gauge.png) @@ -79,8 +95,17 @@ After the package has been imported, initialize the [`SfLinearGauge`](https://pu The Linear Gauge axis is a scale where a set of values can be plotted. You can specify the minimum and maximum values of the axis using the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximum.html) properties as demonstrated in the following code sample. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -91,8 +116,10 @@ The Linear Gauge axis is a scale where a set of values can be plotted. You can s ) ); } +} {% endhighlight %} +{% endtabs %} ![Add axis to linear gauge](images/getting-started/add_axis.png) @@ -100,32 +127,72 @@ The Linear Gauge axis is a scale where a set of values can be plotted. You can s As you can see in the above image, the default orientation of the Linear Gauge is horizontal. You can change it with the [`orientation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/orientation.html) property of the Linear Gauge widget. +{% tabs %} {% highlight dart %} - SfLinearGauge( - orientation: LinearGaugeOrientation.vertical - ), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + orientation: LinearGaugeOrientation.vertical + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Update Orientation of linear gauge](images/getting-started/vertical_orientation.png) ## Add range -A range is a visual element that helps you to quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a Linear gauge. You can also specify the start value, end value, and color for a range as demonstrated in the following code sample. +A range is a visual element that helps you to quickly see where a value falls on the axis track. Multiple ranges with different styles can be added to a Linear gauge. You can also specify the start value, end value, and color for a range as demonstrated in the following code sample. +{% tabs %} {% highlight dart %} - SfLinearGauge( - ranges: [ - //First range - LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green), - //Second range - LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue) - ] - ) +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + ranges: [ + //First range + LinearGaugeRange(startValue: 0, endValue: 50, color: Colors.green), + //Second range + LinearGaugeRange(startValue: 50, endValue: 100, color: Colors.blue) + ] + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Add ranges to a linear gauge](images/getting-started/add_ranges.png) @@ -135,34 +202,74 @@ The Linear Gauge supports two marker pointers - shape pointer and widget pointer The following code sample demonstrates how to add a shape pointer: +{% tabs %} {% highlight dart %} - SfLinearGauge( - markerPointers: [LinearShapePointer(value: 50)] - ), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + markerPointers: [LinearShapePointer(value: 50)] + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Add shape pointer in linear gauge](images/getting-started/add_shape_pointer.png) The following code sample demonstrates how to add a widget pointer. +{% tabs %} {% highlight dart %} - SfLinearGauge( - markerPointers: [ - LinearWidgetPointer( - value: 40, - child: Container( - height: 20, - width: 20, - decoration: BoxDecoration(color: Colors.blueAccent) - ), - ), - ], - ), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + markerPointers: [ + LinearWidgetPointer( + value: 40, + child: Container( + height: 20, + width: 20, + decoration: BoxDecoration(color: Colors.blueAccent) + ), + ), + ], + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Add widget pointer in linear gauge](images/getting-started/add_widget_pointer.png) @@ -170,65 +277,89 @@ The following code sample demonstrates how to add a widget pointer. In a Linear Gauge, the bar pointer is used to specify a value in an axis track by drawing a track from the axis's minimum value to its specified value. +{% tabs %} {% highlight dart %} - SfLinearGauge( - barPointers: [LinearBarPointer(value: 40)] - ), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + barPointers: [LinearBarPointer(value: 40)] + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Bar pointer added to a linear gauge](images/getting-started/add_bar_pointer.png) The following code example gives you the complete view of the above configurations: +{% tabs %} {% highlight dart %} - import 'package:flutter/material.dart'; - import 'package:syncfusion_flutter_gauges/gauges.dart'; - - void main() => runApp(LinearGaugeDemo()); - - class LinearGaugeDemo extends StatelessWidget { - @override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfLinearGauge( - ranges: [ - //First range - LinearGaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green - ), - //Second range - LinearGaugeRange( - startValue: 50, - endValue: 100, - color: Colors.blue - ), - ], - markerPointers: [ - LinearShapePointer(value: 50), - LinearWidgetPointer( - value: 40, - child: Container( - height: 20, - width: 20, - decoration: BoxDecoration(color: Colors.blueAccent) - ), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + ranges: [ + //First range + LinearGaugeRange( + startValue: 0, + endValue: 50, + color: Colors.green + ), + //Second range + LinearGaugeRange( + startValue: 50, + endValue: 100, + color: Colors.blue + ), + ], + markerPointers: [ + LinearShapePointer(value: 50), + LinearWidgetPointer( + value: 40, + child: Container( + height: 20, + width: 20, + decoration: BoxDecoration(color: Colors.blueAccent) ), - ], - barPointers: [LinearBarPointer(value: 40)] - ), - ) + ), + ], + barPointers: [LinearBarPointer(value: 40)] + ), ) - ); - } + ) + ); } +} {% endhighlight %} +{% endtabs %} ![A Linear gauge](images/getting-started/all_basic_elements.png) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md index 548e6a087..a79f20fa1 100644 --- a/chart-sdk/flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/linear-gauge/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: Linear Gauge Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Linear Gauge ( SfLinearGauge Widget ) widget in FlutterFlow. +title: How to Add Linear Gauge in FlutterFlow | Syncfusion® +description: Learn how to add and use Syncfusion® Flutter Linear Gauge (SfLinearGauge) in FlutterFlow, including setup, integration, and configuration. platform: chart-sdk control: SfLinearGauge documentation: ug --- -# How to add Syncfusion® Linear Gauge widget in FlutterFlow? +# How to Add Linear Gauge in FlutterFlow (SfLinearGauge) ## Overview @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The current version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -52,12 +52,12 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Add widget code snippet in code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget-specific code samples. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) +![Code snippet](how-to-section-images/Adding-code-snippet.png) -### Compiling the codes +### Compiling the code 1. Click the 'Compile Code' button located in the top right corner. 2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process. diff --git a/chart-sdk/flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippet.png b/chart-sdk/flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippet.png new file mode 100644 index 000000000..8d203d8c4 Binary files /dev/null and b/chart-sdk/flutter/linear-gauge/how-to/how-to-section-images/Adding-code-snippet.png differ diff --git a/chart-sdk/flutter/linear-gauge/interaction.md b/chart-sdk/flutter/linear-gauge/interaction.md index e2de4ba9d..bac9017a6 100644 --- a/chart-sdk/flutter/linear-gauge/interaction.md +++ b/chart-sdk/flutter/linear-gauge/interaction.md @@ -1,7 +1,7 @@ --- layout: post -title: Interaction in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about the interactions in Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more +title: Interaction in Flutter Linear Gauge | Syncfusion® +description: Learn about interaction support in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including dragging, pointer interaction, and user input handling. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -17,8 +17,18 @@ The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The following code sample demonstrates how to update a simple marker pointer value based on swipe or drag gestures: +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +class LinearGaugeDemo extends StatefulWidget { + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double shapePointerValue = 25; @override @@ -44,15 +54,27 @@ The following code sample demonstrates how to update a simple marker pointer val ), ); } +} {% endhighlight %} +{% endtabs %} ![Simple pointer interaction in linear gauge](images/interaction/simple_interaction.gif) The following code sample demonstrates how to update multiple marker pointer values based on swipe or drag gestures: +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +class LinearGaugeDemo extends StatefulWidget { + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double shapePointerValue = 85; double barPointerValue = 85; double widgetPointerValue = 26; @@ -169,7 +191,9 @@ The following code sample demonstrates how to update multiple marker pointer val ) ); } +} {% endhighlight %} +{% endtabs %} ![Shape pointer interaction in linear gauge](images/interaction/interaction.gif) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/labels.md b/chart-sdk/flutter/linear-gauge/labels.md index c8dc2c715..6a8d990fa 100644 --- a/chart-sdk/flutter/linear-gauge/labels.md +++ b/chart-sdk/flutter/linear-gauge/labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Labels of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Labels in Flutter Linear Gauge | Syncfusion® +description: Learn about label customization in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including label placement, formatting, styling, and appearance. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -23,7 +23,16 @@ Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/docum * `fontWeight` – Allows you to specify the font weight for labels. * `fontSize` – Allows you to specify the font size for labels. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -43,8 +52,10 @@ Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/docum ) ); } +} {% endhighlight %} +{% endtabs %} ![Customize linear gauge axis label style](images/axis-labels/customize_label_style.png) @@ -52,7 +63,16 @@ Axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/docum The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/showLabels.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) allows you to show or hide the visibility of axis labels. The default value of this property is true. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -64,8 +84,10 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates ), ); } +} {% endhighlight %} +{% endtabs %} ![Change visibility](images/axis-labels/axis_label_visibility.png) @@ -73,7 +95,16 @@ The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/lates The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/interval.html) between labels can be customized using the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/interval.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). The major ticks are generated based on this interval property. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -87,8 +118,10 @@ The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ ), ); } +} {% endhighlight %} +{% endtabs %} ![Set label interval in axis track](images/axis-labels/axis_label_interval.png) @@ -96,7 +129,16 @@ The [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ The linear axis allows you to position the labels either `inside` or `outside` the axis track using the [`labelPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelPosition.html) property. By default, labels are positioned `inside` the axis track. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -111,8 +153,10 @@ The linear axis allows you to position the labels either `inside` or `outside` t ) ); } +} {% endhighlight %} +{% endtabs %} ![Set linear gauge label position](images/axis-labels/label-placement.png) @@ -121,7 +165,16 @@ The linear axis allows you to position the labels either `inside` or `outside` t The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelOffset.html) property allows you to adjust the distance between the tick-end and the labels. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -135,8 +188,10 @@ The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/late ) ); } +} {% endhighlight %} +{% endtabs %} ![Set linear gauge label offset](images/axis-labels/label_offset.png) @@ -144,7 +199,16 @@ The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/late By default, a maximum of three labels is displayed for every 100 logical pixels in an axis. The maximum number of labels that should be present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/maximumLabels.html) property of the axis. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -158,8 +222,10 @@ By default, a maximum of three labels is displayed for every 100 logical pixels ) ); } +} {% endhighlight %} +{% endtabs %} ![Set maximum number of labels in axis track](images/axis-labels/axis_label_visibility.png) @@ -167,24 +233,44 @@ By default, a maximum of three labels is displayed for every 100 logical pixels You can format or change the whole numeric label text using the [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/labelFormatterCallback.html). +{% tabs %} {% highlight dart %} - SfLinearGauge( - labelFormatterCallback: (label) { - if (label == '0') { - return 'Start'; - } - if (label == '50') { - return 'Mid'; - } - if (label == '100') { - return 'End'; - } - return label; - } - ) +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + labelFormatterCallback: (label) { + if (label == '0') { + return 'Start'; + } + if (label == '50') { + return 'Mid'; + } + if (label == '100') { + return 'End'; + } + return label; + } + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Customize Label Text in axis track](images/axis-labels/custom_label_text.png) @@ -192,13 +278,33 @@ You can format or change the whole numeric label text using the [`labelFormatter The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/numberFormat.html) property is used to format the numeric labels. The default value of this property is null. - +{% tabs %} {% highlight dart %} - SfLinearGauge( - numberFormat: NumberFormat("\$") - ), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:intl/intl.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: SfLinearGauge( + numberFormat: NumberFormat("\$") + ) + ) + ) + ); + } +} {% endhighlight %} +{% endtabs %} ![Customize Label Format in Axis Label](images/axis-labels/axis_label_number_format.png) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md b/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md index cb9c35fe8..f3804a208 100644 --- a/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md +++ b/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md @@ -1,26 +1,43 @@ --- layout: post -title: Mirror in Flutter Linear Gauge widget | Syncfusion -description: Learn here about mirroring the Syncfusion Flutter Linear Gauge (SfLinearGauge) widget with isMirrored property +title: Mirroring in Flutter Linear Gauge | Syncfusion® +description: Learn about mirroring support in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including reverse layout configuration using the isMirrored property. platform: chart-sdk control: SfLinearGauge documentation: ug --- -# Mirrored in Flutter Linear Gauge (SfLinearGauge) +# Mirroring in Flutter Linear Gauge (SfLinearGauge) The [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) allows you to mirror all the gauge elements. This feature is useful when you need to display the gauge in the opposite direction. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Center( - child: SfLinearGauge(isMirrored: true) + return MaterialApp( + title: 'Linear Gauge Demo', + theme: ThemeData(primarySwatch: Colors.blue), + home: const Scaffold( + body: Center( + child: SfLinearGauge(isMirrored: true), + ), + ), ); } +} {% endhighlight %} +{% endtabs %} ![Mirror linear gauge](images/mirrored/mirrored.png) diff --git a/chart-sdk/flutter/linear-gauge/overview.md b/chart-sdk/flutter/linear-gauge/overview.md index 4b07d6a2b..2d6dfdaac 100644 --- a/chart-sdk/flutter/linear-gauge/overview.md +++ b/chart-sdk/flutter/linear-gauge/overview.md @@ -1,27 +1,27 @@ --- layout: post -title: About Flutter Linear Gauge widget | Syncfusion -description: Learn here all about introduction of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget, its features, and more. +title: About Flutter Linear Gauge Control | Syncfusion® +description: Learn about the Syncfusion® Flutter Linear Gauge (SfLinearGauge), its features, gauge elements, data visualization, and customization options. platform: chart-sdk control: SfLinearGauge documentation: ug --- -# Flutter Linear Gauge (SfLinearGauge) Overview +# About Flutter Linear Gauge Control (SfLinearGauge) -Syncfusion® Flutter Linear Gauge is a powerful data visualization widget designed to display data on a linear scale. It's an ideal component for crafting high-quality mobile app user interfaces that require visual representation of data along a linear axis. +Syncfusion® Flutter Linear Gauge is a powerful data visualization widget designed to display data on a linear scale. It's an ideal component for crafting high-quality mobile application user interfaces that require visual representation of data along a linear axis. ![Overview flutter linear gauge](images/basic_elements.png) ## Key Features -* **Orientation** - The Linear Gauge supports both vertical and horizontal orientations, giving you flexibility in your layout design. -* **Axis** - The axis serves as a scale where values are plotted. You can customize the axis by adjusting its thickness and edge styles, and even inverse the axis direction. -* **Labels and Ticks** - Axis elements such as labels, major ticks, and minor ticks can be styled in various ways to match your application's design. -* **Ranges** - Ranges are visual elements that help users quickly visualize where specific values fall on the axis track. You can add multiple ranges with different styles to enhance data visualization. -* **Pointers** - A pointer is used to indicate a specific value on an axis. The widget has three types of pointers: shape marker pointer, widget marker pointer, and bar pointer. All the pointers can be customized as needed and you can also add multiple pointers in the Linear Gauge. -* **Mirror Gauge** - The Linear Gauge can be mirrored. When the [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property is true, all the gauge elements will be rendered in mirror effect. -* **Animation** - Add visually appealing animations to gauge elements when they load or when their values change. -* **Interaction** - The shape and widget marker pointers in the Linear Gauge support interactive movement through swiping or drag gestures, allowing users to change values dynamically. +* **[Orientation](orientation.md)** - The Linear Gauge supports both vertical and horizontal orientations, giving you flexibility in your layout design. +* **[Axis](axis.md)** - The axis serves as a scale where values are plotted. You can customize the axis by adjusting its thickness and edge styles, and even inverse the axis direction. +* **[Labels and Ticks](labels.md)** - Axis elements such as labels, major ticks, and minor ticks can be styled in various ways to match your application's design. +* **[Ranges](range.md)** - Ranges are visual elements that help users quickly visualize where specific values fall on the axis track. You can add multiple ranges with different styles to enhance data visualization. +* **[Pointers](shape-marker-pointer.md)** - A pointer is used to indicate a specific value on an axis. The widget has three types of pointers: shape marker pointer, widget marker pointer, and bar pointer. All the pointers can be customized as needed and you can also add multiple pointers in the Linear Gauge. +* **[Mirror Gauge](mirror-linear-gauge.md)** - The Linear Gauge can be mirrored. When the [`isMirrored`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/isMirrored.html) property is true, all the gauge elements will be rendered in mirror effect. +* **[Animation](animation.md)** - Add visually appealing animations to gauge elements when they load or when their values change. +* **[Interaction](interaction.md)** - The shape and widget marker pointers in the Linear Gauge support interactive movement through swiping or drag gestures, allowing users to change values dynamically. You can get the sample in the following link: [`Flutter Linear Gauge`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/linear_gauge). \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/range.md b/chart-sdk/flutter/linear-gauge/range.md index 462cfcd38..72dabcf27 100644 --- a/chart-sdk/flutter/linear-gauge/range.md +++ b/chart-sdk/flutter/linear-gauge/range.md @@ -1,17 +1,26 @@ --- layout: post -title: Range in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Range of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Ranges in Flutter Linear Gauge | Syncfusion® +description: Learn about ranges in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including range customization, colors, positioning, and styling options. platform: chart-sdk control: SfLinearGauge documentation: ug --- -# Range in Flutter Linear Gauge (SfLinearGauge) +# Ranges in Flutter Linear Gauge (SfLinearGauge) A range is a visual element that helps you quickly visualize where a range falls on the axis track. Multiple ranges with different styles can be added to a linear gauge. The default style of range will be as below. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -30,8 +39,10 @@ A range is a visual element that helps you quickly visualize where a range falls ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Initialize linear gauge for range](images/gauge-range/default-range.png) @@ -42,7 +53,16 @@ A Linear Gauge range has three values to draw a range - [`startValue`](https://p However, to draw concave, convex and exponential-like shapes the [`midValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midValue.html) and [`midWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/midWidth.html) properties are needed. For this, the [`rangeShapeType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/rangeShapeType.html) is used to create the curve. The below code snippet demonstrates how to create a concave shape for a range. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -66,8 +86,10 @@ However, to draw concave, convex and exponential-like shapes the [`midValue`](ht ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Draw linear gauge concave range](images/gauge-range/range-concave.png) @@ -77,7 +99,16 @@ The [`edgeStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The default value is `bothFlat`. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -104,8 +135,10 @@ The default value is `bothFlat`. ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change the gauge range edge style](images/gauge-range/edge_style.png) @@ -113,7 +146,16 @@ The default value is `bothFlat`. The color of a range can be changed by setting the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/color.html) property of a range. The below code example demonstrates changing the color property of the range. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -130,8 +172,10 @@ The color of a range can be changed by setting the [`color`](https://pub.dev/doc ), ); } +} {% endhighlight %} +{% endtabs %} ![Set linear gauge range color](images/gauge-range/color_range.png) @@ -139,7 +183,16 @@ The color of a range can be changed by setting the [`color`](https://pub.dev/doc The gradient can be applied by using the [`shaderCallback`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/shaderCallback.html) property of a range. The below code example demonstrates applying a radial gradient to the range. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -166,16 +219,27 @@ The gradient can be applied by using the [`shaderCallback`](https://pub.dev/docu ), ); } - +} + {% endhighlight %} +{% endtabs %} -![Apply radial gradient to linear guage range](images/gauge-range/radial_gardient_range.png) +![Apply radial gradient to linear gauge range](images/gauge-range/radial_gardient_range.png) ## Apply linear gradient to a range The below code snippet demonstrates applying a linear gradient to the range. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -199,16 +263,27 @@ The below code snippet demonstrates applying a linear gradient to the range. ), ); } - +} + {% endhighlight %} +{% endtabs %} -![Apply linear gradient to linear guage range](images/gauge-range/linear_gardient_range.png) +![Apply linear gradient to linear gauge range](images/gauge-range/linear_gardient_range.png) ## Apply sweep gradient to a range The below code snippet demonstrates applying a sweep gradient to the range. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -238,16 +313,27 @@ The below code snippet demonstrates applying a sweep gradient to the range. ), ); } - +} + {% endhighlight %} +{% endtabs %} -![Apply sweep gradient to linear guage range](images/gauge-range/sweep_gradient_range.png) +![Apply sweep gradient to linear gauge range](images/gauge-range/sweep_gradient_range.png) ## Customize range position It is possible to position the ranges `inside`, `cross`, and `outside` the axis. By default, the range will be positioned `outside` the axis. The [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearGaugeRange/position.html) property of the range is used to position the range. The below code snippet demonstrates the same. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -265,8 +351,10 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the axis. ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Position the linear gauge range](images/gauge-range/range_position.png) @@ -274,38 +362,58 @@ It is possible to position the ranges `inside`, `cross`, and `outside` the axis. You can set range color to axis elements using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/useRangeColorForAxis.html) property of axis. -{% highlight dart %} - - Container( - child: SfLinearGauge( - minorTicksPerInterval: 4, - useRangeColorForAxis: true, - animateAxis: true, - axisTrackStyle: LinearAxisTrackStyle(thickness: 1), - ranges: [ - LinearGaugeRange( - startValue: 0, - endValue: 33, - position: LinearElementPosition.outside, - color: Color(0xffF45656), - ), - LinearGaugeRange( - startValue: 33, - endValue: 66, - position: LinearElementPosition.outside, - color: Color(0xffFFC93E), - ), - LinearGaugeRange( - startValue: 66, - endValue: 100, - position: LinearElementPosition.outside, - color: Color(0xff0DC9AB), +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfLinearGauge( + minorTicksPerInterval: 4, + useRangeColorForAxis: true, + animateAxis: true, + axisTrackStyle: LinearAxisTrackStyle(thickness: 1), + ranges: [ + LinearGaugeRange( + startValue: 0, + endValue: 33, + position: LinearElementPosition.outside, + color: Color(0xffF45656), + ), + LinearGaugeRange( + startValue: 33, + endValue: 66, + position: LinearElementPosition.outside, + color: Color(0xffFFC93E), + ), + LinearGaugeRange( + startValue: 66, + endValue: 100, + position: LinearElementPosition.outside, + color: Color(0xff0DC9AB), + ), + ], + ), + ), ), - ], - ) - ) + ), + ); + } +} {% endhighlight %} +{% endtabs %} ![Set range color to axis element](images/gauge-range/range_userangeforaxis.png) @@ -313,7 +421,16 @@ You can set range color to axis elements using the [`useRangeColorForAxis`](http You can add multiple ranges for an axis. The below code example demonstrates adding three ranges in a Linear Gauge. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -340,7 +457,9 @@ You can add multiple ranges for an axis. The below code example demonstrates add ), ); } +} {% endhighlight %} +{% endtabs %} ![Add multiple ranges in a linear gauge](images/gauge-range/multiple_ranges.png) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/shape-marker-pointer.md b/chart-sdk/flutter/linear-gauge/shape-marker-pointer.md index 67dfc1151..9df0ac613 100644 --- a/chart-sdk/flutter/linear-gauge/shape-marker-pointer.md +++ b/chart-sdk/flutter/linear-gauge/shape-marker-pointer.md @@ -1,7 +1,7 @@ --- layout: post -title: Shape Marker Pointer in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Shape Marker Pointer of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Shape Marker Pointer in Flutter Linear Gauge | Syncfusion® +description: Learn about shape marker pointers in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including marker types, positioning, customization, and styling. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -17,9 +17,18 @@ The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gaug 4. `Diamond` 5. `Rectangle` -The following is the default appearance of default shape pointer. +The following is the default appearance of the default shape pointer. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -33,8 +42,10 @@ The following is the default appearance of default shape pointer. ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Initialize linear gauge for shape pointer](images/shape-pointer/default_shape_pointer.png) @@ -42,7 +53,16 @@ The following is the default appearance of default shape pointer. The size of the marker pointer can be changed by the [`height`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/height.html) and [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/width.html) properties of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). The following code sample demonstrates how to change the size of a shape pointer: -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -57,8 +77,10 @@ The size of the marker pointer can be changed by the [`height`](https://pub.dev/ ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Set size of linear gauge shape pointer](images/shape-pointer/shape_pointer_size.png) @@ -66,7 +88,16 @@ The size of the marker pointer can be changed by the [`height`](https://pub.dev/ The color of the shape pointer can be changed by the [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/color.html) property. The following code example demonstrates the same. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -81,8 +112,10 @@ The color of the shape pointer can be changed by the [`color`](https://pub.dev/d ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change shape pointer color](images/shape-pointer/shape_pointer_color.png) @@ -90,7 +123,16 @@ The color of the shape pointer can be changed by the [`color`](https://pub.dev/d The border can be customized by the [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/borderColor.html) and [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/borderWidth.html) properties of the [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -109,8 +151,10 @@ The border can be customized by the [`borderColor`](https://pub.dev/documentatio ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize shape pointer border](images/shape-pointer/shape_border.png) @@ -118,7 +162,16 @@ The border can be customized by the [`borderColor`](https://pub.dev/documentatio The elevation can be customized by the [`elevation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/elevation.html) and [`elevationColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/elevationColor.html) properties. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -141,16 +194,27 @@ The elevation can be customized by the [`elevation`](https://pub.dev/documentati ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change shape pointer elevation](images/shape-pointer/pointer_elevation.png) ## Change marker alignment -The marker pointer alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/markerAlignment.html) property of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html).The available marker pointer alignments are `start`, `end`, and `center`. +The marker pointer alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/markerAlignment.html) property of [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). The available marker pointer alignments are `start`, `end`, and `center`. + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); -{% highlight dart %} +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -169,16 +233,27 @@ The marker pointer alignment can be changed by the [`markerAlignment`](https://p ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change shape pointer alignment](images/shape-pointer/shape_marker_alignment.png) ## Customize position -By default, the shape pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/position.html) property of a [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). It is possible to position the shape pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the shape pointer position to inside the axis. +By default, the shape pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/position.html) property of a [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html). It is possible to position the shape pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to position the shape pointer inside the axis. + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; -{% highlight dart %} +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -198,16 +273,27 @@ By default, the shape pointer is positioned `outside` the axis. This position ca ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change shape pointer position](images/shape-pointer/shape_pointer_position.png) ## Customize offset -In addition to position the shape pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) is the distance from the axis and it cannot be negative and The cross positioned elements will not get affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) value. The following code sample demonstrates how to change the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) value of the shape pointer. +In addition to positioning the shape pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) is the distance from the axis and it cannot be negative. Cross-positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) value. The following code sample demonstrates how to change the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/offset.html) value of the shape pointer. + +{% tabs %} +{% highlight dart %} -{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -228,8 +314,10 @@ In addition to position the shape pointer, it is also possible to change the off ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize linear gauge bar pointer offset](images/shape-pointer/shape_pointer_offset.png) @@ -241,8 +329,22 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point ### Free +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double _firstPointer = 30; double _secondPointer = 70; @@ -279,15 +381,31 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point ), ); } +} {% endhighlight %} +{% endtabs %} ![Pointers drag behavior](images/shape-pointer/free-drag-behavior.gif) ### Constrained +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double _firstPointer = 30; double _secondPointer = 70; @@ -324,17 +442,33 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point ), ); } +} {% endhighlight %} +{% endtabs %} ![Pointers drag behavior](images/shape-pointer/constraint-drag-behavior.gif) ## Handle onChangeStart, onChanged, and onChangeEnd callbacks -The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html) callback will be called when the user start dragging the pointer, the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html) callback will be called when dragging the pointer and the [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callback will be called when the user stops the pointer dragging. +The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeStart.html) callback will be called when the user starts dragging the pointer. The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChanged.html) callback will be called when dragging the pointer. The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onChangeEnd.html) callback will be called when the user stops dragging the pointer. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double _value = 50; @override @@ -361,15 +495,26 @@ The [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gaug ), ); } +} {% endhighlight %} +{% endtabs %} ## Animation completed callback The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) callback in the [`LinearShapePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer-class.html) will be triggered when the shape pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearShapePointer/onAnimationCompleted.html) callback is `null`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -379,7 +524,8 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga markerPointers:[ LinearShapePointer( onAnimationCompleted: () { - print("Shape Pointer animation is completed"); + // Shape Pointer animation is completed + debugPrint('Shape Pointer animation is completed'); }, ), ], @@ -388,5 +534,7 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga ), ); } +} {% endhighlight %} +{% endtabs %} diff --git a/chart-sdk/flutter/linear-gauge/ticks.md b/chart-sdk/flutter/linear-gauge/ticks.md index 2aebcf973..a98a41d05 100644 --- a/chart-sdk/flutter/linear-gauge/ticks.md +++ b/chart-sdk/flutter/linear-gauge/ticks.md @@ -1,7 +1,7 @@ --- layout: post -title: Ticks in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Ticks of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Ticks in Flutter Linear Gauge | Syncfusion® +description: Learn about tick customization in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including major ticks, minor ticks, intervals, and styling options. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -15,12 +15,20 @@ The default style of axis ticks is as follows. ## Customize tick style -There are two types of ticks in the Flutter Linear Gauge namely major and minor ticks. In the above image, the larger ticks are major ticks and the ticks between the major ticks are minor ticks. The major and minor tick of a [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be customized using the [`majorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/majorTickStyle.html) and [`minorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MinorTickStyle-class.html) properties. The following properties can be customized for both the major and the minor ticks: +There are two types of ticks in the Flutter Linear Gauge namely major and minor ticks. In the above image, the larger ticks are major ticks and the ticks between the major ticks are minor ticks. The major and minor tick of a [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be customized using the [`majorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/majorTickStyle.html) and [`minorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MinorTickStyle-class.html) properties. Refer to the [labels](labels.md) documentation to understand how to customize axis labels alongside ticks. The following properties can be customized for both the major and the minor ticks: * [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/color.html) – Allows customization of the tick color. * [`thickness`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/thickness.html) – Allows customization of the thickness of ticks. -* [`length`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/length.html) – Specifics the length of ticks. +* [`length`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/length.html) – Specifies the length of ticks. -{% highlight dart %} +{% tabs %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -35,8 +43,9 @@ There are two types of ticks in the Flutter Linear Gauge namely major and minor ) ); } - +} {% endhighlight %} +{% endtabs %} ![Customize the linear gauge axis tick style](images/axis-ticks/axis-tick-style.png) @@ -44,20 +53,29 @@ There are two types of ticks in the Flutter Linear Gauge namely major and minor The major ticks are generated based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/interval.html) property which is documented in `Customize the interval between labels` topic. The minor ticks are calculated using the [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/minorTicksPerInterval.html) property of [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html). By default, the value of this property is 1. -{% highlight dart %} +{% tabs %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( - body: Center( - child: SfLinearGauge(minorTicksPerInterval: 4) + body: Center( + child: SfLinearGauge(minorTicksPerInterval: 4) ) ) ); } - +} {% endhighlight %} +{% endtabs %} ![Customize linear gauge ticks per interval](images/axis-ticks/minor-ticks-per-interval.png) @@ -65,7 +83,15 @@ The major ticks are generated based on the [`interval`](https://pub.dev/document The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/showTicks.html) property of the axis is used to enable or disable the visibility of both the major and the minor ticks. The default value of this property is true. -{% highlight dart %} +{% tabs %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -79,8 +105,9 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest ) ); } - +} {% endhighlight %} +{% endtabs %} ![Customize linear gauge ticks visibility](images/axis-ticks/linear-gauge-tick-visibility.png) @@ -88,7 +115,15 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The linear axis allows positioning the ticks either inside or outside the axis track using the [`tickPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/tickPosition.html) property. By default, ticks are positioned inside the axis track. -{% highlight dart %} +{% tabs %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -103,8 +138,9 @@ The linear axis allows positioning the ticks either inside or outside the axis t ) ); } - +} {% endhighlight %} +{% endtabs %} ![Customize linear gauge ticks placement](images/axis-ticks/tick-placement.png) @@ -113,7 +149,15 @@ The linear axis allows positioning the ticks either inside or outside the axis t The ticks can be moved near or far from the axis line using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/tickOffset.html) property. The default value of tick offset is 0. While setting offset for the ticks, the axis labels are also moved along with the ticks. -{% highlight dart %} +{% tabs %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -125,8 +169,9 @@ The ticks can be moved near or far from the axis line using the [`tickOffset`](h ) ); } - +} {% endhighlight %} +{% endtabs %} ![Customize linear gauge ticks offset from axis](images/axis-ticks/customize-tick-offset.png) diff --git a/chart-sdk/flutter/linear-gauge/widget-marker-pointer.md b/chart-sdk/flutter/linear-gauge/widget-marker-pointer.md index 0454bdb5c..a3458f2a9 100644 --- a/chart-sdk/flutter/linear-gauge/widget-marker-pointer.md +++ b/chart-sdk/flutter/linear-gauge/widget-marker-pointer.md @@ -1,7 +1,7 @@ --- layout: post -title: Widget Marker Pointer in Flutter Linear Gauge widget | Syncfusion -description: Learn here all about adding and customizing Widget Marker Pointer of Syncfusion Flutter Linear Gauge (SfLinearGauge) widget and more. +title: Widget Marker Pointer in Flutter Linear Gauge | Syncfusion® +description: Learn about widget marker pointers in Syncfusion® Flutter Linear Gauge (SfLinearGauge), including custom widgets, positioning, styling, and interactions. platform: chart-sdk control: SfLinearGauge documentation: ug @@ -9,9 +9,18 @@ documentation: ug # Widget Marker Pointer in Flutter Linear Gauge (SfLinearGauge) -The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/LinearWidgetPointer.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) allows you to use any Flutter widget as a marker pointer. The following code sample uses a [`container`](https://api.flutter.dev/flutter/widgets/Container-class.html) as marker widget. +The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/LinearWidgetPointer.html) in [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge/SfLinearGauge.html) allows you to use any Flutter widget as a marker pointer. The following code sample uses a [`Container`](https://api.flutter.dev/flutter/widgets/Container-class.html) as a marker widget. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -28,16 +37,27 @@ The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gau ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Initialize linear gauge for widget pointer](images/widget-pointer/default_widget_pointer.png) ## Change marker alignment -The widget marker pointer's alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/markerAlignment.html) property of [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html). The available marker positions are `start`, `end`, and `center`. +The widget marker pointer alignment can be changed by the [`markerAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/markerAlignment.html) property of [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html). The available marker positions are `start`, `end`, and `center`. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -60,16 +80,27 @@ The widget marker pointer's alignment can be changed by the [`markerAlignment`]( ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize size of widget pointer](images/widget-pointer/widget_alignment.png) ## Change the position -By default, the widget pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html) property of a [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html). It is possible to position the wwidget pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to change the widget pointer position to `inside` the axis. +By default, the widget pointer is positioned `outside` the axis. This position can be changed by the [`position`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html) property of a [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/position.html). It is possible to position the widget pointer `inside`, `cross`, or `outside` the axis. The following code sample demonstrates how to position the widget pointer inside the axis. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -87,16 +118,27 @@ By default, the widget pointer is positioned `outside` the axis. This position c ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Change widget pointer position](images/widget-pointer/widget_pointer_position.png) ## Change the offset -In addition to position the widget marker pointer, it is also possible to change the offset of the shape pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) is the distance from the axis and it cannot be negative. The cross positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the shape pointer. +In addition to positioning the widget marker pointer, it is also possible to change the offset of the widget pointer. The [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) is the distance from the axis and it cannot be negative. Cross-positioned elements will not be affected by the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/offset.html) value. The following code sample demonstrates how to change the offset value of the widget pointer. + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); -{% highlight dart %} +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -119,8 +161,10 @@ In addition to position the widget marker pointer, it is also possible to change ), ); } - +} + {% endhighlight %} +{% endtabs %} ![Customize linear gauge bar pointer offset](images/widget-pointer/widget_pointer_offset.png) @@ -132,8 +176,22 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point ### Free +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double _firstPointer = 30; double _secondPointer = 70; @@ -168,15 +226,31 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point ), ); } +} {% endhighlight %} +{% endtabs %} ![Pointers drag behavior](images/widget-pointer/free-drag-behavior.gif) ### Constrained +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double _firstPointer = 30; double _secondPointer = 70; @@ -211,17 +285,33 @@ The `LinearMarkerDragBehavior.constrained` can be used to limit the active point ), ); } +} {% endhighlight %} +{% endtabs %} ![Pointers drag behavior](images/widget-pointer/constraint-drag-behavior.gif) ## Handle onChangeStart, onChanged, and onChangeEnd callbacks -The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html) callback will be called when the user start dragging the pointer, the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html) callback will be called when dragging the pointer and the [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callback will be called when the user stops the pointer dragging. +The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) provides the [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html), [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html), and [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callbacks. The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeStart.html) callback will be called when the user starts dragging the pointer. The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChanged.html) callback will be called when dragging the pointer. The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onChangeEnd.html) callback will be called when the user stops dragging the pointer. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatefulWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + + @override + State createState() => _LinearGaugeDemoState(); +} + +class _LinearGaugeDemoState extends State { double _value = 50; @override @@ -248,15 +338,26 @@ The [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gau ), ); } +} {% endhighlight %} +{% endtabs %} ## Animation completed callback The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onAnimationCompleted.html) callback in the [`LinearWidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer-class.html) will be triggered when the widget pointer animation is completed. The default value of the [onAnimationCompleted](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/LinearWidgetPointer/onAnimationCompleted.html) callback is `null`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const LinearGaugeDemo()); + +class LinearGaugeDemo extends StatelessWidget { + const LinearGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return MaterialApp( @@ -266,7 +367,8 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga markerPointers:[ LinearWidgetPointer( onAnimationCompleted: () { - print("Widget Pointer animation is completed"); + // Widget Pointer animation is completed + debugPrint('Widget Pointer animation is completed'); }, ), ], @@ -275,5 +377,7 @@ The [`onAnimationCompleted`](https://pub.dev/documentation/syncfusion_flutter_ga ), ); } +} {% endhighlight %} +{% endtabs %} diff --git a/chart-sdk/flutter/maps/accessibility.md b/chart-sdk/flutter/maps/accessibility.md index d5c5f9157..80bcb9a85 100644 --- a/chart-sdk/flutter/maps/accessibility.md +++ b/chart-sdk/flutter/maps/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Flutter maps widget | Syncfusion -description: Learn here all about the accessibility support in Syncfusion Flutter maps (SfMaps) widget and how to customize it. +title: Accessibility in Flutter Maps | Syncfusion® +description: Learn about accessibility support in Syncfusion® Flutter Maps (SfMaps), including screen readers, keyboard navigation, and assistive technologies. platform: chart-sdk control: SfMaps documentation: ug @@ -16,6 +16,15 @@ The [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { late List _data; late MapShapeSource _dataSource; late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent'; @@ -56,6 +65,7 @@ The [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInCrores); @@ -71,17 +81,17 @@ class PopulationModel { You can customize the color of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) elements using the following APIs to ensure sufficient contrast: -* [`Shape`](https://help.syncfusion.com/flutter/maps/shape#shape-color) -* [`Bubble`](https://help.syncfusion.com/flutter/maps/bubble#color) -* [`Data labels`](https://help.syncfusion.com/flutter/maps/data-labels#appearance-customization) -* [`Legend`](https://help.syncfusion.com/flutter/maps/legend#icon-and-text-customization) -* [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip#appearance-customization) -* [`Sublayer`](https://help.syncfusion.com/flutter/maps/shape-sublayer#color-and-stroke-color) -* [`Line layer`](https://help.syncfusion.com/flutter/maps/vector-layers/line-layer#color) -* [`Arc layer`](https://help.syncfusion.com/flutter/maps/vector-layers/arc-layer#color) -* [`Polyline layer`](https://help.syncfusion.com/flutter/maps/vector-layers/polyline-layer#color) -* [`Polygon layer`](https://help.syncfusion.com/flutter/maps/vector-layers/polygon-layer#fill-color) -* [`Circle layer`](https://help.syncfusion.com/flutter/maps/vector-layers/circle-layer#fill-color) +* [`Shape`](https://help.syncfusion.com/chart-sdk/flutter/maps/shape#shape-color) +* [`Bubble`](https://help.syncfusion.com/chart-sdk/flutter/maps/bubble#color) +* [`Data labels`](https://help.syncfusion.com/chart-sdk/flutter/maps/data-labels#appearance-customization) +* [`Legend`](https://help.syncfusion.com/chart-sdk/flutter/maps/legend#icon-and-text-customization) +* [`Tooltip`](https://help.syncfusion.com/chart-sdk/flutter/maps/tooltip#appearance-customization) +* [`Sublayer`](https://help.syncfusion.com/chart-sdk/flutter/maps/shape-sublayer#color-and-stroke-color) +* [`Line layer`](https://help.syncfusion.com/chart-sdk/flutter/maps/vector-layers/line-layer#color) +* [`Arc layer`](https://help.syncfusion.com/chart-sdk/flutter/maps/vector-layers/arc-layer#color) +* [`Polyline layer`](https://help.syncfusion.com/chart-sdk/flutter/maps/vector-layers/polyline-layer#color) +* [`Polygon layer`](https://help.syncfusion.com/chart-sdk/flutter/maps/vector-layers/polygon-layer#fill-color) +* [`Circle layer`](https://help.syncfusion.com/chart-sdk/flutter/maps/vector-layers/circle-layer#fill-color) ## Large fonts @@ -89,9 +99,9 @@ The font size of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter Additionally, you can manually adjust the font size of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) elements using these APIs: -* [`Data label style`](https://help.syncfusion.com/flutter/maps/data-labels#appearance-customization) -* [`Legend text style`](https://help.syncfusion.com/flutter/maps/legend#text-style) -* [`Tooltip label style`](https://help.syncfusion.com/flutter/maps/tooltip#tooltip-for-the-shapes) +* [`Data label style`](https://help.syncfusion.com/chart-sdk/flutter/maps/data-labels#appearance-customization) +* [`Legend text style`](https://help.syncfusion.com/chart-sdk/flutter/maps/legend#text-style) +* [`Tooltip label style`](https://help.syncfusion.com/chart-sdk/flutter/maps/tooltip#tooltip-for-the-shapes) ## Easier touch targets diff --git a/chart-sdk/flutter/maps/bubble.md b/chart-sdk/flutter/maps/bubble.md index 239ba9175..7a33c3ce4 100644 --- a/chart-sdk/flutter/maps/bubble.md +++ b/chart-sdk/flutter/maps/bubble.md @@ -1,7 +1,7 @@ --- layout: post -title: Bubbles in Flutter Maps widget | Syncfusion -description: Learn here all about the Bubbles feature of Syncfusion Flutter Maps (SfMaps) widget to customize their appearances and more. +title: Bubbles in Flutter Maps | Syncfusion® +description: Learn about bubble support in Syncfusion® Flutter Maps (SfMaps), including bubble sizing, data visualization, appearance customization, and styling. platform: chart-sdk control: SfMaps documentation: ug @@ -18,44 +18,54 @@ You can enable bubbles using the [`MapShapeSource.bubbleSizeMapper`](https://pub {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - super.initState(); - data = [ - Model('Asia', 51), - Model('Africa', 58), - Model('Europe', 48), - Model('North America', 41), - Model('South America', 14), - Model('Australia', 23), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - bubbleSizeMapper: (int index) => data[index].count, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + super.initState(); + data = [ + Model('Asia', 51), + Model('Africa', 58), + Model('Europe', 48), + Model('North America', 41), + Model('South America', 14), + Model('Australia', 23), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + bubbleSizeMapper: (int index) => data[index].count, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + ), + ], + ), ), - ), - ); + ); + } } class Model { @@ -77,57 +87,67 @@ You can enable tooltip for the bubbles using the [`MapShapeLayer.bubbleTooltipBu {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - super.initState(); - - data = [ - Model('Asia', 50, '44,579,000 sq. km.'), - Model('Africa', 54, '30,370,000 sq. km.'), - Model('Europe', 51, '10,180,000 sq. km.'), - Model('North America', 23, '24,709,000 sq. km.'), - Model('South America', 12, '17,840,000 sq. km.'), - Model('Australia', 14, '8,600,000 sq. km.'), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - bubbleSizeMapper: (int index) => data[index].countriesCount, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - final ThemeData themeData = Theme.of(context); - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - bubbleTooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: EdgeInsets.all(10), - child: Text('Continent : ' + - data[index].continent + - '\nTotal Countries : ' + - data[index].countriesCount.toStringAsFixed(0), - style: themeData.textTheme.caption! - .copyWith(color: themeData.colorScheme.surface)), - ); - }, - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + super.initState(); + + data = [ + Model('Asia', 50, '44,579,000 sq. km.'), + Model('Africa', 54, '30,370,000 sq. km.'), + Model('Europe', 51, '10,180,000 sq. km.'), + Model('North America', 23, '24,709,000 sq. km.'), + Model('South America', 12, '17,840,000 sq. km.'), + Model('Australia', 14, '8,600,000 sq. km.'), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + bubbleSizeMapper: (int index) => data[index].countriesCount, + ); + } + + @override + Widget build(BuildContext context) { + final ThemeData themeData = Theme.of(context); + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + bubbleTooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: EdgeInsets.all(10), + child: Text('Continent : ' + + data[index].continent + + '\nTotal Countries : ' + + data[index].countriesCount.toStringAsFixed(0), + style: themeData.textTheme.labelSmall! + .copyWith(color: themeData.colorScheme.surface)), + ); + }, + ), + ], + ), ), - ), - ); + ); + } } class Model { @@ -154,50 +174,60 @@ If [`bubbleColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_m {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - super.initState(); - - data = [ - Model('Asia', 51, Colors.red[400]!), - Model('Africa', 58, Colors.green[400]!), - Model('Europe', 48, Colors.blue[400]!), - Model('North America', 41, Colors.purple[400]!), - Model('South America', 14, Colors.yellow[400]!), - Model('Australia', 23, Colors.orange[400]!), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - bubbleSizeMapper: (int index) => data[index].count, - bubbleColorValueMapper: (int index) => data[index].bubbleColor, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - bubbleSettings: MapBubbleSettings( - maxRadius: 30, - minRadius: 15, +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + super.initState(); + + data = [ + Model('Asia', 51, Colors.red[400]!), + Model('Africa', 58, Colors.green[400]!), + Model('Europe', 48, Colors.blue[400]!), + Model('North America', 41, Colors.purple[400]!), + Model('South America', 14, Colors.yellow[400]!), + Model('Australia', 23, Colors.orange[400]!), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + bubbleSizeMapper: (int index) => data[index].count, + bubbleColorValueMapper: (int index) => data[index].bubbleColor, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + bubbleSettings: MapBubbleSettings( + maxRadius: 30, + minRadius: 15, + ), ), - ), - ], + ], + ), ), - ), - ); + ); + } } class Model { @@ -226,51 +256,61 @@ You can customize the following appearance properties of the bubbles: {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - data = [ - Model('Asia', 51), - Model('Africa', 58), - Model('Europe', 48), - Model('North America', 41), - Model('South America', 14), - Model('Australia', 23), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - bubbleSizeMapper: (int index) => data[index].count, - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - bubbleSettings: MapBubbleSettings( - maxRadius: 30, - minRadius: 15, - color: Colors.red[200], - strokeWidth: 2, - strokeColor: Colors.red[800], - ), - ) - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + super.initState(); + data = [ + Model('Asia', 51), + Model('Africa', 58), + Model('Europe', 48), + Model('North America', 41), + Model('South America', 14), + Model('Australia', 23), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + bubbleSizeMapper: (int index) => data[index].count, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + bubbleSettings: MapBubbleSettings( + maxRadius: 30, + minRadius: 15, + color: Colors.red[200], + strokeWidth: 2, + strokeColor: Colors.red[800], + ), + ) + ], + ), ), - ), - ); + ); + } } class Model { @@ -299,58 +339,69 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; -@override -void initState() { - super.initState(); - data = [ - Model('Asia', 51), - Model('Africa', 58), - Model('Europe', 48), - Model('North America', 41), - Model('South America', 14), - Model('Australia', 23), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - bubbleSizeMapper: (int index) => data[index].count, - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMapsTheme( - data: SfMapsThemeData( - bubbleColor: Colors.red[200], - bubbleStrokeColor: Colors.red[800], - bubbleStrokeWidth: 2, - bubbleHoverColor: Colors.red[800], - bubbleHoverStrokeColor: Colors.black, - bubbleHoverStrokeWidth: 2, - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - bubbleSettings: MapBubbleSettings( - maxRadius: 30, - minRadius: 15, - ), - ) - ], - ), - ) - ), - ); +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + super.initState(); + data = [ + Model('Asia', 51), + Model('Africa', 58), + Model('Europe', 48), + Model('North America', 41), + Model('South America', 14), + Model('Australia', 23), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + bubbleSizeMapper: (int index) => data[index].count, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMapsTheme( + data: SfMapsThemeData( + bubbleColor: Colors.red[200], + bubbleStrokeColor: Colors.red[800], + bubbleStrokeWidth: 2, + bubbleHoverColor: Colors.red[800], + bubbleHoverStrokeColor: Colors.black, + bubbleHoverStrokeWidth: 2, + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + bubbleSettings: MapBubbleSettings( + maxRadius: 30, + minRadius: 15, + ), + ) + ], + ), + ) + ), + ); + } } class Model { diff --git a/chart-sdk/flutter/maps/data-labels.md b/chart-sdk/flutter/maps/data-labels.md index 859f184eb..5d5d35728 100644 --- a/chart-sdk/flutter/maps/data-labels.md +++ b/chart-sdk/flutter/maps/data-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Labels in Flutter Maps widget | Syncfusion -description: Learn here all about the Data Labels feature of Syncfusion Flutter Maps (SfMaps) widget to add labels to the shapes and more. +title: Data Labels in Flutter Maps | Syncfusion® +description: Learn about data labels in Syncfusion® Flutter Maps (SfMaps), including shape labeling, customization options, text styling, and placement. platform: chart-sdk control: SfMaps documentation: ug --- -# Data Labels in Flutter Maps (SfMaps) +# Data Labels in Flutter Maps (SfMaps) Data labels provide identification for the shapes by displaying their names. You can trim or hide the labels if they exceed the shape bounds. @@ -18,34 +18,44 @@ You can show data labels on the map using the [`MapShapeLayer.showDataLabels`](h {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - showDataLabels: true, - ), - ], +class _MapsExampleState extends State { + late MapShapeSource dataSource; + + @override + void initState() { + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + showDataLabels: true, + ), + ], + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -60,47 +70,57 @@ You can customize text of the data labels using the [`MapShapeSource.dataLabelMa {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - super.initState(); - data = const [ - Model('Asia', 'Asia'), - Model('Europe', 'EU'), - Model('North America', 'NA'), - Model('South America', 'SA'), - Model('Australia', 'Australia'), - Model('Africa', 'Africa') - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - dataLabelMapper: (int index) => data[index].code, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - showDataLabels: true, - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + super.initState(); + data = const [ + Model('Asia', 'Asia'), + Model('Europe', 'EU'), + Model('North America', 'NA'), + Model('South America', 'SA'), + Model('Australia', 'Australia'), + Model('Africa', 'Africa') + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + dataLabelMapper: (int index) => data[index].code, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + showDataLabels: true, + ), + ], + ), ), ), - ), - ); + ); + } } class Model { @@ -119,56 +139,66 @@ class Model { You can trim or remove the data label when it is overflowed from the shape using the [`MapDataLabelSettings.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/overflowMode.html) property. The possible values are [`visible`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#visible), [`ellipsis`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#ellipsis), and [`hide`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#hide). The default value of the [`overflowMode`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapDataLabelSettings/overflowMode.html) property is [`MapLabelOverflow.visible`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLabelOverflow.html#visible). -By default, the data labels will render even if they overflows from the shape. +By default, the data labels will render even if they overflow from the shape. {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('New South Wales', 'New South Wales'), - Model('Queensland', 'Queensland'), - Model('Northern Territory', 'Northern sTerritory'), - Model('Victoria', 'Victoria'), - Model('South Australia', 'South Australia'), - Model('Western Australia', 'Western Australia'), - Model('Tasmania', 'Tasmania'), - ]; - - dataSource = MapShapeSource.asset( - 'assets/australia.json', - shapeDataField: 'STATE_NAME', - dataCount: data.length, - primaryValueMapper: (int index) => data[index].state, - dataLabelMapper: (int index) => data[index].dataLabel, - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - showDataLabels: true, - dataLabelSettings: MapDataLabelSettings( - overflowMode: MapLabelOverflow.ellipsis, +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('New South Wales', 'New South Wales'), + Model('Queensland', 'Queensland'), + Model('Northern Territory', 'Northern Territory'), + Model('Victoria', 'Victoria'), + Model('South Australia', 'South Australia'), + Model('Western Australia', 'Western Australia'), + Model('Tasmania', 'Tasmania'), + ]; + + dataSource = MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + dataCount: data.length, + primaryValueMapper: (int index) => data[index].state, + dataLabelMapper: (int index) => data[index].dataLabel, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + showDataLabels: true, + dataLabelSettings: MapDataLabelSettings( + overflowMode: MapLabelOverflow.ellipsis, + ), ), - ), - ], + ], + ), ), ), - ), - ); + ); + } } class Model { @@ -190,56 +220,66 @@ You can customize the data labels using the [`MapDataLabelSettings.textStyle`](h {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('New South Wales', 'New South Wales'), - Model('Queensland', 'Queensland'), - Model('Northern Territory', 'Northern sTerritory'), - Model('Victoria', 'Victoria'), - Model('South Australia', 'South Australia'), - Model('Western Australia', 'Western Australia'), - Model('Tasmania', 'Tasmania'), - ]; - - dataSource = MapShapeSource.asset( - 'assets/australia.json', - shapeDataField: 'STATE_NAME', - dataCount: data.length, - primaryValueMapper: (int index) => data[index].state, - dataLabelMapper: (int index) => data[index].dataLabel, - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - showDataLabels: true, - dataLabelSettings: MapDataLabelSettings( - textStyle: const TextStyle( - color: Colors.red, - fontSize: 12, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - fontFamily: 'Times'), +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('New South Wales', 'New South Wales'), + Model('Queensland', 'Queensland'), + Model('Northern Territory', 'Northern Territory'), + Model('Victoria', 'Victoria'), + Model('South Australia', 'South Australia'), + Model('Western Australia', 'Western Australia'), + Model('Tasmania', 'Tasmania'), + ]; + + dataSource = MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + dataCount: data.length, + primaryValueMapper: (int index) => data[index].state, + dataLabelMapper: (int index) => data[index].dataLabel, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + showDataLabels: true, + dataLabelSettings: MapDataLabelSettings( + textStyle: const TextStyle( + color: Colors.red, + fontSize: 12, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + fontFamily: 'Times'), + ), ), - ), - ], + ], + ), ), ), - ), - ); + ); + } } class Model { @@ -261,58 +301,69 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('New South Wales', 'New South Wales'), - Model('Queensland', 'Queensland'), - Model('Northern Territory', 'Northern sTerritory'), - Model('Victoria', 'Victoria'), - Model('South Australia', 'South Australia'), - Model('Western Australia', 'Western Australia'), - Model('Tasmania', 'Tasmania'), - ]; - - dataSource = MapShapeSource.asset( - 'assets/australia.json', - shapeDataField: 'STATE_NAME', - dataCount: data.length, - primaryValueMapper: (int index) => data[index].state, - dataLabelMapper: (int index) => data[index].dataLabel, - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMapsTheme( - data: SfMapsThemeData( - dataLabelTextStyle: TextStyle( - color: Colors.red, - fontSize: 12, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - fontFamily: 'Times'), - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - showDataLabels: true, - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('New South Wales', 'New South Wales'), + Model('Queensland', 'Queensland'), + Model('Northern Territory', 'Northern Territory'), + Model('Victoria', 'Victoria'), + Model('South Australia', 'South Australia'), + Model('Western Australia', 'Western Australia'), + Model('Tasmania', 'Tasmania'), + ]; + + dataSource = MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + dataCount: data.length, + primaryValueMapper: (int index) => data[index].state, + dataLabelMapper: (int index) => data[index].dataLabel, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMapsTheme( + data: SfMapsThemeData( + dataLabelTextStyle: TextStyle( + color: Colors.red, + fontSize: 12, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + fontFamily: 'Times'), + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + showDataLabels: true, + ), + ], + ), ), ), ), - ), - ); + ); + } } class Model { diff --git a/chart-sdk/flutter/maps/getting-started.md b/chart-sdk/flutter/maps/getting-started.md index 027150318..5b0248c90 100644 --- a/chart-sdk/flutter/maps/getting-started.md +++ b/chart-sdk/flutter/maps/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with Flutter Maps | Syncfusion -description: Step-by-step guide to set up Syncfusion Flutter Maps—add dependencies, import, create SfMaps, and configure key features. +title: Getting Started with Flutter Maps | Syncfusion® +description: Learn how to get started with the Syncfusion® Flutter Maps (SfMaps). Explore map visualization, data binding, layers, and customization options. platform: chart-sdk control: SfMaps documentation: ug --- -# Flutter Maps Getting Started (SfMaps) +# Getting Started with Flutter Maps (SfMaps) This section explains the steps required to add the maps widget with shape layer and its elements such as data labels, tooltip, assignable colors based on region, and legends. It also explains about adding tile layer with OpenStreetMap. This section covers only basic features needed to know to get started with Syncfusion® maps. -To get start quickly with our Flutter Maps widget, you can check on this video. +To get started quickly with our Flutter Maps widget, you can check on this video. @@ -24,6 +24,7 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter maps dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: @@ -31,18 +32,21 @@ dependencies: syncfusion_flutter_maps: ^xx.x.xx {% endhighlight %} +{% endtabs %} -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Maps`](https://pub.dev/packages/syncfusion_flutter_maps/versions) package. +N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Maps`](https://pub.dev/packages/syncfusion_flutter_maps/versions) package. It is recommended to use the latest available version from pub.dev. **Get packages** Run the following command to get the required packages. +{% tabs %} {% highlight dart %} $ flutter pub get {% endhighlight %} +{% endtabs %} **Import package** @@ -63,23 +67,37 @@ After importing the package, initialize the maps widget as a child of any widget {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfMaps(), - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfMaps( + layers: [ + MapShapeLayer( + source: MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + ), + ), + ], + ), + ), + ); + } } {% endhighlight %} {% endtabs %} -## Set GeoJSON data for shape layer from various source +## Set GeoJSON data for shape layer from various sources -The [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) contains collection of either [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) or [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). The actual geographical rendering is done in each [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) property of the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) can be set as the .json source from an asset bundle, from network or from Uint8List as bytes. Use the respective constructor depends on the type of the source. +The [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) contains collection of either [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) or [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). The actual geographical rendering is done in each [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) property of the [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) is of type [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html). The [`source`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/source.html) can be set as the .json source from an asset bundle, from network or from Uint8List as bytes. Use the respective constructor depending on the source type. -The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property of the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html) is used to refer the unique field name in the .json source to identify each shapes. In [`Mapping the data source`](https://help.syncfusion.com/flutter/maps/getting-started#mapping-the-data-source-for-shape-layer) section of this document, this [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with the respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source. +The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property of the [`MapShapeSource`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource-class.html) is used to refer to the unique field name in the .json source to identify each shape. In [`Mapping the data source`](https://help.syncfusion.com/chart-sdk/flutter/maps/getting-started#mapping-the-data-source-for-shape-layer) section of this document, this [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) will be used to map with the respective value returned in [`primaryValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/primaryValueMapper.html) from the data source. I> The Mercator projection is the default projection in the maps. @@ -103,29 +121,39 @@ flutter: {% tabs %} {% highlight Dart %} -late MapShapeSource _dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - _dataSource = MapShapeSource.asset( - 'assets/australia.json', - shapeDataField: 'STATE_NAME', - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(15), - child: SfMaps( - layers: [ - MapShapeLayer(source: _dataSource), - ], +class _MapsExampleState extends State { + late MapShapeSource _dataSource; + + @override + void initState() { + _dataSource = MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(15), + child: SfMaps( + layers: [ + MapShapeLayer(source: _dataSource), + ], + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -138,29 +166,39 @@ Load .json data from the network. {% tabs %} {% highlight Dart %} -late MapShapeSource _dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - _dataSource = MapShapeSource.network( - 'http://www.json-generator.com/api/json/get/bVqXoJvfjC?indent=2', - shapeDataField: 'name', - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(15), - child: SfMaps( - layers: [ - MapShapeLayer(source: _dataSource), - ], +class _MapsExampleState extends State { + late MapShapeSource _dataSource; + + @override + void initState() { + _dataSource = MapShapeSource.network( + 'http://www.json-generator.com/api/json/get/bVqXoJvfjC?indent=2', + shapeDataField: 'name', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(15), + child: SfMaps( + layers: [ + MapShapeLayer(source: _dataSource), + ], + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -173,34 +211,41 @@ Load .json data as bytes from `Uint8List`. {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return Scaffold( - body: FutureBuilder( - future: _fetchJsonData(), - builder: (BuildContext context, snapshot) { - if (snapshot.hasData) { - Uint8List bytesData = snapshot.data as Uint8List; - return SfMaps( - layers: [ - MapShapeLayer( - source: MapShapeSource.memory( - bytesData, - shapeDataField: 'STATE_NAME', +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'dart:typed_data'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + body: FutureBuilder( + future: _fetchJsonData(), + builder: (BuildContext context, snapshot) { + if (snapshot.hasData) { + Uint8List bytesData = snapshot.data as Uint8List; + return SfMaps( + layers: [ + MapShapeLayer( + source: MapShapeSource.memory( + bytesData, + shapeDataField: 'STATE_NAME', + ), ), - ), - ], - ); - } else { - return CircularProgressIndicator(); - } - }, - ), - ); -} + ], + ); + } else { + return CircularProgressIndicator(); + } + }, + ), + ); + } -Future _fetchJsonData() async { - return (await rootBundle.load('assets/australia.json')).buffer.asUint8List(); + Future _fetchJsonData() async { + return (await rootBundle.load('assets/australia.json')).buffer.asUint8List(); + } } {% endhighlight %} @@ -215,41 +260,51 @@ By default, the value specified for the [`shapeDataField`](https://pub.dev/docum {% tabs %} {% highlight Dart %} -late List data; - -@override -void initState() { - data = [ - Model('New South Wales', - ' New\nSouth Wales'), - Model('Queensland', 'Queensland'), - Model('Northern Territory', 'Northern\nTerritory'), - Model('Victoria', 'Victoria'), - Model('South Australia', 'South Australia'), - Model('Western Australia', 'Western Australia'), - Model('Tasmania', 'Tasmania'), - Model('Australian Capital Territory', 'ACT') - ]; - - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: MapShapeSource.asset( - 'assets/australia.json', - shapeDataField: 'STATE_NAME', - dataCount: data.length, - primaryValueMapper: (int index) => data[index].state, +class _MapsExampleState extends State { + late List data; + + @override + void initState() { + data = [ + Model('New South Wales', + ' New\nSouth Wales'), + Model('Queensland', 'Queensland'), + Model('Northern Territory', 'Northern\nTerritory'), + Model('Victoria', 'Victoria'), + Model('South Australia', 'South Australia'), + Model('Western Australia', 'Western Australia'), + Model('Tasmania', 'Tasmania'), + Model('Australian Capital Territory', 'ACT') + ]; + + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + dataCount: data.length, + primaryValueMapper: (int index) => data[index].state, + ), ), - ), - ], - ), - ); + ], + ), + ); + } } class Model { @@ -282,75 +337,85 @@ Add the basic maps elements such as data labels, legend, and tooltip as shown in {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0), - ' New\nSouth Wales'), - Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'), - Model('Northern Territory', Colors.red.withOpacity(0.85), - 'Northern\nTerritory'), - Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'), - Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75), - 'South Australia'), - Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7), - 'Western Australia'), - Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'), - Model('Australian Capital Territory', Colors.teal, 'ACT') - ]; - - dataSource = MapShapeSource.asset( - 'assets/australia.json', - shapeDataField: 'STATE_NAME', - dataCount: data.length, - primaryValueMapper: (int index) => data[index].state, - dataLabelMapper: (int index) => data[index].stateCode, - shapeColorValueMapper: (int index) => data[index].color, - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - final ThemeData themeData = Theme.of(context); - return Scaffold( - body: Center( - child: SizedBox( - height: MediaQuery.of(context).size.height * 0.55, - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - showDataLabels: true, - legend: MapLegend(MapElement.shape), - shapeTooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: const EdgeInsets.all(7), - child: Text(data[index].stateCode, - style: themeData.textTheme.caption! - .copyWith(color: themeData.colorScheme.surface)), - ); - }, - tooltipSettings: MapTooltipSettings( - color: Colors.grey[700], - strokeColor: Colors.white, - strokeWidth: 2), - strokeColor: Colors.white, - strokeWidth: 0.5, - dataLabelSettings: MapDataLabelSettings( - textStyle: TextStyle( - color: Colors.black, - fontWeight: FontWeight.bold, - fontSize: themeData.textTheme.caption!.fontSize)), - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('New South Wales', Color.fromRGBO(255, 215, 0, 1.0), + ' New\nSouth Wales'), + Model('Queensland', Color.fromRGBO(72, 209, 204, 1.0), 'Queensland'), + Model('Northern Territory', Colors.red.withOpacity(0.85), + 'Northern\nTerritory'), + Model('Victoria', Color.fromRGBO(171, 56, 224, 0.75), 'Victoria'), + Model('South Australia', Color.fromRGBO(126, 247, 74, 0.75), + 'South Australia'), + Model('Western Australia', Color.fromRGBO(79, 60, 201, 0.7), + 'Western Australia'), + Model('Tasmania', Color.fromRGBO(99, 164, 230, 1), 'Tasmania'), + Model('Australian Capital Territory', Colors.teal, 'ACT') + ]; + + dataSource = MapShapeSource.asset( + 'assets/australia.json', + shapeDataField: 'STATE_NAME', + dataCount: data.length, + primaryValueMapper: (int index) => data[index].state, + dataLabelMapper: (int index) => data[index].stateCode, + shapeColorValueMapper: (int index) => data[index].color, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final ThemeData themeData = Theme.of(context); + return Scaffold( + body: Center( + child: SizedBox( + height: MediaQuery.of(context).size.height * 0.55, + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + showDataLabels: true, + legend: MapLegend(MapElement.shape), + shapeTooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: const EdgeInsets.all(7), + child: Text(data[index].stateCode, + style: themeData.textTheme.labelSmall! + .copyWith(color: themeData.colorScheme.surface)), + ); + }, + tooltipSettings: MapTooltipSettings( + color: Colors.grey[700], + strokeColor: Colors.white, + strokeWidth: 2), + strokeColor: Colors.white, + strokeWidth: 0.5, + dataLabelSettings: MapDataLabelSettings( + textStyle: TextStyle( + color: Colors.black, + fontWeight: FontWeight.bold, + fontSize: themeData.textTheme.labelSmall!.fontSize)), + ), + ], + ), ), ), - ), - ); + ); + } } class Model { @@ -370,20 +435,25 @@ class Model { The [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) needs to be added in the [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps/layers.html) collection in [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html). The URL of the providers must be set in the [`MapTileLayer.urlTemplate`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/urlTemplate.html) property. -Refer to the [tile layer](https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template) section for more information. +Refer to the [tile layer](https://help.syncfusion.com/chart-sdk/flutter/maps/tile-layer#setting-url-template) section for more information. {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - ), - ], - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + ), + ], + ); + } } {% endhighlight %} diff --git a/chart-sdk/flutter/maps/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/maps/how-to/custom-widget-on-flutterflow.md index 68db530e2..6b043c8a7 100644 --- a/chart-sdk/flutter/maps/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/maps/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: Maps Widget in FlutterFlow | Syncfusion -description: You can learn here all about adding Syncfusion Flutter Maps ( SfMaps Widget ) widget in FlutterFlow. +title: How to Add Maps in FlutterFlow | Syncfusion® +description: Learn how to add and use Syncfusion® Flutter Maps (SfMaps) in FlutterFlow, including setup, integration, data visualization, and configuration. platform: chart-sdk control: SfMaps documentation: ug --- -# How to add Syncfusion® Maps widget in FlutterFlow? +# How to Add Maps in FlutterFlow (SfMaps) ## Overview diff --git a/chart-sdk/flutter/maps/legend.md b/chart-sdk/flutter/maps/legend.md index 14c78d43b..ab5ae7666 100644 --- a/chart-sdk/flutter/maps/legend.md +++ b/chart-sdk/flutter/maps/legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in Flutter Maps widget | Syncfusion -description: Learn here all about the Legend feature of Syncfusion Flutter Maps (SfMaps) widget to customize its appearance including text, icon and more. +title: Legend in Flutter Maps | Syncfusion® +description: Learn about legend support in Syncfusion® Flutter Maps (SfMaps), including legend customization, icons, text, positioning, and styling options. platform: chart-sdk control: SfMaps documentation: ug @@ -18,38 +18,48 @@ You can show shape legend by setting the [`MapShapeLayer.legend`](https://pub.de {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SizedBox( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend(MapElement.shape), - ), - ], +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SizedBox( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend(MapElement.shape), + ), + ], + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -67,52 +77,62 @@ You can show bubble legend by setting the [`MapShapeLayer.legend`](https://pub.d {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('Asia', 150), - Model('Africa', 45), - Model('Europe', 34), - Model('North America', 28), - Model('South America', 25), - Model('Australia', 5), - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - bubbleSizeMapper: (int index) => _data[index].populationDensityPerSqKm, - ); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - padding: const EdgeInsets.only(left: 10, right: 15, top: 30), - height: 350, - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend(MapElement.bubble), - bubbleSettings: const MapBubbleSettings( - maxRadius: 45, - minRadius: 15, - ), - ) - ], +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('Asia', 150), + Model('Africa', 45), + Model('Europe', 34), + Model('North America', 28), + Model('South America', 25), + Model('Australia', 5), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + bubbleSizeMapper: (int index) => _data[index].populationDensityPerSqKm, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + padding: const EdgeInsets.only(left: 10, right: 15, top: 30), + height: 350, + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend(MapElement.bubble), + bubbleSettings: const MapBubbleSettings( + maxRadius: 45, + minRadius: 15, + ), + ) + ], + ), ), ), - ), - ); + ); + } } class Model { @@ -137,38 +157,48 @@ You can show bar shape legend by setting the [`MapShapeLayer.legend`](https://pu {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar(MapElement.shape), - ), - ], +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar(MapElement.shape), + ), + ], + ), ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -186,52 +216,62 @@ You can show bar bubble legend by setting the [`MapShapeLayer.legend`](https://p {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('Asia', 150), - Model('Africa', 45), - Model('Europe', 34), - Model('North America', 28), - Model('South America', 25), - Model('Australia', 5), - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - bubbleSizeMapper: (int index) => _data[index].populationDensityPerSqKm, - ); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - padding: const EdgeInsets.only(left: 10, right: 15, top: 30), - height: 350, - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar(MapElement.bubble), - bubbleSettings: const MapBubbleSettings( - maxRadius: 45, - minRadius: 15, - ), - ) - ], +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('Asia', 150), + Model('Africa', 45), + Model('Europe', 34), + Model('North America', 28), + Model('South America', 25), + Model('Australia', 5), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + bubbleSizeMapper: (int index) => _data[index].populationDensityPerSqKm, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + padding: const EdgeInsets.only(left: 10, right: 15, top: 30), + height: 350, + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar(MapElement.bubble), + bubbleSettings: const MapBubbleSettings( + maxRadius: 45, + minRadius: 15, + ), + ) + ], + ), ), ), - ), - ); + ); + } } class Model { @@ -258,50 +298,60 @@ N> It is applicable for both shape and bar legend. {% tabs %} {% highlight Dart %} -late MapShapeSource _dataSource; -late List _data; - -@override -void initState() { - _data = const [ - DataModel('Asia', 280), - DataModel('Europe', 120), - DataModel('Africa', 40), - DataModel('North America', 90), - DataModel('South America', 190), - DataModel('Australia', 210), - ]; - - _dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - SfMaps( - layers: [ - MapShapeLayer( - source: _dataSource, - legend: MapLegend( - MapElement.shape, - title: Text('Continents', - style: - TextStyle(fontSize: 14, fontWeight: FontWeight.bold)), +class _MapsExampleState extends State { + late MapShapeSource _dataSource; + late List _data; + + @override + void initState() { + _data = const [ + DataModel('Asia', 280), + DataModel('Europe', 120), + DataModel('Africa', 40), + DataModel('North America', 90), + DataModel('South America', 190), + DataModel('Australia', 210), + ]; + + _dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Column( + children: [ + SfMaps( + layers: [ + MapShapeLayer( + source: _dataSource, + legend: MapLegend( + MapElement.shape, + title: Text('Continents', + style: + TextStyle(fontSize: 14, fontWeight: FontWeight.bold)), + ), ), - ), - ], - ), - ], - ), - ); + ], + ), + ], + ), + ); + } } class DataModel { @@ -323,55 +373,65 @@ The icons color of the legend is applied based on the colors returned from the [ {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Russia', 310) - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - ]); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend(MapElement.shape), - ) - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Russia', 310) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + ]); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend(MapElement.shape), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -393,61 +453,71 @@ You can customize the first segment label of the legend using the [`MapColorMapp {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - _data = [ - DataModel('India', 280), - DataModel('United States of America', 190), - DataModel('Kazakhstan', 37), - DataModel('Italy', 201), - DataModel('Japan', 335), - DataModel('Cuba', 103), - DataModel('China', 148) - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper( - from: 0, to: 100, color: Colors.red, text: '{0/km},{100/km}'), - MapColorMapper(from: 101, to: 200, color: Colors.green, text: '200/km'), - MapColorMapper(from: 201, to: 300, color: Colors.blue, text: '300/km'), - MapColorMapper(from: 301, to: 400, color: Colors.orange, text: '400/km'), - MapColorMapper(from: 401, to: 500, color: Colors.teal, text: '500/km'), - ], - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - ), - ) - ], +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + _data = [ + DataModel('India', 280), + DataModel('United States of America', 190), + DataModel('Kazakhstan', 37), + DataModel('Italy', 201), + DataModel('Japan', 335), + DataModel('Cuba', 103), + DataModel('China', 148) + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper( + from: 0, to: 100, color: Colors.red, text: '{0/km},{100/km}'), + MapColorMapper(from: 101, to: 200, color: Colors.green, text: '200/km'), + MapColorMapper(from: 201, to: 300, color: Colors.blue, text: '300/km'), + MapColorMapper(from: 301, to: 400, color: Colors.orange, text: '400/km'), + MapColorMapper(from: 401, to: 500, color: Colors.teal, text: '500/km'), + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class DataModel { @@ -469,69 +539,79 @@ You can position the legend items in different directions using the [`MapLegend. {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), - ]); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - position: MapLegendPosition.right, - ), - ) - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), + ]); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + position: MapLegendPosition.right, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -558,68 +638,78 @@ If the property [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_fl {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), - ]); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), + ]); + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - offset: Offset(60, 275)), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + offset: Offset(60, 275)), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -647,70 +737,80 @@ If the legend position is `top` or `bottom`, then the default scroll direction i {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), - ]); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), + ]); + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - position: MapLegendPosition.bottom, - overflowMode: MapLegendOverflowMode.scroll, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + position: MapLegendPosition.bottom, + overflowMode: MapLegendOverflowMode.scroll, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -736,71 +836,81 @@ If the legend position is `top` or `bottom`, then the default scroll direction i {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), - ]); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), + ]); + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - position: MapLegendPosition.bottom, - edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, - overflowMode: MapLegendOverflowMode.scroll, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + position: MapLegendPosition.bottom, + edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, + overflowMode: MapLegendOverflowMode.scroll, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -832,72 +942,82 @@ You can enable toggling the legend items and the corresponding shapes or bubbles {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - enableToggleInteraction: true, - toggledItemColor: Colors.grey, - toggledItemStrokeWidth: 3, - toggledItemStrokeColor: Colors.black, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + enableToggleInteraction: true, + toggledItemColor: Colors.grey, + toggledItemStrokeWidth: 3, + toggledItemStrokeColor: Colors.black, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -923,76 +1043,87 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMapsTheme( - data: SfMapsThemeData( - toggledItemColor: Colors.grey, - toggledItemStrokeWidth: 3, - toggledItemStrokeColor: Colors.black, - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - enableToggleInteraction: true, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMapsTheme( + data: SfMapsThemeData( + toggledItemColor: Colors.grey, + toggledItemStrokeWidth: 3, + toggledItemStrokeColor: Colors.black, + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + enableToggleInteraction: true, + ), + ) + ], + ), ), ), ), ), - ), - ); + ); + } } class Model { @@ -1014,75 +1145,85 @@ You can customize the legend item's text style using the [`MapLegend.textStyle`] {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - textStyle: const TextStyle( - color: Colors.red, - fontSize: 16, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - fontFamily: 'Times' + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + textStyle: const TextStyle( + color: Colors.red, + fontSize: 16, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + fontFamily: 'Times' + ), ), - ), - ) - ], + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -1104,77 +1245,87 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMapsTheme( - data: SfMapsThemeData( - legendTextStyle: TextStyle( - color: Colors.red, - fontSize: 16, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - fontFamily: 'Times' + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMapsTheme( + data: SfMapsThemeData( + legendTextStyle: TextStyle( + color: Colors.red, + fontSize: 16, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + fontFamily: 'Times' + ), + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend(MapElement.shape), + ) + ], ), - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend(MapElement.shape), - ) - ], ), ), ), ), - ), - ); + ); } } @@ -1203,73 +1354,83 @@ You can customize the legend items using the following properties. {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend( - MapElement.shape, - position: MapLegendPosition.bottom, - overflowMode: MapLegendOverflowMode.wrap, - iconType: MapIconType.square, - iconSize: Size(15.0, 15.0), - itemsSpacing: 15, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend( + MapElement.shape, + position: MapLegendPosition.bottom, + overflowMode: MapLegendOverflowMode.wrap, + iconType: MapIconType.square, + iconSize: Size(15.0, 15.0), + itemsSpacing: 15, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -1296,69 +1457,79 @@ You can set solid color for the bar by using the [MapLegendPaintingStyle.solid]( {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), - MapColorMapper( - from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), - MapColorMapper( - from: 501, - to: 600, - color: Colors.deepPurple, - text: '500 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, to: 400, color: Colors.orange, text: '300 - 400/km'), + MapColorMapper( + from: 401, to: 500, color: Colors.teal, text: '400 - 500/km'), + MapColorMapper( + from: 501, + to: 600, + color: Colors.deepPurple, + text: '500 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - segmentPaintingStyle: MapLegendPaintingStyle.solid, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + segmentPaintingStyle: MapLegendPaintingStyle.solid, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -1380,67 +1551,77 @@ You can set gradient color for the bar by using the [MapLegendPaintingStyle.grad {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; - - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, - to: 600, - color: Colors.deepPurple, - text: '300 - 600/km'), +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, + to: 600, + color: Colors.deepPurple, + text: '300 - 600/km'), ]); -} + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - labelsPlacement: MapLegendLabelsPlacement.betweenItems, - edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - ), - ) - ], + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + labelsPlacement: MapLegendLabelsPlacement.betweenItems, + edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -1469,75 +1650,85 @@ You can customize the legend items using the following properties. {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Korea', 512), + Model('Japan', 335), + Model('Cuba', 103), + Model('China', 148) + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + MapColorMapper( + from: 301, + to: 600, + color: Colors.deepPurple, + text: '300 - 600/km'), + ]); + } -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Korea', 512), - Model('Japan', 335), - Model('Cuba', 103), - Model('China', 148) - ]; + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + labelsPlacement: MapLegendLabelsPlacement.betweenItems, + edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + labelOverflow: MapLabelOverflow.ellipsis, + ), + ) + ], + ), + ), + ), + ), + ); + } +} - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '< 100/km'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - MapColorMapper( - from: 301, - to: 600, - color: Colors.deepPurple, - text: '300 - 600/km'), - ]); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - labelsPlacement: MapLegendLabelsPlacement.betweenItems, - edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - labelOverflow: MapLabelOverflow.ellipsis, - ), - ) - ], - ), - ), - ), - ), - ); -} - -class Model { - const Model(this.country, this.density); - - final String country; - final double density; +class Model { + const Model(this.country, this.density); + + final String country; + final double density; } {% endhighlight %} @@ -1556,60 +1747,70 @@ The labels are positioned between the segments when setting range color mapper w {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Cuba', 103), - Model('China', 148), -]; - -_shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red), - MapColorMapper( - from: 101, to: 200, color: Colors.green), - MapColorMapper( - from: 201, to: 300, color: Colors.blue), - ] - ); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - labelsPlacement: MapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - ), - ) - ], +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Cuba', 103), + Model('China', 148), + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red), + MapColorMapper( + from: 101, to: 200, color: Colors.green), + MapColorMapper( + from: 201, to: 300, color: Colors.blue), + ] + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + labelsPlacement: MapLegendLabelsPlacement.betweenItems, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + ), + ) + ], + ), ), ), - ), ), - ); + ); + } } class Model { @@ -1629,58 +1830,68 @@ The labels are positioned between the segments when setting range color mapper a {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Cuba', 103), - Model('China', 148), - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '<100/km'), - MapColorMapper(from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper(from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - ] - ); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - labelsPlacement: MapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - ), - ) - ], +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Cuba', 103), + Model('China', 148), + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '<100/km'), + MapColorMapper(from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper(from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + ] + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + labelsPlacement: MapLegendLabelsPlacement.betweenItems, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + ), + ) + ], + ), ), ), - ), ), - ); + ); + } } class Model { @@ -1700,59 +1911,69 @@ The labels are positioned at the center of the segments when setting the [`label {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Cuba', 103), - Model('China', 148), -]; - -_shapeSource = MapShapeSource.asset("assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '<100/km'), - MapColorMapper(from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), - MapColorMapper(from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), - ] - ); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - labelsPlacement: MapLegendLabelsPlacement.onItem, - edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - ), - ) - ], +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Cuba', 103), + Model('China', 148), + ]; + + _shapeSource = MapShapeSource.asset("assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '<100/km'), + MapColorMapper(from: 101, to: 200, color: Colors.green, text: '100 - 200/km'), + MapColorMapper(from: 201, to: 300, color: Colors.blue, text: '200 - 300/km'), + ] + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + labelsPlacement: MapLegendLabelsPlacement.onItem, + edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + ), + ) + ], + ), ), ), - ), ), - ); + ); + } } class Model { @@ -1774,61 +1995,71 @@ The [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_maps/la {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - _data = [ - Model('India', "Low"), - Model('United States of America', "High"), - Model('Pakistan', "Low"), - Model('Brazil', "Medium"), - ]; +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} - _dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) { - return _data[index].country; - }, - shapeColorValueMapper: (int index) { - return _data[index].storage; - }, - shapeColorMappers: [ - MapColorMapper(value: "Low", color: Colors.green), - MapColorMapper(value: "Medium", color: Colors.blue), - MapColorMapper(value: "High", color: Colors.red), - ], - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _dataSource, - legend: MapLegend.bar( - MapElement.shape, - edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _dataSource; + + @override + void initState() { + _data = [ + Model('India', "Low"), + Model('United States of America', "High"), + Model('Pakistan', "Low"), + Model('Brazil', "Medium"), + ]; + + _dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) { + return _data[index].country; + }, + shapeColorValueMapper: (int index) { + return _data[index].storage; + }, + shapeColorMappers: [ + MapColorMapper(value: "Low", color: Colors.green), + MapColorMapper(value: "Medium", color: Colors.blue), + MapColorMapper(value: "High", color: Colors.red), + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _dataSource, + legend: MapLegend.bar( + MapElement.shape, + edgeLabelsPlacement: MapLegendEdgeLabelsPlacement.center, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + ), ), - ), - ], + ], + ), ), ), - ), - ), - ); + ), + ); + } } class Model { @@ -1850,61 +2081,71 @@ You may show a pointer on the solid or gradient bar legend while hovering over a {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Cuba', 103), - Model('China', 148), - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '0 - 100'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '101 - 200'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '201 - 300'), - ], - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - showPointerOnHover: true, - ), - ) - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Cuba', 103), + Model('China', 148), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '0 - 100'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '101 - 200'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '201 - 300'), + ], + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + showPointerOnHover: true, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -1930,64 +2171,74 @@ The [`pointerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/lat {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Cuba', 103), - Model('China', 148), - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '0 - 100'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '101 - 200'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '201 - 300'), - ], - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - showPointerOnHover: true, - pointerBuilder: (BuildContext context, dynamic value) { - return Icon(Icons.arrow_downward, size: 15); - }, - ), - ) - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Cuba', 103), + Model('China', 148), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '0 - 100'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '101 - 200'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '201 - 300'), + ], + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + showPointerOnHover: true, + pointerBuilder: (BuildContext context, dynamic value) { + return Icon(Icons.arrow_downward, size: 15); + }, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -2009,63 +2260,73 @@ You can customize the size and color of the pointer using the [`pointerSize`](ht {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - Model('Italy', 201), - Model('Cuba', 103), - Model('China', 148), - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].country, - shapeColorValueMapper: (int index) => _data[index].density, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red, text: '0 - 100'), - MapColorMapper( - from: 101, to: 200, color: Colors.green, text: '101 - 200'), - MapColorMapper( - from: 201, to: 300, color: Colors.blue, text: '201 - 300'), - ], - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - legend: MapLegend.bar( - MapElement.shape, - segmentPaintingStyle: MapLegendPaintingStyle.gradient, - showPointerOnHover: true, - pointerSize: Size(20, 20), - pointerColor: Colors.deepPurple, - ), - ) - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + _data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + Model('Italy', 201), + Model('Cuba', 103), + Model('China', 148), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].country, + shapeColorValueMapper: (int index) => _data[index].density, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red, text: '0 - 100'), + MapColorMapper( + from: 101, to: 200, color: Colors.green, text: '101 - 200'), + MapColorMapper( + from: 201, to: 300, color: Colors.blue, text: '201 - 300'), + ], + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + legend: MapLegend.bar( + MapElement.shape, + segmentPaintingStyle: MapLegendPaintingStyle.gradient, + showPointerOnHover: true, + pointerSize: Size(20, 20), + pointerColor: Colors.deepPurple, + ), + ) + ], + ), ), ), ), - ), - ); + ); + } } class Model { diff --git a/chart-sdk/flutter/maps/markers.md b/chart-sdk/flutter/maps/markers.md index 9e90d5e6f..5328ff28f 100644 --- a/chart-sdk/flutter/maps/markers.md +++ b/chart-sdk/flutter/maps/markers.md @@ -1,13 +1,13 @@ --- layout: post -title: Markers in Flutter Maps | Syncfusion -description: Step-by-step guide to add and customize markers in Syncfusion Flutter Maps (SfMaps)—use built-in icons or custom widgets, position and manage markers. +title: Markers in Flutter Maps | Syncfusion® +description: Learn about marker support in Syncfusion® Flutter Maps (SfMaps), including built-in markers, custom widgets, positioning, and customization options. platform: chart-sdk control: SfMaps documentation: ug --- -# Flutter Maps Markers (SfMaps) +# Markers in Flutter Maps (SfMaps) Markers can be used to denote specific locations on a map. You can use built-in symbols or display custom widgets at specific latitude and longitude coordinates on the map. @@ -473,7 +473,7 @@ You can update multiple markers at the same time by passing indices to the [`upd N> * You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html). -* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer. +* You can refer to this [`snippet`](https://help.syncfusion.com/chart-sdk/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer. {% tabs %} {% highlight Dart %} @@ -563,7 +563,7 @@ You can remove a marker at any index using the [`removeMarkerAt`](https://pub.de N> * You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html). -* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer. +* You can refer to this [`snippet`](https://help.syncfusion.com/chart-sdk/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer. {% tabs %} {% highlight Dart %} @@ -646,7 +646,7 @@ You can clear all markers using the [`clearMarkers`](https://pub.dev/documentati N> * You can get the current markers count from [`MapShapeLayerController.markersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayerController/markersCount.html). -* You can refer to this [`snippet`](https://help.syncfusion.com/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer. +* You can refer to this [`snippet`](https://help.syncfusion.com/chart-sdk/flutter/maps/markers#for-tile-layer) to update the markers dynamically for tile layer. {% tabs %} {% highlight Dart %} diff --git a/chart-sdk/flutter/maps/overview.md b/chart-sdk/flutter/maps/overview.md index 5582a8964..7ea43ba25 100644 --- a/chart-sdk/flutter/maps/overview.md +++ b/chart-sdk/flutter/maps/overview.md @@ -1,16 +1,18 @@ --- layout: post -title: About Flutter Maps widget | Syncfusion -description: Learn here all about the introduction of Syncfusion Flutter Maps (SfMaps) widget, its features, and more. +title: About Flutter Maps Control | Syncfusion® +description: Learn about the Syncfusion® Flutter Maps (SfMaps), its features, map layers, data visualization capabilities, and customization options. platform: chart-sdk control: SfMaps documentation: ug --- -# Flutter Maps (SfMaps) Overview +# About Flutter Maps Control (SfMaps) [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) is a powerful data visualization component that displays statistical information for geographical areas. Its rich feature set includes tile rendering from OpenStreetMap, Bing Maps, and other tile providers with marker support, as well as shape layer capabilities such as selection, legends, labels, markers, tooltips, bubbles, color mapping, and much more. +To get started with the Flutter Maps widget, refer to the [Getting Started with Flutter Maps](https://help.syncfusion.com/chart-sdk/flutter/maps/getting-started) documentation. + ## Shape layer Render GeoJSON data as geographical shapes or any custom shapes on a shape layer for powerful data visualization. Customize the appearance using built-in options to achieve your desired look. For example, you can render a map of the world or any particular country. @@ -33,7 +35,7 @@ Render GeoJSON data as geographical shapes or any custom shapes on a shape layer * **Tooltip** - Display additional information about shapes and bubbles using customizable tooltips. -* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or trackpad, or using the toolbar on web platforms. Pan the map to navigate across regions. You can also customize the initial zoom level and center point. +* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on web platforms. Pan the map to navigate across regions. You can also customize the initial zoom level and center point. ## Tile layer @@ -45,4 +47,4 @@ The interactive tile layer allows you to load map tiles from web map tile servic * **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the map. -* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or trackpad, or using the toolbar on web platforms. Pan the map to navigate across regions. You can also customize the initial zoom level and center point. +* **Zooming and Panning** - Zoom in for a closer look at specific regions by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on web platforms. Pan the map to navigate across regions. You can also customize the initial zoom level and center point. diff --git a/chart-sdk/flutter/maps/right-to-left.md b/chart-sdk/flutter/maps/right-to-left.md index 760de8bd0..05fc221ef 100644 --- a/chart-sdk/flutter/maps/right-to-left.md +++ b/chart-sdk/flutter/maps/right-to-left.md @@ -1,15 +1,15 @@ --- layout: post -title: RTL in Flutter Maps widget | Syncfusion -description: This section explains about enabling the RTL rendering in the Syncfusion Flutter Maps (SfMaps) widget. +title: Right-to-Left (RTL) in Flutter Maps | Syncfusion® +description: Learn about right-to-left (RTL) support in Syncfusion® Flutter Maps (SfMaps), including map rendering, localization, and layout customization. platform: chart-sdk control: SfMaps documentation: ug --- -# Right to Left (RTL) in Flutter Maps (SfMaps) +# Right-to-Left (RTL) in Flutter Maps (SfMaps) -## RTL rendering ways +## Enable RTL rendering Right to left rendering can be achieved in the following ways: @@ -20,26 +20,31 @@ The maps can be wrapped inside the [`Directionality`](https://api.flutter.dev/fl {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: Center( - child: SfMaps( - layers: [ - MapShapeLayer( - source: const MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent"), - ), - ], - ), - ) - ), - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Directionality( + textDirection: TextDirection.rtl, + child: Center( + child: SfMaps( + layers: [ + MapShapeLayer( + source: const MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent"), + ), + ], + ), + ) + ), + ), + ); + } } {% endhighlight %} @@ -62,30 +67,36 @@ dependencies: {% tabs %} {% highlight Dart %} -@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: SfMaps( - layers: [ - MapShapeLayer( - source: const MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent"), - ), - ], +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @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: SfMaps( + layers: [ + MapShapeLayer( + source: const MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent"), + ), + ], + ), ), - ), - ); + ); + } } {% endhighlight %} @@ -100,51 +111,61 @@ Legend items will be rendered from right to left direction. This is applicable f {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _mapSource; - -@override -void initState() { - super.initState(); - _data = [ - PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)), - PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)), - PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)), - PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)), - PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)), - PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)), - ]; - - _mapSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - shapeColorValueMapper: (int index) => _data[index].color, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - padding: const EdgeInsets.only(left: 10, right: 15, top: 30), - height: 350, - child: Directionality( - textDirection: TextDirection.rtl, - child: SfMaps( - layers: [ - MapShapeLayer( - source: _mapSource, - legend: MapLegend(MapElement.shape), - ) - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _mapSource; + + @override + void initState() { + super.initState(); + _data = [ + PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)), + PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)), + PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)), + PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)), + PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)), + PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)), + ]; + + _mapSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + shapeColorValueMapper: (int index) => _data[index].color, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + padding: const EdgeInsets.only(left: 10, right: 15, top: 30), + height: 350, + child: Directionality( + textDirection: TextDirection.rtl, + child: SfMaps( + layers: [ + MapShapeLayer( + source: _mapSource, + legend: MapLegend(MapElement.shape), + ) + ], + ), ), ), ), - ), - ); + ); + } } class PopulationModel { @@ -168,86 +189,96 @@ Tooltip text will be rendered from right to left direction. This is applicable f {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _mapSource; - -@override -void initState() { - super.initState(); - _data = [ - PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)), - PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)), - PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)), - PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)), - PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)), - PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)), - ]; - - _mapSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - shapeColorValueMapper: (int index) => _data[index].color, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - padding: const EdgeInsets.only(left: 10, right: 15, top: 30), - height: 350, - child: Directionality( - textDirection: TextDirection.rtl, - child: SfMaps( - layers: [ - MapShapeLayer( - source: _mapSource, - shapeTooltipBuilder: (BuildContext context, int index) { - return Container( - height: 50, - width: 190, - child: Column( - children: [ - Padding( - padding: EdgeInsets.all(5), - child: Row( - children: [ - Text('Continent : '), - Text(_data[index].continent), - ], +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _mapSource; + + @override + void initState() { + super.initState(); + _data = [ + PopulationModel('Asia', 150, Color.fromRGBO(60, 120, 255, 0.8)), + PopulationModel('Africa', 45, Color.fromRGBO(51, 102, 255, 0.8)), + PopulationModel('Europe', 34, Color.fromRGBO(0, 57, 230, 0.8)), + PopulationModel('South America', 25, Color.fromRGBO(0, 51, 204, 0.8)), + PopulationModel('North America', 28, Color.fromRGBO(0, 38, 153, 0.8)), + PopulationModel('Australia', 5, Color.fromRGBO(0, 45, 179, 0.8)), + ]; + + _mapSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + shapeColorValueMapper: (int index) => _data[index].color, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + padding: const EdgeInsets.only(left: 10, right: 15, top: 30), + height: 350, + child: Directionality( + textDirection: TextDirection.rtl, + child: SfMaps( + layers: [ + MapShapeLayer( + source: _mapSource, + shapeTooltipBuilder: (BuildContext context, int index) { + return Container( + height: 50, + width: 190, + child: Column( + children: [ + Padding( + padding: EdgeInsets.all(5), + child: Row( + children: [ + Text('Continent : '), + Text(_data[index].continent), + ], + ), ), - ), - Padding( - padding: - EdgeInsets.only(left: 5, right: 5, bottom: 5), - child: Row( - children: [ - Text('Population : '), - Text(_data[index] - .populationDensityPerSqKm - .toStringAsFixed(0) + - ' per sq/km'), - ], + Padding( + padding: + EdgeInsets.only(left: 5, right: 5, bottom: 5), + child: Row( + children: [ + Text('Population : '), + Text(_data[index] + .populationDensityPerSqKm + .toStringAsFixed(0) + + ' per sq/km'), + ], + ), ), - ), - ], - ), - ); - }, - tooltipSettings: const MapTooltipSettings( - color: Colors.white, - strokeColor: Colors.black, - ), - ) - ], + ], + ), + ); + }, + tooltipSettings: const MapTooltipSettings( + color: Colors.white, + strokeColor: Colors.black, + ), + ) + ], + ), ), ), - ), - ), - ); + ), + ); + } } class PopulationModel { diff --git a/chart-sdk/flutter/maps/selection.md b/chart-sdk/flutter/maps/selection.md index 8f938357e..c8ff2431b 100644 --- a/chart-sdk/flutter/maps/selection.md +++ b/chart-sdk/flutter/maps/selection.md @@ -1,7 +1,7 @@ --- layout: post -title: Shape Selection in Flutter Maps widget | Syncfusion -description: Learn here all about the Shape Selection feature of Syncfusion Flutter Maps (SfMaps) widget and more. +title: Shape Selection in Flutter Maps | Syncfusion® +description: Learn about shape selection in Syncfusion® Flutter Maps (SfMaps), including selection customization, interaction, highlighting, and styling options. platform: chart-sdk control: SfMaps documentation: ug @@ -17,61 +17,71 @@ You can enable shape selection on a map using the [`MapShapeLayer.onSelectionCha The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback is triggered when a user selects a shape by tapping or clicking, or when a shape is selected programmatically. It provides the index of the selected shape. -N> You must call `setState()` in the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback to reflect the changes in the UI. +N> You must update the selectedIndex in the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) callback to reflect the changes in the UI. {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; -int selectedIndex = 1; - -@override -void initState() { - super.initState(); - data = const [ - Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)), - Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)), - Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)), - Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)), - Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)), - Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8)) - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - shapeColorValueMapper: (int index) => data[index].color, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - selectedIndex: selectedIndex, - onSelectionChanged: (int index) { - setState(() { - selectedIndex = index; - }); - }, - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + int selectedIndex = 1; + + @override + void initState() { + super.initState(); + data = const [ + Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)), + Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)), + Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)), + Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)), + Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)), + Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8)) + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + shapeColorValueMapper: (int index) => data[index].color, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + selectedIndex: selectedIndex, + onSelectionChanged: (int index) { + setState(() { + selectedIndex = index; + }); + }, + ), + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -101,61 +111,71 @@ You can customize the following aspects of the selected shape: {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; -int selectedIndex = 5; - -@override -void initState() { - super.initState(); - data = const [ - Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)), - Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)), - Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)), - Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)), - Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)), - Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8)) - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - shapeColorValueMapper: (int index) => data[index].color, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - selectedIndex: selectedIndex, - onSelectionChanged: (int index) { - setState(() { - selectedIndex = index; - }); - }, - selectionSettings: MapSelectionSettings( - color: Colors.orange, - strokeColor: Colors.red[900], - strokeWidth: 3, - ), - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + int selectedIndex = 5; + + @override + void initState() { + super.initState(); + data = const [ + Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)), + Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)), + Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)), + Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)), + Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)), + Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8)) + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + shapeColorValueMapper: (int index) => data[index].color, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + selectedIndex: selectedIndex, + onSelectionChanged: (int index) { + setState(() { + selectedIndex = index; + }); + }, + selectionSettings: MapSelectionSettings( + color: Colors.orange, + strokeColor: Colors.red[900], + strokeWidth: 3, + ), + ), + ], + ), ), ), ), - ), - ); + ); + } } class Model { @@ -182,63 +202,74 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; -int selectedIndex = 5; - -@override -void initState() { - super.initState(); - data = const [ - Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)), - Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)), - Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)), - Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)), - Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)), - Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8)) - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].continent, - shapeColorValueMapper: (int index) => data[index].color, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMapsTheme( - data: SfMapsThemeData( - selectionColor: Colors.orange, - selectionStrokeWidth: 3, - selectionStrokeColor: Colors.red[900], - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - selectedIndex: selectedIndex, - onSelectionChanged: (int index) { - setState(() { - selectedIndex = index; - }); - }, - ), - ], - ), - ) +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + int selectedIndex = 5; + + @override + void initState() { + super.initState(); + data = const [ + Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 0.8)), + Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 0.8)), + Model('Europe', 'Europe', Color.fromRGBO(0, 57, 230, 0.8)), + Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 0.8)), + Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 0.8)), + Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 0.8)) + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].continent, + shapeColorValueMapper: (int index) => data[index].color, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMapsTheme( + data: SfMapsThemeData( + selectionColor: Colors.orange, + selectionStrokeWidth: 3, + selectionStrokeColor: Colors.red[900], + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + selectedIndex: selectedIndex, + onSelectionChanged: (int index) { + setState(() { + selectedIndex = index; + }); + }, + ), + ], + ), + ) + ), ), ), - ), - ); + ); + } } class Model { diff --git a/chart-sdk/flutter/maps/shape-sublayer.md b/chart-sdk/flutter/maps/shape-sublayer.md index 89ea22999..df902dfd4 100644 --- a/chart-sdk/flutter/maps/shape-sublayer.md +++ b/chart-sdk/flutter/maps/shape-sublayer.md @@ -1,7 +1,7 @@ --- layout: post -title: Shape Sublayer in Flutter Maps widget | Syncfusion -description: Learn here all about the Shape Sublayer feature of the Syncfusion Flutter Maps (SfMaps) widget in the tile and the shape layer. +title: Shape Sublayer in Flutter Maps | Syncfusion® +description: Learn about shape sublayers in Syncfusion® Flutter Maps (SfMaps), including shape layer customization, data visualization, and map overlays. platform: chart-sdk control: SfMaps documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Shape Sublayer in Flutter Maps (SfMaps) -The shape sublayer is where geographical rendering happens for the sublayer. This is similar to the main [`shape layer`](https://help.syncfusion.com/flutter/maps/getting-started#add-a-geojson-file-for-shape-layer) rendering. This section explains how to add a shape sublayer on both the shape layer and tile layer. +The shape sublayer is where geographical rendering happens for the sublayer. This is similar to the main [`shape layer`](https://help.syncfusion.com/chart-sdk/flutter/maps/getting-started#add-a-geojson-file-for-shape-layer) rendering. This section explains how to add a shape sublayer on both the shape layer and tile layer. ## Shape sublayer on tile layer @@ -20,37 +20,47 @@ The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/lat {% tabs %} {% highlight Dart %} -late MapShapeSource _sublayerSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { -return Scaffold( - body: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, +class _MapsExampleState extends State { + late MapShapeSource _sublayerSource; + + @override + void initState() { + super.initState(); + + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + ), + ], ), ], - ), - ], - ), - ), - ); + ), + ), + ); + } } {% endhighlight %} @@ -70,42 +80,52 @@ The [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/lat {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; - -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { -return Scaffold( - body: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + ), + ], ), ], - ), - ], - ), - ), - ); + ), + ), + ); + } } {% endhighlight %} @@ -125,45 +145,55 @@ N> It is applicable for both tile layer and shape layer. {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); - - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { -return Scaffold( - body: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, - color: Colors.blue[100], - strokeWidth: 2, - strokeColor: Colors.blue[800], +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + color: Colors.blue[100], + strokeWidth: 2, + strokeColor: Colors.blue[800], + ), + ], ), ], - ), - ], - ), - ), - ); + ), + ), + ); + } } {% endhighlight %} @@ -178,60 +208,70 @@ You can apply color to the sublayer shape by comparing a value that returns from {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource sublayerDataSource; -late MapShapeSource shapeDataSource; - -@override -void initState() { - data = [ - Model('Algeria', "Low"), - Model('Nigeria', "High"), - Model('Libya', "High"), - ]; - - shapeDataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: 'continent', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - sublayerDataSource = MapShapeSource.asset( - "assets/africa.json", - shapeDataField: "name", - dataCount: data.length, - primaryValueMapper: (int index) { - return data[index].state; - }, - shapeColorValueMapper: (int index) { - return data[index].storage; - }, - shapeColorMappers: [ - MapColorMapper(value: "Low", color: Colors.red), - MapColorMapper(value: "High", color: Colors.green) - ], - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: shapeDataSource, - sublayers: [ - MapShapeSublayer( - source: sublayerDataSource, - ) - ], - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource sublayerDataSource; + late MapShapeSource shapeDataSource; + + @override + void initState() { + data = [ + Model('Algeria', "Low"), + Model('Nigeria', "High"), + Model('Libya', "High"), + ]; + + shapeDataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: 'continent', + ); + + sublayerDataSource = MapShapeSource.asset( + "assets/africa.json", + shapeDataField: "name", + dataCount: data.length, + primaryValueMapper: (int index) { + return data[index].state; + }, + shapeColorValueMapper: (int index) { + return data[index].storage; + }, + shapeColorMappers: [ + MapColorMapper(value: "Low", color: Colors.red), + MapColorMapper(value: "High", color: Colors.green) + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: shapeDataSource, + sublayers: [ + MapShapeSublayer( + source: sublayerDataSource, + ) + ], + ), + ], + ), ), - ), - ); + ); + } } class Model { @@ -253,58 +293,68 @@ You can apply color to the sublayer shape based on whether the value returned fr {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource sublayerDataSource; -late MapShapeSource shapeDataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - data = [ - Model('Algeria', 196), - Model('Nigeria', 280), - Model('Libya', 45), - ]; - - shapeDataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: 'continent', - ); - - sublayerDataSource = MapShapeSource.asset( - "assets/africa.json", - shapeDataField: "name", - dataCount: data.length, - primaryValueMapper: (int index) { - return data[index].state; - }, - shapeColorValueMapper: (int index) => data[index].count, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red), - MapColorMapper(from: 101, to: 300, color: Colors.green) - ], - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: shapeDataSource, - sublayers: [ - MapShapeSublayer( - source: sublayerDataSource, - ) - ], - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource sublayerDataSource; + late MapShapeSource shapeDataSource; + + @override + void initState() { + data = [ + Model('Algeria', 196), + Model('Nigeria', 280), + Model('Libya', 45), + ]; + + shapeDataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: 'continent', + ); + + sublayerDataSource = MapShapeSource.asset( + "assets/africa.json", + shapeDataField: "name", + dataCount: data.length, + primaryValueMapper: (int index) { + return data[index].state; + }, + shapeColorValueMapper: (int index) => data[index].count, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red), + MapColorMapper(from: 101, to: 300, color: Colors.green) + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: shapeDataSource, + sublayers: [ + MapShapeSublayer( + source: sublayerDataSource, + ) + ], + ), + ], + ), ), - ), - ); + ); + } } class Model { @@ -323,233 +373,134 @@ class Model { You can enable data labels for the shape sublayer using the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/showDataLabels.html) property and customize the data labels text using the [`dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property. -N> Refer to the [`DataLabels`](https://help.syncfusion.com/flutter/maps/data-labels) section, for customizing data labels. +N> Refer to the [`DataLabels`](https://help.syncfusion.com/chart-sdk/flutter/maps/data-labels) section, for customizing data labels. {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; -late List _sublayerData; -late MapZoomPanBehavior _zoomPanBehavior; - -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); - - _sublayerData = [ - DataModel('Algeria', Colors.green, 'Algeria'), - DataModel('Libya', Colors.teal, 'Libya'), - DataModel('Egypt', Colors.blue, 'Egypt'), - DataModel('Mali', Colors.purple, 'Mali'), - DataModel('Niger', Colors.indigo, 'Niger'), - DataModel('Nigeria', Colors.purpleAccent, 'Nigeria'), - DataModel('Chad', Colors.lightGreen, 'Chad'), - DataModel('Sudan', Colors.redAccent, 'Sudan'), - DataModel('Mauritania', Colors.orange, 'Mauritania'), - DataModel('South Sudan', Colors.lime, 'South Sudan'), - DataModel('Ethiopia', Colors.greenAccent, 'Ethiopia') - ]; - - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - dataCount: _sublayerData.length, - primaryValueMapper: (int index) => _sublayerData[index].key, - dataLabelMapper: (int index) => _sublayerData[index].stateCode, - ); - _zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 3, - focalLatLng: MapLatLng(38.9637, 35.2433), - ); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - zoomPanBehavior: _zoomPanBehavior, - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, - showDataLabels: true, - dataLabelSettings: const MapDataLabelSettings( - overflowMode: MapLabelOverflow.ellipsis, - textStyle: const TextStyle( - color: Colors.red, - fontSize: 12, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - fontFamily: 'Times'), - ), - ), - ], - ), - ], - ), - ); -} - -class DataModel { - DataModel(this.key, this.color, this.stateCode); - - final String key; - final Color color; - final String stateCode; +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -{% endhighlight %} -{% endtabs %} - -![Shape sublayer data labels](images/shape-sublayer/sublayer-data-labels.png) - -## Add bubbles to the sublayer - -You can enable bubbles for the shape sublayer using the [`bubbleSizeMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleSizeMapper.html) property and customize the bubbles appearance using the [`bubbleSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleSettings.html) property. You can also enable tooltips for the shape sublayer bubbles using the [`bubbleTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleTooltipBuilder.html) property. - -N> It is applicable for both tile layer and shape layer. - -N> Refer to the [`Bubbles`](https://help.syncfusion.com/flutter/maps/bubble#tooltip-for-the-bubbles) section, to know more about the bubbles customization. +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + late List _sublayerData; + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); -{% tabs %} -{% highlight Dart %} + _sublayerData = [ + DataModel('Algeria', Colors.green, 'Algeria'), + DataModel('Libya', Colors.teal, 'Libya'), + DataModel('Egypt', Colors.blue, 'Egypt'), + DataModel('Mali', Colors.purple, 'Mali'), + DataModel('Niger', Colors.indigo, 'Niger'), + DataModel('Nigeria', Colors.purpleAccent, 'Nigeria'), + DataModel('Chad', Colors.lightGreen, 'Chad'), + DataModel('Sudan', Colors.redAccent, 'Sudan'), + DataModel('Mauritania', Colors.orange, 'Mauritania'), + DataModel('South Sudan', Colors.lime, 'South Sudan'), + DataModel('Ethiopia', Colors.greenAccent, 'Ethiopia') + ]; -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; -late List _sublayerData; -late MapZoomPanBehavior _zoomPanBehavior; - -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); - - _sublayerData = [ - DataModel('Algeria', Colors.green, 36232), - DataModel('Libya', Colors.teal, 34121), - DataModel('Egypt', Colors.blue, 43453), - DataModel('Mali', Colors.purple, 28123), - DataModel('Niger', Colors.indigo, 40111), - DataModel('Nigeria', Colors.purpleAccent, 30232), - DataModel('Chad', Colors.lightGreen, 48132), - DataModel('Sudan', Colors.redAccent, 52654), - DataModel('Mauritania', Colors.orange, 42231), - DataModel('South Sudan', Colors.lime, 40421), - DataModel('Ethiopia', Colors.greenAccent, 27198) - ]; - - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - dataCount: _sublayerData.length, - primaryValueMapper: (int index) => _sublayerData[index].key, - bubbleColorValueMapper: (int index) => _sublayerData[index].color, - bubbleSizeMapper: (int index) => _sublayerData[index].size, - ); - _zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 3, - focalLatLng: MapLatLng(38.9637, 35.2433), - ); -} + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + dataCount: _sublayerData.length, + primaryValueMapper: (int index) => _sublayerData[index].key, + dataLabelMapper: (int index) => _sublayerData[index].stateCode, + ); + _zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 3, + focalLatLng: MapLatLng(38.9637, 35.2433), + ); + } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ MapShapeLayer( source: _shapeSource, zoomPanBehavior: _zoomPanBehavior, sublayers: [ MapShapeSublayer( source: _sublayerSource, - bubbleSettings: const MapBubbleSettings( - minRadius: 5, - maxRadius: 20, + showDataLabels: true, + dataLabelSettings: const MapDataLabelSettings( + overflowMode: MapLabelOverflow.ellipsis, + textStyle: const TextStyle( + color: Colors.red, + fontSize: 12, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, + fontFamily: 'Times'), ), - bubbleTooltipBuilder: (BuildContext context, int index) { - return Container( - height: 40, - width: 120, - padding: const EdgeInsets.all(5), - child: Column( - children: [ - Row( - children: [ - Text('State : ', - style: TextStyle(color: Colors.white)), - Text(_sublayerData[index].key, - style: TextStyle(color: Colors.white)), - ], - ), - Row( - children: [ - Text('Population : ', - style: TextStyle(color: Colors.white)), - Text(_sublayerData[index].size.toStringAsFixed(0), - style: TextStyle(color: Colors.white)), - ], - ), - ], - ), - ); - }, ), ], ), ], ), - ); -} - -class DataModel { - DataModel(this.key, this.color, this.size); + ); + } + DataModel(this.key, this.color, this.stateCode); final String key; final Color color; - final double size; + final String stateCode; } {% endhighlight %} {% endtabs %} -![Shape sublayer bubbles](images/shape-sublayer/sublayer-bubbles.png) +![Shape sublayer data labels](images/shape-sublayer/sublayer-data-labels.png) -## Enable tooltip for shape sublayer +## Add bubbles to the sublayer -You can enable tooltips for the shape sublayer using the [`shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/shapeTooltipBuilder.html) property. +You can enable bubbles for the shape sublayer using the [`bubbleSizeMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/bubbleSizeMapper.html) property and customize the bubbles appearance using the [`bubbleSettings`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleSettings.html) property. You can also enable tooltips for the shape sublayer bubbles using the [`bubbleTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/bubbleTooltipBuilder.html) property. N> It is applicable for both tile layer and shape layer. -N> Refer to the [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip) section to know more about the tooltip customization. +N> Refer to the [`Bubbles`](https://help.syncfusion.com/chart-sdk/flutter/maps/bubble#tooltip-for-the-bubbles) section, to know more about the bubbles customization. {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; -late List _sublayerData; -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} - _sublayerData = [ +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + late List _sublayerData; + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + + _sublayerData = [ DataModel('Algeria', Colors.green, 36232), DataModel('Libya', Colors.teal, 34121), DataModel('Egypt', Colors.blue, 43453), @@ -561,65 +512,191 @@ void initState() { DataModel('Mauritania', Colors.orange, 42231), DataModel('South Sudan', Colors.lime, 40421), DataModel('Ethiopia', Colors.greenAccent, 27198) - ]; + ]; - _sublayerSource = MapShapeSource.asset( + _sublayerSource = MapShapeSource.asset( 'assets/africa.json', shapeDataField: 'name', dataCount: _sublayerData.length, primaryValueMapper: (int index) => _sublayerData[index].key, - shapeColorValueMapper: (int index) => _sublayerData[index].color, - ); - _zoomPanBehavior = MapZoomPanBehavior( + bubbleColorValueMapper: (int index) => _sublayerData[index].color, + bubbleSizeMapper: (int index) => _sublayerData[index].size, + ); + _zoomPanBehavior = MapZoomPanBehavior( zoomLevel: 3, focalLatLng: MapLatLng(38.9637, 35.2433), - ); + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + zoomPanBehavior: _zoomPanBehavior, + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + bubbleSettings: const MapBubbleSettings( + minRadius: 5, + maxRadius: 20, + ), + bubbleTooltipBuilder: (BuildContext context, int index) { + return Container( + height: 40, + width: 120, + padding: const EdgeInsets.all(5), + child: Column( + children: [ + Row( + children: [ + Text('State : ', + style: TextStyle(color: Colors.white)), + Text(_sublayerData[index].key, + style: TextStyle(color: Colors.white)), + ], + ), + Row( + children: [ + Text('Population : ', + style: TextStyle(color: Colors.white)), + Text(_sublayerData[index].size.toStringAsFixed(0), + style: TextStyle(color: Colors.white)), + ], + ), + ], + ), + ); + }, + ), + ], + ), + ], + ), + ); + } } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - zoomPanBehavior: _zoomPanBehavior, - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, - shapeTooltipBuilder: (BuildContext context, int index) { - return Container( - height: 40, - width: 120, - padding: const EdgeInsets.all(5), - child: Column( - children: [ - Row( - children: [ - Text('State : ', - style: TextStyle(color: Colors.white)), - Text(_sublayerData[index].key, - style: TextStyle(color: Colors.white)), - ], - ), - Row( - children: [ - Text('Population : ', - style: TextStyle(color: Colors.white)), - Text(_sublayerData[index].size.toStringAsFixed(0), - style: TextStyle(color: Colors.white)), - ], - ), - ], - ), - ); - }, - ), - ], - ), - ], - ), - ); +class DataModel { + DataModel(this.key, this.color, this.size); + + final String key; + final Color color; + final double size; +} + +{% endhighlight %} +{% endtabs %} + +![Shape sublayer bubbles](images/shape-sublayer/sublayer-bubbles.png) + +## Enable tooltip for shape sublayer + +You can enable tooltips for the shape sublayer using the [`shapeTooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/shapeTooltipBuilder.html) property. + +N> It is applicable for both tile layer and shape layer. + +N> Refer to the [`Tooltip`](https://help.syncfusion.com/chart-sdk/flutter/maps/tooltip) section to know more about the tooltip customization. + +{% tabs %} +{% highlight Dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + late List _sublayerData; + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + + _sublayerData = [ + DataModel('Algeria', Colors.green, 36232), + DataModel('Libya', Colors.teal, 34121), + DataModel('Egypt', Colors.blue, 43453), + DataModel('Mali', Colors.purple, 28123), + DataModel('Niger', Colors.indigo, 40111), + DataModel('Nigeria', Colors.purpleAccent, 30232), + DataModel('Chad', Colors.lightGreen, 48132), + DataModel('Sudan', Colors.redAccent, 52654), + DataModel('Mauritania', Colors.orange, 42231), + DataModel('South Sudan', Colors.lime, 40421), + DataModel('Ethiopia', Colors.greenAccent, 27198) + ]; + + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + dataCount: _sublayerData.length, + primaryValueMapper: (int index) => _sublayerData[index].key, + shapeColorValueMapper: (int index) => _sublayerData[index].color, + ); + _zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 3, + focalLatLng: MapLatLng(38.9637, 35.2433), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + zoomPanBehavior: _zoomPanBehavior, + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + shapeTooltipBuilder: (BuildContext context, int index) { + return Container( + height: 40, + width: 120, + padding: const EdgeInsets.all(5), + child: Column( + children: [ + Row( + children: [ + Text('State : ', + style: TextStyle(color: Colors.white)), + Text(_sublayerData[index].key, + style: TextStyle(color: Colors.white)), + ], + ), + Row( + children: [ + Text('Population : ', + style: TextStyle(color: Colors.white)), + Text(_sublayerData[index].size.toStringAsFixed(0), + style: TextStyle(color: Colors.white)), + ], + ), + ], + ), + ); + }, + ), + ], + ), + ], + ), + ); + } } class DataModel { @@ -645,80 +722,90 @@ If the selected shape is tapped or clicked again, the index will be passed as -1 N> It is applicable for both tile layer and shape layer. -N> Refer the [`Shape selection`](https://help.syncfusion.com/flutter/maps/selection) section to know more about the selection feature. +N> Refer the [`Shape selection`](https://help.syncfusion.com/chart-sdk/flutter/maps/selection) section to know more about the selection feature. {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; -late List _sublayerData; -late MapZoomPanBehavior _zoomPanBehavior; -int _selectedIndex = 0; - -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); - - _sublayerData = [ - DataModel('Algeria', Colors.green, 36232), - DataModel('Libya', Colors.teal, 34121), - DataModel('Egypt', Colors.blue, 43453), - DataModel('Mali', Colors.purple, 28123), - DataModel('Niger', Colors.indigo, 40111), - DataModel('Nigeria', Colors.purpleAccent, 30232), - DataModel('Chad', Colors.lightGreen, 48132), - DataModel('Sudan', Colors.redAccent, 52654), - DataModel('Mauritania', Colors.orange, 42231), - DataModel('South Sudan', Colors.lime, 40421), - DataModel('Ethiopia', Colors.greenAccent, 27198) - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - dataCount: _sublayerData.length, - primaryValueMapper: (int index) => _sublayerData[index].key, - shapeColorValueMapper: (int index) => _sublayerData[index].color, - ); - _zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 3, - focalLatLng: MapLatLng(38.9637, 35.2433), - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - zoomPanBehavior: _zoomPanBehavior, - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, - selectedIndex: _selectedIndex, - onSelectionChanged: (int index) { - setState(() { - _selectedIndex = index; - }); - }, - selectionSettings: const MapSelectionSettings( - color: Colors.lime, - strokeWidth: 3, - strokeColor: Colors.black, +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + late List _sublayerData; + late MapZoomPanBehavior _zoomPanBehavior; + int _selectedIndex = 0; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + + _sublayerData = [ + DataModel('Algeria', Colors.green, 36232), + DataModel('Libya', Colors.teal, 34121), + DataModel('Egypt', Colors.blue, 43453), + DataModel('Mali', Colors.purple, 28123), + DataModel('Niger', Colors.indigo, 40111), + DataModel('Nigeria', Colors.purpleAccent, 30232), + DataModel('Chad', Colors.lightGreen, 48132), + DataModel('Sudan', Colors.redAccent, 52654), + DataModel('Mauritania', Colors.orange, 42231), + DataModel('South Sudan', Colors.lime, 40421), + DataModel('Ethiopia', Colors.greenAccent, 27198) + ]; + + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + dataCount: _sublayerData.length, + primaryValueMapper: (int index) => _sublayerData[index].key, + shapeColorValueMapper: (int index) => _sublayerData[index].color, + ); + _zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 3, + focalLatLng: MapLatLng(38.9637, 35.2433), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + zoomPanBehavior: _zoomPanBehavior, + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + selectedIndex: _selectedIndex, + onSelectionChanged: (int index) { + setState(() { + _selectedIndex = index; + }); + }, + selectionSettings: const MapSelectionSettings( + color: Colors.lime, + strokeWidth: 3, + strokeColor: Colors.black, + ), ), - ), - ], - ), - ], - ), - ); + ], + ), + ], + ), + ); + } } class DataModel { @@ -743,102 +830,112 @@ The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/late N> It is applicable for both tile layer and shape layer. N> -* Refer to the [`Marker`](https://help.syncfusion.com/flutter/maps/markers) section to know more about the marker feature. -* Refer to the [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip) section to know more about the tooltip feature. +* Refer to the [`Marker`](https://help.syncfusion.com/chart-sdk/flutter/maps/markers) section to know more about the marker feature. +* Refer to the [`Tooltip`](https://help.syncfusion.com/chart-sdk/flutter/maps/tooltip) section to know more about the tooltip feature. {% tabs %} {% highlight Dart %} -late MapShapeSource _shapeSource; -late MapShapeSource _sublayerSource; -late List _sublayerData; -late MapZoomPanBehavior _zoomPanBehavior; -late List _markerData; - -@override -void initState() { - super.initState(); - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - ); - - _markerData = [ - MapLatLng(28.0339, 1.6596), - MapLatLng(26.3351, 17.2283), - MapLatLng(26.8208, 30.8025), - MapLatLng(17.6078, 8.0817), - MapLatLng(9.0820, 8.6753), - MapLatLng(9.1450, 40.4897), - MapLatLng(15.4542, 18.7322), - MapLatLng(6.8770, 31.3070), - MapLatLng(21.0079, -10.9408), - MapLatLng(12.8628, 30.2176), - ]; - - _sublayerData = [ - DataModel('Algeria', Colors.green, 36232), - DataModel('Libya', Colors.teal, 34121), - DataModel('Egypt', Colors.blue, 43453), - DataModel('Mali', Colors.purple, 28123), - DataModel('Niger', Colors.indigo, 40111), - DataModel('Nigeria', Colors.purpleAccent, 30232), - DataModel('Chad', Colors.lightGreen, 48132), - DataModel('Sudan', Colors.redAccent, 52654), - DataModel('Mauritania', Colors.orange, 42231), - DataModel('South Sudan', Colors.lime, 40421), - DataModel('Ethiopia', Colors.greenAccent, 27198) - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _sublayerSource = MapShapeSource.asset( - 'assets/africa.json', - shapeDataField: 'name', - dataCount: _sublayerData.length, - primaryValueMapper: (int index) => _sublayerData[index].key, - shapeColorValueMapper: (int index) => _sublayerData[index].color, - ); - _zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 3, - focalLatLng: MapLatLng(38.9637, 35.2433), - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - zoomPanBehavior: _zoomPanBehavior, - sublayers: [ - MapShapeSublayer( - source: _sublayerSource, - initialMarkersCount: _markerData.length, - markerBuilder: (BuildContext context, int index) { - return MapMarker( - latitude: _markerData[index].latitude, - longitude: _markerData[index].longitude, - iconColor: Colors.white, - iconStrokeWidth: 2, - iconStrokeColor: Colors.black, - iconType: MapIconType.triangle, - size: Size(15, 15), - ); - }, - markerTooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: EdgeInsets.all(10), - child: Text(_sublayerData[index].key, - style: TextStyle(color: Colors.white)), - ); - }, - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late MapShapeSource _shapeSource; + late MapShapeSource _sublayerSource; + late List _sublayerData; + late MapZoomPanBehavior _zoomPanBehavior; + late List _markerData; + + @override + void initState() { + super.initState(); + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + ); + + _markerData = [ + MapLatLng(28.0339, 1.6596), + MapLatLng(26.3351, 17.2283), + MapLatLng(26.8208, 30.8025), + MapLatLng(17.6078, 8.0817), + MapLatLng(9.0820, 8.6753), + MapLatLng(9.1450, 40.4897), + MapLatLng(15.4542, 18.7322), + MapLatLng(6.8770, 31.3070), + MapLatLng(21.0079, -10.9408), + MapLatLng(12.8628, 30.2176), + ]; + + _sublayerData = [ + DataModel('Algeria', Colors.green, 36232), + DataModel('Libya', Colors.teal, 34121), + DataModel('Egypt', Colors.blue, 43453), + DataModel('Mali', Colors.purple, 28123), + DataModel('Niger', Colors.indigo, 40111), + DataModel('Nigeria', Colors.purpleAccent, 30232), + DataModel('Chad', Colors.lightGreen, 48132), + DataModel('Sudan', Colors.redAccent, 52654), + DataModel('Mauritania', Colors.orange, 42231), + DataModel('South Sudan', Colors.lime, 40421), + DataModel('Ethiopia', Colors.greenAccent, 27198) + ]; + + _sublayerSource = MapShapeSource.asset( + 'assets/africa.json', + shapeDataField: 'name', + dataCount: _sublayerData.length, + primaryValueMapper: (int index) => _sublayerData[index].key, + shapeColorValueMapper: (int index) => _sublayerData[index].color, + ); + _zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 3, + focalLatLng: MapLatLng(38.9637, 35.2433), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + zoomPanBehavior: _zoomPanBehavior, + sublayers: [ + MapShapeSublayer( + source: _sublayerSource, + initialMarkersCount: _markerData.length, + markerBuilder: (BuildContext context, int index) { + return MapMarker( + latitude: _markerData[index].latitude, + longitude: _markerData[index].longitude, + iconColor: Colors.white, + iconStrokeWidth: 2, + iconStrokeColor: Colors.black, + iconType: MapIconType.triangle, + size: Size(15, 15), + ); + }, + markerTooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: EdgeInsets.all(10), + child: Text(_sublayerData[index].key, + style: TextStyle(color: Colors.white)), + ); + }, + ), + ], + ), + ], + ), + ); + } } class DataModel { diff --git a/chart-sdk/flutter/maps/shape.md b/chart-sdk/flutter/maps/shape.md index fc8ab747f..bb632a83a 100644 --- a/chart-sdk/flutter/maps/shape.md +++ b/chart-sdk/flutter/maps/shape.md @@ -1,13 +1,13 @@ --- layout: post -title: Shape colors in Flutter Maps widget | Syncfusion -description: Learn here all about different shape appearance customization options of the Syncfusion Flutter Maps (SfMaps) widget. +title: Shape Colors in Flutter Maps | Syncfusion® +description: Learn about shape color customization in Syncfusion® Flutter Maps (SfMaps), including fill colors, color mapping, selection colors, and styling options. platform: chart-sdk control: SfMaps documentation: ug --- -# Shapes in Flutter Maps (SfMaps) +# Shape Colors in Flutter Maps (SfMaps) This section explains about shapes and how to apply colors to the shapes based on specific values in the Flutter maps. @@ -18,19 +18,28 @@ You can notify the user that the map is being loaded using the [`MapShapeLayer.l {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { +class _MapsExampleState extends State { + late MapShapeSource dataSource; + + @override + void initState() { + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { return Scaffold( body: Padding( padding: EdgeInsets.all(15), @@ -52,6 +61,7 @@ Widget build(BuildContext context) { ), ), ); + } } {% endhighlight %} @@ -66,19 +76,28 @@ You can apply color, stroke color and stroke width to the shapes using the [`Map {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { +class _MapsExampleState extends State { + late MapShapeSource dataSource; + + @override + void initState() { + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { return Scaffold( body: Padding( padding: EdgeInsets.all(15), @@ -94,6 +113,7 @@ Widget build(BuildContext context) { ), ), ); + } } {% endhighlight %} @@ -112,38 +132,49 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; -@override -void initState() { - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(15), - child: SfMapsTheme( - data: SfMapsThemeData( - layerColor: Colors.blue[100], - layerStrokeColor: Colors.blue, - layerStrokeWidth: 2, - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - ), - ], +class _MapsExampleState extends State { + late MapShapeSource dataSource; + + @override + void initState() { + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(15), + child: SfMapsTheme( + data: SfMapsThemeData( + layerColor: Colors.blue[100], + layerStrokeColor: Colors.blue, + layerStrokeWidth: 2, + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + ), + ], + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -160,38 +191,49 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; -@override -void initState() { - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(15), - child: SfMapsTheme( - data: SfMapsThemeData( - shapeHoverColor: Colors.red[800], - shapeHoverStrokeColor: Colors.black, - shapeHoverStrokeWidth: 2, - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - ), - ], +class _MapsExampleState extends State { + late MapShapeSource dataSource; + + @override + void initState() { + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(15), + child: SfMapsTheme( + data: SfMapsThemeData( + shapeHoverColor: Colors.red[800], + shapeHoverStrokeColor: Colors.black, + shapeHoverStrokeWidth: 2, + ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + ), + ], + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -213,48 +255,58 @@ N> You can show legend using the [`MapShapeLayer.legend`](https://pub.dev/docume {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = const [ - Model('Asia', Color.fromRGBO(60, 120, 255, 0.8)), - Model('Africa', Color.fromRGBO(51, 102, 255, 0.8)), - Model('Europe', Color.fromRGBO(0, 57, 230, 0.8)), - Model('South America', Color.fromRGBO(0, 51, 204, 0.8)), - Model('Australia', Color.fromRGBO(0, 45, 179, 0.8)), - Model('North America', Color.fromRGBO(0, 38, 153, 0.8)) - ]; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - dataCount: data.length, - primaryValueMapper: (int index) => data[index].country, - shapeColorValueMapper: (int index) => data[index].color, - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 350, - child: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - ), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = const [ + Model('Asia', Color.fromRGBO(60, 120, 255, 0.8)), + Model('Africa', Color.fromRGBO(51, 102, 255, 0.8)), + Model('Europe', Color.fromRGBO(0, 57, 230, 0.8)), + Model('South America', Color.fromRGBO(0, 51, 204, 0.8)), + Model('Australia', Color.fromRGBO(0, 45, 179, 0.8)), + Model('North America', Color.fromRGBO(0, 38, 153, 0.8)) + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + dataCount: data.length, + primaryValueMapper: (int index) => data[index].country, + shapeColorValueMapper: (int index) => data[index].color, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 350, + child: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + ), + ], + ), ), - ), - )), - ); + )), + ); + } } class Model { @@ -276,47 +328,57 @@ You can apply color to the shape by comparing a value that returns from the [`sh {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('India', "Low"), - Model('United States of America', "High"), - Model('Pakistan', "Low"), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: data.length, - primaryValueMapper: (int index) { - return data[index].country; - }, - shapeColorValueMapper: (int index) { - return data[index].storage; - }, - shapeColorMappers: [ - MapColorMapper(value: "Low", color: Colors.red), - MapColorMapper(value: "High", color: Colors.green) - ], - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer(source: dataSource), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('India', "Low"), + Model('United States of America', "High"), + Model('Pakistan', "Low"), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: data.length, + primaryValueMapper: (int index) { + return data[index].country; + }, + shapeColorValueMapper: (int index) { + return data[index].storage; + }, + shapeColorMappers: [ + MapColorMapper(value: "Low", color: Colors.red), + MapColorMapper(value: "High", color: Colors.green) + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer(source: dataSource), + ], + ), ), - ), - ); + ); + } } class Model { @@ -338,43 +400,53 @@ You can apply color to the shape based on whether the value returned from [`shap {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].country, - shapeColorValueMapper: (int index) => data[index].count, - shapeColorMappers: [ - MapColorMapper(from: 0, to: 100, color: Colors.red), - MapColorMapper(from: 101, to: 300, color: Colors.green) - ], - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer(source: dataSource), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].country, + shapeColorValueMapper: (int index) => data[index].count, + shapeColorMappers: [ + MapColorMapper(from: 0, to: 100, color: Colors.red), + MapColorMapper(from: 101, to: 300, color: Colors.green) + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer(source: dataSource), + ], + ), ), - ), - ); + ); + } } class Model { @@ -391,62 +463,72 @@ class Model { ## Opacity -You can apply the maximum and minimum opacity to the shape or [`bubbles`](https://help.syncfusion.com/flutter/maps/bubble) while using [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) properties. +You can apply the maximum and minimum opacity to the shape or [`bubbles`](https://help.syncfusion.com/chart-sdk/flutter/maps/bubble) while using [`MapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) and [`MapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) properties. -The shapes or bubbles with lowest value which is [`from`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/from.html) will be applied a [`minOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/minOpacity.html) and the shapes or bubbles with highest value which is [`to`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/to.html) will be applied a [`maxOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/maxOpacity.html). The shapes or bubbles with values in-between the range will get an opacity based on their respective value. +The shapes or bubbles with the lowest value (from) will be applied [`minOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/minOpacity.html) and the shapes or bubbles with the highest value (to) will be applied [`maxOpacity`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapColorMapper/maxOpacity.html). The shapes or bubbles with values in-between the range will get an opacity based on their respective value. {% tabs %} {% highlight Dart %} -late List data; -late MapShapeSource dataSource; - -@override -void initState() { - data = [ - Model('India', 280), - Model('United States of America', 190), - Model('Kazakhstan', 37), - ]; - - dataSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "name", - dataCount: data.length, - primaryValueMapper: (int index) => data[index].country, - shapeColorValueMapper: (int index) => data[index].count, - shapeColorMappers: [ - MapColorMapper( - from: 0, - to: 100, - color: Colors.red, - minOpacity: 0.2, - maxOpacity: 0.4, - ), - MapColorMapper( - from: 101, - to: 300, - color: Colors.green, - minOpacity: 0.4, - maxOpacity: 0.6, - ), - ], - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer(source: dataSource), - ], +class _MapsExampleState extends State { + late List data; + late MapShapeSource dataSource; + + @override + void initState() { + data = [ + Model('India', 280), + Model('United States of America', 190), + Model('Kazakhstan', 37), + ]; + + dataSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "name", + dataCount: data.length, + primaryValueMapper: (int index) => data[index].country, + shapeColorValueMapper: (int index) => data[index].count, + shapeColorMappers: [ + MapColorMapper( + from: 0, + to: 100, + color: Colors.red, + minOpacity: 0.2, + maxOpacity: 0.4, + ), + MapColorMapper( + from: 101, + to: 300, + color: Colors.green, + minOpacity: 0.4, + maxOpacity: 0.6, + ), + ], + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer(source: dataSource), + ], + ), ), - ), - ); + ); + } } class Model { diff --git a/chart-sdk/flutter/maps/tile-layer.md b/chart-sdk/flutter/maps/tile-layer.md index f9bee3275..032266347 100644 --- a/chart-sdk/flutter/maps/tile-layer.md +++ b/chart-sdk/flutter/maps/tile-layer.md @@ -1,13 +1,13 @@ --- layout: post -title: Tile Layer in Flutter Maps | Syncfusion -description: Step-by-step guide to configure the Tile Layer in Syncfusion Flutter Maps—set URL templates, add providers (OSM, Bing, TomTom), and focal point and zoom. +title: Tile Layer in Flutter Maps | Syncfusion® +description: Learn about tile layers in Syncfusion® Flutter Maps (SfMaps), including map providers, URL templates, zooming, and tile customization. platform: chart-sdk control: SfMaps documentation: ug --- -# Flutter Maps Tile Layer (SfMaps) +# Tile Layer in Flutter Maps (SfMaps) The tile layer renders the tiles returned from web map tile services such as Bing Maps, OpenStreetMap, Google Maps, TomTom, and others. @@ -34,15 +34,20 @@ N> Though OpenStreetMap is free of cost, we recommend you check the licensing te {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - ), - ], - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + ), + ], + ); + } } {% endhighlight %} @@ -61,24 +66,29 @@ Some providers offer different map types. For example, Bing Maps provides map ty {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -90,22 +100,27 @@ Widget build(BuildContext context) { Our tile layer is not limited or specific to any of the tile providers mentioned here. It supports requesting tiles from any tile provider using the unique URL for respective tile providers and renders them. -For other map providers like TomTom, MapBox, etc., you can check their respective official websites and provide the URL in the format mentioned in the [`Setting URL template`](https://help.syncfusion.com/flutter/maps/tile-layer#setting-url-template) section. +For other map providers like TomTom, MapBox, etc., you can check their respective official websites and provide the URL in the format mentioned in the [`Setting URL template`](https://help.syncfusion.com/chart-sdk/flutter/maps/tile-layer#setting-url-template) section. Below is an example of adding TomTom map. You can get the TomTom API key from this [`link`](https://developer.tomtom.com/map-display-api/documentation/product-information/introduction). {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'http://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?key=subscription_key', - ), - ], - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'http://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?key=subscription_key', + ), + ], + ); + } } {% endhighlight %} @@ -117,23 +132,28 @@ Widget build(BuildContext context) { You can set the initial focal point by setting the [`MapTileLayer.initialFocalLatLng`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/initialFocalLatLng.html) property. It represents the initial focal latitude and longitude position of the map layer. -Based on the size of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) widget, [`initialFocalLatLng`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/initialFocalLatLng.html) and [`initialZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/initialZoomLevel.html), only the number of initial tiles needed in the viewport will be rendered. Refer to this section for enabling [zooming and panning](https://help.syncfusion.com/flutter/maps/zoom-pan). +Based on the size of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) widget, [`initialFocalLatLng`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/initialFocalLatLng.html) and [`initialZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer/initialZoomLevel.html), only the number of initial tiles needed in the viewport will be rendered. Refer to this section for enabling [zooming and panning](https://help.syncfusion.com/chart-sdk/flutter/maps/zoom-pan). This property cannot be changed dynamically. Defaults to `MapLatLng(0.0, 0.0)`. {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(27.1751, 50.0421), - ), - ], - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(27.1751, 50.0421), + ), + ], + ); + } } {% endhighlight %} @@ -150,17 +170,22 @@ This property cannot be changed dynamically. {% tabs %} {% highlight Dart %} -@override -Widget build(BuildContext context) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(27.1751, 78.0421), - initialZoomLevel: 5, - ), - ], - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatelessWidget { + @override + Widget build(BuildContext context) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(27.1751, 78.0421), + initialZoomLevel: 5, + ), + ], + ); + } } {% endhighlight %} @@ -170,6 +195,6 @@ Widget build(BuildContext context) { ## Markers -You can add markers in the tile layer. The procedure is very similar to the shape layer. Please refer to the [markers](https://help.syncfusion.com/flutter/maps/markers#adding-markers) section for more details. +You can add markers in the tile layer. The procedure is very similar to the shape layer. Please refer to the [markers](https://help.syncfusion.com/chart-sdk/flutter/maps/markers#adding-markers) section for more details. N> You can refer to our [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) feature tour page for its groundbreaking feature representations. You can also explore our [Flutter Maps TileLayer example](https://flutter.syncfusion.com/#/maps/tile-layer/openstreetmap) that shows how to configure a Maps in Flutter. \ No newline at end of file diff --git a/chart-sdk/flutter/maps/tooltip.md b/chart-sdk/flutter/maps/tooltip.md index 6ca831d10..c95066247 100644 --- a/chart-sdk/flutter/maps/tooltip.md +++ b/chart-sdk/flutter/maps/tooltip.md @@ -20,57 +20,66 @@ The [`MapShapeLayer.shapeTooltipBuilder`](https://pub.dev/documentation/syncfusi {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - - _data = [ - Model('Asia', 50, '44,579,000 sq. km.'), - Model('Africa', 54, '30,370,000 sq. km.'), - Model('Europe', 51, '10,180,000 sq. km.'), - Model('North America', 23, '24,709,000 sq. km.'), - Model('South America', 12, '17,840,000 sq. km.'), - Model('Australia', 14, '8,600,000 sq. km.'), - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - shapeTooltipBuilder: (BuildContext context, int index) { - return Container( - width: 180, - padding: const EdgeInsets.all(10), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Stack( - children: [ - Center( - child: Text( - _data[index].continent, - style: TextStyle( - color: Colors.white, - fontSize: Theme.of(context) - .textTheme - .bodyText2! - .fontSize), +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _data = [ + Model('Asia', 50, '44,579,000 sq. km.'), + Model('Africa', 54, '30,370,000 sq. km.'), + Model('Europe', 51, '10,180,000 sq. km.'), + Model('North America', 23, '24,709,000 sq. km.'), + Model('South America', 12, '17,840,000 sq. km.'), + Model('Australia', 14, '8,600,000 sq. km.'), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + shapeTooltipBuilder: (BuildContext context, int index) { + return Container( + width: 180, + padding: const EdgeInsets.all(10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Stack( + children: [ + Center( + child: Text( + _data[index].continent, + style: TextStyle( + color: Colors.white, + fontSize: Theme.of(context) + .textTheme + .bodyMedium! + .fontSize), ), ), const Icon( @@ -90,7 +99,7 @@ Widget build(BuildContext context) { style: TextStyle( color: Colors.white, fontSize: - Theme.of(context).textTheme.bodyText2!.fontSize), + Theme.of(context).textTheme.bodyMedium!.fontSize), ), ], ), @@ -105,6 +114,7 @@ Widget build(BuildContext context) { ), ), ); + } } class Model { @@ -132,58 +142,67 @@ The [`MapShapeLayer.bubbleTooltipBuilder`](https://pub.dev/documentation/syncfus {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - - _data = [ - Model('Asia', 50, '44,579,000 sq. km.'), - Model('Africa', 54, '30,370,000 sq. km.'), - Model('Europe', 51, '10,180,000 sq. km.'), - Model('North America', 23, '24,709,000 sq. km.'), - Model('South America', 12, '17,840,000 sq. km.'), - Model('Australia', 14, '8,600,000 sq. km.'), - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - bubbleSizeMapper: (int index) => _data[index].countriesCount, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - bubbleTooltipBuilder: (BuildContext context, int index) { - return Container( - width: 150, - padding: const EdgeInsets.all(10), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Stack( - children: [ - Center( - child: Text( - _data[index].continent, - style: TextStyle( - color: Colors.white, - fontSize: Theme.of(context) - .textTheme - .bodyText2! - .fontSize), +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _data = [ + Model('Asia', 50, '44,579,000 sq. km.'), + Model('Africa', 54, '30,370,000 sq. km.'), + Model('Europe', 51, '10,180,000 sq. km.'), + Model('North America', 23, '24,709,000 sq. km.'), + Model('South America', 12, '17,840,000 sq. km.'), + Model('Australia', 14, '8,600,000 sq. km.'), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + bubbleSizeMapper: (int index) => _data[index].countriesCount, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + bubbleTooltipBuilder: (BuildContext context, int index) { + return Container( + width: 150, + padding: const EdgeInsets.all(10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Stack( + children: [ + Center( + child: Text( + _data[index].continent, + style: TextStyle( + color: Colors.white, + fontSize: Theme.of(context) + .textTheme + .bodyMedium! + .fontSize), ), ), const Icon( @@ -204,7 +223,7 @@ Widget build(BuildContext context) { style: TextStyle( color: Colors.white, fontSize: - Theme.of(context).textTheme.bodyText2!.fontSize), + Theme.of(context).textTheme.bodyMedium!.fontSize), ), ], ), @@ -223,6 +242,7 @@ Widget build(BuildContext context) { ), ), ); + } } class Model { @@ -250,129 +270,139 @@ The [`MapLayer.markerTooltipBuilder`](https://pub.dev/documentation/syncfusion_f {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - - _data = [ - WorldWonderModel( - place: 'Chichen Itza', - country: 'Mexico', - latitude: 20.6843, - longitude: -88.5678), - WorldWonderModel( - place: 'Machu Picchu', - country: 'Peru', - latitude: -13.1631, - longitude: -72.5450), - WorldWonderModel( - place: 'Christ the Redeemer', - country: 'Brazil', - latitude: -22.9519, - longitude: -43.2105), - WorldWonderModel( - place: 'Colosseum', - country: 'Rome', - latitude: 41.8902, - longitude: 12.4922), - WorldWonderModel( - place: 'Petra', - country: 'Jordan', - latitude: 30.3285, - longitude: 35.4444), - WorldWonderModel( - place: 'Taj Mahal', - country: 'India', - latitude: 27.1751, - longitude: 78.0421), - WorldWonderModel( - place: 'Great Wall of China', - country: 'China', - latitude: 40.4319, - longitude: 116.5704) - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "country", - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - initialMarkersCount: _data.length, - markerBuilder: (BuildContext context, int index) { - return MapMarker( - latitude: _data[index].latitude, - longitude: _data[index].longitude, - child: const Icon( - Icons.location_on, - color: Colors.red, - ), - ); - }, - markerTooltipBuilder: (BuildContext context, int index) { - return Container( - width: 150, - padding: const EdgeInsets.all(10), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Stack( - children: [ - Center( - child: Text( - _data[index].country, - style: TextStyle( - color: Colors.white, - fontSize: Theme.of(context) - .textTheme - .bodyText2! - .fontSize), +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _data = [ + WorldWonderModel( + place: 'Chichen Itza', + country: 'Mexico', + latitude: 20.6843, + longitude: -88.5678), + WorldWonderModel( + place: 'Machu Picchu', + country: 'Peru', + latitude: -13.1631, + longitude: -72.5450), + WorldWonderModel( + place: 'Christ the Redeemer', + country: 'Brazil', + latitude: -22.9519, + longitude: -43.2105), + WorldWonderModel( + place: 'Colosseum', + country: 'Rome', + latitude: 41.8902, + longitude: 12.4922), + WorldWonderModel( + place: 'Petra', + country: 'Jordan', + latitude: 30.3285, + longitude: 35.4444), + WorldWonderModel( + place: 'Taj Mahal', + country: 'India', + latitude: 27.1751, + longitude: 78.0421), + WorldWonderModel( + place: 'Great Wall of China', + country: 'China', + latitude: 40.4319, + longitude: 116.5704) + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "country", + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + initialMarkersCount: _data.length, + markerBuilder: (BuildContext context, int index) { + return MapMarker( + latitude: _data[index].latitude, + longitude: _data[index].longitude, + child: const Icon( + Icons.location_on, + color: Colors.red, + ), + ); + }, + markerTooltipBuilder: (BuildContext context, int index) { + return Container( + width: 150, + padding: const EdgeInsets.all(10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Stack( + children: [ + Center( + child: Text( + _data[index].country, + style: TextStyle( + color: Colors.white, + fontSize: Theme.of(context) + .textTheme + .bodyMedium! + .fontSize), + ), ), - ), - const Icon( - Icons.tour, - color: Colors.white, - size: 16, - ), - ], - ), - const Divider( - color: Colors.white, - height: 10, - thickness: 1.2, - ), - Text( - _data[index].place, - style: TextStyle( - color: Colors.white, - fontSize: - Theme.of(context).textTheme.bodyText2!.fontSize), - ), - ], - ), - ); - }, - tooltipSettings: const MapTooltipSettings( - color: Colors.red, - strokeColor: Colors.black, - strokeWidth: 1.5), - ), - ], + const Icon( + Icons.tour, + color: Colors.white, + size: 16, + ), + ], + ), + const Divider( + color: Colors.white, + height: 10, + thickness: 1.2, + ), + Text( + _data[index].place, + style: TextStyle( + color: Colors.white, + fontSize: + Theme.of(context).textTheme.bodyMedium!.fontSize), + ), + ], + ), + ); + }, + tooltipSettings: const MapTooltipSettings( + color: Colors.red, + strokeColor: Colors.black, + strokeWidth: 1.5), + ), + ], + ), ), - ), - ); + ); + } } @@ -411,85 +441,95 @@ N> For mobile platforms, the [`hideDelay`](https://pub.dev/documentation/syncfus {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - - _data = [ - Model('Asia', 50, '44,579,000 sq. km.'), - Model('Africa', 54, '30,370,000 sq. km.'), - Model('Europe', 51, '10,180,000 sq. km.'), - Model('North America', 23, '24,709,000 sq. km.'), - Model('South America', 12, '17,840,000 sq. km.'), - Model('Australia', 14, '8,600,000 sq. km.'), - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - bubbleSizeMapper: (int index) => _data[index].countriesCount, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: const EdgeInsets.only(left: 15, right: 15), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - shapeTooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: const EdgeInsets.all(7), +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _data = [ + Model('Asia', 50, '44,579,000 sq. km.'), + Model('Africa', 54, '30,370,000 sq. km.'), + Model('Europe', 51, '10,180,000 sq. km.'), + Model('North America', 23, '24,709,000 sq. km.'), + Model('South America', 12, '17,840,000 sq. km.'), + Model('Australia', 14, '8,600,000 sq. km.'), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + bubbleSizeMapper: (int index) => _data[index].countriesCount, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: const EdgeInsets.only(left: 15, right: 15), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + shapeTooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: const EdgeInsets.all(7), + child: Text( + 'Continent : ' + + _data[index].continent + + '\nArea : ' + + _data[index].area, + style: const TextStyle( + color: Colors.white, + fontSize: 14, + fontStyle: FontStyle.italic, + fontFamily: 'Times', + ), + ), + ); + }, + bubbleTooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: const EdgeInsets.all(7), child: Text( - 'Continent : ' + - _data[index].continent + - '\nArea : ' + - _data[index].area, - style: const TextStyle( - color: Colors.white, - fontSize: 14, - fontStyle: FontStyle.italic, - fontFamily: 'Times', + 'Continent : ' + + _data[index].continent + + '\nTotal Countries : ' + + _data[index].countriesCount.toStringAsFixed(0), + style: const TextStyle( + color: Colors.white, + fontSize: 14, + fontStyle: FontStyle.italic, + fontFamily: 'Times', + ), ), - ), - ); - }, - bubbleTooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: const EdgeInsets.all(7), - child: Text( - 'Continent : ' + - _data[index].continent + - '\nTotal Countries : ' + - _data[index].countriesCount.toStringAsFixed(0), - style: const TextStyle( - color: Colors.white, - fontSize: 14, - fontStyle: FontStyle.italic, - fontFamily: 'Times', - ), - ), - ); - }, - tooltipSettings: const MapTooltipSettings( - color: const Color.fromRGBO(98, 0, 238, 1), - strokeColor: const Color.fromRGBO(252, 187, 15, 1), - strokeWidth: 3, - hideDelay: 10, + ); + }, + tooltipSettings: const MapTooltipSettings( + color: const Color.fromRGBO(98, 0, 238, 1), + strokeColor: const Color.fromRGBO(252, 187, 15, 1), + strokeWidth: 3, + hideDelay: 10, + ), ), - ), - ], + ], + ), ), - ), - ); + ); + } } class Model { @@ -517,64 +557,74 @@ N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/pa {% tabs %} {% highlight Dart %} -late List _data; -late MapShapeSource _shapeSource; - -@override -void initState() { - super.initState(); - - _data = [ - Model('Asia', 50, '44,579,000 sq. km.'), - Model('Africa', 54, '30,370,000 sq. km.'), - Model('Europe', 51, '10,180,000 sq. km.'), - Model('North America', 23, '24,709,000 sq. km.'), - Model('South America', 12, '17,840,000 sq. km.'), - Model('Australia', 14, '8,600,000 sq. km.'), - ]; - - _shapeSource = MapShapeSource.asset( - "assets/world_map.json", - shapeDataField: "continent", - dataCount: _data.length, - primaryValueMapper: (int index) => _data[index].continent, - bubbleSizeMapper: (int index) => _data[index].countriesCount, - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; +import 'package:syncfusion_flutter_core/theme.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.only(left: 15, right: 15), - child: SfMapsTheme( - data: SfMapsThemeData( - tooltipColor: const Color.fromRGBO(98, 0, 238, 1), - tooltipStrokeColor: const Color.fromRGBO(252, 187, 15, 1), - tooltipStrokeWidth: 3, - tooltipBorderRadius: const BorderRadiusDirectional.only( - topStart: Radius.circular(20), - bottomEnd: Radius.circular(20), +class _MapsExampleState extends State { + late List _data; + late MapShapeSource _shapeSource; + + @override + void initState() { + super.initState(); + + _data = [ + Model('Asia', 50, '44,579,000 sq. km.'), + Model('Africa', 54, '30,370,000 sq. km.'), + Model('Europe', 51, '10,180,000 sq. km.'), + Model('North America', 23, '24,709,000 sq. km.'), + Model('South America', 12, '17,840,000 sq. km.'), + Model('Australia', 14, '8,600,000 sq. km.'), + ]; + + _shapeSource = MapShapeSource.asset( + "assets/world_map.json", + shapeDataField: "continent", + dataCount: _data.length, + primaryValueMapper: (int index) => _data[index].continent, + bubbleSizeMapper: (int index) => _data[index].countriesCount, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.only(left: 15, right: 15), + child: SfMapsTheme( + data: SfMapsThemeData( + tooltipColor: const Color.fromRGBO(98, 0, 238, 1), + tooltipStrokeColor: const Color.fromRGBO(252, 187, 15, 1), + tooltipStrokeWidth: 3, + tooltipBorderRadius: const BorderRadiusDirectional.only( + topStart: Radius.circular(20), + bottomEnd: Radius.circular(20), + ), ), - ), - child: SfMaps( - layers: [ - MapShapeLayer( - source: _shapeSource, - shapeTooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: const EdgeInsets.all(7), - child: Text( - 'Continent : ' + - _data[index].continent + - '\nArea : ' + - _data[index].area, - style: const TextStyle( - color: Colors.white, - fontSize: 14, - fontStyle: FontStyle.italic, - fontFamily: 'Times', - ), + child: SfMaps( + layers: [ + MapShapeLayer( + source: _shapeSource, + shapeTooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: const EdgeInsets.all(7), + child: Text( + 'Continent : ' + + _data[index].continent + + '\nArea : ' + + _data[index].area, + style: const TextStyle( + color: Colors.white, + fontSize: 14, + fontStyle: FontStyle.italic, + fontFamily: 'Times', + ), ), ); }, @@ -601,6 +651,7 @@ Widget build(BuildContext context) { ), ), ); + } } class Model { diff --git a/chart-sdk/flutter/maps/vector-layers/arc-layer.md b/chart-sdk/flutter/maps/vector-layers/arc-layer.md index cd4c5d3d5..052d5b6d2 100644 --- a/chart-sdk/flutter/maps/vector-layers/arc-layer.md +++ b/chart-sdk/flutter/maps/vector-layers/arc-layer.md @@ -1,7 +1,7 @@ --- layout: post -title: Adding Arc layer in Flutter Maps widget | Syncfusion -description: Learn here all about adding the Arc Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more. +title: Arc Layer in Flutter Maps | Syncfusion® +description: Learn about arc layers in Syncfusion® Flutter Maps (SfMaps), including route visualization, arc customization, styling, and map overlays. platform: chart-sdk control: SfMaps documentation: ug @@ -22,57 +22,67 @@ N> It is applicable for both the tile layer and shape layer. {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -87,55 +97,67 @@ class DataModel { In the tile layer +N> The only difference between the shape layer and tile layer code below is the layer type and the zoom level — `MapShapeLayer` vs `MapTileLayer`. The arc sublayer configuration is identical. + {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 3, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 3, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -159,57 +181,67 @@ By default, the arc will always render above the [`MapArc.from`](https://pub.dev {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - heightFactor: -0.2, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + heightFactor: -0.2, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -233,57 +265,67 @@ By default, the arc will bend at the center between the [`MapArc.from`](https:// {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(13.0827, 80.2707), MapLatLng(22.3193, 114.1694)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - controlPointFactor: 0.2, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(13.0827, 80.2707), MapLatLng(22.3193, 114.1694)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + controlPointFactor: 0.2, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -305,57 +347,67 @@ You can apply the same color for all [`MapArc`](https://pub.dev/documentation/sy {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074), Colors.redAccent), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737), Colors.purpleAccent), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694), Colors.deepPurple), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694), Colors.blueAccent), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707), Colors.teal), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - color: data[index].color, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074), Colors.redAccent), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737), Colors.purpleAccent), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694), Colors.deepPurple), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694), Colors.blueAccent), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707), Colors.teal), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + color: data[index].color, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -378,58 +430,68 @@ You can apply the same width for all [`MapArc`](https://pub.dev/documentation/sy {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074), 2), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737), 3), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644), 2), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694), 4), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694), 5), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707), 6), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - width: data[index].width, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074), 2), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737), 3), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644), 2), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694), 4), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694), 5), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707), 6), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + width: data[index].width, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -454,58 +516,68 @@ A sequence of dash and gap will be rendered based on the values in this list. On {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - dashArray: [8, 4, 2, 4], - ); - }, - ).toSet(), - color: Colors.blue, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + dashArray: [8, 4, 2, 4], + ); + }, + ).toSet(), + color: Colors.blue, + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -529,6 +601,9 @@ By default, there will not be any animation. {% tabs %} {% highlight Dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + class AnimationSample extends StatefulWidget { const AnimationSample({Key? key}) : super(key: key); @override @@ -629,66 +704,76 @@ You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/ {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; -late int selectedIndex; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - - selectedIndex = -1; - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, - color: selectedIndex == index ? Colors.pink : Colors.blue, - onTap: () { - setState(() { - selectedIndex = index; - }); - } - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + late int selectedIndex; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(23.1291, 113.2644)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + + selectedIndex = -1; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + color: selectedIndex == index ? Colors.pink : Colors.blue, + onTap: () { + setState(() { + selectedIndex = index; + }); + } + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -710,85 +795,96 @@ You can show additional information about an arc using the [`tooltipBuilder`](ht {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; -late Random random; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - - random = Random(); - super.initState(); -} - -@override -Widget build(BuildContext context) { - final ThemeData themeData = Theme.of(context); - final TextStyle textStyle = themeData.textTheme.caption! - .copyWith(color: themeData.colorScheme.surface); - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + late Random random; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final ThemeData themeData = Theme.of(context); + final TextStyle textStyle = themeData.textTheme.labelSmall! + .copyWith(color: themeData.colorScheme.surface); + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.only(left: 5, top: 5), + height: 40, + width: 100, + child: Column( + children: [ + Row( + children: [ + Text('Flight : ', style: textStyle), + Text('Air India', style: textStyle), + ], + ), + Row( + children: [ + Text('Depart : ', style: textStyle), + Text(random.nextInt(12).toString() + 'AM', style: textStyle), + ], + ), + ], + ), ); }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.only(left: 5, top: 5), - height: 40, - width: 100, - child: Column( - children: [ - Row( - children: [ - Text('Flight : ', style: textStyle), - Text('Air India', style: textStyle), - ], - ), - Row( - children: [ - Text('Depart : ', style: textStyle), - Text(random.nextInt(12).toString() + 'AM', style: textStyle), - ], - ), - ], - ), - ); - }, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { @@ -814,89 +910,100 @@ You can customize the appearance of the tooltip: {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late MapShapeSource dataSource; -late List data; -late Random random; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), - DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 4, - focalLatLng: MapLatLng(22.9734, 90.6569), - ); - - random = Random(); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - tooltipSettings: MapTooltipSettings( - color: Colors.white, - strokeColor: Colors.black, - strokeWidth: 2, - ), - sublayers: [ - MapArcLayer( - arcs: List.generate( - data.length, - (int index) { - return MapArc( - from: data[index].from, - to: data[index].to, +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late MapShapeSource dataSource; + late List data; + late Random random; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.6139, 77.2090), MapLatLng(39.9042, 116.4074)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(31.2304, 121.4737)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(19.0760, 72.8777), MapLatLng(22.3193, 114.1694)), + DataModel(MapLatLng(22.3193, 114.1694), MapLatLng(13.0827, 80.2707)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 4, + focalLatLng: MapLatLng(22.9734, 90.6569), + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + tooltipSettings: MapTooltipSettings( + color: Colors.white, + strokeColor: Colors.black, + strokeWidth: 2, + ), + sublayers: [ + MapArcLayer( + arcs: List.generate( + data.length, + (int index) { + return MapArc( + from: data[index].from, + to: data[index].to, + ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Flight : '), + Text('Air India'), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Depart : '), + Text(random.nextInt(12).toString() + 'AM'), + ], + ), + ], + ), ); }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text('Flight : '), - Text('Air India'), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text('Depart : '), - Text(random.nextInt(12).toString() + 'AM'), - ], - ), - ], - ), - ); - }, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class DataModel { diff --git a/chart-sdk/flutter/maps/vector-layers/circle-layer.md b/chart-sdk/flutter/maps/vector-layers/circle-layer.md index 64793bfaf..21e604c85 100644 --- a/chart-sdk/flutter/maps/vector-layers/circle-layer.md +++ b/chart-sdk/flutter/maps/vector-layers/circle-layer.md @@ -1,7 +1,7 @@ --- layout: post -title: Adding Circle Layer in Flutter Maps widget | Syncfusion -description: Learn here all about adding Circle Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more. +title: Circle Layer in Flutter Maps | Syncfusion® +description: Learn about circle layers in Syncfusion® Flutter Maps (SfMaps), including circle customization, styling, data visualization, and map overlays. platform: chart-sdk control: SfMaps documentation: ug @@ -22,60 +22,70 @@ N> It is applicable for both the tile layer and shape layer. {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -86,56 +96,66 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -late List circles; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(20.5937, 78.9629), - initialZoomLevel: 4, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(20.5937, 78.9629), + initialZoomLevel: 4, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -150,61 +170,71 @@ You can change the size of the circles using the [`MapCircle.radius`](https://pu {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - radius: 10, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + radius: 10, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -219,54 +249,64 @@ You can apply the same color for all [`MapCircle`](https://pub.dev/documentation {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; - -@override -void initState() { - circles = [ - MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink), - MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal), - MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple), - MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green), - MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange), - MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue), - MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent), - MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index].center, - radius: 10, - color: circles[index].color, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + + @override + void initState() { + circles = [ + MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink), + MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal), + MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple), + MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green), + MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange), + MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue), + MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent), + MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index].center, + radius: 10, + color: circles[index].color, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class MapCircleModel { @@ -290,55 +330,65 @@ You can apply the same stroke color for all [`MapCircle`](https://pub.dev/docume {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; - -@override -void initState() { - circles = [ - MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink), - MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal), - MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple), - MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green), - MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange), - MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue), - MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent), - MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index].center, - radius: index % 2 == 0 ? 10 : 20, - strokeWidth: 3, - strokeColor: circles[index].color, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + + @override + void initState() { + circles = [ + MapCircleModel(MapLatLng(15.2993, 74.1240), Colors.pink), + MapCircleModel(MapLatLng(15.5057, 80.0499), Colors.teal), + MapCircleModel(MapLatLng(19.7515, 75.7139), Colors.purple), + MapCircleModel(MapLatLng(23.0225, 72.5714), Colors.green), + MapCircleModel(MapLatLng(24.8607, 67.0011), Colors.orange), + MapCircleModel(MapLatLng(27.0238, 74.2179), Colors.blue), + MapCircleModel(MapLatLng(26.8467, 80.9462), Colors.purpleAccent), + MapCircleModel(MapLatLng(21.2787, 85.2799), Colors.redAccent), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index].center, + radius: index % 2 == 0 ? 10 : 20, + strokeWidth: 3, + strokeColor: circles[index].color, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class MapCircleModel { @@ -362,80 +412,90 @@ By default, there will not be any animation. {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; -late AnimationController animationController; -late Animation animation; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - animationController = AnimationController( - duration: Duration(seconds: 3), - vsync: this, - ); - animation = CurvedAnimation( - parent: animationController, - curve: Curves.easeInOut, - ); - animationController.forward(from: 0); - super.initState(); -} - -@override -void dispose() { - animationController.dispose(); - super.dispose(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - radius: 10, - ); - }, - ).toSet(), - animation: animation, - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State with TickerProviderStateMixin { + late List circles; + late MapShapeSource dataSource; + late AnimationController animationController; + late Animation animation; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + animationController = AnimationController( + duration: Duration(seconds: 3), + vsync: this, + ); + animation = CurvedAnimation( + parent: animationController, + curve: Curves.easeInOut, + ); + animationController.forward(from: 0); + super.initState(); + } + + @override + void dispose() { + animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + radius: 10, + ); + }, + ).toSet(), + animation: animation, + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -450,70 +510,80 @@ You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/ {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; -late int selectedIndex; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - selectedIndex = -1; - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - radius: 10, - color: selectedIndex == index ? Colors.pink : Colors.blue, - onTap: () { - setState(() { - selectedIndex = index; - }); - }, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + late int selectedIndex; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + selectedIndex = -1; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + radius: 10, + color: selectedIndex == index ? Colors.pink : Colors.blue, + onTap: () { + setState(() { + selectedIndex = index; + }); + }, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -528,92 +598,102 @@ You can show additional information about the circles drawn using the [`tooltipB {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; -late Random random; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - random = Random(); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - final ThemeData themeData = Theme.of(context); - final TextStyle textStyle = themeData.textTheme.caption! - .copyWith(color: themeData.colorScheme.surface); - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - radius: 10, - ); - }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.all(10), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text('Disease name :', style: textStyle), - Text(' ' + 'Corona', style: textStyle), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text('Active cases :', style: textStyle), - Text(' ' + random.nextInt(62342).toString(), - style: textStyle), - ], - ), - ], - ), - ); - } - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + late Random random; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final ThemeData themeData = Theme.of(context); + final TextStyle textStyle = themeData.textTheme.labelSmall! + .copyWith(color: themeData.colorScheme.surface); + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + radius: 10, + ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.all(10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Disease name :', style: textStyle), + Text(' ' + 'Corona', style: textStyle), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Active cases :', style: textStyle), + Text(' ' + random.nextInt(62342).toString(), + style: textStyle), + ], + ], + ), + ); + } + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -632,101 +712,111 @@ You can customize the appearance of the tooltip. {% tabs %} {% highlight Dart %} -late List circles; -late MapShapeSource dataSource; -late Random random; - -@override -void initState() { - circles = [ - MapLatLng(15.2993, 74.1240), - MapLatLng(15.5057, 80.0499), - MapLatLng(19.7515, 75.7139), - MapLatLng(23.0225, 72.5714), - MapLatLng(24.8607, 67.0011), - MapLatLng(27.0238, 74.2179), - MapLatLng(26.8467, 80.9462), - MapLatLng(21.2787, 85.2799), - MapLatLng(20.9517, 85.0985), - MapLatLng(25.0961, 85.3131), - MapLatLng(24.6637, 93.9063), - MapLatLng(26.2006, 92.9376), - MapLatLng(28.7041, 77.1025), - MapLatLng(29.0588, 76.0856), - MapLatLng(30.0668, 79.0193), - MapLatLng(31.1471, 75.3412), - ]; - - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - random = Random(); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - tooltipSettings: const MapTooltipSettings( - color: Colors.white, - strokeWidth: 2, - strokeColor: Colors.black, - ), - sublayers: [ - MapCircleLayer( - circles: List.generate( - circles.length, - (int index) { - return MapCircle( - center: circles[index], - radius: 10, - ); - }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.all(10), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text('Disease name :', - style: TextStyle( - color: Colors.black, - fontWeight: FontWeight.bold)), - Text(' ' + 'Corona', - style: TextStyle(color: Colors.black)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text('Active cases :', - style: TextStyle( - color: Colors.black, +class _MapsExampleState extends State { + late List circles; + late MapShapeSource dataSource; + late Random random; + + @override + void initState() { + circles = [ + MapLatLng(15.2993, 74.1240), + MapLatLng(15.5057, 80.0499), + MapLatLng(19.7515, 75.7139), + MapLatLng(23.0225, 72.5714), + MapLatLng(24.8607, 67.0011), + MapLatLng(27.0238, 74.2179), + MapLatLng(26.8467, 80.9462), + MapLatLng(21.2787, 85.2799), + MapLatLng(20.9517, 85.0985), + MapLatLng(25.0961, 85.3131), + MapLatLng(24.6637, 93.9063), + MapLatLng(26.2006, 92.9376), + MapLatLng(28.7041, 77.1025), + MapLatLng(29.0588, 76.0856), + MapLatLng(30.0668, 79.0193), + MapLatLng(31.1471, 75.3412), + ]; + + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + tooltipSettings: const MapTooltipSettings( + color: Colors.white, + strokeWidth: 2, + strokeColor: Colors.black, + ), + sublayers: [ + MapCircleLayer( + circles: List.generate( + circles.length, + (int index) { + return MapCircle( + center: circles[index], + radius: 10, + ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.all(10), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Disease name :', + style: TextStyle( + color: Colors.black, fontWeight: FontWeight.bold)), - Text(' ' + random.nextInt(62342).toString(), + Text(' ' + 'Corona', style: TextStyle(color: Colors.black)), - ], - ), - ], - ), - ); - } - ), - ], - ), - ], - ), - ); + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text('Active cases :', + style: TextStyle( + color: Colors.black, + fontWeight: FontWeight.bold)), + Text(' ' + random.nextInt(62342).toString(), + style: TextStyle(color: Colors.black)), + ], + ), + ], + ); + } + ), + ], + ), + ], + ), + ); + } } {% endhighlight %} @@ -753,43 +843,53 @@ I> The individual circle customization like [`MapCircle.color`](https://pub.dev/ {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - zoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4, maxZoomLevel: 15); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(-14.2350, -51.9253), - sublayers: [ - MapCircleLayer.inverted( - circles: List.generate( - 1, - (int index) { - return MapCircle( - center: MapLatLng(-14.2350, -51.9253), - radius: 50, - ); - }, - ).toSet(), - color: Colors.black.withOpacity(0.3), - strokeColor: Colors.red, - strokeWidth: 1, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + zoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4, maxZoomLevel: 15); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(-14.2350, -51.9253), + sublayers: [ + MapCircleLayer.inverted( + circles: List.generate( + 1, + (int index) { + return MapCircle( + center: MapLatLng(-14.2350, -51.9253), + radius: 50, + ); + }, + ).toSet(), + color: Colors.black.withOpacity(0.3), + strokeColor: Colors.red, + strokeWidth: 1, + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } {% endhighlight %} diff --git a/chart-sdk/flutter/maps/vector-layers/line-layer.md b/chart-sdk/flutter/maps/vector-layers/line-layer.md index a1312411c..904f86913 100644 --- a/chart-sdk/flutter/maps/vector-layers/line-layer.md +++ b/chart-sdk/flutter/maps/vector-layers/line-layer.md @@ -1,13 +1,13 @@ --- layout: post -title: Lines in Flutter Maps widget | Syncfusion -description: Learn here all about adding the Line Layer feature of Syncfusion Flutter Maps (SfMaps) widget and more. +title: Line Layer in Flutter Maps | Syncfusion® +description: Learn about line layers in Syncfusion® Flutter Maps (SfMaps), including route visualization, line customization, styling, and map overlays. platform: chart-sdk control: SfMaps documentation: ug --- -# Lines in Flutter Maps (SfMaps) +# Line Layer in Flutter Maps (SfMaps) Line layer is a sublayer that renders a group of [`MapLine`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLine-class.html) on [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html) and [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html). This section helps you learn how to add lines and customize them. @@ -22,47 +22,57 @@ N> It is applicable for both the tile layer and shape layer. {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - ); - }).toSet(), - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + ); + }).toSet(), + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -80,41 +90,51 @@ class DataModel { {% tabs %} {% highlight Dart %} -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - ); - }).toSet(), - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State { + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + ); + }).toSet(), + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -136,48 +156,58 @@ You can apply the same color for all [`MapLine`](https://pub.dev/documentation/s {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), Colors.redAccent), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), Colors.deepPurpleAccent), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), Colors.blueAccent), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), Colors.teal), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - color: data[index].color, - ); - }).toSet(), - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), Colors.redAccent), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), Colors.deepPurpleAccent), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), Colors.blueAccent), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), Colors.teal), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + color: data[index].color, + ); + }).toSet(), + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -200,48 +230,58 @@ You can apply the same width for all [`MapLine`](https://pub.dev/documentation/s {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), 2), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), 4), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), 5), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), 6), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - width: data[index].width, - ); - }).toSet(), - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), 2), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), 4), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), 5), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), 6), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + width: data[index].width, + ); + }).toSet(), + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -264,48 +304,58 @@ You can apply the same stroke cap for all [`MapLine`](https://pub.dev/documentat {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), 3), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), 4), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), 6), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), 7), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - width: data[index].width, - strokeCap: StrokeCap.round, - ); - }).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468), 3), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152), 4), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188), 6), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751), 7), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + width: data[index].width, + strokeCap: StrokeCap.round, + ); + }).toSet(), + ), + ], + ), + ], + ), + ); + } } class DataModel { @@ -330,49 +380,59 @@ A sequence of dash and gap will be rendered based on the values in this list. On {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - dashArray: [8, 4, 2, 4], - ); - }).toSet(), - color: Colors.blue, - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + dashArray: [8, 4, 2, 4], + ); + }).toSet(), + color: Colors.blue, + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -396,67 +456,77 @@ By default, there will not be any animation. {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; -late AnimationController animationController; -late Animation animation; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - - animationController = AnimationController( - duration: Duration(seconds: 3), - vsync: this, - ); - animation = CurvedAnimation( - parent: animationController, - curve: Curves.easeInOut, - ); - animationController.forward(from: 0); - super.initState(); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void dispose() { - animationController?.dispose(); - super.dispose(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - ); - }).toSet(), - color: Colors.blue, - animation: animation, - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State with TickerProviderStateMixin { + late MapShapeSource dataSource; + late List data; + late AnimationController animationController; + late Animation animation; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + + animationController = AnimationController( + duration: Duration(seconds: 3), + vsync: this, + ); + animation = CurvedAnimation( + parent: animationController, + curve: Curves.easeInOut, + ); + animationController.forward(from: 0); + super.initState(); + } + + @override + void dispose() { + animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + ); + }).toSet(), + color: Colors.blue, + animation: animation, + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -478,55 +548,65 @@ You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/ {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; -late int selectedIndex; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - - selectedIndex = -1; - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - color: selectedIndex == index ? Colors.pink : Colors.blue, - onTap: () { - setState(() { - selectedIndex = index; +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + late int selectedIndex; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + + selectedIndex = -1; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + color: selectedIndex == index ? Colors.pink : Colors.blue, + onTap: () { + setState(() { + selectedIndex = index; + }); }); - }); - }).toSet(), - ), - ], - ), - ]), - ), - ); + }).toSet(), + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -548,76 +628,87 @@ You can show additional information about the line drawn using the [`tooltipBuil {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; -late Random random; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - - random = Random(); - super.initState(); +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - final ThemeData themeData = Theme.of(context); - final TextStyle textStyle = themeData.textTheme.caption! - .copyWith(color: themeData.colorScheme.surface); - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - ); - }).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.only(left: 5, top: 5), - height: 40, - width: 100, - child: Column( - children: [ - Row( - children: [ - Text('Flight : ', style: textStyle), - Text('Air India', style: textStyle), - ], - ), - Row( - children: [ - Text('Depart : ', style: textStyle), - Text(random.nextInt(12).toString() + 'AM', style: textStyle), - ], - ), - ], - ), - ); - }, - ), - ], - ), - ]), - ), - ); +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + late Random random; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final ThemeData themeData = Theme.of(context); + final TextStyle textStyle = themeData.textTheme.labelSmall! + .copyWith(color: themeData.colorScheme.surface); + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + ); + }).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.only(left: 5, top: 5), + height: 40, + width: 100, + child: Column( + children: [ + Row( + children: [ + Text('Flight : ', style: textStyle), + Text('Air India', style: textStyle), + ], + ), + Row( + children: [ + Text('Depart : ', style: textStyle), + Text(random.nextInt(12).toString() + 'AM', style: textStyle), + ], + ), + ], + ), + ); + }, + ), + ], + ), + ]), + ), + ); + } } class DataModel { @@ -643,78 +734,89 @@ You can customize the appearance of the tooltip: {% tabs %} {% highlight Dart %} -late MapShapeSource dataSource; -late List data; -late Random random; - -@override -void initState() { - data = [ - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), - DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - - random = Random(); - super.initState(); +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Padding( - padding: EdgeInsets.all(10), - child: SfMaps(layers: [ - MapShapeLayer( - source: dataSource, - tooltipSettings: const MapTooltipSettings( - color: Colors.white, - strokeWidth: 2, - strokeColor: Colors.black, - ), - sublayers: [ - MapLineLayer( - lines: List.generate(data.length, (int index) { - return MapLine( - from: data[index].from, - to: data[index].to, - ); - }).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.only(left: 5, top: 5), - height: 40, - width: 100, - child: Column( - children: [ - Row( - children: [ - Text('Flight : '), - Text('Air India'), - ], - ), - Row( - children: [ - Text('Depart : '), - Text(random.nextInt(12).toString() + 'AM'), - ], - ), - ], - ), - ); - }, +class _MapsExampleState extends State { + late MapShapeSource dataSource; + late List data; + late Random random; + + @override + void initState() { + data = [ + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(56.1304, -106.3468)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-9.1900, -75.0152)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(61.5240, 105.3188)), + DataModel(MapLatLng(28.7041, 77.1025), MapLatLng(-25.2744, 133.7751)), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(10), + child: SfMaps(layers: [ + MapShapeLayer( + source: dataSource, + tooltipSettings: const MapTooltipSettings( + color: Colors.white, + strokeWidth: 2, + strokeColor: Colors.black, ), - ], - ), - ]), - ), - ); + sublayers: [ + MapLineLayer( + lines: List.generate(data.length, (int index) { + return MapLine( + from: data[index].from, + to: data[index].to, + ); + }).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.only(left: 5, top: 5), + height: 40, + width: 100, + child: Column( + children: [ + Row( + children: [ + Text('Flight : '), + Text('Air India'), + ], + ), + Row( + children: [ + Text('Depart : '), + Text(random.nextInt(12).toString() + 'AM'), + ], + ), + ], + ), + ); + }, + ), + ], + ), + ]), + ), + ); + } } class DataModel { diff --git a/chart-sdk/flutter/maps/vector-layers/polygon-layer.md b/chart-sdk/flutter/maps/vector-layers/polygon-layer.md index 5b86f09c8..3153506a9 100644 --- a/chart-sdk/flutter/maps/vector-layers/polygon-layer.md +++ b/chart-sdk/flutter/maps/vector-layers/polygon-layer.md @@ -1,7 +1,7 @@ --- layout: post -title: Adding polygons in Flutter Maps widget | Syncfusion -description: Learn here all about adding the Polygons feature of Syncfusion Flutter Maps (SfMaps) widget and more. +title: Polygons in Flutter Maps | Syncfusion® +description: Learn about polygon support in Syncfusion® Flutter Maps (SfMaps), including polygon customization, styling, data visualization, and map overlays. platform: chart-sdk control: SfMaps documentation: ug @@ -22,59 +22,69 @@ N> It is applicable for both the tile layer and shape layer. {% tabs %} {% highlight Dart %} -late List polygons; -late List polygon1; -late List polygon2; -late MapShapeSource dataSource; - -@override -void initState() { - polygon1 = [ - MapLatLng(55.7558, 37.6173), - MapLatLng(53.7596, 87.1216), - MapLatLng(61.5240, 105.3188), - ]; - - polygon2 = [ - MapLatLng(64.2823, -135.0000), - MapLatLng(51.2538, -85.3232), - MapLatLng(48.4284, -123.3656), - ]; - - polygons = [ - PolygonModel(polygon1), - PolygonModel(polygon2), - ]; - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - polygons.length, - (int index) { - return MapPolygon( - points: polygons[index].points, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polygons; + late List polygon1; + late List polygon2; + late MapShapeSource dataSource; + + @override + void initState() { + polygon1 = [ + MapLatLng(55.7558, 37.6173), + MapLatLng(53.7596, 87.1216), + MapLatLng(61.5240, 105.3188), + ]; + + polygon2 = [ + MapLatLng(64.2823, -135.0000), + MapLatLng(51.2538, -85.3232), + MapLatLng(48.4284, -123.3656), + ]; + + polygons = [ + PolygonModel(polygon1), + PolygonModel(polygon2), + ]; + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + polygons.length, + (int index) { + return MapPolygon( + points: polygons[index].points, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class PolygonModel { @@ -90,54 +100,64 @@ class PolygonModel { {% tabs %} {% highlight Dart %} -late List polygons; -late List polygon1; -late List polygon2; - -@override -void initState() { - polygon1 = [ - MapLatLng(55.7558, 37.6173), - MapLatLng(53.7596, 87.1216), - MapLatLng(61.5240, 105.3188), - ]; - - polygon2 = [ - MapLatLng(64.2823, -135.0000), - MapLatLng(51.2538, -85.3232), - MapLatLng(48.4284, -123.3656), - ]; - - polygons = [ - PolygonModel(polygon1), - PolygonModel(polygon2), - ]; - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - polygons.length, - (int index) { - return MapPolygon( - points: polygons[index].points, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polygons; + late List polygon1; + late List polygon2; + + @override + void initState() { + polygon1 = [ + MapLatLng(55.7558, 37.6173), + MapLatLng(53.7596, 87.1216), + MapLatLng(61.5240, 105.3188), + ]; + + polygon2 = [ + MapLatLng(64.2823, -135.0000), + MapLatLng(51.2538, -85.3232), + MapLatLng(48.4284, -123.3656), + ]; + + polygons = [ + PolygonModel(polygon1), + PolygonModel(polygon2), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + polygons.length, + (int index) { + return MapPolygon( + points: polygons[index].points, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class PolygonModel { @@ -157,61 +177,71 @@ You can apply the same color for all [`MapPolygon`](https://pub.dev/documentatio {% tabs %} {% highlight Dart %} -late List polygons; -late List polygon1; -late List polygon2; -late MapShapeSource dataSource; - -@override -void initState() { - polygon1 = [ - MapLatLng(55.7558, 37.6173), - MapLatLng(53.7596, 87.1216), - MapLatLng(61.5240, 105.3188), - ]; - - polygon2 = [ - MapLatLng(64.2823, -135.0000), - MapLatLng(51.2538, -85.3232), - MapLatLng(48.4284, -123.3656), - ]; - - polygons = [ - PolygonModel(polygon1, Colors.greenAccent), - PolygonModel(polygon2, Colors.pinkAccent), - ]; - - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - polygons.length, - (int index) { - return MapPolygon( - points: polygons[index].points, - color: polygons[index].color, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polygons; + late List polygon1; + late List polygon2; + late MapShapeSource dataSource; + + @override + void initState() { + polygon1 = [ + MapLatLng(55.7558, 37.6173), + MapLatLng(53.7596, 87.1216), + MapLatLng(61.5240, 105.3188), + ]; + + polygon2 = [ + MapLatLng(64.2823, -135.0000), + MapLatLng(51.2538, -85.3232), + MapLatLng(48.4284, -123.3656), + ]; + + polygons = [ + PolygonModel(polygon1, Colors.greenAccent), + PolygonModel(polygon2, Colors.pinkAccent), + ]; + + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + polygons.length, + (int index) { + return MapPolygon( + points: polygons[index].points, + color: polygons[index].color, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class PolygonModel { @@ -234,61 +264,71 @@ You can apply the same stroke color for all [`MapPolygon`](https://pub.dev/docum {% tabs %} {% highlight Dart %} -late List polygons; -late List polygon1; -late List polygon2; -late MapShapeSource dataSource; - -@override -void initState() { - polygon1 = [ - MapLatLng(55.7558, 37.6173), - MapLatLng(53.7596, 87.1216), - MapLatLng(61.5240, 105.3188), - ]; - - polygon2 = [ - MapLatLng(64.2823, -135.0000), - MapLatLng(51.2538, -85.3232), - MapLatLng(48.4284, -123.3656), - ]; - - polygons = [ - PolygonModel(polygon1, 3), - PolygonModel(polygon2, 4), - ]; - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - super.initState(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - polygons.length, - (int index) { - return MapPolygon( - points: polygons[index].points, - strokeWidth: polygons[index].width, - strokeColor: Colors.pink, - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polygons; + late List polygon1; + late List polygon2; + late MapShapeSource dataSource; + + @override + void initState() { + polygon1 = [ + MapLatLng(55.7558, 37.6173), + MapLatLng(53.7596, 87.1216), + MapLatLng(61.5240, 105.3188), + ]; + + polygon2 = [ + MapLatLng(64.2823, -135.0000), + MapLatLng(51.2538, -85.3232), + MapLatLng(48.4284, -123.3656), + ]; + + polygons = [ + PolygonModel(polygon1, 3), + PolygonModel(polygon2, 4), + ]; + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + polygons.length, + (int index) { + return MapPolygon( + points: polygons[index].points, + strokeWidth: polygons[index].width, + strokeColor: Colors.pink, + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class PolygonModel { @@ -309,68 +349,78 @@ You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/ {% tabs %} {% highlight Dart %} -late List polygons; -late List polygon1; -late List polygon2; -late MapShapeSource dataSource; -late int selectedIndex; - -@override -void initState() { - polygon1 = [ - MapLatLng(55.7558, 37.6173), - MapLatLng(53.7596, 87.1216), - MapLatLng(61.5240, 105.3188), - ]; - - polygon2 = [ - MapLatLng(64.2823, -135.0000), - MapLatLng(51.2538, -85.3232), - MapLatLng(48.4284, -123.3656), - ]; - - polygons = [ - PolygonModel(polygon1), - PolygonModel(polygon2), - ]; - dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - selectedIndex = -1; - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - polygons.length, - (int index) { - return MapPolygon( - points: polygons[index].points, - color: selectedIndex == index ? Colors.pink : Colors.blue, - onTap: () { - setState(() { - selectedIndex = index; - }); - } - ); - }, - ).toSet(), - ), - ], - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polygons; + late List polygon1; + late List polygon2; + late MapShapeSource dataSource; + late int selectedIndex; + + @override + void initState() { + polygon1 = [ + MapLatLng(55.7558, 37.6173), + MapLatLng(53.7596, 87.1216), + MapLatLng(61.5240, 105.3188), + ]; + + polygon2 = [ + MapLatLng(64.2823, -135.0000), + MapLatLng(51.2538, -85.3232), + MapLatLng(48.4284, -123.3656), + ]; + + polygons = [ + PolygonModel(polygon1), + PolygonModel(polygon2), + ]; + dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + + selectedIndex = -1; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + polygons.length, + (int index) { + return MapPolygon( + points: polygons[index].points, + color: selectedIndex == index ? Colors.pink : Colors.blue, + onTap: () { + setState(() { + selectedIndex = index; + }); + } + ); + }, + ).toSet(), + ), + ], + ), + ], + ), + ); + } } class PolygonModel { @@ -390,56 +440,66 @@ You can show additional information about the polygon drawn using the [`tooltipB {% tabs %} {% highlight Dart %} -late List polygon; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - polygon = [ - MapLatLng(27.6648, -81.5158), - MapLatLng(32.3078, -64.7505), - MapLatLng(18.2208, -66.5901), - ]; - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(27.6648, -81.5158), - initialZoomLevel: 3, - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - 1, - (int index) { - return MapPolygon( - points: polygon, +class _MapsExampleState extends State { + late List polygon; + + @override + void initState() { + polygon = [ + MapLatLng(27.6648, -81.5158), + MapLatLng(32.3078, -64.7505), + MapLatLng(18.2208, -66.5901), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 400, + width: 400, + child: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(27.6648, -81.5158), + initialZoomLevel: 3, + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + 1, + (int index) { + return MapPolygon( + points: polygon, + ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: EdgeInsets.all(10), + child: Text('Bermuda triangle', + style: TextStyle(color: Colors.white)), ); }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: EdgeInsets.all(10), - child: Text('Bermuda triangle', - style: TextStyle(color: Colors.white)), - ); - }, - ), - ], - ), - ], + ), + ], + ), + ], + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -458,60 +518,70 @@ You can customize the appearance of the tooltip: {% tabs %} {% highlight Dart %} -late List polygon; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - polygon = [ - MapLatLng(27.6648, -81.5158), - MapLatLng(32.3078, -64.7505), - MapLatLng(18.2208, -66.5901), - ]; - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(27.6648, -81.5158), - initialZoomLevel: 3, - tooltipSettings: const MapTooltipSettings( - color: Colors.white, - strokeColor: Colors.teal, - strokeWidth: 2, - ), - sublayers: [ - MapPolygonLayer( - polygons: List.generate( - 1, - (int index) { - return MapPolygon( - points: polygon, +class _MapsExampleState extends State { + late List polygon; + + @override + void initState() { + polygon = [ + MapLatLng(27.6648, -81.5158), + MapLatLng(32.3078, -64.7505), + MapLatLng(18.2208, -66.5901), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + height: 400, + width: 400, + child: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(27.6648, -81.5158), + initialZoomLevel: 3, + tooltipSettings: const MapTooltipSettings( + color: Colors.white, + strokeColor: Colors.teal, + strokeWidth: 2, + ), + sublayers: [ + MapPolygonLayer( + polygons: List.generate( + 1, + (int index) { + return MapPolygon( + points: polygon, + ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Padding( + padding: EdgeInsets.all(10), + child: Text('Bermuda triangle'), ); }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Padding( - padding: EdgeInsets.all(10), - child: Text('Bermuda triangle'), - ); - }, - ), - ], - ), - ], + ), + ], + ), + ], + ), ), ), - ), - ); + ); + } } {% endhighlight %} @@ -537,49 +607,59 @@ I> The individual polygon customization like [`MapPolygon.color`](https://pub.de {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior zoomPanBehavior; -late List _polygon; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - _polygon = [ - MapLatLng(27.6648, -81.5158), - MapLatLng(32.3078, -64.7505), - MapLatLng(18.2208, -66.5901), - ]; - - zoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - initialFocalLatLng: MapLatLng(25.0119, -73.4842), - sublayers: [ - MapPolygonLayer.inverted( - polygons: List.generate( - 1, - (int index) { - return MapPolygon( - points: _polygon, - ); - }, - ).toSet(), - color: Colors.black.withOpacity(0.3), - strokeColor: Colors.red, - strokeWidth: 1, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior zoomPanBehavior; + late List _polygon; + + @override + void initState() { + _polygon = [ + MapLatLng(27.6648, -81.5158), + MapLatLng(32.3078, -64.7505), + MapLatLng(18.2208, -66.5901), + ]; + + zoomPanBehavior = MapZoomPanBehavior(zoomLevel: 4); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + initialFocalLatLng: MapLatLng(25.0119, -73.4842), + sublayers: [ + MapPolygonLayer.inverted( + polygons: List.generate( + 1, + (int index) { + return MapPolygon( + points: _polygon, + ); + }, + ).toSet(), + color: Colors.black.withOpacity(0.3), + strokeColor: Colors.red, + strokeWidth: 1, + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } {% endhighlight %} diff --git a/chart-sdk/flutter/maps/vector-layers/polyline-layer.md b/chart-sdk/flutter/maps/vector-layers/polyline-layer.md index f0eabe631..1df5411ac 100644 --- a/chart-sdk/flutter/maps/vector-layers/polyline-layer.md +++ b/chart-sdk/flutter/maps/vector-layers/polyline-layer.md @@ -1,7 +1,7 @@ --- layout: post -title: Adding Polylines in Flutter Maps widget | Syncfusion -description: Learn here all about adding the Polylines feature of Syncfusion Flutter Maps (SfMaps) widget and more. +title: Polylines in Flutter Maps | Syncfusion® +description: Learn about polyline support in Syncfusion® Flutter Maps (SfMaps), including route visualization, line customization, styling, and map overlays. platform: chart-sdk control: SfMaps documentation: ug @@ -22,68 +22,73 @@ N> It is applicable for both the tile layer and shape layer. {% tabs %} {% highlight Dart %} -late List polyline; -late List> polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = >[polyline]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 2, - focalLatLng: MapLatLng(20.3173, 78.7139), - ); - super.initState(); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index], - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -class PolylineModel { - PolylineModel(this.points); - final List points; +class _MapsExampleState extends State { + late List polyline; + late List> polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = >[polyline]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 2, + focalLatLng: MapLatLng(20.3173, 78.7139), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index], + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } {% endhighlight %} @@ -94,62 +99,67 @@ class PolylineModel { {% tabs %} {% highlight Dart %} -late List polyline; -late List> polylines; -late MapZoomPanBehavior zoomPanBehavior; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = >[polyline]; - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 5, - focalLatLng: MapLatLng(20.3173, 78.7139), - ); - super.initState(); -} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index], - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -class PolylineModel { - PolylineModel(this.points); - final List points; +class _MapsExampleState extends State { + late List polyline; + late List> polylines; + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = >[polyline]; + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 5, + focalLatLng: MapLatLng(20.3173, 78.7139), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index], + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } {% endhighlight %} @@ -164,66 +174,76 @@ You can apply the same color for all [`MapPolyline`](https://pub.dev/documentati {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline, Colors.purple), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 1, - focalLatLng: MapLatLng(20.3173, 78.7139), - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - color: polylines[index].color, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline, Colors.purple), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 1, + focalLatLng: MapLatLng(20.3173, 78.7139), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, + color: polylines[index].color, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class PolylineModel { @@ -244,66 +264,76 @@ You can apply the same width for all [`MapPolyline`](https://pub.dev/documentati {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline, 3), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'package:flutter/material.dart; +import 'package:syncfusion_flutter_maps/maps.dart'; - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 2, - focalLatLng: MapLatLng(20.3173, 78.7139), - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - width: polylines[index].width, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline, 3), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 2, + focalLatLng: MapLatLng(20.3173, 78.7139), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, + width: polylines[index].width, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class PolylineModel { @@ -324,66 +354,76 @@ You can apply the same stroke cap for all [`MapPolyline`](https://pub.dev/docume {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline, 5), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(20.3173, 78.7139), - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - width: polylines[index].width, - strokeCap: StrokeCap.round, - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline, 5), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(20.3173, 78.7139), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, + width: polylines[index].width, + strokeCap: StrokeCap.round, + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class PolylineModel { @@ -407,67 +447,77 @@ A sequence of dash and gap will be rendered based on the values in this list. On {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 2, - focalLatLng: MapLatLng(18.3173, 77.7139), - ); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - dashArray: [8, 4, 2, 4], - ); - }, - ).toSet(), - color: Colors.blue, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 2, + focalLatLng: MapLatLng(18.3173, 77.7139), + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, + dashArray: [8, 4, 2, 4], + ); + }, + ).toSet(), + color: Colors.blue, + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class PolylineModel { @@ -489,85 +539,95 @@ By default, there will not be any animation. {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; -late AnimationController animationController; -late Animation animation; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 2, - focalLatLng: MapLatLng(19.3173, 76.7139), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - animationController = AnimationController( - duration: Duration(seconds: 3), - vsync: this, - ); - animation = CurvedAnimation( - parent: animationController, - curve: Curves.easeInOut, - ); - animationController.forward(from: 0); - super.initState(); -} - -@override -void dispose() { - animationController.dispose(); - super.dispose(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - ); - }, - ).toSet(), - color: Colors.blue, - animation: animation, - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State with TickerProviderStateMixin { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + late AnimationController animationController; + late Animation animation; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 2, + focalLatLng: MapLatLng(19.3173, 76.7139), + ); + + animationController = AnimationController( + duration: Duration(seconds: 3), + vsync: this, + ); + animation = CurvedAnimation( + parent: animationController, + curve: Curves.easeInOut, + ); + animationController.forward(from: 0); + super.initState(); + } + + @override + void dispose() { + animationController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, + ); + }, + ).toSet(), + color: Colors.blue, + animation: animation, + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class PolylineModel { @@ -587,74 +647,84 @@ You can use the [`onTap`](https://pub.dev/documentation/syncfusion_flutter_maps/ {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; -late int selectedIndex; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 2, - focalLatLng: MapLatLng(19.3173, 76.7139), - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - selectedIndex = -1; - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - color: selectedIndex == index ? Colors.pink: Colors.blue, - onTap: () { - setState(() { - selectedIndex = index; - }); - } - ); - }, - ).toSet(), - ), - ], - zoomPanBehavior: zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + late int selectedIndex; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 2, + focalLatLng: MapLatLng(19.3173, 76.7139), + ); + + selectedIndex = -1; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, + color: selectedIndex == index ? Colors.pink: Colors.blue, + onTap: () { + setState(() { + selectedIndex = index; + }); + } + ); + }, + ).toSet(), + ), + ], + zoomPanBehavior: zoomPanBehavior, + ), + ], + ), + ); + } } class PolylineModel { @@ -674,88 +744,98 @@ You can show additional information about the polyline drawn using the [`tooltip {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; -late Random random; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 2, - focalLatLng: MapLatLng(19.3173, 76.7139), - ); +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - random = Random(); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - final ThemeData themeData = Theme.of(context); - final TextStyle textStyle = themeData.textTheme.caption! - .copyWith(color: themeData.colorScheme.surface); - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - ); - }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.only(left: 15, top: 10), - width: 150, - height: 50, - child: Column( - children: [ - Row( - children: [ - Text('Order item : ', style: textStyle), - Text('Pizza', style: textStyle), - ], - ), - Row( - children: [ - Text('Time left : ', style: textStyle), - Text(random.nextInt(30).toString() + ' mins', - style: textStyle), - ], - ), - ], - ), +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + late Random random; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 2, + focalLatLng: MapLatLng(19.3173, 76.7139), + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + final ThemeData themeData = Theme.of(context); + final TextStyle textStyle = themeData.textTheme.labelSmall! + .copyWith(color: themeData.colorScheme.surface); + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, ); - }, + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.only(left: 15, top: 10), + width: 150, + height: 50, + child: Column( + children: [ + Row( + children: [ + Text('Order item : ', style: textStyle), + Text('Pizza', style: textStyle), + ], + ), + Row( + children: [ + Text('Time left : ', style: textStyle), + Text(random.nextInt(30).toString() + ' mins', + style: textStyle), + ], + ), + ], + ), + ); + }, ), ], zoomPanBehavior: zoomPanBehavior, @@ -763,6 +843,7 @@ Widget build(BuildContext context) { ], ), ); + } } class PolylineModel { @@ -786,90 +867,100 @@ You can customize the appearance of the tooltip: {% tabs %} {% highlight Dart %} -late List polyline; -late List polylines; -late MapShapeSource dataSource; -late MapZoomPanBehavior zoomPanBehavior; -late Random random; - -@override -void initState() { - polyline = [ - MapLatLng(13.0827, 80.2707), - MapLatLng(13.1746, 79.6117), - MapLatLng(13.6373, 79.5037), - MapLatLng(14.4673, 78.8242), - MapLatLng(14.9091, 78.0092), - MapLatLng(16.2160, 77.3566), - MapLatLng(17.1557, 76.8697), - MapLatLng(18.0975, 75.4249), - MapLatLng(18.5204, 73.8567), - MapLatLng(19.0760, 72.8777), - ]; - - polylines = [ - PolylineModel(polyline), - ]; - dataSource = MapShapeSource.asset( - 'assets/india.json', - shapeDataField: 'name', - ); - - zoomPanBehavior = MapZoomPanBehavior( - zoomLevel: 3, - focalLatLng: MapLatLng(15.3173, 76.7139), - ); +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - random = Random(); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: dataSource, - tooltipSettings: MapTooltipSettings( - color: Colors.white, - strokeWidth: 2, - strokeColor: Colors.black, - ), - sublayers: [ - MapPolylineLayer( - polylines: List.generate( - polylines.length, - (int index) { - return MapPolyline( - points: polylines[index].points, - ); - }, - ).toSet(), - tooltipBuilder: (BuildContext context, int index) { - return Container( - padding: EdgeInsets.only(left: 15, top: 10), - width: 150, - height: 50, - child: Column( - children: [ - Row( - children: [ - Text('Order item : ', - style: TextStyle(fontWeight: FontWeight.bold)), - Text('Pizza'), - ], - ), - Row( - children: [ - Text('Time left : ', - style: TextStyle(fontWeight: FontWeight.bold)), - Text(random.nextInt(30).toString() + ' mins'), - ], - ), - ], - ), +class _MapsExampleState extends State { + late List polyline; + late List polylines; + late MapShapeSource dataSource; + late MapZoomPanBehavior zoomPanBehavior; + late Random random; + + @override + void initState() { + polyline = [ + MapLatLng(13.0827, 80.2707), + MapLatLng(13.1746, 79.6117), + MapLatLng(13.6373, 79.5037), + MapLatLng(14.4673, 78.8242), + MapLatLng(14.9091, 78.0092), + MapLatLng(16.2160, 77.3566), + MapLatLng(17.1557, 76.8697), + MapLatLng(18.0975, 75.4249), + MapLatLng(18.5204, 73.8567), + MapLatLng(19.0760, 72.8777), + ]; + + polylines = [ + PolylineModel(polyline), + ]; + dataSource = MapShapeSource.asset( + 'assets/india.json', + shapeDataField: 'name', + ); + + zoomPanBehavior = MapZoomPanBehavior( + zoomLevel: 3, + focalLatLng: MapLatLng(15.3173, 76.7139), + ); + + random = Random(); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: dataSource, + tooltipSettings: MapTooltipSettings( + color: Colors.white, + strokeWidth: 2, + strokeColor: Colors.black, + ), + sublayers: [ + MapPolylineLayer( + polylines: List.generate( + polylines.length, + (int index) { + return MapPolyline( + points: polylines[index].points, ); + }, + ).toSet(), + tooltipBuilder: (BuildContext context, int index) { + return Container( + padding: EdgeInsets.only(left: 15, top: 10), + width: 150, + height: 50, + child: Column( + children: [ + Row( + children: [ + Text('Order item : ', + style: TextStyle(fontWeight: FontWeight.bold)), + Text('Pizza'), + ], + ), + Row( + children: [ + Text('Time left : ', + style: TextStyle(fontWeight: FontWeight.bold)), + Text(random.nextInt(30).toString() + ' mins'), + ], + ), + ], + ), + ); }, ), ], @@ -878,6 +969,7 @@ Widget build(BuildContext context) { ], ), ); + } } class PolylineModel { diff --git a/chart-sdk/flutter/maps/zoom-pan.md b/chart-sdk/flutter/maps/zoom-pan.md index c02b4fcff..6ebbfbfce 100644 --- a/chart-sdk/flutter/maps/zoom-pan.md +++ b/chart-sdk/flutter/maps/zoom-pan.md @@ -1,15 +1,15 @@ --- layout: post -title: Zooming and Panning in Flutter Maps | Syncfusion -description: Step-by-step guide to configure zooming and panning in Syncfusion Flutter Maps (SfMaps)—enable zoom/pan, set focal point, toolbar, and callbacks. +title: Zooming and Panning in Flutter Maps | Syncfusion® +description: Learn about zooming and panning in Syncfusion® Flutter Maps (SfMaps), including zoom levels, focal points, toolbar support, and interaction settings. platform: chart-sdk control: SfMaps documentation: ug --- -# Flutter Maps Zooming and Panning (SfMaps) +# Zooming and Panning in Flutter Maps (SfMaps) -It is possible to zoom in and out for any layer to take a closer look at a specific region by pinching the map, scrolling the mouse wheel or track pad, or using the toolbar on the web. You can also pan the map to navigate across regions and customize the zoom level and center point of the initial rendering. +It is possible to zoom in and out for any layer to take a closer look at a specific region by pinching the map, scrolling the mouse wheel or track-pad, or using the toolbar on the web. You can also pan the map to navigate across regions and customize the zoom level and center point of the initial rendering. The procedure for zooming and panning is very similar for both layers. @@ -18,31 +18,41 @@ The procedure for zooming and panning is very similar for both layers. {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; -late MapShapeSource _dataSource; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - _zoomPanBehavior = MapZoomPanBehavior(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapShapeLayer( - source: _dataSource, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ), +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + late MapShapeSource _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', ); + _zoomPanBehavior = MapZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapShapeLayer( + source: _dataSource, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ), + ); + } } {% endhighlight %} @@ -53,33 +63,43 @@ Widget build(BuildContext context) { {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -96,35 +116,45 @@ To enable panning, set the instance of [`MapZoomPanBehavior`](https://pub.dev/do {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(27.1751, 50.0421), - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(27.1751, 50.0421), + ); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -141,49 +171,59 @@ N> This is applicable for both shape layer and tile layer. {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; -late MapShapeSource _dataSource; - -@override -void initState() { - super.initState(); - _dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; - _zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(27.1751, 78.0421), - zoomLevel: 4, - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Container( - height: 600, - child: SfMaps( - layers: [ - MapShapeLayer( - source: _dataSource, - zoomPanBehavior: _zoomPanBehavior, - ), - ], +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + late MapShapeSource _dataSource; + + @override + void initState() { + super.initState(); + _dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + + _zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(27.1751, 78.0421), + zoomLevel: 4, + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Column( + children: [ + Container( + height: 600, + child: SfMaps( + layers: [ + MapShapeLayer( + source: _dataSource, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ), ), - ), - SizedBox(height: 20), - RaisedButton( - child: Text('Change focalLatLng'), - onPressed: () { - _zoomPanBehavior.focalLatLng = MapLatLng(56.1304, -106.3468); - }, - ), - ], - ), - ); + SizedBox(height: 20), + ElevatedButton( + child: Text('Change focalLatLng'), + onPressed: () { + _zoomPanBehavior.focalLatLng = MapLatLng(56.1304, -106.3468); + }, + ), + ], + ), + ); + } } {% endhighlight %} @@ -200,36 +240,46 @@ To enable zooming, set the instance of [`MapZoomPanBehavior`](https://pub.dev/do {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(27.1751, 78.0421), - zoomLevel: 5, - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(27.1751, 78.0421), + zoomLevel: 5, + ); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -246,48 +296,58 @@ N> This is applicable for both shape layer and tile layer. {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; -late MapShapeSource _dataSource; - -@override -void initState() { - _dataSource = MapShapeSource.asset( - 'assets/world_map.json', - shapeDataField: 'continent', - ); - _zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(27.1751, 78.0421), - zoomLevel: 2, - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Container( - height: 600, - child: SfMaps( - layers: [ - MapShapeLayer( - source: _dataSource, - zoomPanBehavior: _zoomPanBehavior, - ), - ], +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + late MapShapeSource _dataSource; + + @override + void initState() { + _dataSource = MapShapeSource.asset( + 'assets/world_map.json', + shapeDataField: 'continent', + ); + _zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(27.1751, 78.0421), + zoomLevel: 2, + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Column( + children: [ + Container( + height: 600, + child: SfMaps( + layers: [ + MapShapeLayer( + source: _dataSource, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ), ), - ), - SizedBox(height: 20), - RaisedButton( - child: Text('Change zoomLevel'), - onPressed: () { - _zoomPanBehavior.zoomLevel = 7; - }, - ), - ], - ), - ); + SizedBox(height: 20), + ElevatedButton( + child: Text('Change zoomLevel'), + onPressed: () { + _zoomPanBehavior.zoomLevel = 7; + }, + ), + ], + ), + ); + } } {% endhighlight %} @@ -302,38 +362,48 @@ However, for [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_m {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(27.1751, 78.0421), - zoomLevel: 5, - minZoomLevel: 3, - maxZoomLevel: 10, - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(27.1751, 78.0421), + zoomLevel: 5, + minZoomLevel: 3, + maxZoomLevel: 10, + ); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -348,26 +418,36 @@ N> This is applicable for both tile layer and shape layer. {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - _zoomPanBehavior = MapZoomPanBehavior(enableDoubleTapZooming: true); - super.initState(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ), - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + _zoomPanBehavior = MapZoomPanBehavior(enableDoubleTapZooming: true); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ), + ); + } } {% endhighlight %} @@ -394,40 +474,50 @@ You can customize the toolbar items using the following properties: {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; - -@override -void initState() { - _zoomPanBehavior = MapZoomPanBehavior( - focalLatLng: MapLatLng(27.1751, 78.0421), - zoomLevel: 3, - showToolbar: true, - toolbarSettings: MapToolbarSettings( - position: MapToolbarPosition.topLeft, - iconColor: Colors.red, - itemBackgroundColor: Colors.green, - itemHoverColor: Colors.blue, - ), - ); - super.initState(); -} - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Container( - height: 350, - width: 350, - child: SfMaps( - layers: [ - MapTileLayer( - urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - zoomPanBehavior: _zoomPanBehavior, - ), - ], +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; + +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + _zoomPanBehavior = MapZoomPanBehavior( + focalLatLng: MapLatLng(27.1751, 78.0421), + zoomLevel: 3, + showToolbar: true, + toolbarSettings: MapToolbarSettings( + position: MapToolbarPosition.topLeft, + iconColor: Colors.red, + itemBackgroundColor: Colors.green, + itemHoverColor: Colors.blue, ), - ), - ); + ); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + height: 350, + width: 350, + child: SfMaps( + layers: [ + MapTileLayer( + urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ), + ), + ); + } } {% endhighlight %} @@ -451,36 +541,46 @@ Whenever zooming happens, this callback is called. If it returns false, zooming {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior() -} - -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - onWillZoom: (MapZoomDetails detail) { - return true; - }, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + onWillZoom: (MapZoomDetails detail) { + return true; + }, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -502,36 +602,46 @@ Whenever panning happens, this callback is called. If it returns false, panning {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - onWillPan: (MapPanDetails detail) { - return true; - }, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + onWillPan: (MapPanDetails detail) { + return true; + }, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } {% endhighlight %} @@ -555,33 +665,43 @@ Whenever zooming happens, this method is called. Subclasses can override this me {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = _CustomZoomPanBehavior(); -} - -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = _CustomZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } class _CustomZoomPanBehavior extends MapZoomPanBehavior { @@ -615,33 +735,43 @@ Whenever panning happens, this method is called. Subclasses can override this me {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = _CustomZoomPanBehavior(); -} - -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = _CustomZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } class _CustomZoomPanBehavior extends MapZoomPanBehavior { @@ -666,43 +796,53 @@ You can [`reset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/m {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = MapZoomPanBehavior(); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); } -@override -Widget build(BuildContext context) { - return Column( - children: [ - FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - }, - ), - FlatButton( - onPressed: () { - _zoomPanBehavior.reset(); - }, - child: Text('Reset Zoom Level'), - ), - ], - ); +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = MapZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + }, + ), + ElevatedButton( + onPressed: () { + _zoomPanBehavior.reset(); + }, + child: Text('Reset Zoom Level'), + ), + ], + ); + } } {% endhighlight %} @@ -715,33 +855,43 @@ You can override this method to handle pointer events that hit this render objec {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = _CustomZoomPanBehavior(); -} - -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = _CustomZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } class _CustomZoomPanBehavior extends MapZoomPanBehavior { @@ -763,33 +913,43 @@ You can paint this render object into the given context at the given offset. {% tabs %} {% highlight Dart %} -late MapZoomPanBehavior _zoomPanBehavior; +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_maps/maps.dart'; -@override -void initState() { - super.initState(); - _zoomPanBehavior = _CustomZoomPanBehavior(); -} - -@override -Widget build(BuildContext context) { - return FutureBuilder( - future: getBingUrlTemplate( - 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), - builder: (context, snapshot) { - if (snapshot.hasData) { - return SfMaps( - layers: [ - MapTileLayer( - urlTemplate: snapshot.data as String, - zoomPanBehavior: _zoomPanBehavior, - ), - ], - ); - } - return CircularProgressIndicator(); - } - ); +class MapsExample extends StatefulWidget { + @override + _MapsExampleState createState() => _MapsExampleState(); +} + +class _MapsExampleState extends State { + late MapZoomPanBehavior _zoomPanBehavior; + + @override + void initState() { + super.initState(); + _zoomPanBehavior = _CustomZoomPanBehavior(); + } + + @override + Widget build(BuildContext context) { + return FutureBuilder( + future: getBingUrlTemplate( + 'https://dev.virtualearth.net/REST/V1/Imagery/Metadata/AerialWithLabels?output=json&uriScheme=https&include=ImageryProviders&key=YOUR_KEY'), + builder: (context, snapshot) { + if (snapshot.hasData) { + return SfMaps( + layers: [ + MapTileLayer( + urlTemplate: snapshot.data as String, + zoomPanBehavior: _zoomPanBehavior, + ), + ], + ); + } + return CircularProgressIndicator(); + } + ); + } } class _CustomZoomPanBehavior extends MapZoomPanBehavior { diff --git a/chart-sdk/flutter/pyramid-chart/accessibility.md b/chart-sdk/flutter/pyramid-chart/accessibility.md index 8c893584e..8bf653534 100644 --- a/chart-sdk/flutter/pyramid-chart/accessibility.md +++ b/chart-sdk/flutter/pyramid-chart/accessibility.md @@ -1,40 +1,40 @@ --- layout: post -title: Accessibility in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Accessibility feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Accessibility in Flutter Pyramid Chart | Syncfusion® +description: The accessibility support in Flutter Pyramid Chart offers sufficient contrast, large fonts, and tappable targets for an inclusive user experience. platform: chart-sdk control: Chart documentation: ug --- -# Accessibility in Flutter Pyramid Charts (SfPyramidChart) +# Accessibility in Flutter Pyramid Chart ## Sufficient contrast The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set colors for all UI elements. The customization of colors can be done for the following chart elements. -* [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title) -* [Palette for data points](https://help.syncfusion.com/flutter/pyramid-chart/pyramid-customization#applying-palette-color) -* [Color mapping for data points](https://help.syncfusion.com/flutter/pyramid-chart/series-customization#color-mapping-for-data-points) -* [Data label](https://help.syncfusion.com/flutter/pyramid-chart/datalabel) -* [Legend title](https://help.syncfusion.com/flutter/pyramid-chart/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/pyramid-chart/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/pyramid-chart/tooltip#customizing-the-appearance) -* [Selected segments](https://help.syncfusion.com/flutter/pyramid-chart/selection#customizing-the-segments) +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/chart-title) +* [Palette for data points](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/pyramid-customization#applying-palette-color) +* [Color mapping for data points](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/series-customization#color-mapping-for-data-points) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/datalabel) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/tooltip#customizing-the-appearance) +* [Selected segments](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/selection#customizing-the-segments) ## Large fonts The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) font size can be adjusted automatically based on device settings and the font size scaled based on the [`MediaQueryData.textScaler`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaler.html). It also allows you to change the font size of all elements in the Pyramid chart. -* [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title) -* [Data label](https://help.syncfusion.com/flutter/pyramid-chart/datalabel) -* [Legend title](https://help.syncfusion.com/flutter/pyramid-chart/legend#legend-title) -* [Legend item text](https://help.syncfusion.com/flutter/pyramid-chart/legend#customizing-legend) -* [Series tooltip](https://help.syncfusion.com/flutter/pyramid-chart/tooltip#customizing-the-appearance) +* [Chart title](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/chart-title) +* [Data label](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/datalabel) +* [Legend title](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/legend#legend-title) +* [Legend item text](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/legend#customizing-legend) +* [Series tooltip](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/tooltip#customizing-the-appearance) ## Easily tappable targets The [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides callback support to notify when tapping on the essential elements in the chart. -* [Data points](https://help.syncfusion.com/flutter/pyramid-chart/callbacks#onpointtapped) -* [Data labels](https://help.syncfusion.com/flutter/pyramid-chart/callbacks#ondatalabeltapped) -* [Legend](https://help.syncfusion.com/flutter/pyramid-chart/callbacks#onlegendtapped) +* [Data points](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/callbacks#onpointtapped) +* [Data labels](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/callbacks#ondatalabeltapped) +* [Legend](https://help.syncfusion.com/chart-sdk/flutter/pyramid-chart/callbacks#onlegendtapped) diff --git a/chart-sdk/flutter/pyramid-chart/callbacks.md b/chart-sdk/flutter/pyramid-chart/callbacks.md index 94180b92d..c93a55519 100644 --- a/chart-sdk/flutter/pyramid-chart/callbacks.md +++ b/chart-sdk/flutter/pyramid-chart/callbacks.md @@ -1,15 +1,15 @@ --- layout: post -title: Callbacks in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Callbacks feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Callbacks in Flutter Pyramid Chart | Syncfusion® +description: The callback support in Flutter Pyramid Chart offers events for selection, legend, data labels, tooltips, and rendering to enable rich user interactions. platform: chart-sdk control: Chart documentation: ug --- -# Callbacks in Flutter Pyramid Chart (SfPyramidChart) +# Callbacks in Flutter Pyramid Chart -The below Callbacks are for Pyramid chart. +The following callbacks are available for the pyramid chart. ## onLegendItemRender diff --git a/chart-sdk/flutter/pyramid-chart/chart-appearance.md b/chart-sdk/flutter/pyramid-chart/chart-appearance.md index dd6ad5391..3df0edf59 100644 --- a/chart-sdk/flutter/pyramid-chart/chart-appearance.md +++ b/chart-sdk/flutter/pyramid-chart/chart-appearance.md @@ -1,17 +1,17 @@ --- layout: post -title: Appearance customization in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Appearance customization of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Appearance customization in Flutter Pyramid Chart | Syncfusion® +description: The appearance customization support in Flutter Pyramid Chart offers chart sizing, margins, and chart area settings for flexible visual design. platform: chart-sdk control: Chart documentation: ug --- -# Appearance customization in Flutter Pyramid Chart (SfPyramidChart) +# Appearance customization in Flutter Pyramid Chart ## Chart sizing -The chart renders based on the parent widget size. If you need the chart to be rendered in a specific size, then set the size(width/height) to the parent widget. +The chart renders based on the parent widget size. If you need the chart to be rendered in a specific size, set the width and height on the parent widget. {% tabs %} {% highlight dart hl_lines="13 14" %} @@ -51,7 +51,7 @@ The chart renders based on the parent widget size. If you need the chart to be r ## Chart margin -Margin to the chart can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/margin.html) property. +The chart margin can be specified using the [`margin`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/margin.html) property. {% tabs %} {% highlight dart hl_lines="9" %} @@ -82,7 +82,7 @@ Margin to the chart can be specified using the [`margin`](https://pub.dev/docume ## Chart area customization -You can customize the area of the chart using the below properties. +You can customize the chart area using the following properties. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/backgroundColor.html) - used to change the chart area background color. * [`backgroundImage`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/backgroundImage.html) - used to set the image path. diff --git a/chart-sdk/flutter/pyramid-chart/chart-title.md b/chart-sdk/flutter/pyramid-chart/chart-title.md index 316bcb828..f894818af 100644 --- a/chart-sdk/flutter/pyramid-chart/chart-title.md +++ b/chart-sdk/flutter/pyramid-chart/chart-title.md @@ -1,17 +1,17 @@ --- layout: post -title: Chart title in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Chart title feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Chart title in Flutter Pyramid Chart | Syncfusion® +description: The chart title support in Flutter Pyramid Chart offers customizable titles with appearance settings for enhanced context and visual presentation. platform: chart-sdk control: Chart documentation: ug --- -# Chart title in Flutter Pyramid Chart (SfPyramidChart) +# Chart title in Flutter Pyramid Chart -You can define and customize the chart title using [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the text for the title. +You can define and customize the chart title using the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The [`text`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/text.html) property of [`ChartTitle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle-class.html) is used to set the title text. -The Following properties can be used to customize its appearance. +The following properties can be used to customize its appearance. * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/backgroundColor.html) - used to change the background color. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/borderColor.html) - used to change the border color. @@ -22,9 +22,9 @@ The Following properties can be used to customize its appearance. * [`fontStyle`](https://api.flutter.dev/flutter/painting/TextStyle/fontStyle.html) - used to change the font style for the chart title. * [`fontSize`](https://api.flutter.dev/flutter/painting/TextStyle/fontSize.html) - used to change the font size for the chart title. -### Title Alignment +### Title alignment -You can align the title text content horizontally to the near, center, or far of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html). +You can align the title text horizontally to the near, center, or far positions of the chart using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartTitle/alignment.html) property of the [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html). {% tabs %} {% highlight dart %} @@ -40,7 +40,7 @@ You can align the title text content horizontally to the near, center, or far of backgroundColor: Colors.lightGreen, borderColor: Colors.blue, borderWidth: 2, - // Aligns the chart title to left + // Aligns the chart title to the left alignment: ChartAlignment.near, textStyle: TextStyle( color: Colors.red, @@ -49,17 +49,15 @@ You can align the title text content horizontally to the near, center, or far of fontSize: 14, ) ), - // Initialize category axis series: PyramidSeries( dataSource: [ - // Bind data source ChartData('Jan', 35), ChartData('Feb', 28), ChartData('Mar', 34), ChartData('Apr', 32), ChartData('May', 40) ], - xValueMapper: (ChartData data, _) => data.x, + xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y ) ) diff --git a/chart-sdk/flutter/pyramid-chart/datalabel.md b/chart-sdk/flutter/pyramid-chart/datalabel.md index 59c976ba8..5093239d2 100644 --- a/chart-sdk/flutter/pyramid-chart/datalabel.md +++ b/chart-sdk/flutter/pyramid-chart/datalabel.md @@ -1,20 +1,20 @@ --- layout: post -title: Data label in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Data label feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Data label in Flutter Pyramid Chart | Syncfusion® +description: The data label support in Flutter Pyramid Chart offers customizable labels, smart positioning, and overflow handling for clear data presentation. platform: chart-sdk control: Chart documentation: ug --- -# Data label in Flutter Pyramid Chart (SfPyramidChart) +# Data label in Flutter Pyramid Chart Data label can be added to a chart series by enabling the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/isVisible.html) option in the [`dataLabelSettings`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/dataLabelSettings.html). You can use the following properties to customize the appearance. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the background color of the data label shape. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderWidth.html) - used to change the stroke width of the data label shape. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/borderColor.html) - used to change the stroke color of the data label shape. -* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center) and [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). +* [`alignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/alignment.html) - aligns the data label text to [`ChartAlignment.near`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#near), [`ChartAlignment.center`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#center), or [`ChartAlignment.far`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartAlignment.html#far). * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/textStyle.html) - used to change the data label text color, size, font family, font style, and font weight. * [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/DataLabelSettings/color.html) - used to change the color of the data label. * [`fontFamily`](https://api.flutter.dev/flutter/painting/TextStyle/fontFamily.html) - used to change the font family for the data label. diff --git a/chart-sdk/flutter/pyramid-chart/export-pyramid-chart.md b/chart-sdk/flutter/pyramid-chart/export-pyramid-chart.md index 27347b228..32b40cfd4 100644 --- a/chart-sdk/flutter/pyramid-chart/export-pyramid-chart.md +++ b/chart-sdk/flutter/pyramid-chart/export-pyramid-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Exporting in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Exporting feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Exporting in Flutter Pyramid Chart | Syncfusion® +description: The exporting support in Flutter Pyramid Chart offers image and document export options for easy sharing, reporting, and presentation. platform: chart-sdk control: Chart documentation: ug --- -# Exporting in Flutter Pyramid Chart (SfPyramidChart) +# Exporting in Flutter Pyramid Chart -[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides support to export the pyramid chart as a PNG image or as a PDF document. +[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides support for exporting the pyramid chart as a PNG image or as a PDF document. ## Export image diff --git a/chart-sdk/flutter/pyramid-chart/getting-started.md b/chart-sdk/flutter/pyramid-chart/getting-started.md index 317523da6..81395611a 100644 --- a/chart-sdk/flutter/pyramid-chart/getting-started.md +++ b/chart-sdk/flutter/pyramid-chart/getting-started.md @@ -1,13 +1,13 @@ --- layout: post -title: Getting started with Flutter Pyramid Chart widget | Syncfusion -description: Learn here about getting started with Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget, its elements, and more. +title: Getting Started with Flutter Pyramid Chart | Syncfusion® +description: Learn how to get started with Syncfusion® Flutter Pyramid Chart widget, its elements, features and more customization. platform: chart-sdk control: Chart documentation: ug --- -# Getting started with Flutter Pyramid Chart (SfPyramidChart) +# Getting Started with Flutter Pyramid Chart This section explains the steps required to populate the chart with data, title, data labels, legend, and tooltips. This section covers only the minimal features needed to know to get started with the chart. @@ -22,18 +22,18 @@ Create a simple project using the instructions given in the [Getting Started wit **Add dependency** -Add the Syncfusion® [`Flutter Chart`](https://www.syncfusion.com/flutter-widgets/flutter-charts) dependency to your pub spec file. +Add the Syncfusion® [`Flutter Chart`](https://www.syncfusion.com/flutter-widgets/flutter-charts) dependency to your pubspec file. {% tabs %} {% highlight dart %} dependencies: - syncfusion_flutter_charts: ^xx.x.xx + syncfusion_flutter_charts: ^xx.x.xx {% endhighlight %} {% endtabs %} ->**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. +>**Note**: Here **xx.x.xx** denotes the current version of [`Syncfusion® Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. **Get packages** @@ -61,7 +61,7 @@ Import the following package in your Dart code. ## Initialize chart -Once the package has been imported, initialize the chart as a child of any widget. The SfPyramidChart can be used to render pyramid charts. Here, as we are rendering pyramid chart, initialize SfPyramidChart widget as a child of Container widget. +Once the package has been imported, initialize the chart as a child of any widget. The SfPyramidChart can be used to render pyramid charts. Here, since we are rendering a pyramid chart, initialize the SfPyramidChart widget as a child of a Container widget. {% tabs %} {% highlight dart hl_lines="7" %} @@ -81,7 +81,7 @@ Once the package has been imported, initialize the chart as a child of any widge {% endhighlight %} {% endtabs %} -_note_ : An empty chart will be displayed. This is charts default behavior. +_note_: An empty chart will be displayed. This is the chart’s default behavior. ## Bind data source @@ -126,7 +126,7 @@ Based on your data, initialize the series type. In the series, you need to map t ## Add title -You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The title to chart can be set as demonstrated in the following code snippet. +You can add a [`title`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/title.html) to the chart to provide quick information to users about the data plotted in the chart. The chart title can be set as demonstrated in the following code snippet. {% tabs %} {% highlight dart %} @@ -168,12 +168,12 @@ You can add data labels to improve the readability of the chart using the [`data body: Center( child: Container( child: SfPyramidChart( - series:PyramidSeries( + series: PyramidSeries( dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, // Render the data label - dataLabelSettings:DataLabelSettings(isVisible : true) + dataLabelSettings: DataLabelSettings(isVisible: true) ) ) ) @@ -190,7 +190,7 @@ You can add data labels to improve the readability of the chart using the [`data The legend provides information about the series rendered in the chart. -You can use legend in chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). +You can enable the legend in the chart by setting the [`isVisible`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend/isVisible.html) property to true in [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/Legend-class.html). {% tabs %} {% highlight dart hl_lines="8" %} @@ -203,7 +203,7 @@ You can use legend in chart by setting the [`isVisible`](https://pub.dev/documen child: SfPyramidChart( // Enables the legend legend: Legend(isVisible: true), - series:PyramidSeries( + series: PyramidSeries( dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, @@ -223,7 +223,7 @@ You can use legend in chart by setting the [`isVisible`](https://pub.dev/documen The tooltip is used when you cannot display information using the data labels due to space constraints. -The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/tooltipBehavior.html) property in chart is used to enable and customize the tooltip for the pyramid series. The tooltip is enabled as demonstrated in the following code snippet. +The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/tooltipBehavior.html) property in the chart is used to enable and customize the tooltip for the pyramid series. The tooltip is enabled as shown in the following code snippet. {% tabs %} {% highlight dart hl_lines="5" %} @@ -244,7 +244,7 @@ The [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/ child: SfPyramidChart( // Enables the tooltip for all the series in chart tooltipBehavior: _tooltipBehavior, - series:PyramidSeries( + series: PyramidSeries( dataSource: chartData, xValueMapper: (ChartData data, _) => data.x, yValueMapper: (ChartData data, _) => data.y, diff --git a/chart-sdk/flutter/pyramid-chart/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/pyramid-chart/how-to/custom-widget-on-flutterflow.md index 7eaf81d67..a09611b6c 100644 --- a/chart-sdk/flutter/pyramid-chart/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/pyramid-chart/how-to/custom-widget-on-flutterflow.md @@ -1,17 +1,17 @@ --- layout: post -title: Pyramid Chart Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget in FlutterFlow. +title: How to add Syncfusion® Pyramid Chart in FlutterFlow | Syncfusion® +description: Add Syncfusion® Flutter Pyramid Chart in FlutterFlow to create compact, interactive charts that visualize trends and data patterns with ease. platform: chart-sdk control: Chart documentation: ug --- -# How to add Syncfusion® Pyramid Chart widget in FlutterFlow? +# How to add Syncfusion® Pyramid Chart in FlutterFlow ## Overview -[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfPyramidChart widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). +[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate the SfPyramidChart widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). ### Create a new project @@ -23,7 +23,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. 4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +5. A popup will appear with startup code. Locate the button labeled ` Copy to Editor` and click it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) diff --git a/chart-sdk/flutter/pyramid-chart/legend.md b/chart-sdk/flutter/pyramid-chart/legend.md index 5de7c5700..069f83dee 100644 --- a/chart-sdk/flutter/pyramid-chart/legend.md +++ b/chart-sdk/flutter/pyramid-chart/legend.md @@ -1,15 +1,15 @@ --- layout: post -title: Legend in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Legend feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Legend in Flutter Pyramid Chart | Syncfusion® +description: The legend support in Flutter Pyramid Chart offers customizable legend items and positioning to improve chart readability and data understanding. platform: chart-sdk control: Chart documentation: ug --- -# Legend in Flutter Pyramid Chart (SfPyramidChart) +# Legend in Flutter Pyramid Chart -The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html) contains a list of chart series/data points in chart. The information provided in each legend item helps to identify the corresponding data series in chart. +The [`legend`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/legend.html) contains a list of chart series and data points in the chart. The information provided in each legend item helps identify the corresponding data series in the chart. {% tabs %} {% highlight dart hl_lines="14" %} diff --git a/chart-sdk/flutter/pyramid-chart/methods.md b/chart-sdk/flutter/pyramid-chart/methods.md index d8f1f3c72..14e58b0d0 100644 --- a/chart-sdk/flutter/pyramid-chart/methods.md +++ b/chart-sdk/flutter/pyramid-chart/methods.md @@ -1,18 +1,18 @@ --- layout: post -title: Methods in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about available methods of Syncfusion Flutter Pyramid Chart(SfPyramidChart) widget and more. +title: Methods in Flutter Pyramid Chart | Syncfusion® +description: The methods in Flutter Pyramid Chart documentation provide publicly accessible APIs for performing chart-related operations programmatically. platform: chart-sdk control: Chart documentation: ug --- -# Methods in Flutter Pyramid Chart (SfPyramidChart) +# Methods in Flutter Pyramid Chart ## PixelToPoint -Converts logical pixel value to the data point value. - +Converts a logical pixel value to the corresponding data point value. + The [`pixelToPoint`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeriesController/pixelToPoint.html) method takes logical pixel value as input and returns a chart data point. >**Note**: The method will return the center value of the segment. diff --git a/chart-sdk/flutter/pyramid-chart/overview.md b/chart-sdk/flutter/pyramid-chart/overview.md index 8fee1b35e..74ec4b7dc 100644 --- a/chart-sdk/flutter/pyramid-chart/overview.md +++ b/chart-sdk/flutter/pyramid-chart/overview.md @@ -1,15 +1,15 @@ --- layout: post -title: About Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about introduction of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget, its features, and more. +title: About Syncfusion® Flutter Pyramid Chart widget | Syncfusion® +description: Learn here all about introduction of Syncfusion® Flutter Pyramid Chart widget, its features, and more. platform: chart-sdk control: Chart documentation: ug --- -# Flutter Pyramid Chart (SfPyramidChart) Overview +# About Syncfusion® Flutter Pyramid Chart widget -Syncfusion® Flutter Pyramid Chart (SfPyramidChart) widget is written natively in Dart for creating beautiful and high-performance Pyramid chart, which are used to craft high-quality applications using Flutter. +Syncfusion® Flutter Pyramid Chart (SfPyramidChart) widget is written natively in Dart for creating beautiful and high-performance pyramid charts, which are used to craft high-quality Flutter applications. ![Overview Flutter chart](images/overview/overview.png) diff --git a/chart-sdk/flutter/pyramid-chart/pyramid-customization.md b/chart-sdk/flutter/pyramid-chart/pyramid-customization.md index 035484ffc..9fa9ad952 100644 --- a/chart-sdk/flutter/pyramid-chart/pyramid-customization.md +++ b/chart-sdk/flutter/pyramid-chart/pyramid-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Customization of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Customization in Flutter Pyramid Chart | Syncfusion® +description: The customization support in Flutter Pyramid Chart offers control over pyramid size, segment gaps, explode behavior, and palette colors for tailored visuals. platform: chart-sdk control: Chart documentation: ug --- -# Customization in Flutter Pyramid Chart (SfPyramidChart) +# Customization in Flutter Pyramid Chart To render a pyramid chart, create an instance of [`PyramidSeries`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/PyramidSeries-class.html), and add it to the [`series`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/series.html) property of [`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html). The following properties can be used to customize the appearance of a pyramid segment. diff --git a/chart-sdk/flutter/pyramid-chart/right-to-left.md b/chart-sdk/flutter/pyramid-chart/right-to-left.md index 348428437..ce65b958a 100644 --- a/chart-sdk/flutter/pyramid-chart/right-to-left.md +++ b/chart-sdk/flutter/pyramid-chart/right-to-left.md @@ -1,15 +1,15 @@ --- layout: post -title: RTL support in Flutter Pyramid Chart widget | Syncfusion -description: Learn here about the RTL support in Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: RTL support in Flutter Pyramid Chart | Syncfusion® +description: The RTL support in Flutter Pyramid Chart offers right-to-left rendering for chart elements, improving usability in RTL language applications. platform: chart-sdk control: Chart documentation: ug --- -# Right To Left (RTL) in Flutter Pyramid Chart (SfPyramidChart) +# Right To Left (RTL) in Flutter Pyramid Chart -Pyramid chart supports right to left rendering. However, series and other chart elements rendering will be the same for both LTR and RTL except legend and tooltip. +The pyramid chart supports right-to-left rendering. However, series and other chart elements render the same for both LTR and RTL, except for the legend and tooltip. ## RTL rendering ways diff --git a/chart-sdk/flutter/pyramid-chart/selection.md b/chart-sdk/flutter/pyramid-chart/selection.md index 029fc9a88..df2ab7396 100644 --- a/chart-sdk/flutter/pyramid-chart/selection.md +++ b/chart-sdk/flutter/pyramid-chart/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Selection feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Selection in Flutter Pyramid Chart | Syncfusion® +description: The selection support in Flutter Pyramid Chart offers interactive segment selection with customizable styles to highlight and analyze data points. platform: chart-sdk control: Chart documentation: ug --- -# Selection in Flutter Pyramid Chart (SfPyramidChart) +# Selection in Flutter Pyramid Chart -The selection feature in chart lets you to select in a segment in a series or the series itself. This feature allows you to select either individual or cluster of segments in the chart series. +The selection feature in the chart lets you select a segment in a series or the series itself. This feature allows you to select either individual segments or a cluster of segments in the chart series. {% tabs %} {% highlight dart %} @@ -125,7 +125,7 @@ Multiple selection can be enabled using the [`enableMultiSelection`](https://pub ## Toggle selection -You can decide, whether to deselect the selected data point/series or remain selected when interacted with it again by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property true or false. If set to true, deselection will be performed else the point will not get deselected. +You can decide whether to deselect the selected data point or series, or keep it selected when interacted with again, by setting the [`toggleSelection`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SelectionBehavior/toggleSelection.html) property to `true` or `false`. If set to `true`, deselection will be performed; otherwise, the point will remain selected. This works even while calling public methods, in various selection modes, with multi-selection, and also on dynamic changes. Defaults to `true`. diff --git a/chart-sdk/flutter/pyramid-chart/series-customization.md b/chart-sdk/flutter/pyramid-chart/series-customization.md index 322e73d24..9ba183cc5 100644 --- a/chart-sdk/flutter/pyramid-chart/series-customization.md +++ b/chart-sdk/flutter/pyramid-chart/series-customization.md @@ -1,17 +1,17 @@ --- layout: post -title: Series customization in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Series customization of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Series customization in Flutter Pyramid Chart | Syncfusion® +description: The series customization support in Flutter Pyramid Chart offers control over segment appearance, spacing, colors, and rendering for tailored visualizations. platform: chart-sdk control: Chart documentation: ug --- -# Series customization in Flutter Pyramid Chart (SfPyramidChart) +# Series customization in Flutter Pyramid Chart ## Animation -[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides animation support for the series. The series will be animated while rendering. Animation is enabled by default, and you can also control the duration of the animation using [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting 0 value to that property. +[`SfPyramidChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart-class.html) provides animation support for the series. The series animates while rendering. Animation is enabled by default, and you can also control the duration of the animation using the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDuration.html) property. You can disable the animation by setting the value to 0. {% tabs %} {% highlight dart %} @@ -39,7 +39,7 @@ documentation: ug ### Animation delay -The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes milliseconds value as input. By default, the series will get animated for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series will begin to animate after the specified duration. Defaults to `0`. +The [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) property is used to specify the delay duration of the series animation. This takes a millisecond value as input. By default, the series animates for the specified duration. If [`animationDelay`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/animationDelay.html) is specified, then the series begins to animate after the specified duration. Defaults to `0`. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/pyramid-chart/tooltip.md b/chart-sdk/flutter/pyramid-chart/tooltip.md index 3c8ea0335..622b15c83 100644 --- a/chart-sdk/flutter/pyramid-chart/tooltip.md +++ b/chart-sdk/flutter/pyramid-chart/tooltip.md @@ -1,17 +1,17 @@ --- layout: post -title: Tooltip in Flutter Pyramid Chart widget | Syncfusion -description: Learn here all about Tooltip feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more. +title: Tooltip in Flutter Pyramid Chart | Syncfusion® +description: The tooltip support in Flutter Pyramid Chart offers interactive data insights with customizable content and appearance for better user engagement. platform: chart-sdk control: Chart documentation: ug --- -# Tooltip in Flutter Pyramid Chart (SfPyramidChart) +# Tooltip in Flutter Pyramid Chart -Chart provides tooltip support for all series types. It is used to show information about the segment when you tap on the segment. To enable the tooltip, you need to set [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property as `true`. +The chart provides tooltip support for all series types. It is used to show information about a segment when you tap on it. To enable the tooltip, set the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ChartSeries/enableTooltip.html) property to `true`. -The tooltip state will be preserved on the device's orientation change and on browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000ms, and when you change the orientation of your device from portrait to landscape after 5,000ms of tooltip display, the tooltip will be displayed for the next 5,000ms in landscape mode before disappearing. +The tooltip state is preserved during device orientation changes and browser resize. For example, if the tooltip's [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) is set to 10,000 ms, and you change the device orientation from portrait to landscape after 5,000 ms of display, the tooltip will remain visible for the next 5,000 ms in landscape mode before disappearing. {% tabs %} {% highlight dart %} @@ -21,7 +21,7 @@ The tooltip state will be preserved on the device's orientation change and on br @override void initState(){ _tooltipBehavior = TooltipBehavior(enable: true); - super.initState(); + super.initState(); } @override @@ -63,20 +63,20 @@ The tooltip state will be preserved on the device's orientation change and on br You can use the following properties to customize the tooltip appearance. -* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/color.html) - used to change the background color of tooltip. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/color.html) - used to change the background color of the tooltip. * [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/borderWidth.html) - used to change the stroke width of the tooltip. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/borderColor.html) - used to change the stroke color of the tooltip. * [`opacity`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/opacity.html) - used to control the transparency of the tooltip. -* [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) - specifies the duration for displaying the tooltip that defaults to `3000`. -* [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/animationDuration.html) - specifies the duration for animating the tooltip that defaults to `350`. -* [`elevation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/elevation.html) - specifies the elevation of tooltip. +* [`duration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/duration.html) - specifies the duration for displaying the tooltip and defaults to `3000`. +* [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/animationDuration.html) - specifies the duration for animating the tooltip and defaults to `350`. +* [`elevation`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/elevation.html) - specifies the elevation of the tooltip. * [`canShowMarker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/canShowMarker.html) - toggles the visibility of the marker in the tooltip. -* [`header`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/header.html) - specifies the header for tooltip. By default, the series name will be displayed in the header. -* [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) - formats the tooltip text. By default, the tooltip will be rendered with x and y-values. You can add prefix or suffix to x, y, and series name values in the tooltip by formatting them. +* [`header`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/header.html) - specifies the header for the tooltip. By default, the series name is displayed in the header. +* [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) - formats the tooltip text. By default, the tooltip is rendered with x and y values. You can add a prefix or suffix to x, y, and series name values in the tooltip by formatting them. * [`shadowColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/shadowColor.html) - specifies the color of the tooltip shadow. * [`shouldAlwaysShow`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/shouldAlwaysShow.html) - used to show or hide the tooltip. -* [`textAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/textAlignment.html) - alignment of the text in the tooltip. -* [`decimalPlaces`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/decimalPlaces.html) - used to specify the number decimals to be displayed in tooltip text. +* [`textAlignment`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/textAlignment.html) - aligns the text in the tooltip. +* [`decimalPlaces`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/decimalPlaces.html) - used to specify the number of decimals displayed in tooltip text. * [`shared`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/shared.html) - used to share the tooltip with same index points. @@ -122,7 +122,7 @@ You can use the following properties to customize the tooltip appearance. ## Label format -By default, x and y value will be displayed in the tooltip, and it can be customized using [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property as depicted in the below code snippet. You can show the below values in the tooltip. Also you can add prefix or suffix to these values. +By default, x and y values are displayed in the tooltip, and they can be customized using the [`format`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/format.html) property as shown in the code snippet below. You can show the following values in the tooltip and add a prefix or suffix to them. * X value - `point.x` * Y value - `point.y` @@ -167,7 +167,7 @@ By default, x and y value will be displayed in the tooltip, and it can be custom ## Tooltip positioning -The tooltip can be made to display in the fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). +The tooltip can be displayed in a fixed location or at the pointer location itself using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/tooltipPosition.html) property. This defaults to [`TooltipPosition.auto`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipPosition.html#auto). {% tabs %} {% highlight dart %} @@ -207,7 +207,7 @@ The tooltip can be made to display in the fixed location or at the pointer locat ## Tooltip template -You can customize the appearance of the tooltip with your own widget by using the [`builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/builder.html) property of [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/tooltipBehavior.html). +You can customize the tooltip appearance with your own widget by using the [`builder`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/builder.html) property of [`tooltipBehavior`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfPyramidChart/tooltipBehavior.html). {% tabs %} {% highlight dart %} @@ -255,7 +255,7 @@ You can customize the appearance of the tooltip with your own widget by using th ## Activation mode -The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the visibility of tooltip based on the touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/TooltipBehavior/activationMode.html) property is used to restrict the tooltip visibility based on touch actions. The default value of this property is [`ActivationMode.singleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ActivationMode.html#singleTap). The ActivationMode enum includes the following values: diff --git a/chart-sdk/flutter/radial-gauge/accessibility.md b/chart-sdk/flutter/radial-gauge/accessibility.md index 257c203ec..188f70ece 100644 --- a/chart-sdk/flutter/radial-gauge/accessibility.md +++ b/chart-sdk/flutter/radial-gauge/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about the accessibility support in Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and how to customize it. +title: Accessibility in Flutter Radial Gauge | Syncfusion® +description: Learn about accessibility support in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including screen readers, keyboard navigation, and more. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -14,8 +14,38 @@ documentation: ug The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) can be made accessible to screen readers by wrapping it with the flutter [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. This provides meaningful information about the gauge to assistive technologies. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Radial Gauge Demo', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: const MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + const MyHomePage({Key? key}) : super(key: key); + + @override + State createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { double _value = 50; @override @@ -30,31 +60,32 @@ The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/la ), ); } +} {% endhighlight %} {% endtabs %} ## Sufficient contrast -You can customize the color of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs for the sufficient contrast. +You can customize the color of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs for a sufficient contrast. -* [Title](https://help.syncfusion.com/flutter/radial-gauge/radial-gauge-title#text-alignment) -* [Axis labels](https://help.syncfusion.com/flutter/radial-gauge/axes#label-style-customization) -* [Ticks](https://help.syncfusion.com/flutter/radial-gauge/axes#tick-customization) -* [Annotation](https://help.syncfusion.com/flutter/radial-gauge/annotation#alignment-of-annotation) -* [Marker pointer](https://help.syncfusion.com/flutter/radial-gauge/marker-pointer#marker-customization) -* [Text pointer](https://help.syncfusion.com/flutter/radial-gauge/marker-pointer#text-pointer) -* [Knob](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer#knob-customization) -* [Tail](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer#tail-customization) -* [Range pointer](https://help.syncfusion.com/flutter/radial-gauge/ranges#range-customization) +* [Title](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/radial-gauge-title#text-alignment) +* [Axis labels](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/axes#label-style-customization) +* [Ticks](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/axes#tick-customization) +* [Annotation](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/annotation#alignment-of-annotation) +* [Marker pointer](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/marker-pointer#marker-customization) +* [Text pointer](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/marker-pointer#text-pointer) +* [Knob](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/needle-pointer#knob-customization) +* [Tail](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/needle-pointer#tail-customization) +* [Range pointer](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/ranges#range-customization) ## Large fonts For users who need larger text, you can adjust the font size of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using these APIs: -* [Title](https://help.syncfusion.com/flutter/radial-gauge/radial-gauge-title#text-alignment) -* [Axis labels](https://help.syncfusion.com/flutter/radial-gauge/axes#label-style-customization) -* [Annotation](https://help.syncfusion.com/flutter/radial-gauge/annotation#alignment-of-annotation) +* [Title](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/radial-gauge-title#text-alignment) +* [Axis labels](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/axes#label-style-customization) +* [Annotation](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/annotation#alignment-of-annotation) ## Easier touch targets diff --git a/chart-sdk/flutter/radial-gauge/animation.md b/chart-sdk/flutter/radial-gauge/animation.md index 01b89912b..91a5fb415 100644 --- a/chart-sdk/flutter/radial-gauge/animation.md +++ b/chart-sdk/flutter/radial-gauge/animation.md @@ -1,7 +1,7 @@ --- layout: post -title: Animation in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing animation of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Animation in Flutter Radial Gauge | Syncfusion® +description: Learn about animation support in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including pointer animations, duration settings, and visual effects. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -11,46 +11,59 @@ documentation: ug ## Initial animation -The radial gauge allows all of its elements to be animated with [`enableLoadingAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/enableLoadingAnimation.html) property. The default value for this property is false. The duration of the animation can be controlled by [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/animationDuration.html) property of the gauge. +The radial gauge allows all of its elements to be animated with [`enableLoadingAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/enableLoadingAnimation.html) property. The default value for this property is false. The duration of the animation can be controlled by the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/animationDuration.html) property of the gauge. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - enableLoadingAnimation: true, - animationDuration: 4500, - axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - ranges: [ - GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), - GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), - GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10) - ], - pointers: [ - NeedlePointer(value: 90) - ], - annotations: [ - GaugeAnnotation( - widget: Container( - child: Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)) - ), - angle: 90, - positionFactor: 0.5 - ) - ] - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + enableLoadingAnimation: true, + animationDuration: 4500, + axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10) + ], + pointers: [ + NeedlePointer(value: 90) + ], + annotations: [ + GaugeAnnotation( + widget: Container( + child: Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)) + ), + angle: 90, + positionFactor: 0.5 + ) + ] + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![gauge loading animation](images/animation/initial_Animation.gif) @@ -66,52 +79,65 @@ The [`enableAnimation`](https://pub.dev/documentation/syncfusion_flutter_gauges/ * `linear` * `slowMiddle` -The animation type can be changed using the [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationType.html) property of pointer. By default, the animation type is linear. +The animation type can be changed using the [`animationType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/animationType.html) property of pointer. By default, the animation type is `ease`. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle(thickness: 30), - showTicks: false, - pointers: [ - NeedlePointer( - value: 60, - enableAnimation: true, - needleStartWidth: 0, - needleEndWidth: 5, - needleColor: Color(0xFFDADADA), - knobStyle: KnobStyle( - color: Colors.white, - borderColor: Color(0xFFDADADA), - knobRadius: 0.06, - borderWidth: 0.04 + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle(thickness: 30), + showTicks: false, + pointers: [ + NeedlePointer( + value: 60, + enableAnimation: true, + needleStartWidth: 0, + needleEndWidth: 5, + needleColor: Color(0xFFDADADA), + knobStyle: KnobStyle( + color: Colors.white, + borderColor: Color(0xFFDADADA), + knobRadius: 0.06, + borderWidth: 0.04 + ), + tailStyle: TailStyle( + color: Color(0xFFDADADA), + width: 5, + length: 0.15 + ) ), - tailStyle: TailStyle( - color: Color(0xFFDADADA), - width: 5, - length: 0.15 + RangePointer( + value: 60, + width: 30, + enableAnimation: true, + color: Colors.orange ) - ), - RangePointer( - value: 60, - width: 30, - enableAnimation: true, - color: Colors.orange - ) - ] - ) - ], - ) + ] + ) + ], + ), + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![pointer animation](images/animation/animation.gif) diff --git a/chart-sdk/flutter/radial-gauge/annotation.md b/chart-sdk/flutter/radial-gauge/annotation.md index 6e9fe71f1..349944f79 100644 --- a/chart-sdk/flutter/radial-gauge/annotation.md +++ b/chart-sdk/flutter/radial-gauge/annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Annotation in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Annotation in Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Annotation in Flutter Radial Gauge | Syncfusion® +description: Learn about annotations in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including custom content, positioning, styling, and gauge annotations. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -11,7 +11,7 @@ documentation: ug [`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to add multiple widgets such as text and image as annotations to specific points of interest in the radial gauge. -The following properties are available in [`annotation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) to customizes the position and alignment of [`annotation widget`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/widget.html) +The following properties are available in [`annotation`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation-class.html) to customize the position and alignment of [`annotation widget-based`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/widget.html) * [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) – Allows you to position the annotation using the angle. @@ -21,8 +21,31 @@ The following properties are available in [`annotation`](https://pub.dev/documen * [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/horizontalAlignment.html) – Specifies the horizontal alignment for positioning the annotation widget. * [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/verticalAlignment.html) – Specifies the vertical alignment for positioning the annotation. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -46,8 +69,10 @@ The following properties are available in [`annotation`](https://pub.dev/documen ) ); } +} {% endhighlight %} +{% endtabs %} ![default annotation position](images/annotation/annotation_default_position.jpg) @@ -55,8 +80,31 @@ The following properties are available in [`annotation`](https://pub.dev/documen The annotation can be positioned either using the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) or [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html). When providing both the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) and the [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html), priority will be given to the angle value. The following example shows how to position the annotation widget using angle. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -81,15 +129,40 @@ The annotation can be positioned either using the [`angle`](https://pub.dev/docu ), ); } +} {% endhighlight %} +{% endtabs %} -![annotation position with angle](images/annotation/annottaion_angle.jpg) +![annotation position with angle](images/annotation/annotation_angle.jpg) The following code example shows how to position the annotation using [`axis value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/axisValue.html) +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -113,10 +186,12 @@ The following code example shows how to position the annotation using [`axis val ) ); } +} {% endhighlight %} +{% endtabs %} -![annotation position with axis](images/annotation/annottaion_axis.jpg) +![annotation position with axis](images/annotation/annotation_axis.jpg) The [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) is used to move the annotation widget from the center of axis to the edge of the axis. For example, when you specify the [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) as 0.5, the annotation widget will be moved from the center towards the corresponding direction with the distance of half of the radius value of the axis. @@ -126,8 +201,31 @@ By default, the value of [`positionFactor`](https://pub.dev/documentation/syncfu Annotations provide options to add any image over the gauge control with respect to its offset position. You can add multiple images in a single control. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -157,8 +255,8 @@ Annotations provide options to add any image over the gauge control with respect Container( width: 50.00, height: 50.00, - decoration: new BoxDecoration( - image: new DecorationImage( + decoration: BoxDecoration( + image: DecorationImage( image: ExactAssetImage('images/sun.png'), fit: BoxFit.fitHeight, ), @@ -185,10 +283,12 @@ Annotations provide options to add any image over the gauge control with respect ) ); } +} {% endhighlight %} +{% endtabs %} -![image annotation](images/annotation/image_annottaion.jpg) +![image annotation](images/annotation/image_annotation.jpg) ## Alignment of annotation @@ -196,8 +296,31 @@ Annotations provide options to add any image over the gauge control with respect The following code example demonstrates how to set the [`horizontalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/horizontalAlignment.html) for annotation +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -222,15 +345,40 @@ The following code example demonstrates how to set the [`horizontalAlignment`](h ) ); } +} {% endhighlight %} +{% endtabs %} ![horizontal alignment](images/annotation/annotation_horizontal.jpg) The following code example demonstrates how to set [`verticalAlignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/verticalAlignment.html) for annotation, +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(MyApp()); +} + +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + home: MyHomePage(), + ); + } +} + +class MyHomePage extends StatefulWidget { + @override + State createState() => MyHomePageState(); +} + +class MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -255,7 +403,9 @@ The following code example demonstrates how to set [`verticalAlignment`](https:/ ) ); } +} {% endhighlight %} +{% endtabs %} ![vertical alignment](images/annotation/annotation_vertical.jpg) \ No newline at end of file diff --git a/chart-sdk/flutter/radial-gauge/axes.md b/chart-sdk/flutter/radial-gauge/axes.md index e803133ec..4b9634cd2 100644 --- a/chart-sdk/flutter/radial-gauge/axes.md +++ b/chart-sdk/flutter/radial-gauge/axes.md @@ -1,38 +1,51 @@ --- layout: post -title: Axis in Flutter Radial Gauge | Syncfusion -description: Step-by-step guide to add and customize axes in Syncfusion Flutter Radial Gauge—configure range, angles, radius, labels, ticks, and axis events. +title: Axis in Flutter Radial Gauge | Syncfusion® +description: Learn about axis customization in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including ranges, labels, ticks, intervals, and styling options. platform: chart-sdk control: SfRadialGauge documentation: ug --- -# Flutter Radial Gauge Axis (SfRadialGauge) +# Axis in Flutter Radial Gauge (SfRadialGauge) The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) is a circular arc in which a set of values are displayed along a linear or custom scale based on the design requirements. Axis elements such as labels, ticks, and axis line can be easily customized with built-in properties. -## Axis Customization +## Axis customization **Axis minimum and maximum** -The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties of an axis can be used to customize the axis range.The default value of [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) is 0, and the default value of [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) is 100. +The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties of an axis can be used to customize the axis range. The default value of [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) is 0, and the default value of [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) is 100. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(minimum: -60, maximum: 60) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: -60, maximum: 60) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis range](images/axis/axis_range.jpg) @@ -40,22 +53,35 @@ The [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/g The start and end angles of radial axis can be customized using the [`startAngle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/startAngle.html) and [`endAngle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/endAngle.html) properties. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(startAngle: 180, endAngle: 90) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(startAngle: 180, endAngle: 90) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis angle customization](images/axis/axis_angle.jpg) @@ -63,23 +89,36 @@ The start and end angles of radial axis can be customized using the [`startAngle The radius of the radial axis can be customized using the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) property. The default value of the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) is 0.95. The value of [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) ranges from 0 to 1. For example, When the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) value is 1, the full radius will be considered for rendering the axis, and when the [`radiusFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/radiusFactor.html) value is 0.5, then half of the radius value will be considered for rendering the circle. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(), - RadialAxis(radiusFactor: 0.5) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(), + RadialAxis(radiusFactor: 0.5) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis radius customization](images/axis/axis_radius.jpg) @@ -87,58 +126,84 @@ The radius of the radial axis can be customized using the [`radiusFactor`](https The position of the [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) can be customized using the [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) values. The default value of [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) properties is 0.5. Therefore, the axis will be positioned in the center of provided size of gauge. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(startAngle: 270, endAngle: 270, interval: 10), - RadialAxis( - centerY: 0.55, - centerX: 0.35, - radiusFactor: 0.3, - startAngle: 270, - endAngle: 270, - interval: 20 - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(startAngle: 270, endAngle: 270, interval: 10), + RadialAxis( + centerY: 0.55, + centerX: 0.35, + radiusFactor: 0.3, + startAngle: 270, + endAngle: 270, + interval: 20 + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis position customization](images/axis/axis_center.jpg) **Positioning axis based on its angle** -The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) property of [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to position the axis and its features based on the provided [`start`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/startAngle.html) and [`end angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/endAngle.html). By default, the [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) is false, therefore the axis will be positioned based on the [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) value. +The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) property of [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows you to position the axis and its features based on the provided [`start`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/startAngle.html) and [`end angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/endAngle.html). By default, the [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canScaleToFit.html) is false, therefore the axis will be positioned based on the [`centerX`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerX.html) and [`centerY`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/centerY.html) value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - startAngle: 180, - endAngle: 0, - interval: 10, - canScaleToFit: true - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + startAngle: 180, + endAngle: 0, + interval: 10, + canScaleToFit: true + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis fit to scale](images/axis/axis_fitToScale.png) @@ -147,22 +212,35 @@ The [`canScaleToFit`](https://pub.dev/documentation/syncfusion_flutter_gauges/la The axis label can be rotated based on its current angle using the [`canRotateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canRotateLabels.html) property of axis. The default value of [`canRotateLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/canRotateLabels.html) is false. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(canRotateLabels: true) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(canRotateLabels: true) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label rotation](images/axis/axis_rotate.jpg) @@ -175,29 +253,42 @@ The visibility of the first and last labels of an axis can be customized using t The default value of both the [`showFirstLabel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showFirstLabel.html) and the [`showLastLabel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showLastLabel.html) properties is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - interval: 1, - showFirstLabel: false, - startAngle: 270, - endAngle: 270, - minimum: 0, - maximum: 12 - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + interval: 1, + showFirstLabel: false, + startAngle: 270, + endAngle: 270, + minimum: 0, + maximum: 12 + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis edge label](images/axis/axis_showfirstlabel.jpg) @@ -205,43 +296,69 @@ The default value of both the [`showFirstLabel`](https://pub.dev/documentation/s The direction of [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) can be customized by its [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property. -When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is true, the axis can be placed in counter-clockwise direction. When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is set to false, the axis will be positioned in clockwise direction. +When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is true, the axis can be placed in a counter-clockwise direction. When the [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/isInversed.html) property is set to false, the axis will be positioned in a clockwise direction. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( isInversed: true)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( isInversed: true)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis direction](images/axis/axis_inversed.jpg) **Maximum number of labels per 100 logical pixels** -By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum number of labels that should present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximumLabels.html) property of the axis. This property is applicable only for automatic range calculation and will not work if you set value for interval property of an axis. +By default, a maximum of three labels are displayed for each 100 logical pixels in an axis. The maximum number of labels that should be present within 100 logical pixels length can be customized using the [`maximumLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximumLabels.html) property of the axis. This property is applicable only for automatic range calculation and will not work if you set value for interval property of an axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( maximumLabels: 5)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( maximumLabels: 5)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis maximum labels](images/axis/axis_maximumlabels.jpg) @@ -249,22 +366,35 @@ By default, a maximum of three labels are displayed for each 100 logical pixels The interval between labels can be customized using the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/interval.html) property of axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(interval: 20) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(interval: 20) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label interval](images/axis/axis_interval.jpg) @@ -279,28 +409,41 @@ The radial axis line can be customized using the [`axisLineStyle`](https://pub.d * [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/dashArray.html) – Allows to customize the axis line as dashed circular arc. * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/gradient.html) - Allows to apply the gradient for axis line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, - color: Colors.deepPurple + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + color: Colors.deepPurple + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis line customization](images/axis/axis_color.jpg) @@ -308,27 +451,40 @@ The radial axis line can be customized using the [`axisLineStyle`](https://pub.d The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/cornerStyle.html) property of [`axisLineStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle-class.html) specifies the corner type for axis line. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 15, - cornerStyle: CornerStyle.bothCurve + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 15, + cornerStyle: CornerStyle.bothCurve + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis corner](images/axis/axis_corner.jpg) @@ -336,24 +492,37 @@ The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/late The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/dashArray.html) property of [`axisLineStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle-class.html) allows to render the dashed axis line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle(dashArray: [5, 5]) - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle(dashArray: [5, 5]) + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![dashed axis line](images/axis/axis_dasharray.jpg) @@ -361,31 +530,44 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle/gradient.html) property of [`axisLineStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLineStyle-class.html) allows to specify the smooth color transition to the axis line by specifying the different colors based on provided factor value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, - gradient: const SweepGradient( - colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], - stops: [0.25, 0.75] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( + colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], + stops: [0.25, 0.75] + ) ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis gradient line](images/axis/axis_gradient.jpg) @@ -393,22 +575,35 @@ The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ The visibility of the axis line can be customized using the [`showAxisLine`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showAxisLine.html) property of axis. By default, this property is set to true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(showAxisLine: false) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(showAxisLine: false) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis line visibility](images/axis/axis_showline.jpg) @@ -416,21 +611,34 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt [`Radial gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows customizing its background color using [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/backgroundColor.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - backgroundColor: Colors.lightBlue, - axes: [RadialAxis()] - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + backgroundColor: Colors.lightBlue, + axes: [RadialAxis()] + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axisbackground color](images/axis/axis_backgroundColor.png) @@ -438,76 +646,121 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt [`Radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to add an image frame as its background using [`backgroundImage`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/backgroundImage.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.fromLTRB(10, 0, 10, 0), + return MaterialApp( + home: Scaffold( + body: Center( child: SfRadialGauge( axes: [ RadialAxis( - showAxisLine: false, - radiusFactor: 1, - showLastLabel: false, - canRotateLabels: true, - tickOffset: 0.32, - offsetUnit: GaugeSizeUnit.factor, - onLabelCreated: axisLabelCreated, - startAngle: 270, - endAngle: 270, - labelOffset: 0.05, - maximum: 360, - minimum: 0, - interval: 30, - minorTicksPerInterval: 4, - axisLabelStyle: GaugeTextStyle(color: const Color(0xFF949494)), - minorTickStyle: MinorTickStyle( - color: const Color(0xFF616161), - thickness: 1.6, - length: 0.058, - lengthUnit: GaugeSizeUnit.factor - ), - majorTickStyle: MajorTickStyle( - color: const Color(0xFF949494), - thickness: 2.3, - length: 0.087, - lengthUnit: GaugeSizeUnit.factor - ), - backgroundImage: const AssetImage('images/dark_theme_gauge.png'), - pointers: [ - MarkerPointer( - value: 90, - color: const Color(0xFFDF5F2D), - enableAnimation: true, - animationDuration: 1200, - markerOffset: 0.71, - offsetUnit: GaugeSizeUnit.factor, - markerType: MarkerType.triangle, - markerHeight: 10, - markerWidth: 15 - ) - ], - annotations: [ - GaugeAnnotation( - angle: 270, - positionFactor: 0.025, - widget: Text( - '90', - style: TextStyle( - color: const Color(0xFFDF5F2D), - fontWeight: FontWeight.bold, - fontSize: 22 - ) - ) - ) - ] + backgroundImage: const AssetImage('images/gauge_background.png'), ) ], ), - ) + ), + ), + ); + } +} + +{% endhighlight %} +{% endtabs %} + +The following example demonstrates a more advanced usage with background image, custom styling, pointers, and annotations: + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Padding( + padding: const EdgeInsets.fromLTRB(10, 0, 10, 0), + child: SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + radiusFactor: 1, + showLastLabel: false, + canRotateLabels: true, + tickOffset: 0.32, + offsetUnit: GaugeSizeUnit.factor, + onLabelCreated: axisLabelCreated, + startAngle: 270, + endAngle: 270, + labelOffset: 0.05, + maximum: 360, + minimum: 0, + interval: 30, + minorTicksPerInterval: 4, + axisLabelStyle: const GaugeTextStyle(color: Color(0xFF949494)), + minorTickStyle: const MinorTickStyle( + color: Color(0xFF616161), + thickness: 1.6, + length: 0.058, + lengthUnit: GaugeSizeUnit.factor + ), + majorTickStyle: const MajorTickStyle( + color: Color(0xFF949494), + thickness: 2.3, + length: 0.087, + lengthUnit: GaugeSizeUnit.factor + ), + backgroundImage: const AssetImage('images/dark_theme_gauge.png'), + pointers: [ + MarkerPointer( + value: 90, + color: const Color(0xFFDF5F2D), + enableAnimation: true, + animationDuration: 1200, + markerOffset: 0.71, + offsetUnit: GaugeSizeUnit.factor, + markerType: MarkerType.triangle, + markerHeight: 10, + markerWidth: 15 + ) + ], + annotations: [ + GaugeAnnotation( + angle: 270, + positionFactor: 0.025, + widget: const Text( + '90', + style: TextStyle( + color: Color(0xFFDF5F2D), + fontWeight: FontWeight.bold, + fontSize: 22 + ) + ) + ) + ] + ) + ], + ), + ) + ), ), ); } @@ -515,7 +768,7 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt void axisLabelCreated(AxisLabelCreatedArgs args) { if (args.text == '90') { args.text = 'E'; - args.labelStyle = GaugeTextStyle(color: const Color(0xFFDF5F2D)); + args.labelStyle = const GaugeTextStyle(color: Color(0xFFDF5F2D)); } else { if (args.text == '0') { args.text = 'N'; @@ -524,11 +777,13 @@ The visibility of the axis line can be customized using the [`showAxisLine`](htt } else if (args.text == '270') { args.text = 'W'; } - args.labelStyle = GaugeTextStyle(color: const Color(0xFFFFFFFF)); + args.labelStyle = const GaugeTextStyle(color: Color(0xFFFFFFFF)); } } +} {% endhighlight %} +{% endtabs %} ![axis background image](images/axis/axis_background.png) @@ -542,30 +797,43 @@ The axis labels can be customized using the [`axisLabelStyle`](https://pub.dev/d * [`fontWeight`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTextStyle/fontWeight.html) – Allows to specify the font weight for labels. * [`fontSize`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTextStyle/fontSize.html) – Allows to specify the font size for labels. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLabelStyle: GaugeTextStyle( - color: Colors.red, - fontSize: 15, - fontStyle: FontStyle.italic, - fontWeight: FontWeight.bold, - fontFamily: 'Times' + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLabelStyle: const GaugeTextStyle( + color: Colors.red, + fontSize: 15, + fontStyle: FontStyle.italic, + fontWeight: FontWeight.bold, + fontFamily: 'Times' + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label customization](images/axis/axis_label.jpg) @@ -575,43 +843,70 @@ The following property of the axis allows to customize the axis label text: * [`labelFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelFormat.html) - Allows to add prefix or suffix with the axis labels. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(labelFormat: '{value}m') - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(labelFormat: '{value}m') + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label format](images/axis/axis_labelFormat.jpg) * [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/numberFormat.html)- Allows to customize the axis label with the [`globalized label format`](https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html). +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:intl/intl.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis(numberFormat: NumberFormat.compactSimpleCurrency()) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis(numberFormat: NumberFormat.compactSimpleCurrency()) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis number format](images/axis/axis_numberFormat.jpg) @@ -619,20 +914,33 @@ The following property of the axis allows to customize the axis label text: The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showLabels.html) property of axis allows to enable or disable the visibility of labels. The default value of the property is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showLabels: false ),] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(showLabels: false )] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label visibility](images/axis/axis_showLabels.jpg) @@ -650,35 +958,48 @@ The major and minor tick lines of an axis can be customized using the [`majorTic * [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/dashArray.html) – Specify the dash array to draw the dashed tick line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - majorTickStyle: MajorTickStyle( - length: 0.1, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5, - color: Colors.black - ), - minorTickStyle: MinorTickStyle( - length: 0.05, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5, - color: Colors.black + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + majorTickStyle: const MajorTickStyle( + length: 0.1, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1.5, + color: Colors.black + ), + minorTickStyle: const MinorTickStyle( + length: 0.05, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1.5, + color: Colors.black + ) ) - ) - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis tick customization](images/axis/axis_ticks.jpg) @@ -686,25 +1007,38 @@ The major and minor tick lines of an axis can be customized using the [`majorTic The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MajorTickStyle/dashArray.html) property of both the [`majorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/majorTickStyle.html) and [`minorTickStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minorTickStyle.html) allows to draw the tick line as dashed line. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - majorTickStyle: MajorTickStyle(length: 20, dashArray: [5, 2.5]), - minorTickStyle: MinorTickStyle(length: 15, dashArray: [3, 2.5]) - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + majorTickStyle: const MajorTickStyle(length: 20, dashArray: [5, 2.5]), + minorTickStyle: const MinorTickStyle(length: 15, dashArray: [3, 2.5]) + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![dashed tick lines](images/axis/axis_tickdash.jpg) @@ -712,22 +1046,34 @@ The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The major ticks are generated based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/interval.html) property. Like major ticks, the minor ticks are calculated using the [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minorTicksPerInterval.html) property of axis. By default, the value of this property is 1. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(minorTicksPerInterval: 4 - ), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(minorTicksPerInterval: 4), + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![minor tick line](images/axis/axis_minortick.jpg) @@ -735,20 +1081,33 @@ The major ticks are generated based on the [`interval`](https://pub.dev/document The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/showTicks.html) property of the axis is used to enable or disable the visibility of both the major and the minor ticks of axis. The default value of this property is true. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis(showTicks: false)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis(showTicks: false)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![tick line visibility](images/axis/axis_showticks.jpg) @@ -756,22 +1115,35 @@ The [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest The [`radial axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) allows to position the labels and ticks either inside or outside the axis line using the [`labelsPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelsPosition.html) and [`ticksPosition`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/ticksPosition.html) properties. By default, both labels and ticks are positioned inside the axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - labelsPosition: ElementsPosition.outside, - ticksPosition: ElementsPosition.outside)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + labelsPosition: ElementsPosition.outside, + ticksPosition: ElementsPosition.outside)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![label and tick placement](images/axis/axis_outside.jpg) @@ -781,46 +1153,72 @@ The ticks can be moved near or far to the axis line using the [`tickOffset`](htt The default value of tick offset is 0. While setting offset for the ticks, the axis labels are also moved along with the ticks. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - tickOffset: 20)] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + tickOffset: 20)] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis tick offset](images/axis/axis_tickOffset.jpg) The following code example shows how to add tick offset with the [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/offsetUnit.html) property of axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - tickOffset: 0.2, - labelOffset: 0.2, - offsetUnit: GaugeSizeUnit.factor - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + tickOffset: 0.2, + labelOffset: 0.2, + offsetUnit: GaugeSizeUnit.factor + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis tick and label offset](images/axis/axis_bothOffset.jpg) @@ -828,23 +1226,36 @@ The following code example shows how to add tick offset with the [`offsetUnit`]( The [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/labelOffset.html) property allows to adjust the distance between the tick end and the labels. The [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/offsetUnit.html) property of axis allows to specify the label offset either in factor or logical pixels. By default, the value of the label offset is 15. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor - ), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + labelOffset: 0.3, offsetUnit: GaugeSizeUnit.factor + ), + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![axis label offset](images/axis/axis_labelOffset.jpg) @@ -856,44 +1267,56 @@ N> [`GaugeSizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/lat The [`Radial Gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows you to add n number of radial axis in its axes collection. You can also customize individual axis added in the [`axes`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/axes.html) collection. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - minorTicksPerInterval: 5, - radiusFactor: 0.9, labelOffset: 15, - minorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.07, lengthUnit: GaugeSizeUnit.factor), - majorTickStyle: MinorTickStyle(thickness: 1.5, - color: Color.fromARGB(255, 143, 20, 2), - length: 0.15, lengthUnit: GaugeSizeUnit.factor,), - axisLineStyle: AxisLineStyle( thickness: 3, - color: Color.fromARGB(255, 143, 20, 2), ), - axisLabelStyle: GaugeTextStyle(fontSize: 12, - color:Color.fromARGB(255, 143, 20, 2),),), - RadialAxis(minimum: 0 , maximum: 60, interval: 10, - radiusFactor: 0.6, labelOffset: 15, isInversed: true, + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ RadialAxis(minimum: 0 , maximum: 100, interval: 10, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, minorTicksPerInterval: 5, - minorTickStyle: MinorTickStyle(color: Colors.black, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, length: 0.07), - majorTickStyle: MajorTickStyle(color: Colors.black, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, length: 0.15), - axisLineStyle: AxisLineStyle(color: Colors.black, thickness: 3, ), - axisLabelStyle: GaugeTextStyle(color: Colors.black, fontSize: 12)), - ], - ) - ), - ); + radiusFactor: 0.9, labelOffset: 15, + minorTickStyle: const MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.07, lengthUnit: GaugeSizeUnit.factor), + majorTickStyle: const MinorTickStyle(thickness: 1.5, + color: Color.fromARGB(255, 143, 20, 2), + length: 0.15, lengthUnit: GaugeSizeUnit.factor,), + axisLineStyle: const AxisLineStyle( thickness: 3, + color: Color.fromARGB(255, 143, 20, 2), ), + axisLabelStyle: const GaugeTextStyle(fontSize: 12, + color:Color.fromARGB(255, 143, 20, 2),),), + RadialAxis(minimum: 0 , maximum: 60, interval: 10, + radiusFactor: 0.6, labelOffset: 15, isInversed: true, + minorTicksPerInterval: 5, + minorTickStyle: const MinorTickStyle(color: Colors.black, thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, length: 0.07), + majorTickStyle: const MajorTickStyle(color: Colors.black, thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, length: 0.15), + axisLineStyle: const AxisLineStyle(color: Colors.black, thickness: 3, ), + axisLabelStyle: const GaugeTextStyle(color: Colors.black, fontSize: 12)), + ], + ) + ), + ); } +} {% endhighlight %} +{% endtabs %} ![axis label offset](images/axis/axis_multiplescale.jpg) @@ -909,16 +1332,27 @@ The [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_gauges/l N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/axisLabelStyle.html) property of radial axis and [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLabelCreatedArgs/labelStyle.html) property of the [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onLabelCreated.html) event args are set, the values of the [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/AxisLabelCreatedArgs/labelStyle.html) property of the event args will take precedence. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - onLabelCreated:axisLabelCreated,), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + onLabelCreated:axisLabelCreated,), + ] + ), ), ), ); @@ -926,14 +1360,16 @@ N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_g void axisLabelCreated(AxisLabelCreatedArgs args){ if(args.text == '100'){ - args.labelStyle = GaugeTextStyle(color: Colors.red,fontStyle: FontStyle.italic, + args.labelStyle = const GaugeTextStyle(color: Colors.red,fontStyle: FontStyle.italic, fontFamily: 'Times', fontWeight: FontWeight.bold, fontSize: 15); args.canRotate = true; args.text = '100 %'; } } +} {% endhighlight %} +{% endtabs %} ![axis label offset](images/axis/axis_labelCreated.jpg) @@ -941,118 +1377,144 @@ N> If both [`axisLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_g The [`onAxisTapped`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onAxisTapped.html) event is called when an axis is tapped. The corresponding axis value at the tapped position will be got from the event. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes:[RadialAxis( - onAxisTapped: axisTapped), - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes:[RadialAxis( + onAxisTapped: axisTapped), + ] + ), ), ), ); } - void axisTapped(double _tappedValue){ + void axisTapped(double tappedValue){ // Handle the tapped value } +} {% endhighlight %} +{% endtabs %} ## Custom scale [`Radial gauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) allows you to display a set of values along with a custom scale based on your business logic using the [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event of the axis. The [`onCreateAxisRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/onCreateAxisRenderer.html) event allows returning the custom renderer for the axis. In that, we can override methods of `RadialAxisRenderer` to create the custom axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RadialGaugeDemo()); + +class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge(axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - onCreateAxisRenderer: () { - final CustomAxisRenderer renderer = CustomAxisRenderer(); - return renderer; - }, - ) - ]), + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge(axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + onCreateAxisRenderer: () { + final CustomAxisRenderer renderer = CustomAxisRenderer(); + return renderer; + }, + ) + ]), + ), ), ); } +} - class _CustomAxisRenderer extends RadialAxisRenderer { - _CustomAxisRenderer() : super(); - - /// Generated the 9 non-linear interval labels from 0 to 150 - /// instead of actual generated labels. - @override - List generateVisibleLabels() { - final List _visibleLabels = []; - for (num i = 0; i < 9; i++) { - final double _value = _calculateLabelValue(i); - final CircularAxisLabel label = CircularAxisLabel( - this.axis.axisLabelStyle, _value.toInt().toString(), i, false); - label.value = _value; - _visibleLabels.add(label); - } +class CustomAxisRenderer extends RadialAxisRenderer { + CustomAxisRenderer() : super(); - return _visibleLabels; + /// Generated the 9 non-linear interval labels from 0 to 150 + /// instead of actual generated labels. + @override + List generateVisibleLabels() { + final List visibleLabels = []; + for (num i = 0; i < 9; i++) { + final double value = _calculateLabelValue(i); + final CircularAxisLabel label = CircularAxisLabel( + axis.axisLabelStyle, value.toInt().toString(), i, false); + label.value = value; + visibleLabels.add(label); } - /// Returns the factor(0 to 1) from value to place the labels in an axis. - @override - double valueToFactor(double value) { - if (value >= 0 && value <= 2) { - return (value * 0.125) / 2; - } else if (value > 2 && value <= 5) { - return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); - } else if (value > 5 && value <= 10) { - return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); - } else if (value > 10 && value <= 20) { - return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); - } else if (value > 20 && value <= 30) { - return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); - } else if (value > 30 && value <= 50) { - return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); - } else if (value > 50 && value <= 100) { - return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); - } else if (value > 100 && value <= 150) { - return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); - } else { - return 1; - } + return visibleLabels; + } + + /// Returns the factor(0 to 1) from value to place the labels in an axis. + @override + double valueToFactor(double value) { + if (value >= 0 && value <= 2) { + return (value * 0.125) / 2; + } else if (value > 2 && value <= 5) { + return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); + } else if (value > 5 && value <= 10) { + return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); + } else if (value > 10 && value <= 20) { + return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); + } else if (value > 20 && value <= 30) { + return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); + } else if (value > 30 && value <= 50) { + return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); + } else if (value > 50 && value <= 100) { + return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); + } else if (value > 100 && value <= 150) { + return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); + } else { + return 1; } + } - /// To return the label value based on interval - double _calculateLabelValue(num value) { - if (value == 0) { - return 0; - } else if (value == 1) { - return 2; - } else if (value == 2) { - return 5; - } else if (value == 3) { - return 10; - } else if (value == 4) { - return 20; - } else if (value == 5) { - return 30; - } else if (value == 6) { - return 50; - } else if (value == 7) { - return 100; - } else { - return 150; - } + /// To return the label value based on interval + double _calculateLabelValue(num value) { + if (value == 0) { + return 0; + } else if (value == 1) { + return 2; + } else if (value == 2) { + return 5; + } else if (value == 3) { + return 10; + } else if (value == 4) { + return 20; + } else if (value == 5) { + return 30; + } else if (value == 6) { + return 50; + } else if (value == 7) { + return 100; + } else { + return 150; } } +} {% endhighlight %} +{% endtabs %} ![custom scale](images/axis/custom_scale.jpg) diff --git a/chart-sdk/flutter/radial-gauge/export-radial-gauge.md b/chart-sdk/flutter/radial-gauge/export-radial-gauge.md index b582cc8aa..dc1eac723 100644 --- a/chart-sdk/flutter/radial-gauge/export-radial-gauge.md +++ b/chart-sdk/flutter/radial-gauge/export-radial-gauge.md @@ -1,7 +1,7 @@ --- layout: post -title: Export in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about Export feature of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Export in Flutter Radial Gauge | Syncfusion® +description: Learn about export support in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including exporting gauges as images and sharing visualizations. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -13,110 +13,213 @@ documentation: ug ## Export image -To export the Radial Gauge as a PNG image, we can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method on a repaint boundary. +To export the Radial Gauge as a PNG image, we can get the image by calling the [`toImage`](https://api.flutter.dev/flutter/rendering/RenderRepaintBoundary/toImage.html) method on a repaint boundary. -{% highlight dart %} +### Add required packages - GlobalKey _globalKey = GlobalKey(); +Add the following packages to your `pubspec.yaml` file: + +```yaml +dependencies: + flutter: + sdk: flutter + syncfusion_flutter_gauges: ^xx.x.x +``` + +### Export image example + +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'dart:ui' as ui; + +void main() => runApp(const ExportGaugeDemo()); + +class ExportGaugeDemo extends StatelessWidget { + const ExportGaugeDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - Container( - height: 400, - width: 400, - child: RepaintBoundary( - key: _globalKey, - child: SfRadialGauge( - axes: [ - RadialAxis( - minimum: 0, - maximum: 150, - ranges: [ - GaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green, - startWidth: 10, - endWidth: 10), - GaugeRange( - startValue: 50, - endValue: 100, - color: Colors.orange, - startWidth: 10, - endWidth: 10), - GaugeRange( - startValue: 100, - endValue: 150, - color: Colors.red, - startWidth: 10, - endWidth: 10) - ], - pointers: [NeedlePointer(value: 90)], - ) - ], - ), + return const MaterialApp( + home: ExportGaugeImagePage(), + ); + } +} + +class ExportGaugeImagePage extends StatefulWidget { + const ExportGaugeImagePage({Key? key}) : super(key: key); + + @override + State createState() => _ExportGaugeImagePageState(); +} + +class _ExportGaugeImagePageState extends State { + final GlobalKey _globalKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Export Gauge to Image')), + body: Column( + children: [ + Container( + height: 400, + width: 400, + child: RepaintBoundary( + key: _globalKey, + child: SfRadialGauge( + axes: [ + RadialAxis( + minimum: 0, + maximum: 150, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 50, + color: Colors.green, + startWidth: 10, + endWidth: 10, + ), + GaugeRange( + startValue: 50, + endValue: 100, + color: Colors.orange, + startWidth: 10, + endWidth: 10, + ), + GaugeRange( + startValue: 100, + endValue: 150, + color: Colors.red, + startWidth: 10, + endWidth: 10, + ), + ], + pointers: [ + NeedlePointer(value: 90), + ], + ), + ], ), ), - Padding( - padding: const EdgeInsets.only(top: 5.0), - child: ElevatedButton( - onPressed: _renderGaugeImage, - child: Text('Gauge to image'), - ), + ), + Padding( + padding: const EdgeInsets.only(top: 5.0), + child: ElevatedButton( + onPressed: _renderGaugeImage, + child: const Text('Gauge to Image'), ), - ], - ), - ); + ), + ], + ), + ); } Future _renderGaugeImage() async { - final RenderRepaintBoundary boundary = - _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary; + final RenderRepaintBoundary? boundary = + _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary?; + + if (boundary != null) { final ui.Image data = await boundary.toImage(pixelRatio: 3.0); - final bytes = await data.toByteData(format: ui.ImageByteFormat.png); - if (data != null) { - await Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return Scaffold( - appBar: AppBar(), - body: Center( - child: Container( - color: Colors.white, - child: Image.memory(bytes!.buffer.asUint8List()), + final ByteData? bytes = + await data.toByteData(format: ui.ImageByteFormat.png); + + if (bytes != null) { + if (mounted) { + await Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Gauge Image')), + body: Center( + child: Container( + color: Colors.white, + child: Image.memory(bytes.buffer.asUint8List()), + ), ), - ), - ); - }, - ), - ); + ); + }, + ), + ); + } } + } } {% endhighlight %} +{% endtabs %} -![image_export](images\export-radial-gauge\export-gauge-image.png) +![image_export](images/export-radial-gauge/export-gauge-image.png) ## Export PDF -Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below. Add the below four packages in your pubspec file and import the respective libraries in your main.dart file. +Similar to the image export, you can also export the rendered gauge as a PDF document. This requires the syncfusion_flutter_pdf package to create the PDF. + +### Add required packages + +Add the following packages to your `pubspec.yaml` file: + +```yaml +dependencies: + flutter: + sdk: flutter + syncfusion_flutter_gauges: ^xx.x.x + syncfusion_flutter_pdf: ^xx.x.x + path_provider: ^x.x.x + open_file: ^x.x.x +``` + +### Platform permissions -* syncfusion_flutter_pdf -* syncfusion_flutter_gauges -* path_provider -* open_file +**Android**: Requires `WRITE_EXTERNAL_STORAGE` permission. Update your `AndroidManifest.xml` file in `android/app/src/main/` and add the following permission: +```xml + +``` + +### Export PDF example + +{% tabs %} {% highlight dart %} -GlobalKey _globalKey = GlobalKey(); +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:syncfusion_flutter_pdf/pdf.dart'; +import 'package:path_provider/path_provider.dart'; +import 'package:open_file/open_file.dart'; +import 'dart:io'; +import 'dart:typed_data'; +import 'dart:ui' as ui; + +void main() => runApp(const ExportPDFGaugeDemo()); + +class ExportPDFGaugeDemo extends StatelessWidget { + const ExportPDFGaugeDemo({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: ExportGaugePDFPage(), + ); + } +} + +class ExportGaugePDFPage extends StatefulWidget { + const ExportGaugePDFPage({Key? key}) : super(key: key); + + @override + State createState() => _ExportGaugePDFPageState(); +} + +class _ExportGaugePDFPageState extends State { + final GlobalKey _globalKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar(title: Text('RenderGaugePdf')), + appBar: AppBar(title: const Text('Export Gauge to PDF')), body: Column( children: [ Container( @@ -131,26 +234,31 @@ GlobalKey _globalKey = GlobalKey(); maximum: 150, ranges: [ GaugeRange( - startValue: 0, - endValue: 50, - color: Colors.green, - startWidth: 10, - endWidth: 10), + startValue: 0, + endValue: 50, + color: Colors.green, + startWidth: 10, + endWidth: 10, + ), GaugeRange( - startValue: 50, - endValue: 100, - color: Colors.orange, - startWidth: 10, - endWidth: 10), + startValue: 50, + endValue: 100, + color: Colors.orange, + startWidth: 10, + endWidth: 10, + ), GaugeRange( - startValue: 100, - endValue: 150, - color: Colors.red, - startWidth: 10, - endWidth: 10) + startValue: 100, + endValue: 150, + color: Colors.red, + startWidth: 10, + endWidth: 10, + ), + ], + pointers: [ + NeedlePointer(value: 90), ], - pointers: [NeedlePointer(value: 90)], - ) + ), ], ), ), @@ -159,7 +267,7 @@ GlobalKey _globalKey = GlobalKey(); padding: const EdgeInsets.only(top: 5.0), child: ElevatedButton( onPressed: _renderGaugePDF, - child: Text('Gauges to pdf'), + child: const Text('Gauge to PDF'), ), ), ], @@ -168,25 +276,47 @@ GlobalKey _globalKey = GlobalKey(); } Future _renderGaugePDF() async { - var document = PdfDocument(); - PdfPage page = document.pages.add(); - final RenderRepaintBoundary boundary = - _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary; - final ui.Image data = await boundary.toImage(pixelRatio: 3.0); - final bytes = await data.toByteData(format: ui.ImageByteFormat.png); - final Uint8List imageBytes = - bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes); - page.graphics - .drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300)); - var byteData = document.save(); - document.dispose(); - Directory? directory = await getExternalStorageDirectory(); - String path = directory!.path; - File file = File('$path/Output.pdf'); - await file.writeAsBytes(byteData, flush: true); - OpenFile.open('$path/Output.pdf'); + final RenderRepaintBoundary? boundary = + _globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary?; + + if (boundary != null) { + final ui.Image data = await boundary.toImage(pixelRatio: 3.0); + final ByteData? bytes = + await data.toByteData(format: ui.ImageByteFormat.png); + + if (bytes != null) { + final Uint8List imageBytes = + bytes.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes); + + final PdfDocument document = PdfDocument(); + final PdfPage page = document.pages.add(); + final PdfBitmap bitmap = PdfBitmap(imageBytes); + + page.graphics.drawImage( + bitmap, + const Rect.fromLTWH(25, 50, 300, 300), + ); + + final List byteData = document.save(); + document.dispose(); + + final Directory? directory = await getExternalStorageDirectory(); + if (directory != null) { + final String path = directory.path; + final File file = File('$path/Output.pdf'); + + await file.writeAsBytes(byteData, flush: true); + + if (mounted) { + await OpenFile.open('$path/Output.pdf'); + } + } + } + } } +} + +{% endhighlight %} +{% endtabs %} - {% endhighlight %} - - ![pdf_export](images\export-radial-gauge\export-radial-gauge.png) \ No newline at end of file +![pdf_export](images/export-radial-gauge/export-radial-gauge.png) \ No newline at end of file diff --git a/chart-sdk/flutter/radial-gauge/getting-started.md b/chart-sdk/flutter/radial-gauge/getting-started.md index ec6180d92..37ad1f893 100644 --- a/chart-sdk/flutter/radial-gauge/getting-started.md +++ b/chart-sdk/flutter/radial-gauge/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with Flutter Radial Gauge | Syncfusion -description: Step-by-step guide to set up Syncfusion Flutter Radial Gauge—add dependencies, import, create SfRadialGauge, and configure key features. +title: Getting Started with Flutter Radial Gauge | Syncfusion® +description: Learn how to get started with the Syncfusion® Flutter Radial Gauge (SfRadialGauge). Explore setup, gauge configuration, and customization options. platform: chart-sdk control: SfRadialGauge documentation: ug --- -# Flutter Radial Gauge Getting Started (SfRadialGauge) +# Getting Started with Flutter Radial Gauge (SfRadialGauge) This section explains the steps required to add the Flutter [Radial Gauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) and its elements such as title, axis, range, pointer and annotation. This section covers only the basic features needed to get started with Syncfusion® radial gauge. -To get start quickly with our Flutter radial gauge widget, you can check on this video: +To get started quickly with our Flutter radial gauge widget, you can check out this video: @@ -24,6 +24,7 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter Gauge dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: @@ -31,6 +32,7 @@ Add the Syncfusion® Flutter Gauge dependency to your pubspec.yaml syncfusion_flutter_gauges: ^xx.x.xx {% endhighlight %} +{% endtabs %} N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Gauge`](https://pub.dev/packages/syncfusion_flutter_gauges/versions) package. @@ -38,42 +40,77 @@ N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Gauge`]( Run the following command to get the required packages. -{% highlight dart %} +{% tabs %} +{% highlight dart %} - $ flutter pub get + flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge() + ) + ) + ) + ); + } + } + {% endhighlight %} +{% endtabs %} ## Initialize the radial gauge After the package has been imported, initialize the [SfRadialGauge](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) as a child of any widget such as a container widget. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - @override - Widget build(BuildContext context) { + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( - child:SfRadialGauge() + child: SfRadialGauge() ) ) - ) + ) ); + } } {% endhighlight %} +{% endtabs %} ![Initialize radial gauge](images/getting-started/default_gauge.png) @@ -81,25 +118,36 @@ After the package has been imported, initialize the [SfRadialGauge](https://www. You can add a title to the radial gauge to provide information to users about the designed gauge. The title can be set to the gauge as demonstrated in the following code snippet: -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - @override - Widget build(BuildContext context) { + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( child: SfRadialGauge( - title:GaugeTitle(text: 'Speedometer', textStyle: TextStyle( - fontSize: 20.0,fontWeight: FontWeight.bold)) + title: GaugeTitle(text: 'Speedometer', textStyle: TextStyle( + fontSize: 20.0, fontWeight: FontWeight.bold)) ) ) ) - ) + ) ); + } } {% endhighlight %} +{% endtabs %} ![title to radial gauge](images/getting-started/gauge_title.png) @@ -107,25 +155,37 @@ You can add a title to the radial gauge to provide information to users about th Axes contain a list of axis elements, where you can add any number of radial axes inside the gauge. You can specify the minimum and maximum values of axis using the [`minimum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/minimum.html) and [`maximum`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/maximum.html) properties as demonstrated in the following code snippet. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; - @override - Widget build(BuildContext context) { + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( - child: SfRadialGauge( - axes: [ - RadialAxis(minimum: 0, maximum: 150)] + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150)] + ) ) ) ) - ) + ) ); + } } {% endhighlight %} +{% endtabs %} ![Axis to radial gauge](images/getting-started/gauge_axis.png) @@ -133,17 +193,42 @@ Axes contain a list of axis elements, where you can add any number of radial axe Ranges contain a list of range elements, where you can add any number of ranges inside the axis. You can specify the start value, end value, and color for range using the [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/startValue.html), [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/endValue.html), and [`color`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/color.html) properties as demonstrated in the following code. -{% highlight dart %} +{% tabs %} +{% highlight dart %} - axes: [ - RadialAxis(minimum: 0,maximum: 150, - ranges: [ - GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth:10), - GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)] - )] + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; + + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10)] + )] + ) + ) + ) + ) + ) + ); + } + } {% endhighlight %} +{% endtabs %} ![range support to radial gauge](images/getting-started/gauge_range.png) @@ -151,14 +236,39 @@ Ranges contain a list of range elements, where you can add any number of ranges Pointers contains a list of pointer elements, where you can add any number of gauge pointers such as [`needlePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html), [`rangePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html), [`markerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html), and [`widgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer-class.html) inside the axis to indicate the value. -{% highlight dart %} +{% tabs %} +{% highlight dart %} - axes: [ - RadialAxis(minimum: 0,maximum: 150, - pointers: [NeedlePointer(value:90)] - )] + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; + + void main() => runApp(const RadialGaugeDemo()); + + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150, + pointers: [NeedlePointer(value: 90)] + )] + ) + ) + ) + ) + ) + ); + } + } {% endhighlight %} +{% endtabs %} ![gauge pointers to radial gauge](images/getting-started/gauge_pointer.png) @@ -166,56 +276,85 @@ Pointers contains a list of pointer elements, where you can add any number of ga You can add any number of widgets such as text or image as an annotation inside the axis. The position of annotation can be customized using the [`angle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/angle.html) and [`positionFactor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeAnnotation/positionFactor.html) properties as demonstrated in the following code. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + + import 'package:flutter/material.dart'; + import 'package:syncfusion_flutter_gauges/gauges.dart'; + + void main() => runApp(const RadialGaugeDemo()); - axes: [ - RadialAxis(minimum: 0,maximum: 150, - annotations: [ - GaugeAnnotation(widget: Container(child: - Text('90.0',style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))), - angle: 90,positionFactor: 0.5)] - )] + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + body: Center( + child: Container( + child: SfRadialGauge( + axes: [ + RadialAxis(minimum: 0, maximum: 150, + annotations: [ + GaugeAnnotation(widget: Container(child: + Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold))), + angle: 90, positionFactor: 0.5)] + )] + ) + ) + ) + ) + ) + ); + } + } {% endhighlight %} +{% endtabs %} ![annotation support to the radial gauge](images/getting-started/gauge_annotation.png) The following code example gives you the complete code of above configurations. -{% highlight dart %} +{% tabs %} +{% highlight dart %} import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; - void main() => runApp(ChartApp()); + void main() => runApp(const RadialGaugeDemo()); - class ChartApp extends StatelessWidget { + class RadialGaugeDemo extends StatelessWidget { + const RadialGaugeDemo({super.key}); - @override - Widget build(BuildContext context) { + @override + Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( child: SfRadialGauge( axes: [ - RadialAxis(minimum: 0,maximum: 150, - ranges: [ - GaugeRange(startValue: 0,endValue: 50,color: Colors.green,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 50,endValue: 100,color: Colors.orange,startWidth: 10,endWidth: 10), - GaugeRange(startValue: 100,endValue: 150,color: Colors.red,startWidth: 10,endWidth: 10)], - pointers: [NeedlePointer(value:90)], + RadialAxis(minimum: 0, maximum: 150, + ranges: [ + GaugeRange(startValue: 0, endValue: 50, color: Colors.green, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 50, endValue: 100, color: Colors.orange, startWidth: 10, endWidth: 10), + GaugeRange(startValue: 100, endValue: 150, color: Colors.red, startWidth: 10, endWidth: 10)], + pointers: [NeedlePointer(value: 90)], annotations: [ GaugeAnnotation(widget: Container(child: - Text('90.0',style: TextStyle(fontSize: 25,fontWeight:FontWeight.bold))), - angle: 90,positionFactor: 0.5)] + Text('90.0', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold))), + angle: 90, positionFactor: 0.5)] )] ) ) ) ) - ); - } + ) + ); + } } -{% endhighlight %} \ No newline at end of file +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/chart-sdk/flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md index d07ddbdb8..da5046386 100644 --- a/chart-sdk/flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/radial-gauge/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: Radial Gauge Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Radial Gauge ( SfRadialGauge Widget ) widget in FlutterFlow. +title: How to Add Radial Gauge in FlutterFlow | Syncfusion® +description: Learn how to add and use Syncfusion® Flutter Radial Gauge (SfRadialGauge) in FlutterFlow, including setup, integration, and configuration. platform: chart-sdk control: SfRadialGauge documentation: ug --- -# How to add Syncfusion® Radial Gauge widget in FlutterFlow? +# How to Add Radial Gauge in FlutterFlow (SfRadialGauge) ## Overview @@ -23,7 +23,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an 2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. 3. Update the widget name as desired. 4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. +5. A popup will appear with boilerplate code; locate the button labeled ` Copy to Editor` and click on it. 6. Save the widget. ![Custom Widget](how-to-section-images/custom-widget.png) @@ -35,7 +35,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Version](how-to-section-images/copy-version.png) 3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. ->**Note**: The live version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). +>**Note**: The current version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). ![Dependency](how-to-section-images/dependency.png) @@ -52,10 +52,10 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ### Add widget code snippet in code editor -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget specific codes. +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_gauges/example) tab in [Syncfusion® Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges) and copy the widget-specific code sample. ![Code](how-to-section-images/code-snippet.png) 2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) +![Code snippet](how-to-section-images/Adding-code-snippet.png) ### Compiling the codes diff --git a/chart-sdk/flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippet.png b/chart-sdk/flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippet.png new file mode 100644 index 000000000..9bc406de2 Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/how-to/how-to-section-images/Adding-code-snippet.png differ diff --git a/chart-sdk/flutter/radial-gauge/images/annotation/annotation_angle.jpg b/chart-sdk/flutter/radial-gauge/images/annotation/annotation_angle.jpg new file mode 100644 index 000000000..f2fb1d369 Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/annotation/annotation_angle.jpg differ diff --git a/chart-sdk/flutter/radial-gauge/images/annotation/annotation_axis.jpg b/chart-sdk/flutter/radial-gauge/images/annotation/annotation_axis.jpg new file mode 100644 index 000000000..4f4611d0d Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/annotation/annotation_axis.jpg differ diff --git a/chart-sdk/flutter/radial-gauge/images/annotation/image_annotation.jpg b/chart-sdk/flutter/radial-gauge/images/annotation/image_annotation.jpg new file mode 100644 index 000000000..d3c794510 Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/annotation/image_annotation.jpg differ diff --git a/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_circle.png b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_circle.png new file mode 100644 index 000000000..e2d1d86d6 Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_circle.png differ diff --git a/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_diamond.png b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_diamond.png new file mode 100644 index 000000000..25dbc14c7 Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_diamond.png differ diff --git a/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_inverted_triangle.png b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_inverted_triangle.png new file mode 100644 index 000000000..f912f71fb Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_inverted_triangle.png differ diff --git a/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_rectangle.png b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_rectangle.png new file mode 100644 index 000000000..14f42eb9b Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_rectangle.png differ diff --git a/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_triangle.png b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_triangle.png new file mode 100644 index 000000000..59001bdc8 Binary files /dev/null and b/chart-sdk/flutter/radial-gauge/images/marker-pointers/marker_triangle.png differ diff --git a/chart-sdk/flutter/radial-gauge/marker-pointer.md b/chart-sdk/flutter/radial-gauge/marker-pointer.md index 21c708832..daf285e38 100644 --- a/chart-sdk/flutter/radial-gauge/marker-pointer.md +++ b/chart-sdk/flutter/radial-gauge/marker-pointer.md @@ -1,18 +1,41 @@ --- layout: post -title: Marker Pointer in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Marker Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Marker Pointer in Flutter Radial Gauge | Syncfusion® +description: Learn about marker pointers in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including marker types, positioning, customization, and styling options. platform: chart-sdk control: SfRadialGauge documentation: ug --- -# Marker pointer in Flutter Radial Gauge (SfRadialGauge) +# Marker Pointer in Flutter Radial Gauge (SfRadialGauge) -Different types of markers are used to mark the pointer values in a scale. You can change the marker type using the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) property. +A [`MarkerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html) is used to indicate a specific value on the radial gauge axis. It supports seven built-in marker shapes and additional customization options such as image, text, color, size, border, elevation, overlay, and position offset. The marker type can be changed using the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) property. The default marker type is [`MarkerType.invertedTriangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html). + +The following example demonstrates adding a default marker pointer to the radial gauge. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerPointerExample(), + ); + } +} + +class MarkerPointerExample extends StatelessWidget { + const MarkerPointerExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -29,29 +52,328 @@ Different types of markers are used to mark the pointer values in a scale. You c ), ); } +} {% endhighlight %} ![default marker pointer](images/marker-pointers/marker_default.jpg) -Gauge supports the following types of marker: +## Marker types + +The radial gauge supports the following built-in marker types that can be set using the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) property of [`MarkerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html): + +* [`MarkerType.circle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as a circle. +* [`MarkerType.diamond`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as a diamond. +* [`MarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as an image specified by the [`imageUrl`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/imageUrl.html) property. +* [`MarkerType.invertedTriangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as a downward-pointing triangle. +* [`MarkerType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as a rectangle. +* [`MarkerType.text`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as a text label specified by the [`text`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/text.html) property. +* [`MarkerType.triangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) - Renders the pointer as an upward-pointing triangle. + +### Circle + +The [`MarkerType.circle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) renders the marker pointer as a filled circle. This is one of the default built-in shapes available out of the box. + +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: CircleMarkerExample(), + ); + } +} + +class CircleMarkerExample extends StatelessWidget { + const CircleMarkerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 60, + markerType: MarkerType.circle, + markerHeight: 20, + markerWidth: 20, + color: Colors.lightBlue, + ) + ] + ) + ], + ) + ), + ); + } +} + +{% endhighlight %} + +![circle marker pointer](images/marker-pointers/marker_circle.png) + +### Diamond + +The [`MarkerType.diamond`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) renders the marker pointer as a diamond shape. It is useful for highlighting specific values on a gradient scale where a square or rotated rectangle better matches the visual style. + +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; -* Circle -* Diamond -* Image -* Inverted triangle -* Rectangle -* Text -* Triangle +void main() { + runApp(const MyApp()); +} -![default marker pointer](images/marker-pointers/markers.png) +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: DiamondMarkerExample(), + ); + } +} + +class DiamondMarkerExample extends StatelessWidget { + const DiamondMarkerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 70, + markerType: MarkerType.diamond, + markerHeight: 20, + markerWidth: 20, + color: Colors.lightBlue, + ) + ] + ) + ], + ) + ), + ); + } +} + +{% endhighlight %} + +![diamond marker pointer](images/marker-pointers/marker_diamond.png) + +### Inverted triangle + +The [`MarkerType.invertedTriangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) renders the marker pointer as a downward-pointing triangle. This is the default marker shape when no [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) is specified. + +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: InvertedTriangleMarkerExample(), + ); + } +} + +class InvertedTriangleMarkerExample extends StatelessWidget { + const InvertedTriangleMarkerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 50, + markerType: MarkerType.invertedTriangle, + markerHeight: 20, + markerWidth: 20, + color: Colors.lightBlue, + ) + ] + ) + ], + ) + ), + ); + } +} + +{% endhighlight %} + +![inverted triangle marker pointer](images/marker-pointers/marker_inverted_triangle.png) + +### Rectangle + +The [`MarkerType.rectangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) renders the marker pointer as a rectangle. It is useful for filling longer ranges on the axis where a circular or triangular marker would not provide sufficient visual weight. + +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: RectangleMarkerExample(), + ); + } +} + +class RectangleMarkerExample extends StatelessWidget { + const RectangleMarkerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 40, + markerType: MarkerType.rectangle, + markerHeight: 20, + markerWidth: 20, + color: Colors.lightBlue, + ) + ] + ) + ], + ) + ), + ); + } +} + +{% endhighlight %} + +![rectangle marker pointer](images/marker-pointers/marker_rectangle.png) + +### Triangle + +The [`MarkerType.triangle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) renders the marker pointer as an upward-pointing triangle. It is commonly used as a directional indicator on the gauge. + +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: TriangleMarkerExample(), + ); + } +} + +class TriangleMarkerExample extends StatelessWidget { + const TriangleMarkerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: 80, + markerType: MarkerType.triangle, + markerHeight: 20, + markerWidth: 20, + color: Colors.lightBlue, + ) + ] + ) + ], + ) + ), + ); + } +} + +{% endhighlight %} + +![triangle marker pointer](images/marker-pointers/marker_triangle.png) ## Image pointer -An Image can be used to denote the current pointer values instead of a shape. This can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as image and specifying the [`imageUrl`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/imageUrl.html) property of the marker pointer. +An image can be used to denote the current pointer values instead of a shape. This can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as image and specifying the [`imageUrl`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/imageUrl.html) property of the marker pointer. + +N> Add the image to your `pubspec.yaml` file under the `flutter > assets` section so that it is available to the application. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: ImageMarkerExample(), + ); + } +} + +class ImageMarkerExample extends StatelessWidget { + const ImageMarkerExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -74,6 +396,7 @@ An Image can be used to denote the current pointer values instead of a shape. Th ), ); } +} {% endhighlight %} @@ -81,10 +404,31 @@ An Image can be used to denote the current pointer values instead of a shape. Th ## Text pointer -Text can be used to denote the current pointer value instead of any marker shape. This can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as text. The provided text can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/textStyle.html) property of the marker pointer. +Text can be used to denote the current pointer value instead of any marker shape. This can be achieved by setting the [`markerType`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerType.html) as text. The provided text can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/textStyle.html) property of the marker pointer, which accepts a [`GaugeTextStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTextStyle-class.html) for gauge-specific text formatting. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: TextMarkerExample(), + ); + } +} + +class TextMarkerExample extends StatelessWidget { + const TextMarkerExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -95,7 +439,7 @@ Text can be used to denote the current pointer value instead of any marker shape pointers: [ MarkerPointer( value: 50, - markerType: MarkerType.text, + markerType: MarkerType.text, text: 'Average', textStyle: GaugeTextStyle( fontSize: 15, @@ -110,12 +454,13 @@ Text can be used to denote the current pointer value instead of any marker shape ), ); } +} {% endhighlight %} ![text pointer](images/marker-pointers/text_marker.jpg) -## Marker Customization +## Marker customization The marker pointer can be customized using the following properties: @@ -127,6 +472,27 @@ The marker pointer can be customized using the following properties: {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerCustomizationExample(), + ); + } +} + +class MarkerCustomizationExample extends StatelessWidget { + const MarkerCustomizationExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -137,11 +503,11 @@ The marker pointer can be customized using the following properties: pointers: [ MarkerPointer( value: 60, - markerHeight: 30, + markerHeight: 30, markerWidth: 30, - markerType: MarkerType.circle, + markerType: MarkerType.circle, color: Colors.lightBlue, - borderWidth: 3, + borderWidth: 3, borderColor: Colors.black ) ] @@ -151,6 +517,7 @@ The marker pointer can be customized using the following properties: ), ); } +} {% endhighlight %} @@ -162,6 +529,27 @@ The marker pointer can be elevated by rendering its shadow behind it. The z- coo {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerElevationExample(), + ); + } +} + +class MarkerElevationExample extends StatelessWidget { + const MarkerElevationExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -171,9 +559,9 @@ The marker pointer can be elevated by rendering its shadow behind it. The z- coo RadialAxis( pointers: [ MarkerPointer( - value: 60, - markerHeight: 20, - markerWidth: 20, + value: 60, + markerHeight: 20, + markerWidth: 20, elevation: 4 ) ] @@ -183,6 +571,7 @@ The marker pointer can be elevated by rendering its shadow behind it. The z- coo ), ); } +} {% endhighlight %} @@ -198,6 +587,27 @@ The marker overlay is rendered around the marker when the marker is dragged. Whe {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerOverlayExample(), + ); + } +} + +class MarkerOverlayExample extends StatelessWidget { + const MarkerOverlayExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -220,6 +630,7 @@ The marker overlay is rendered around the marker when the marker is dragged. Whe ), ); } +} {% endhighlight %} @@ -233,6 +644,27 @@ By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutt {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerOverlayCustomizationExample(), + ); + } +} + +class MarkerOverlayCustomizationExample extends StatelessWidget { + const MarkerOverlayCustomizationExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -247,7 +679,7 @@ By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutt markerWidth: 20, enableDragging: true, overlayRadius: 15, - overlayColor: Colors.red.withOpacity(0.12), + overlayColor: Colors.red.withValues(alpha: 0.12), markerType: MarkerType.circle ) ] @@ -257,6 +689,7 @@ By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutt ), ); } +} {% endhighlight %} @@ -264,14 +697,111 @@ By default, the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutt N> The marker overlay applies to all the marker types except [`MarkerType.image`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html) and [`MarkerType.text`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerType.html). +## Pointer interaction + +The marker pointer supports interactive value changes by enabling the [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property. When this property is set to `true`, the user can drag the marker pointer along the axis to update its value. The following callbacks are invoked during the drag interaction: + +* [`onValueChanged`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onValueChanged.html) – Called continuously while the user is dragging the marker pointer and selecting a new value. +* [`onValueChangeStart`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onValueChangeStart.html) – Called when the user starts dragging the marker pointer. +* [`onValueChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onValueChangeEnd.html) – Called when the user finishes dragging the marker pointer. +* [`onValueChanging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onValueChanging.html) – Called before the value is updated during the drag, providing a [`ValueChangingArgs`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/ValueChangingArgs-class.html) instance for advanced scenarios such as restricting the value range. + +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerInteractionExample(), + ); + } +} + +class MarkerInteractionExample extends StatefulWidget { + const MarkerInteractionExample({Key? key}) : super(key: key); + + @override + State createState() => _MarkerInteractionExampleState(); +} + +class _MarkerInteractionExampleState extends State { + double _markerValue = 60; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + MarkerPointer( + value: _markerValue, + enableDragging: true, + markerHeight: 20, + markerWidth: 20, + markerType: MarkerType.circle, + onValueChanged: (double newValue) { + setState(() { + _markerValue = newValue; + }); + }, + ) + ] + ) + ], + ) + ), + ); + } +} + +{% endhighlight %} + +## Custom renderer + +For advanced scenarios that require fully custom drawing, the marker pointer exposes the [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onCreatePointerRenderer.html) callback. This callback receives a [`MarkerPointerRendererFactory`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointerRendererFactory.html) and lets you return a custom [`MarkerPointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointerRenderer-class.html) for complete control over how the marker is drawn. + +N> The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onCreatePointerRenderer.html) callback applies only when you need a custom rendering pipeline. It is not applicable for the built-in marker types described above. + ## Position customization -The marker pointer can be moved near or far from its actual position using the [`markerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerOffset.html) and [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) properties. +The marker pointer can be moved near or far from its actual position using the [`markerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/markerOffset.html) and [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) properties. When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) to logical pixel, the marker pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) to factor, then provided factor will be multiplied with the axis radius value, and the pointer will be moved to the corresponding position. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/offsetUnit.html) is GaugeSizeUnit.logicalPixel. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return const MaterialApp( + home: MarkerOffsetExample(), + ); + } +} + +class MarkerOffsetExample extends StatelessWidget { + const MarkerOffsetExample({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -279,7 +809,7 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau child: SfRadialGauge( axes: [ RadialAxis( - radiusFactor: 0.9, + radiusFactor: 0.9, centerY: 0.65, pointers: [ MarkerPointer( @@ -293,6 +823,7 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau ), ); } +} {% endhighlight %} @@ -300,4 +831,3 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau - diff --git a/chart-sdk/flutter/radial-gauge/needle-pointer.md b/chart-sdk/flutter/radial-gauge/needle-pointer.md index 532052c9a..74fa6b96a 100644 --- a/chart-sdk/flutter/radial-gauge/needle-pointer.md +++ b/chart-sdk/flutter/radial-gauge/needle-pointer.md @@ -1,7 +1,7 @@ --- layout: post -title: Needle Pointer in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Needle Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Needle Pointer in Flutter Radial Gauge | Syncfusion® +description: Learn about needle pointers in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including pointer customization, animation, positioning, and styling options. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -13,25 +13,39 @@ documentation: ug {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedlePointerDemo()); + +class NeedlePointerDemo extends StatelessWidget { + const NeedlePointerDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer(value: 60) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer(value: 60) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![default needle pointer](images/needle-pointer/range_needleLength.jpg) ## Needle customization @@ -40,7 +54,7 @@ The needle can be customized using the following properties: * [`needleLength`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleLength.html) – Customizes the length of the needle. The length of the pointer can be set either in logical pixel or factor. -* [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) –Specifies whether to set the length in logical pixel or factor. +* [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/lengthUnit.html) – Specifies whether to set the length in logical pixel or factor. * [`needleStartWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/needleStartWidth.html) – Specifies the start width of the needle. @@ -59,29 +73,43 @@ If the [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/la {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedleLengthDemo()); + +class NeedleLengthDemo extends StatelessWidget { + const NeedleLengthDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - lengthUnit: GaugeSizeUnit.logicalPixel, - needleLength: 130 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + lengthUnit: GaugeSizeUnit.logicalPixel, + needleLength: 130 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle pointer length](images/needle-pointer/needle_lengthPixel.jpg) **Needle width customization** @@ -90,32 +118,46 @@ The width of the needle pointer can be customized using the [`needleStartWidth`] {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedleWidthDemo()); + +class NeedleWidthDemo extends StatelessWidget { + const NeedleWidthDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.75, - needleColor: Colors.red, - needleStartWidth: 6, - needleEndWidth: 6 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.75, + needleColor: Colors.red, + needleStartWidth: 6, + needleEndWidth: 6 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle width customization](images/needle-pointer/needle_customization.jpg) **Gradient support for needle** @@ -124,43 +166,57 @@ The width of the needle pointer can be customized using the [`needleStartWidth`] {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const NeedleGradientDemo()); + +class NeedleGradientDemo extends StatelessWidget { + const NeedleGradientDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 65, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.8, - needleEndWidth: 11, - gradient: const LinearGradient( - colors: [ - Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22) - ], - stops: [0, 0.5, 0.5, 1] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 65, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleEndWidth: 11, + gradient: const LinearGradient( + colors: [ + Color(0xFFFF6B78), Color(0xFFFF6B78), + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + needleColor: const Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.black + ) ), - needleColor: const Color(0xFFF67280), - knobStyle: KnobStyle( - knobRadius: 0.08, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.black - ) - ), - ] - ), - ] + ] + ), + ] + ), ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle pointer gradient](images/needle-pointer/needle_gradient.jpg) ## Knob customization @@ -184,37 +240,51 @@ The logical pixel value can be set to knob radius when the [`sizeUnit`](https:// {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const KnobRadiusDemo()); + +class KnobRadiusDemo extends StatelessWidget { + const KnobRadiusDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - needleStartWidth: 1, - needleEndWidth: 5, - knobStyle: KnobStyle( - knobRadius: 10, - sizeUnit: GaugeSizeUnit.logicalPixel, - color: Colors.red + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 1, + needleEndWidth: 5, + knobStyle: KnobStyle( + knobRadius: 10, + sizeUnit: GaugeSizeUnit.logicalPixel, + color: Colors.red + ) ) - ) - ] - ) - ], - ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![knob radius customization](images/needle-pointer/knob_pixel.jpg) -If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is set to factor, the factor value will be set to knob radius. The factor value ranges from 0 to 1. For example, if the needle length is set to 0.1, 10% of the radius value of [`axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) will be set to knob radius. By default, the value of [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is GaugeSizeUnit.factor +If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is set to factor, the factor value will be set to knob radius. The factor value ranges from 0 to 1. For example, if the knob radius is set to 0.1, 10% of the radius value of [`axis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis-class.html) will be set to knob radius. By default, the value of [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/KnobStyle/sizeUnit.html) is GaugeSizeUnit.factor **Knob border customization** @@ -222,38 +292,52 @@ Like radius, the [`borderWidth`](https://pub.dev/documentation/syncfusion_flutte {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const KnobBorderDemo()); + +class KnobBorderDemo extends StatelessWidget { + const KnobBorderDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - needleStartWidth: 1, - needleEndWidth: 5, - knobStyle: KnobStyle( - knobRadius: 0.05, - borderColor: Colors.black, - borderWidth: 0.02, - color: Colors.white + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 1, + needleEndWidth: 5, + knobStyle: KnobStyle( + knobRadius: 0.05, + borderColor: Colors.black, + borderWidth: 0.02, + color: Colors.white + ) ) - ) - ] - ) - ], - ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![knob border customization](images/needle-pointer/knob_border.jpg) -## Tail Customization +## Tail customization The [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) of the needle can be customized using the following properties, @@ -269,97 +353,142 @@ The [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gaug * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/gradient.html) - Specifies the gradient for the tail. -By default, the value of [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/lengthUnit.html) is GaugeSizeUnit.factor.The factor value ranges from 0 to 1. When the length is set to 0.2, 20 % of axis radius value will be considered as tail length.The following code example shows how to specify the length in factor. +By default, the value of [`lengthUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/TailStyle/lengthUnit.html) is GaugeSizeUnit.factor. The factor value ranges from 0 to 1. When the length is set to 0.2, 20% of axis radius value will be considered as tail length. The following code example shows how to specify the length in factor. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const TailFactorDemo()); + +class TailFactorDemo extends StatelessWidget { + const TailFactorDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - tailStyle: TailStyle(width: 8, length: 0.15) - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + tailStyle: TailStyle(width: 8, length: 0.15) + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle tail](images/needle-pointer/needle_tail.jpg) The following code example shows how to specify the length in logical pixels. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const TailPixelDemo()); + +class TailPixelDemo extends StatelessWidget { + const TailPixelDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 60, - needleStartWidth: 3, - needleEndWidth: 3, - knobStyle: KnobStyle( - color: Colors.white, - knobRadius: 0.07, - borderColor: Colors.black, - borderWidth: 0.02 - ), - tailStyle: TailStyle( - width: 5, - length: 30, - lengthUnit: GaugeSizeUnit.logicalPixel, - color: Colors.white, - borderWidth: 3, - borderColor: Colors.black + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 60, + needleStartWidth: 3, + needleEndWidth: 3, + knobStyle: KnobStyle( + color: Colors.white, + knobRadius: 0.07, + borderColor: Colors.black, + borderWidth: 0.02 + ), + tailStyle: TailStyle( + width: 5, + length: 30, + lengthUnit: GaugeSizeUnit.logicalPixel, + color: Colors.white, + borderWidth: 3, + borderColor: Colors.black + ) ) - ) - ] - ) - ], - ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle tail customization](images/needle-pointer/tail_border.jpg) The following code shows how to apply the gradient for the tail. {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const TailGradientDemo()); + +class TailGradientDemo extends StatelessWidget { + const TailGradientDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - NeedlePointer( - value: 65, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.8, - needleEndWidth: 11, - tailStyle: TailStyle( - length: 0.2, - width: 11, + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + NeedlePointer( + value: 65, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleEndWidth: 11, + tailStyle: TailStyle( + length: 0.2, + width: 11, + gradient: LinearGradient( + colors: [ + Color(0xFFFF6B78), Color(0xFFFF6B78), + Color(0xFFE20A22), Color(0xFFE20A22) + ], + stops: [0, 0.5, 0.5, 1] + ), + ), gradient: LinearGradient( colors: [ Color(0xFFFF6B78), Color(0xFFFF6B78), @@ -367,31 +496,28 @@ The following code shows how to apply the gradient for the tail. ], stops: [0, 0.5, 0.5, 1] ), + needleColor: Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.black + ) ), - gradient: LinearGradient( - colors: [ - Color(0xFFFF6B78), Color(0xFFFF6B78), - Color(0xFFE20A22), Color(0xFFE20A22) - ], - stops: [0, 0.5, 0.5, 1] - ), - needleColor: Color(0xFFF67280), - knobStyle: KnobStyle( - knobRadius: 0.08, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.black - ) - ), - ] - ), - ] + ] + ), + ] + ), ), ), ); } +} {% endhighlight %} +{% tabs %} +{% endtabs %} + ![needle tail gradient](images/needle-pointer/tail_gradient.jpg) diff --git a/chart-sdk/flutter/radial-gauge/overview.md b/chart-sdk/flutter/radial-gauge/overview.md index 21e590192..8aa6162c5 100644 --- a/chart-sdk/flutter/radial-gauge/overview.md +++ b/chart-sdk/flutter/radial-gauge/overview.md @@ -1,25 +1,26 @@ --- layout: post -title: About Flutter Radial Gauge widget | Syncfusion -description: Learn here all about introduction of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget, its features, and more. +title: About Flutter Radial Gauge Control | Syncfusion® +description: Learn about the Syncfusion® Flutter Radial Gauge (SfRadialGauge), its features, gauge elements, data visualization, and customization options. platform: chart-sdk control: SfRadialGauge documentation: ug --- -# Flutter Radial Gauge (SfRadialGauge) Overview +# About Flutter Radial Gauge Control (SfRadialGauge) -Syncfusion® Flutter Radial Gauge is a powerful data visualization widget in Dart. It enables you to create modern, interactive, and animated gauges that enhance the user interface of high-quality mobile application built with Flutter. +Syncfusion® Flutter Radial Gauge is a powerful data visualization widget in Dart. It enables you to create modern, interactive, and animated gauges that enhance the user interface of high-quality mobile applications built with Flutter. ![Overview flutter radial gauge](images/overview/gauge_overview.png) ## Key Features -* **Axes** - The radial gauge axis is a circular arc that displays a set of values along a linear or custom scale based on your design requirements. Axis elements such as labels, ticks, and axis lines can be easily customized with built-in properties to match your application's theme. -* **Ranges** - Gauge ranges are visual elements that help users quickly visualize where a value falls on the axis. Text can be easily annotated within ranges to improve readability and provide additional context to your data visualization. -* **Pointers** - Pointer is used to indicate values on an axis. Radial gauge has four types of pointers: needle pointer, marker pointer, range pointer, and widget pointer. All the pointers can be customized as needed. -* **Pointer Animation** - The Radial Gauge provides visually appealing animations when pointers move from one value to another. Various animation types and customization options are available to create engaging user experiences. -* **Pointer interaction** - Interactive functionality allows users to drag pointers from one value to another, enabling real-time value changes and user input directly through the gauge interface. -* **Annotations** - Add multiple widgets such as text, images, or custom Flutter widgets as annotations at specific points of interest in the radial gauge to provide additional context or information. +* **Title** - Add a descriptive title to the radial gauge to provide context about the data being visualized. The title can be aligned to the near, center, or far position and its text style can be customized. See the [title](radial-gauge-title.md) documentation to learn more. +* **Axes** - The radial gauge axis is a circular arc that displays a set of values along a linear or custom scale based on your design requirements. Axis elements such as labels, ticks, and axis lines can be easily customized with built-in properties to match your application's theme. See the [axes](axes.md) documentation to learn more. +* **Ranges** - Gauge ranges are visual elements that help users quickly visualize where a value falls on the axis. Text can be easily annotated within ranges to improve readability and provide additional context to your data visualization. See the [ranges](ranges.md) documentation to learn more. +* **Pointers** - Pointer is used to indicate values on an axis. The radial gauge has four types of pointers: needle pointer, marker pointer, range pointer, and widget pointer. All the pointers can be customized as needed. See the [pointers](pointers.md) documentation to learn more. +* **Animation** - The Radial Gauge provides visually appealing animations when pointers move from one value to another. Various animation types and customization options are available to create engaging user experiences. See the [animation](animation.md) documentation to learn more. +* **Annotations** - Add multiple widgets such as text, images, or custom Flutter widgets as annotations at specific points of interest in the radial gauge to provide additional context or information. See the [annotations](annotation.md) documentation to learn more. +* **Accessibility** - The radial gauge is built with accessibility support, allowing it to be navigated and read by screen readers such as TalkBack and VoiceOver. The widget exposes semantic information to assistive technologies so users with visual impairments can understand the gauge data. See the [accessibility](accessibility.md) documentation to learn more. -You can get the sample in the following link: [`Flutter Gauges`](https://github.com/syncfusion/flutter-examples). \ No newline at end of file +You can get the sample in the following link: [`Flutter Gauges`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge). \ No newline at end of file diff --git a/chart-sdk/flutter/radial-gauge/pointers.md b/chart-sdk/flutter/radial-gauge/pointers.md index cf7f0af4e..fb79551fd 100644 --- a/chart-sdk/flutter/radial-gauge/pointers.md +++ b/chart-sdk/flutter/radial-gauge/pointers.md @@ -1,7 +1,7 @@ --- layout: post -title: Pointers in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Pointers of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Pointers in Flutter Radial Gauge | Syncfusion® +description: Learn about pointers in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including needle, marker, and range pointers with customization options. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -11,10 +11,10 @@ documentation: ug Pointer is used to indicate values on an axis. The Syncfusion Flutter Radial Gauge control offers four types of pointers: -[`Marker pointer`](https://help.syncfusion.com/flutter/radial-gauge/marker-pointer) -[`Needle pointer`](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer) -[`Range pointer`](https://help.syncfusion.com/flutter/radial-gauge/range-pointer) -[`Widget pointer`](https://help.syncfusion.com/flutter/radial-gauge/widget-pointer) +[`Marker pointer`](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/marker-pointer) +[`Needle pointer`](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/needle-pointer) +[`Range pointer`](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/range-pointer) +[`Widget pointer`](https://help.syncfusion.com/chart-sdk/flutter/radial-gauge/widget-pointer) All pointers can be customized to meet your specific requirement. You can add multiple pointers to the gauge to indicate multiple values on the same scale. The value of the pointer is set using the [`value`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/value.html) property. @@ -22,10 +22,32 @@ All pointers can be customized to meet your specific requirement. You can add mu ## Multiple pointers -In addition to the default pointer, you can add any number of pointers to an axis by adding then to the [`pointers`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/pointers.html) collection. +By default, no pointer is added to the axis. In addition to the default pointer, you can add any number of pointers to an axis by adding them to the [`pointers`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/pointers.html) collection. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const MultiplePointersExample(), + ); + } +} + +class MultiplePointersExample extends StatelessWidget { + const MultiplePointersExample(); + @override Widget build(BuildContext context) { return Scaffold( @@ -44,17 +66,41 @@ In addition to the default pointer, you can add any number of pointers to an axi ), ); } +} {% endhighlight %} +{% endtabs %} ![multiple pointers](images/pointers/multiple_pointer.jpg) -## Pointer Dragging +## Pointer dragging Pointers can be dragged over the scale to change their values interactively. This can be achieved by clicking and dragging the pointer. To enable or disable pointer dragging, use the [`enableDragging`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/enableDragging.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const PointerDraggingExample(), + ); + } +} + +class PointerDraggingExample extends StatelessWidget { + const PointerDraggingExample(); + @override Widget build(BuildContext context) { return Scaffold( @@ -83,8 +129,10 @@ Pointers can be dragged over the scale to change their values interactively. Thi ), ); } +} {% endhighlight %} +{% endtabs %} ![pointer dragging](images/pointers/pointer-interaction.gif) @@ -98,8 +146,35 @@ Pointers can be dragged over the scale to change their values interactively. Thi [`onValueChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugePointer/onValueChangeEnd.html) - Occurs when the pointer dragging is completed. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const EventExample(), + ); + } +} + +class EventExample extends StatefulWidget { + const EventExample(); + + @override + State createState() => _EventExampleState(); +} + +class _EventExampleState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -133,13 +208,52 @@ Pointers can be dragged over the scale to change their values interactively. Thi // Handle the value change print('Pointer value changed to: $value'); } +} {% endhighlight %} +{% endtabs %} The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onCreatePointerRenderer.html) callback allows you to create a custom pointer in the radial gauge. This callback is available for both the [`NeedlePointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) or [`MarkerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html) types. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp(); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: const CustomPointerExample(), + ); + } +} + +class _CustomPointerRenderer extends MarkerPointerRenderer { + @override + void drawPointer( + Canvas canvas, + PointerPaintingDetails pointerPaintingDetails, + SfGaugeThemeData gaugeThemeData, + ) { + canvas.drawCircle( + pointerPaintingDetails.startOffset, + 10, + Paint()..color = Colors.red, + ); + } +} + +class CustomPointerExample extends StatelessWidget { + const CustomPointerExample(); + @override Widget build(BuildContext context) { return Scaffold( @@ -161,22 +275,9 @@ The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter ), ); } - - class _CustomPointerRenderer extends MarkerPointerRenderer { - @override - void drawPointer( - Canvas canvas, - PointerPaintingDetails pointerPaintingDetails, - SfGaugeThemeData gaugeThemeData, - ) { - canvas.drawCircle( - pointerPaintingDetails.startOffset, - 10, - Paint()..color = Colors.red, - ); - } - } +} {% endhighlight %} +{% endtabs %} ![create pointer callback](images/pointers/on-create-pointer-renderer.png) diff --git a/chart-sdk/flutter/radial-gauge/radial-gauge-title.md b/chart-sdk/flutter/radial-gauge/radial-gauge-title.md index 478d77056..30bcb1a71 100644 --- a/chart-sdk/flutter/radial-gauge/radial-gauge-title.md +++ b/chart-sdk/flutter/radial-gauge/radial-gauge-title.md @@ -1,7 +1,7 @@ --- layout: post -title: Title in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Title of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Title in Flutter Radial Gauge | Syncfusion® +description: Learn about title customization in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including title text, alignment, styling, and appearance options. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -15,17 +15,43 @@ The following properties are used to customize the appearance of title, * [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/backgroundColor.html) - Changes the background color of the title. -* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderWidth.html) – Changes the border width of the title.. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderWidth.html) – Changes the border width of the title. * [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/borderColor.html) – Changes the border color of the title. * [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/textStyle.html) - Changes the text color, size, font family, fontStyle, and font weight. -## Text Alignment +## Text alignment -You can align the title text content horizontally to the near(left), center, or far(right) position relative to the gauge using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/alignment.html) property of[`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html). +You can align the title text content horizontally to the near (left), center, or far (right) position relative to the gauge using the [`alignment`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle/alignment.html) property of [`title`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeTitle-class.html). The default alignment is `GaugeAlignment.center`. -{% highlight dart %} +{% tabs %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Radial Gauge', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: const MyHomePage(), + ); + } +} + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -35,7 +61,7 @@ You can align the title text content horizontally to the near(left), center, or title: GaugeTitle( text: 'SfRadialGauge', backgroundColor: Colors.lightBlueAccent, - textStyle: TextStyle( + textStyle: const TextStyle( fontSize: 15, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, @@ -49,11 +75,13 @@ You can align the title text content horizontally to the near(left), center, or axes: [ RadialAxis() ], - ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![Gauge title](images/title/gauge_title.jpg) \ No newline at end of file diff --git a/chart-sdk/flutter/radial-gauge/range-pointer.md b/chart-sdk/flutter/radial-gauge/range-pointer.md index f89d5f96e..6243f05d9 100644 --- a/chart-sdk/flutter/radial-gauge/range-pointer.md +++ b/chart-sdk/flutter/radial-gauge/range-pointer.md @@ -1,7 +1,7 @@ --- layout: post -title: Range Pointer in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Range Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Range Pointer in Flutter Radial Gauge | Syncfusion® +description: Learn about range pointers in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including value representation, customization, animation, and styling options. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -9,28 +9,43 @@ documentation: ug # Range Pointer in Flutter Radial Gauge (SfRadialGauge) -A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value. +A range pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value. The default width is 10 logical pixels, with a default color of RGB(0, 168, 231). +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer(value: 30) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer(value: 30) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![default range pointer](images/range-pointer/pointer_default.jpg) @@ -42,33 +57,48 @@ The following properties are used to customize the range pointer: * [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) – Specifies whether the [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) are defined in logical pixels or factor. -The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) of the pointer can be specified either in logical pixel or factor. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as logicalPixel, then the range will be rendered based on the provided pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html)is set as factor, the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as the range pointer width. +The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) of the pointer can be specified either in logical pixel or factor. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), then the range will be rendered based on the provided pixel value. If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is set as [`GaugeSizeUnit.factor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), the provided factor value will be multiplied with axis radius. For example, if the width is set as 0.1, then 10% of axis radius is considered as the range pointer width. +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 30, - width: 0.1, - color: Colors.indigo, - sizeUnit: GaugeSizeUnit.factor - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + width: 0.1, + color: Colors.indigo, + sizeUnit: GaugeSizeUnit.factor + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer customization](images/range-pointer/pointer_customization.jpg) @@ -78,29 +108,44 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/dashArray.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows rendering the range pointer as a dashed line. +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 60, - dashArray: [8, 2] - ) - ] - ) - ] + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 60, + dashArray: [8, 2] + ) + ] + ) + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer dasharray](images/range-pointer/pointer_dasharray.png) @@ -109,68 +154,98 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/gradient.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) allows you to specify a smooth color transition for the pointer by defining different colors based on provided factor values. - {% highlight dart %} + {% tabs %} +{% highlight dart %} + +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - axisLineStyle: AxisLineStyle( - thickness: 0.1, - thicknessUnit: GaugeSizeUnit.factor, + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + axisLineStyle: AxisLineStyle( + thickness: 0.1, + thicknessUnit: GaugeSizeUnit.factor, + ), + pointers: [ + RangePointer( + value: 40, + width: 0.1, + sizeUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( + colors: [Color(0xFFCC2B5E), Color(0xFF753A88)], + stops: [0.25, 0.75] + ), + ) + ] ), - pointers: [ - RangePointer( - value: 40, - width: 0.1, - sizeUnit: GaugeSizeUnit.factor, - gradient: const SweepGradient( - colors: [Color(0xFFCC2B5E), Color(0xFF753A88)], - stops: [0.25, 0.75] - ), - ) - ] - ), - ] + ] + ), ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer gradient](images/range-pointer/pointer_gradient.jpg) -**Corner customization** +**corner customization** The [`cornerStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/cornerStyle.html) property of [`range pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer-class.html) specifies the corner type for the pointer. The corners can be customized using the bothFlat, bothCurve, startCurve, and endCurve options. The default value of this property is bothFlat. - {% highlight dart %} + {% tabs %} +{% highlight dart %} + +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 30, - cornerStyle: CornerStyle.bothCurve - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + cornerStyle: CornerStyle.bothCurve + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range pointer customization](images/range-pointer/pointer_corner.jpg) @@ -178,32 +253,47 @@ The [`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gau The range pointer can be moved farther from or closer to the axis line using the [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) property. The [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) can be set either in logical pixel or factor value using its [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html). The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) property is common for both[`width`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/width.html) and [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) +{% tabs %} {% highlight dart %} +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - pointers: [ - RangePointer( - value: 30, - pointerOffset: 50 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + pointers: [ + RangePointer( + value: 30, + pointerOffset: 50 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![pointer position customization](images/range-pointer/pointer_offset.jpg) -When you set the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) as logical pixel, the pointer will be moved to the provided logical pixel value. +When you set the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) as [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), the pointer will be moved to the provided logical pixel value. -If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as factor, the factor value will be multiplied with the axis radius. For example, if you set [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) as 0.1, then the pointer offset is considered as 10% of axis radius. +If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/sizeUnit.html) is specified as [`GaugeSizeUnit.factor`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html), the factor value will be multiplied with the axis radius. For example, if you set [`pointerOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RangePointer/pointerOffset.html) as 0.1, then the pointer offset is considered as 10% of axis radius. diff --git a/chart-sdk/flutter/radial-gauge/ranges.md b/chart-sdk/flutter/radial-gauge/ranges.md index 76cad5288..5b53e4922 100644 --- a/chart-sdk/flutter/radial-gauge/ranges.md +++ b/chart-sdk/flutter/radial-gauge/ranges.md @@ -1,13 +1,13 @@ --- layout: post -title: Ranges in Flutter Radial Gauge | Syncfusion -description: Step-by-step guide to add and customize ranges in Syncfusion Flutter Radial Gauge—configure start/end values, colors, gradients, offsets, and labels. +title: Ranges in Flutter Radial Gauge | Syncfusion® +description: Learn about ranges in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including range customization, colors, gradients, labels, and styling options. platform: chart-sdk control: SfRadialGauge documentation: ug --- -# Flutter Radial Gauge Ranges (SfRadialGauge) +# Ranges in Flutter Radial Gauge (SfRadialGauge) Gauge ranges are visual elements that help to quickly visualize where a value falls on the axis. Text can be easily annotated in ranges to improve readability. @@ -15,26 +15,39 @@ Gauge ranges are visual elements that help to quickly visualize where a value fa The start and end values of ranges are set using the [`startValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/startValue.html) and [`endValue`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/endValue.html) properties. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange(startValue: 30, endValue: 65) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange(startValue: 30, endValue: 65) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![default range](images/range/range_default.jpg) @@ -52,31 +65,44 @@ The following properties are used for range customization: * [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) - Specifies the gradient for the range. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange( - startValue: 30, - endValue: 65, - startWidth: 5, - endWidth: 20 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + startWidth: 5, + endWidth: 20 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range thickness](images/range/range_thickness.jpg) @@ -88,35 +114,48 @@ If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/late The [`gradient`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/gradient.html) property of [`range`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange-class.html) allows to specify the smooth color transition to pointer by specifying the different colors based on provided factor value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange( - startValue: 30, - endValue: 65, - gradient: const SweepGradient( - colors: [Color(0xFFBC4E9C), Color(0xFFF80759)], - stops: [0.25, 0.75] - ), - startWidth: 5, - endWidth: 20 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + gradient: const SweepGradient( + colors: [Color(0xFFBC4E9C), Color(0xFFF80759)], + stops: [0.25, 0.75] + ), + startWidth: 5, + endWidth: 20 + ) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range gradient](images/range/range_gradient.jpg) @@ -126,33 +165,46 @@ If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/late If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is set as logical pixels, then the range will be moved based on the provided logical pixel value. -If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is set as factor, the factor value will be multiplied with the axis radius.Then the pointer will be moved to the corresponding value +If the [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is set as factor, the provided factor value will be multiplied with the axis radius. Then the range will be moved to the corresponding value. The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) property is common for the [`rangeOffset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/rangeOffset.html), [`startWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/startWidth.html) and the [`endWidth`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/endWidth.html) properties. The default value of [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/sizeUnit.html) is logicalPixel. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - ranges: [ - GaugeRange( - startValue: 30, - endValue: 65, - rangeOffset: 50 - ) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + ranges: [ + GaugeRange( + startValue: 30, + endValue: 65, + rangeOffset: 50 + ) + ] + ) + ], + ) + ), ), ); } - +} + {% endhighlight %} +{% endtabs %} ![range offset](images/range/range_offset.jpg) @@ -160,75 +212,88 @@ The [`sizeUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/ You can apply range color to axis labels and ticks using the [`useRangeColorForAxis`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/RadialAxis/useRangeColorForAxis.html) property of the axis. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - showAxisLine: false, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - startAngle: 270, - endAngle: 270, - useRangeColorForAxis: true, - interval: 10, - axisLabelStyle: GaugeTextStyle( - fontWeight: FontWeight.w500, - fontSize: 12 - ), - majorTickStyle: MajorTickStyle( - length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1 - ), - minorTicksPerInterval: 4, - labelOffset: 15, - minorTickStyle: MinorTickStyle( - length: 0.04, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1 - ), - ranges: [ - GaugeRange( - startValue: 0, - endValue: 35, - color: Color(0xFFF8B195), - sizeUnit: GaugeSizeUnit.factor, - rangeOffset: 0.06, - startWidth: 0.05, - endWidth: 0.25 + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + startAngle: 270, + endAngle: 270, + useRangeColorForAxis: true, + interval: 10, + axisLabelStyle: GaugeTextStyle( + fontWeight: FontWeight.w500, + fontSize: 12 ), - GaugeRange( - startValue: 35, - endValue: 70, - rangeOffset: 0.06, - sizeUnit: GaugeSizeUnit.factor, - color: Color(0xFFC06C84), - startWidth: 0.05, - endWidth: 0.25 + majorTickStyle: MajorTickStyle( + length: 0.15, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1 ), - GaugeRange( - startValue: 70, - endValue: 100, - rangeOffset: 0.06, - sizeUnit: GaugeSizeUnit.factor, - color: Color(0xFF355C7D), - startWidth: 0.05, - endWidth: 0.25 + minorTicksPerInterval: 4, + labelOffset: 15, + minorTickStyle: MinorTickStyle( + length: 0.04, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1 ), - ] - ) - ], - ) + ranges: [ + GaugeRange( + startValue: 0, + endValue: 35, + color: Color(0xFFF8B195), + sizeUnit: GaugeSizeUnit.factor, + rangeOffset: 0.06, + startWidth: 0.05, + endWidth: 0.25 + ), + GaugeRange( + startValue: 35, + endValue: 70, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFFC06C84), + startWidth: 0.05, + endWidth: 0.25 + ), + GaugeRange( + startValue: 70, + endValue: 100, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFF355C7D), + startWidth: 0.05, + endWidth: 0.25 + ), + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range color to axis element](images/range/range_axislabels.jpg) @@ -236,63 +301,76 @@ You can apply range color to axis labels and ticks using the [`useRangeColorForA Text can be displayed on a range using the [`label`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/label.html) property. The provided text can be customized using the [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeRange/labelStyle.html) property. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() => runApp(const RangesDemo()); + +class RangesDemo extends StatelessWidget { + const RangesDemo({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRadialGauge( - axes: [ - RadialAxis( - showLabels: false, - showAxisLine: false, - showTicks: false, - minimum: 0, - maximum: 99, - ranges: [ - GaugeRange( - startValue: 0, - endValue: 33, - color: Color(0xFFFE2A25), - label: 'Slow', - sizeUnit: GaugeSizeUnit.factor, - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - startWidth: 0.65, - endWidth: 0.65 - ), - GaugeRange( - startValue: 33, - endValue: 66, - color: Color(0xFFFFBA00), - label: 'Moderate', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - startWidth: 0.65, - endWidth: 0.65, - sizeUnit: GaugeSizeUnit.factor - ), - GaugeRange( - startValue: 66, - endValue: 99, - color: Color(0xFF00AB47), - label: 'Fast', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.65, - endWidth: 0.65 - ), - ], - pointers: [ - NeedlePointer(value: 60) - ] - ) - ], - ) + return MaterialApp( + home: Scaffold( + body: Center( + child: SfRadialGauge( + axes: [ + RadialAxis( + showLabels: false, + showAxisLine: false, + showTicks: false, + minimum: 0, + maximum: 99, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 33, + color: Color(0xFFFE2A25), + label: 'Slow', + sizeUnit: GaugeSizeUnit.factor, + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + startWidth: 0.65, + endWidth: 0.65 + ), + GaugeRange( + startValue: 33, + endValue: 66, + color: Color(0xFFFFBA00), + label: 'Moderate', + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + startWidth: 0.65, + endWidth: 0.65, + sizeUnit: GaugeSizeUnit.factor + ), + GaugeRange( + startValue: 66, + endValue: 99, + color: Color(0xFF00AB47), + label: 'Fast', + labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: 20), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.65, + endWidth: 0.65 + ), + ], + pointers: [ + NeedlePointer(value: 60) + ] + ) + ], + ) + ), ), ); } +} {% endhighlight %} +{% endtabs %} ![range label](images/range/range_datalabel.jpg) diff --git a/chart-sdk/flutter/radial-gauge/widget-pointer.md b/chart-sdk/flutter/radial-gauge/widget-pointer.md index 8b23b61db..f01db58ba 100644 --- a/chart-sdk/flutter/radial-gauge/widget-pointer.md +++ b/chart-sdk/flutter/radial-gauge/widget-pointer.md @@ -1,7 +1,7 @@ --- layout: post -title: Widget Pointer in Flutter Radial Gauge widget | Syncfusion -description: Learn here all about adding and customizing Widget Pointer of Syncfusion Flutter Radial Gauge (SfRadialGauge) widget and more. +title: Widget Pointer in Flutter Radial Gauge | Syncfusion® +description: Learn about widget pointers in Syncfusion® Flutter Radial Gauge (SfRadialGauge), including custom widgets, positioning, styling, and interactive gauge elements. platform: chart-sdk control: SfRadialGauge documentation: ug @@ -11,8 +11,33 @@ documentation: ug [`WidgetPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer-class.html) allows you to point to a desired value with any Flutter widget in a gauge scale. You can set the desired widget to its [`child`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/child.html) property to annotate the pointer value. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Widget Pointer')), + body: const MyHomePage(), + ), + ); + } +} + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -42,7 +67,7 @@ documentation: ug height: 30.00, decoration: BoxDecoration( image: DecorationImage( - image: ExactAssetImage('images/sun.png'), + image: AssetImage('images/sun.png'), fit: BoxFit.fitHeight, ), ) @@ -70,8 +95,10 @@ documentation: ug ), ); } +} {% endhighlight %} +{% endtabs %} ![default widget pointer](images/widget-pointer/widget_pointer.png) @@ -79,10 +106,37 @@ documentation: ug The widget pointer can be moved near or far from its actual position using the [`offset`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offset.html) and [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) properties. -When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to logical pixel, then the widget pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to factor, then provided factor will be multiplied with the axis radius value, and then the pointer will be moved to corresponding value. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) is [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit-class.html). +When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to logical pixel, the widget pointer will be moved based on the logical pixel value. If you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) to factor, the provided factor will be multiplied by the axis radius value, and the pointer will be moved to the corresponding value. The default value of [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/WidgetPointer/offsetUnit.html) is [`GaugeSizeUnit.logicalPixel`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/GaugeSizeUnit.html). + +**Note:** Add the image to your pubspec.yaml assets section. +{% tabs %} {% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_gauges/gauges.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Widget Pointer with Offset')), + body: const MyHomePage(), + ), + ); + } +} + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); + @override Widget build(BuildContext context) { return Scaffold( @@ -113,7 +167,7 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau height: 30.00, decoration: BoxDecoration( image: DecorationImage( - image: ExactAssetImage('images/sun.png'), + image: AssetImage('images/sun.png'), fit: BoxFit.fitHeight, ), ) @@ -141,7 +195,9 @@ When you set [`offsetUnit`](https://pub.dev/documentation/syncfusion_flutter_gau ), ); } +} {% endhighlight %} +{% endtabs %} ![widget pointer position](images/widget-pointer/widget_pointer_position.png) diff --git a/chart-sdk/flutter/range-selector/accessibility.md b/chart-sdk/flutter/range-selector/accessibility.md deleted file mode 100644 index 990fe88f3..000000000 --- a/chart-sdk/flutter/range-selector/accessibility.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -layout: post -title: Accessibility in Flutter Range Selector widget | Syncfusion -description: Learn here all about the accessibility support in Syncfusion Flutter Range Selector (SfRangeSelector) widget. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Accessibility in Flutter Range Selector (SfRangeSelector) - -## Keyboard support - -This feature allows you to focus on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) widget using the TAB key and adjust its values with the keyboard arrow keys. By default, the start thumb receives focus first. The left and down arrow keys can be used to decrease the value of the focused thumb, while the right and up arrow keys can be used to increase it. - -N> In [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html), keyboard accessibility is not supported when [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, as focus can only be applied to one thumb at a time. - -## Screen reader - -The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) can be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/semanticFormatterCallback.html) property. - -For Android, you can adjust the value of each thumb by moving the focus to the thumb and then pressing the volume buttons to increase or decrease the value. - -For iOS, you can adjust the value of each thumb by moving the focus to the thumb and then swiping up or down to increase or decrease the value respectively. - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _values = SfRangeValues(40.0, 60.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: 0.0, - max: 100.0, - initialValues: _values, - interval: 20, - showTicks: true, - showLabels: true, - semanticFormatterCallback: (dynamic value, SfThumb thumb){ - return 'The $thumb value is $value'; - }, - onChanged: (SfRangeValues newValues) { - setState(() { - _values = newValues; - }); - }, - child: Container( - height: 200, - color: Colors.pink[200], - ), - ), - ) - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -## Sufficient contrast - -You can customize the color of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) elements using the following APIs for the sufficient contrast. - -* [`Track`](https://help.syncfusion.com/flutter/range-selector/track#track-color) -* [`Major ticks`](https://help.syncfusion.com/flutter/range-selector/ticks#major-ticks-color) -* [`Minor ticks`](https://help.syncfusion.com/flutter/range-selector/ticks#minor-ticks-color) -* [`Labels`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#show-labels) -* [`Dividers`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#show-dividers) -* [`Thumb`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay#thumb-color) -* [`Thumb overlay`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay#thumb-overlay-color) -* [`Active region color`](https://help.syncfusion.com/flutter/range-selector/basic-features#active-region-color) -* [`Inactive region color`](https://help.syncfusion.com/flutter/range-selector/basic-features#inactive-region-color) - -## Large fonts - -The font size of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) will be automatically scaled based on the device settings. Also, you can change the font size of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) elements using the following APIs: - -* [`Label style`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider#label-style) -* [`Tooltip label style`](https://help.syncfusion.com/flutter/range-selector/tooltip#tooltip-label-style) - -## Easier touch targets - -The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) has touch target as 48 * 48 as per the standard for all the elements. diff --git a/chart-sdk/flutter/range-selector/basic-features.md b/chart-sdk/flutter/range-selector/basic-features.md deleted file mode 100644 index d47a7f7d7..000000000 --- a/chart-sdk/flutter/range-selector/basic-features.md +++ /dev/null @@ -1,600 +0,0 @@ ---- -layout: post -title: Basic features in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Basic features in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Basic features in Flutter Range Selector (SfRangeSelector) -This section explains about how to add the numeric and date range selector. - -## Minimum - -The minimum value that the user can select. The default value of [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) property is 0.0 and it must be less than the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -## Maximum - -The maximum value that the user can select. The default value of [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) property is 1.0 and it must be greater than the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -## Initial values - -It represents the initial values in the range selector. The range selector's thumb is drawn corresponding to this value. - -N> For date values, the range selector does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for date values. - -**Numeric range selector** - -You can show numeric values in the range selector by setting `double` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) and [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) properties. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(5.0, 8.0); - -final List _chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Numeric range selector](images/basic-features/selector_numeric_label.png) - -**Date range selector** - -You can show date values in the range selector by setting `DateTime` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) and [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) properties. - -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range selector using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); - -final List _chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 1, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Date range selector](images/basic-features/selector_date_label.png) - -## Handle onChangeStart, onChanged, and onChangeEnd callbacks - -**onChangeStart** - -The [`onChangeStart`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChangeStart.html) callback is called when the user begins to interact with range selector using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range selector thumb. - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSelector( - min: 0.0, - max: 10.0, - initialValues: _values, - onChangeStart: (SfRangeValues startValues) { - print('Interaction started'); - }, - onChanged: (SfRangeValues newValues) {}, - child: SizedBox(), - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -**onChangeEnd** - -The [`onChangeEnd`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChangeEnd.html) callback is called when the user stops to interact with range selector using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range selector thumb. - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -@override -Widget build(BuildContext context) { - return Scaffold( - body: SfRangeSelector( - min: 0.0, - max: 10.0, - initialValues: _values, - onChangeEnd: (SfRangeValues endValues) { - print('Interaction ended'); - }, - onChanged: (SfRangeValues newValues) {}, - child: SizedBox(), - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -**onChanged** - -The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChanged.html) callback is called when the user is selecting the new values. - -{% tabs %} -{% highlight Dart %} - -final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); - -final List _chartData = [ - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 2.0), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - initialValues: _initialValues, - onChanged: (SfRangeValues values) { - }, - child: Container( - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false, maximum: 4), - series: >[ - SplineAreaSeries( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -## Active color - -It represents the color applied to the active track, thumb, overlay, and inactive dividers. - -The active side of the range selector is between start and end thumbs. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - activeColor: Color.fromARGB(255, 253, 125, 0), - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Active color support](images/basic-features/selector_active_color.png) - -## Inactive color - -It represents the color applied to the inactive track and active dividers. - -The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. - -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - activeColor: Color.fromARGB(255,5, 90, 194), - inactiveColor: Color.fromARGB(140, 121, 244, 195), - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Inactive color support](images/basic-features/selector_inactive_color.png) - -## Active region color - -It specifies the color for the active region of the child in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). - -The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(5.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeRegionColor: Colors.greenAccent[100], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Active region color support](images/basic-features/selector-active-region-color.png) - -## Inactive region color - -It specifies the color for the inactive region of the child in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). - -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - inactiveRegionColor: Colors.greenAccent[100], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Inactive region color support](images/basic-features/selector-inactive-region-color.png) - -### For customizing individual items - -* Track - [`Link`](https://help.syncfusion.com/flutter/range-selector/track) -* Ticks - [`Link`](https://help.syncfusion.com/flutter/range-selector/ticks) -* Labels and dividers - [`Link`](https://help.syncfusion.com/flutter/range-selector/labels-and-divider) -* Tooltips - [`Link`](https://help.syncfusion.com/flutter/range-selector/tooltip) -* Thumb and overlay - [`Link`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay) diff --git a/chart-sdk/flutter/range-selector/drag-mode.md b/chart-sdk/flutter/range-selector/drag-mode.md deleted file mode 100644 index 96427bbd1..000000000 --- a/chart-sdk/flutter/range-selector/drag-mode.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -layout: post -title: Drag modes in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the multiple Drag modes in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Drag modes in Flutter Range Selector (SfRangeSelector) - -## On thumb - -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.onThumb`, only individual thumb can be moved by dragging it. The nearest thumb will move to the touch position if interaction is done anywhere other than the thumb. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showTicks: true, - showLabels: true, - initialValues: _values, - dragMode: SliderDragMode.onThumb, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Drag mode on thumb](images/drag-mode/drag-mode-on-thumb.gif) - -## Between thumbs - -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.betweenThumbs`, both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. The range between the start and end thumb will always be the same. Hence, it is not possible to move the individual thumb. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showTicks: true, - showLabels: true, - initialValues: _values, - dragMode: SliderDragMode.betweenThumbs, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Drag mode between thumb](images/drag-mode/drag-mode-between-thumb.gif) - -## Both thumbs - -When [`dragMode`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dragMode.html) is set to `SliderDragMode.both`, individual thumb can be moved by dragging it, and also both the thumbs can be moved at the same time by dragging in the area between start and end thumbs. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showTicks: true, - showLabels: true, - initialValues: _values, - dragMode: SliderDragMode.both, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Drag mode both thumb](images/drag-mode/drag-mode-both.gif) diff --git a/chart-sdk/flutter/range-selector/enabled-and-disabled-state.md b/chart-sdk/flutter/range-selector/enabled-and-disabled-state.md deleted file mode 100644 index 749eceb34..000000000 --- a/chart-sdk/flutter/range-selector/enabled-and-disabled-state.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -layout: post -title: Disabled state in Flutter Range Selector widget | Syncfusion -description: Learn here all about the Disabled state in Syncfusion Flutter Range Selector (SfRangeSelector) widget. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Disabled state in Flutter Range Selector (SfRangeSelector) - -This section helps to learn about the disabled state in the Flutter range selector. - -## Disabled state - -You can render the range selector in disabled state using [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property. The default value of [`enabled`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enabled.html) property is `true`. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(5.0, 8.0); - -final List _chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - enabled: false, - initialValues: _initialValues, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Range selector disabled state](images/disabled-state/selector_disabled_state.png) - -## Disabled color - -You can change, - -* The color of the active and inactive track in disabled state using the [`disabledActiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTrackColor.html) and [`disabledInactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTrackColor.html) properties. -* The color of the active and inactive major ticks in disabled state using the [`disabledActiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveTickColor.html) and [`disabledInactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveTickColor.html) properties. -* The color of the active and inactive minor ticks in disabled state using the [`disabledActiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveMinorTickColor.html) and [`disabledInactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveMinorTickColor.html) properties. -* The color of the active and inactive dividers in disabled state using the [`disabledActiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledActiveDividerColor.html) and [`disabledInactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledInactiveDividerColor.html) properties. -* The color of the thumb in disabled state using the [`disabledThumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/disabledThumbColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); - -final List _chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override - Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - disabledActiveTrackColor: Colors.red[900], - disabledInactiveTrackColor: Colors.red[200], - disabledActiveTickColor: Colors.red[900], - disabledInactiveTickColor: Colors.red[200], - disabledActiveMinorTickColor: Colors.red[900], - disabledInactiveMinorTickColor: Colors.red[200], - disabledActiveDividerColor: Colors.blue[900], - disabledInactiveDividerColor: Colors.blue[200], - disabledThumbColor: Colors.red, - activeTrackHeight: 4, - inactiveTrackHeight: 4, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - enabled: false, - showTicks: true, - showDividers: true, - initialValues: _initialValues, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Disabled color support](images/disabled-state/selector-disabled-color.png) diff --git a/chart-sdk/flutter/range-selector/getting-started.md b/chart-sdk/flutter/range-selector/getting-started.md deleted file mode 100644 index cae4d724c..000000000 --- a/chart-sdk/flutter/range-selector/getting-started.md +++ /dev/null @@ -1,456 +0,0 @@ ---- -layout: post -title: Getting started with Flutter Range Selector widget | Syncfusion -description: Learn here about getting started with Syncfusion Flutter Range Selector (SfRangeSelector) widget, its elements, and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Getting started with Flutter Range Selector (SfRangeSelector) -This section explains the steps required to add the range selector widget and its elements such as numeric and date values, ticks, labels and tooltips. This section covers only basic features needed to know to get started with Syncfusion® range selector. - -To get start quickly with our Flutter Range Selector widget, you can check out this video. - - - - -## Add Flutter range selector to an application -Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation. - -**Add dependency** - -Add the Syncfusion® Flutter range selector dependency to your pubspec.yaml file. - -{% highlight dart %} - -dependencies: - -syncfusion_flutter_sliders: ^xx.x.xx - -{% endhighlight %} - -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Sliders`](https://pub.dev/packages/syncfusion_flutter_sliders/versions) package. - -**Get packages** - -Run the following command to get the required packages. - -{% highlight dart %} - -$ flutter pub get - -{% endhighlight %} - -**Import package** - -Import the following package in your Dart code. - -{% tabs %} -{% highlight Dart %} - -import 'package:syncfusion_flutter_sliders/sliders.dart'; - -{% endhighlight %} -{% endtabs %} - -## Initialize range selector - -After importing the package, initialize the range selector widget as a child of any widget. Here, the range selector widget is added as a child of the Container widget. The default value of the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) properties of the SfRangeSelector is 0.0 and 1.0 respectively. So, the [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property must be given within the range. You can add any kind of widget as a child of range selector. Here, [Chart](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget is added as a child. - -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - -{% tabs %} -{% highlight Dart %} - -final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); - -final List _chartData = [ - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 2.0), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - initialValues: _initialValues, - child: Container( - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false, maximum: 4), - series: >[ - SplineAreaSeries( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Default range selector](images/getting-started/default-range-selector.png) - -## Handle range change - -The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChanged.html) callback is called when the user is selecting the new values. - -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - -{% tabs %} -{% highlight Dart %} - -final SfRangeValues _initialValues = SfRangeValues(0.3, 0.7); - -final List _chartData = [ - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 2.0), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - initialValues: _initialValues, - onChanged: (SfRangeValues values) { - }, - child: Container( - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false, maximum: 4), - series: >[ - SplineAreaSeries( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -## Set numeric range - -You can show numeric values in the range selector by setting `double` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) and [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) properties. - -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); - -final List _chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _initialValues, - interval: 2, - showLabels: true, - child: Container( - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis( - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false, maximum: 4), - series: >[ - SplineAreaSeries( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Numeric range selector](images/getting-started/numeric-range-selector.png) - -## Set date range - -You can show date values in the range selector by setting `DateTime` values to the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) and [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) properties. - -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range selector using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. - -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); - -final List _chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - interval: 2, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Date time range selector](images/getting-started/date-time-range-selector.png) - -## Enable ticks - -You can enable ticks in the range selector using the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property. - -I> You need to set the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property to update range selector thumb values dynamically. Refer this [`link`](https://help.syncfusion.com/flutter/range-selector/range-controller) for setting controller property. The [initialValues](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property can be used to set values at load time. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); - -final List _chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _initialValues, - interval: 1, - showLabels: true, - showTicks: true, - child: Container( - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis( - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false, maximum: 4), - series: >[ - SplineAreaSeries( - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - height: 250, - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Show ticks in range selector](images/getting-started/range-selector_with_ticks.png) - -## Add prefix/suffix to labels - -You can add prefix or suffix to the labels using the [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) properties. - -N> The format type (numeric or date) of the range selector is determined based on the values specified in [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html), [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) and [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) properties. - -I> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range selector using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class and for formatting numeric range selector using the [`NumberFormat`](https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html) class. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _initialValues = SfRangeValues(4.5, 8.5); - -final List _chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return Container( - child: Center( - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _initialValues, - interval: 1, - showLabels: true, - showTicks: true, - numberFormat: NumberFormat("\$"), - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis( - isVisible: false, - minimum: _min, - maximum: _max, - ), - primaryYAxis: NumericAxis(isVisible: false, maximum: 4), - plotAreaBorderWidth: 0, - plotAreaBackgroundColor: Colors.transparent, - series: >[ - ColumnSeries( - dataSource: _chartData, - color: Color.fromARGB(255, 126, 184, 253), - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Format labels in range selector](images/getting-started/range-selector_with_formatted_label.png) diff --git a/chart-sdk/flutter/range-selector/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/range-selector/how-to/custom-widget-on-flutterflow.md deleted file mode 100644 index dfeebf074..000000000 --- a/chart-sdk/flutter/range-selector/how-to/custom-widget-on-flutterflow.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -layout: post -title: RangeSelector Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Range Selector (SfRangeSelector) widget in FlutterFlow. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# How to add Syncfusion® RangeSelector widget in FlutterFlow? - -## Overview - -[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our SfRangeSelector widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). - -### Create a new project - -Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) and click the `+ Create New` button to create a new project. - -### Creating the custom widget - -1. Navigate to the `Custom Code` section in the left side navigation menu. -2. Click on the `+ Add` button to open a dropdown menu, then select `Widget`. -3. Update the widget name as desired. -4. Click the `View Boilerplate Code` button on the right side, represented by this icon `[]`. -5. A popup will appear with startup code; locate the button labeled ` Copy to Editor` and click on it. -6. Save the widget. - -![Custom Widget](how-to-section-images/custom-widget.png) - -### Add RangeSelector widget as a dependency - -1. Click on `+ Add Dependency`, a text editor will appear. -2. Navigate to [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. -![Version](how-to-section-images/copy-version.png) -3. Paste the copied dependency into the text editor, then click `Refresh` and `Save` it. - ->**Note**: The live version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). - -![Dependency](how-to-section-images/dependency.png) - ->**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. - ->**Note**: Since [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. - -### Import the package - -1. Navigate to the `Installing` tab on the [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) page. Under the `Import it` section, copy the package import statement. -![Package](how-to-section-images/copy-package.png) -2. Paste the copied import statement into the code editor and then `Save` it. -![Import](how-to-section-images/import-package-flutterflow.png) - -### Add widget code snippet in code editor - -1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_sliders/example) tab in [Syncfusion® Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) and copy the widget specific codes. -![Code](how-to-section-images/code-snippet.png) -2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. -![Code snippet](how-to-section-images/Adding-code-snippent.png) - -### Compiling the codes - -1. Click the 'Compile Code' button located in the top right corner. -2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code has been successfully compiled, save the process. - -![Compile code](how-to-section-images/compile-code.png) - ->**Note**: The compilation progress takes 2 to 3 minutes to complete. - -### Utilizing the custom widget - -1. Navigate to `Widget Palette` located in the left side navigation menu. -2. Click on the `Components` tab. -3. Your custom widget will be under `Custom Code Widgets`. Drag and drop the custom widget to your page. - -![Page](how-to-section-images/page.png) diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/Adding-code-snippent.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/Adding-code-snippent.png deleted file mode 100644 index a0b6c7b4f..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/Adding-code-snippent.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/code-snippet.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/code-snippet.png deleted file mode 100644 index f04e38d30..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/code-snippet.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/compile-code.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/compile-code.png deleted file mode 100644 index cf3c0d353..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/compile-code.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/copy-package.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/copy-package.png deleted file mode 100644 index 25ec3ec93..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/copy-package.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/copy-version.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/copy-version.png deleted file mode 100644 index 9c65ef907..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/copy-version.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/custom-widget.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/custom-widget.png deleted file mode 100644 index 675534438..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/custom-widget.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/dependency.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/dependency.png deleted file mode 100644 index fb262b20e..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/dependency.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/import-package-flutterflow.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/import-package-flutterflow.png deleted file mode 100644 index 7ca042136..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/import-package-flutterflow.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/page.png b/chart-sdk/flutter/range-selector/how-to/how-to-section-images/page.png deleted file mode 100644 index 5ee24ba77..000000000 Binary files a/chart-sdk/flutter/range-selector/how-to/how-to-section-images/page.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/basic-features/selector-active-region-color.png b/chart-sdk/flutter/range-selector/images/basic-features/selector-active-region-color.png deleted file mode 100644 index e185e92b6..000000000 Binary files a/chart-sdk/flutter/range-selector/images/basic-features/selector-active-region-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/basic-features/selector-inactive-region-color.png b/chart-sdk/flutter/range-selector/images/basic-features/selector-inactive-region-color.png deleted file mode 100644 index acf0b0a25..000000000 Binary files a/chart-sdk/flutter/range-selector/images/basic-features/selector-inactive-region-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/basic-features/selector_active_color.png b/chart-sdk/flutter/range-selector/images/basic-features/selector_active_color.png deleted file mode 100644 index 7e5cc3966..000000000 Binary files a/chart-sdk/flutter/range-selector/images/basic-features/selector_active_color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/basic-features/selector_date_label.png b/chart-sdk/flutter/range-selector/images/basic-features/selector_date_label.png deleted file mode 100644 index 832b99f2c..000000000 Binary files a/chart-sdk/flutter/range-selector/images/basic-features/selector_date_label.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/basic-features/selector_inactive_color.png b/chart-sdk/flutter/range-selector/images/basic-features/selector_inactive_color.png deleted file mode 100644 index ea146e42c..000000000 Binary files a/chart-sdk/flutter/range-selector/images/basic-features/selector_inactive_color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/basic-features/selector_numeric_label.png b/chart-sdk/flutter/range-selector/images/basic-features/selector_numeric_label.png deleted file mode 100644 index 325ee1f9f..000000000 Binary files a/chart-sdk/flutter/range-selector/images/basic-features/selector_numeric_label.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/disabled-state/selector-disabled-color.png b/chart-sdk/flutter/range-selector/images/disabled-state/selector-disabled-color.png deleted file mode 100644 index b7bea5c43..000000000 Binary files a/chart-sdk/flutter/range-selector/images/disabled-state/selector-disabled-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/disabled-state/selector_disabled_state.png b/chart-sdk/flutter/range-selector/images/disabled-state/selector_disabled_state.png deleted file mode 100644 index 0db5ed00a..000000000 Binary files a/chart-sdk/flutter/range-selector/images/disabled-state/selector_disabled_state.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-between-thumb.gif b/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-between-thumb.gif deleted file mode 100644 index 56a2ea28c..000000000 Binary files a/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-between-thumb.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-both.gif b/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-both.gif deleted file mode 100644 index 38e2aecb1..000000000 Binary files a/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-both.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-on-thumb.gif b/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-on-thumb.gif deleted file mode 100644 index 50ec8bdb4..000000000 Binary files a/chart-sdk/flutter/range-selector/images/drag-mode/drag-mode-on-thumb.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/getting-started/date-time-range-selector.png b/chart-sdk/flutter/range-selector/images/getting-started/date-time-range-selector.png deleted file mode 100644 index 466bf7528..000000000 Binary files a/chart-sdk/flutter/range-selector/images/getting-started/date-time-range-selector.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/getting-started/default-range-selector.png b/chart-sdk/flutter/range-selector/images/getting-started/default-range-selector.png deleted file mode 100644 index 7b6620e84..000000000 Binary files a/chart-sdk/flutter/range-selector/images/getting-started/default-range-selector.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/getting-started/numeric-range-selector.png b/chart-sdk/flutter/range-selector/images/getting-started/numeric-range-selector.png deleted file mode 100644 index b5b664f8c..000000000 Binary files a/chart-sdk/flutter/range-selector/images/getting-started/numeric-range-selector.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/getting-started/range-selector_with_formatted_label.png b/chart-sdk/flutter/range-selector/images/getting-started/range-selector_with_formatted_label.png deleted file mode 100644 index c12ed433b..000000000 Binary files a/chart-sdk/flutter/range-selector/images/getting-started/range-selector_with_formatted_label.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/getting-started/range-selector_with_ticks.png b/chart-sdk/flutter/range-selector/images/getting-started/range-selector_with_ticks.png deleted file mode 100644 index 0fe235aaa..000000000 Binary files a/chart-sdk/flutter/range-selector/images/getting-started/range-selector_with_ticks.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/interval/date_interval.png b/chart-sdk/flutter/range-selector/images/interval/date_interval.png deleted file mode 100644 index 00a761efe..000000000 Binary files a/chart-sdk/flutter/range-selector/images/interval/date_interval.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/interval/numeric_interval.png b/chart-sdk/flutter/range-selector/images/interval/numeric_interval.png deleted file mode 100644 index 244bfaf3a..000000000 Binary files a/chart-sdk/flutter/range-selector/images/interval/numeric_interval.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/interval/selector-interval-selection-support.gif b/chart-sdk/flutter/range-selector/images/interval/selector-interval-selection-support.gif deleted file mode 100644 index fdf876f8d..000000000 Binary files a/chart-sdk/flutter/range-selector/images/interval/selector-interval-selection-support.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/interval/selector-step-duration-support.gif b/chart-sdk/flutter/range-selector/images/interval/selector-step-duration-support.gif deleted file mode 100644 index 2343772ef..000000000 Binary files a/chart-sdk/flutter/range-selector/images/interval/selector-step-duration-support.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/interval/selector-step-size-support.gif b/chart-sdk/flutter/range-selector/images/interval/selector-step-size-support.gif deleted file mode 100644 index 9bdf57cd0..000000000 Binary files a/chart-sdk/flutter/range-selector/images/interval/selector-step-size-support.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/range-selector-divider-radius.png b/chart-sdk/flutter/range-selector/images/label-and-divider/range-selector-divider-radius.png deleted file mode 100644 index 82f49cd2f..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/range-selector-divider-radius.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/range-selector-divider-stroke-color.png b/chart-sdk/flutter/range-selector/images/label-and-divider/range-selector-divider-stroke-color.png deleted file mode 100644 index e08df4444..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/range-selector-divider-stroke-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-divider-color.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector-divider-color.png deleted file mode 100644 index a9fd1a6b7..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-divider-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png deleted file mode 100644 index e786d4166..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-edge-label-placement.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-individual-label-color.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector-individual-label-color.png deleted file mode 100644 index 61e8619ec..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-individual-label-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-labels-color.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector-labels-color.png deleted file mode 100644 index 9fba93b97..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-labels-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-labels-offset.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector-labels-offset.png deleted file mode 100644 index 21cc3d1e8..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector-labels-offset.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_hour_date_format.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_hour_date_format.png deleted file mode 100644 index 2bc2bd799..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_hour_date_format.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_label_formatter.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_label_formatter.png deleted file mode 100644 index ce6428224..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_label_formatter.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_label_placement.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_label_placement.png deleted file mode 100644 index 536f2ecdb..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_label_placement.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_month_date_format.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_month_date_format.png deleted file mode 100644 index 277953606..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_month_date_format.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_number_format.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_number_format.png deleted file mode 100644 index 800451a57..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_number_format.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_show_divider.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_show_divider.png deleted file mode 100644 index e9f47db84..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_show_divider.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_show_label.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_show_label.png deleted file mode 100644 index afee4d625..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_show_label.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_year_date_format.png b/chart-sdk/flutter/range-selector/images/label-and-divider/selector_year_date_format.png deleted file mode 100644 index bbafe15f4..000000000 Binary files a/chart-sdk/flutter/range-selector/images/label-and-divider/selector_year_date_format.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/overview/range-selector-overview.png b/chart-sdk/flutter/range-selector/images/overview/range-selector-overview.png deleted file mode 100644 index e99d56e5c..000000000 Binary files a/chart-sdk/flutter/range-selector/images/overview/range-selector-overview.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/range-controller/deferred-update.gif b/chart-sdk/flutter/range-selector/images/range-controller/deferred-update.gif deleted file mode 100644 index cc7c53f82..000000000 Binary files a/chart-sdk/flutter/range-selector/images/range-controller/deferred-update.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/range-controller/range-controller.png b/chart-sdk/flutter/range-selector/images/range-controller/range-controller.png deleted file mode 100644 index 31e468569..000000000 Binary files a/chart-sdk/flutter/range-selector/images/range-controller/range-controller.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/range-controller/selection-controller-with-sfchart.gif b/chart-sdk/flutter/range-selector/images/range-controller/selection-controller-with-sfchart.gif deleted file mode 100644 index 34754f5d6..000000000 Binary files a/chart-sdk/flutter/range-selector/images/range-controller/selection-controller-with-sfchart.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/range-controller/zooming-controller-with-sfchart.gif b/chart-sdk/flutter/range-selector/images/range-controller/zooming-controller-with-sfchart.gif deleted file mode 100644 index 603f3b5d5..000000000 Binary files a/chart-sdk/flutter/range-selector/images/range-controller/zooming-controller-with-sfchart.gif and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/right-to-left/right-to-left-support.png b/chart-sdk/flutter/range-selector/images/right-to-left/right-to-left-support.png deleted file mode 100644 index b88c1758a..000000000 Binary files a/chart-sdk/flutter/range-selector/images/right-to-left/right-to-left-support.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/shapes/divider-shape.png b/chart-sdk/flutter/range-selector/images/shapes/divider-shape.png deleted file mode 100644 index dc5801da5..000000000 Binary files a/chart-sdk/flutter/range-selector/images/shapes/divider-shape.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/shapes/thumb-shape.png b/chart-sdk/flutter/range-selector/images/shapes/thumb-shape.png deleted file mode 100644 index f542b6512..000000000 Binary files a/chart-sdk/flutter/range-selector/images/shapes/thumb-shape.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/shapes/ticks-shape.png b/chart-sdk/flutter/range-selector/images/shapes/ticks-shape.png deleted file mode 100644 index e7bb6f830..000000000 Binary files a/chart-sdk/flutter/range-selector/images/shapes/ticks-shape.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/shapes/track-shape.png b/chart-sdk/flutter/range-selector/images/shapes/track-shape.png deleted file mode 100644 index 36a2d230d..000000000 Binary files a/chart-sdk/flutter/range-selector/images/shapes/track-shape.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlap-stroke-color.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlap-stroke-color.png deleted file mode 100644 index 020aee314..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlap-stroke-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlay-color.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlay-color.png deleted file mode 100644 index c5b76d140..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlay-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlay-size.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlay-size.png deleted file mode 100644 index be4e8c599..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-overlay-size.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-color.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-color.png deleted file mode 100644 index 058a37088..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-icon.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-icon.png deleted file mode 100644 index 3c5a376e0..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-icon.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-size.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-size.png deleted file mode 100644 index 130f227d2..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-size.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-stroke-color.png b/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-stroke-color.png deleted file mode 100644 index e6152fb35..000000000 Binary files a/chart-sdk/flutter/range-selector/images/thumb-and-overlay/selector-thumb-stroke-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector-major-tick.png b/chart-sdk/flutter/range-selector/images/tick/selector-major-tick.png deleted file mode 100644 index 41e328d0b..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector-major-tick.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector-minor-tick.png b/chart-sdk/flutter/range-selector/images/tick/selector-minor-tick.png deleted file mode 100644 index 19d058ea3..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector-minor-tick.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector-ticks-customization.png b/chart-sdk/flutter/range-selector/images/tick/selector-ticks-customization.png deleted file mode 100644 index b6f478cbd..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector-ticks-customization.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector-ticks-offset.png b/chart-sdk/flutter/range-selector/images/tick/selector-ticks-offset.png deleted file mode 100644 index 2e9b2d2ff..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector-ticks-offset.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector-ticks-size.png b/chart-sdk/flutter/range-selector/images/tick/selector-ticks-size.png deleted file mode 100644 index 60669f5b5..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector-ticks-size.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector_major_tick.png b/chart-sdk/flutter/range-selector/images/tick/selector_major_tick.png deleted file mode 100644 index 2bea76998..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector_major_tick.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tick/selector_minor_tick.png b/chart-sdk/flutter/range-selector/images/tick/selector_minor_tick.png deleted file mode 100644 index 06a7ffabd..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tick/selector_minor_tick.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tooltip/selector-overlap-stroke-color.png b/chart-sdk/flutter/range-selector/images/tooltip/selector-overlap-stroke-color.png deleted file mode 100644 index bff102841..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tooltip/selector-overlap-stroke-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-color.png b/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-color.png deleted file mode 100644 index 52438d673..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-shape.png b/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-shape.png deleted file mode 100644 index 59c2d03e3..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-shape.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-style.png b/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-style.png deleted file mode 100644 index 8b6321a9e..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tooltip/selector-tooltip-style.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tooltip/selector_tooltip.png b/chart-sdk/flutter/range-selector/images/tooltip/selector_tooltip.png deleted file mode 100644 index 1ef95a6d6..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tooltip/selector_tooltip.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/tooltip/tooltip_format.png b/chart-sdk/flutter/range-selector/images/tooltip/tooltip_format.png deleted file mode 100644 index 68918be14..000000000 Binary files a/chart-sdk/flutter/range-selector/images/tooltip/tooltip_format.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/track/selector-track-color.png b/chart-sdk/flutter/range-selector/images/track/selector-track-color.png deleted file mode 100644 index a6bab2845..000000000 Binary files a/chart-sdk/flutter/range-selector/images/track/selector-track-color.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/track/selector-track-corner-radius.png b/chart-sdk/flutter/range-selector/images/track/selector-track-corner-radius.png deleted file mode 100644 index 2d6eea661..000000000 Binary files a/chart-sdk/flutter/range-selector/images/track/selector-track-corner-radius.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/images/track/selector-track-size.png b/chart-sdk/flutter/range-selector/images/track/selector-track-size.png deleted file mode 100644 index 43f50dd88..000000000 Binary files a/chart-sdk/flutter/range-selector/images/track/selector-track-size.png and /dev/null differ diff --git a/chart-sdk/flutter/range-selector/interval.md b/chart-sdk/flutter/range-selector/interval.md deleted file mode 100644 index cd5f75bbb..000000000 --- a/chart-sdk/flutter/range-selector/interval.md +++ /dev/null @@ -1,387 +0,0 @@ ---- -layout: post -title: Interval in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Interval feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Interval in Flutter Range Selector (SfRangeSelector) -This section explains about how to add the intervals for numeric and date range selector. - -## Numeric interval - -Range selector elements like labels, ticks and dividers are rendered based on the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) properties. The default value of the [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) property is `null` and it must be greater than 0. - -For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 2.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the labels, major ticks, and dividers at 2.0, 4.0 and so on. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showLabels: true, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Numeric interval](images/interval/numeric_interval.png) - -N> -* Refer the [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showDividers.html) to know about the rendering of dividers at given interval. -* Refer the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) to know about the rendering of major ticks at given interval. -* Refer the [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showLabels.html) to know about the rendering of labels at given interval. - -## Date interval - -The type of date interval can range from years to seconds. It is mandatory for date [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). The default value of [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html) property is `null`. - -For date values, the range selector does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for date values. - -For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is `DateTime(2002, 01, 01)` and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is `DateTime(2010, 01, 01)` and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is `2`, [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html) is `DateIntervalType.years`, [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) is `DateFormat.y()` then the range selector will render the labels, major ticks, and dividers at 2002, 2004, 2006 and so on. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Date interval](images/interval/date_interval.png) - -## Discrete selection for numeric values - -You can move the thumb in discrete manner for numeric values using the [`stepSize`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepSize.html) property in the range selector. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - stepSize: 1, - showLabels: true, - showTicks: true, - minorTicksPerInterval: 1, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Step size support](images/interval/selector-step-size-support.gif) - -## Discrete selection for date values - -You can move the thumb in discrete manner for date values based on the value provided in the [`stepDuration`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepDuration.html) property in the range selector. - -For example, if [min](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is DateTime(2015, 01, 01) and [max](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is DateTime(2020, 01, 01) and [stepDuration](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/stepDuration.html) is SliderDuration(years: 1, months: 6),the range selector will move the thumbs at DateTime(2015, 01, 01), DateTime(2016, 07, 01), DateTime(2018, 01, 01),and DateTime(2019, 07, 01). - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - stepDuration: SliderStepDuration(years: 2), - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Step duration support](images/interval/selector-step-duration-support.gif) - -## Enable interval selection - -You can select a particular interval by tapping when setting the [`enableIntervalSelection`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableIntervalSelection.html) property as `true`. Both the thumbs will be moved to the current interval with animation. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2004, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - enableIntervalSelection: true, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Interval selection support](images/interval/selector-interval-selection-support.gif) diff --git a/chart-sdk/flutter/range-selector/labels-and-divider.md b/chart-sdk/flutter/range-selector/labels-and-divider.md deleted file mode 100644 index e4e828631..000000000 --- a/chart-sdk/flutter/range-selector/labels-and-divider.md +++ /dev/null @@ -1,1171 +0,0 @@ ---- -layout: post -title: Labels in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Labels feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Labels in Flutter Range Selector (SfRangeSelector) -This section explains about how to add the labels and dividers in the range selector. - -## Show labels - -The [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showLabels.html) property is used to render the labels at given interval. The default value of [`showLabels`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showLabels.html) property is `false`. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(5.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Range selector labels](images/label-and-divider/selector_show_label.png) - -N> -* Refer the [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for formatting the numeric and date labels respectively. -* Refer the [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html) for customizing the appearance of the labels. - -## Number format - -The [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) property is used to format the numeric labels. The default value of [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) property is `null`. - -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting numeric range selector using the [`NumberFormat`](https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html) class. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.5, 8.5); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - numberFormat: NumberFormat("\$"), - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Number format support](images/label-and-divider/selector_number_format.png) - -## Date format - -The [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property is used to format the date labels. It is mandatory for date [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). For date values, the range selector does not have auto interval support. So, it is mandatory to set [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html), [`dateIntervalType`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateIntervalType.html), and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) for date values. The default value of [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property is `null`. - -N> You must import [`intl`](https://pub.dev/packages/intl) package for formatting date range selector using the [`DateFormat`](https://pub.dev/documentation/intl/latest/intl/DateFormat-class.html) class. - -### Year format - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2000, 01, 01); -final DateTime _max = DateTime(2008, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01), DateTime(2006, 01, 01)); - -final List _chartData = [ - Data(x: DateTime(2000, 01, 01), y: 2.2), - Data(x: DateTime(2001, 01, 01), y: 3.4), - Data(x: DateTime(2002, 01, 01), y: 2.8), - Data(x: DateTime(2003, 01, 01), y: 1.6), - Data(x: DateTime(2004, 01, 01), y: 2.3), - Data(x: DateTime(2005, 01, 01), y: 2.5), - Data(x: DateTime(2006, 01, 01), y: 2.9), - Data(x: DateTime(2007, 01, 01), y: 3.8), - Data(x: DateTime(2008, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat.y(), - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Year date format support](images/label-and-divider/selector_year_date_format.png) - -### Month format - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2000, 01, 01); -final DateTime _max = DateTime(2000, 09, 01); -SfRangeValues _values = SfRangeValues(DateTime(2000, 05, 01), DateTime(2000, 07, 01)); - -final List chartData = [ - Data(x: DateTime(2000, 01, 01), y: 2.2), - Data(x: DateTime(2000, 01, 01), y: 3.4), - Data(x: DateTime(2000, 01, 01), y: 2.8), - Data(x: DateTime(2000, 01, 01), y: 1.6), - Data(x: DateTime(2000, 01, 01), y: 2.3), - Data(x: DateTime(2000, 01, 01), y: 2.5), - Data(x: DateTime(2000, 01, 01), y: 2.9), - Data(x: DateTime(2000, 01, 01), y: 3.8), - Data(x: DateTime(2000, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat.yM(), - dateIntervalType: DateIntervalType.months, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Month date format support](images/label-and-divider/selector_month_date_format.png) - -### Hour format - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); -final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); - -final List _chartData = [ - Data(x: DateTime(2002, 01, 01, 09, 00, 00), y: 2.2), - Data(x: DateTime(2002, 01, 01, 10, 00, 00), y: 3.4), - Data(x: DateTime(2002, 01, 01, 11, 00, 00), y: 2.8), - Data(x: DateTime(2002, 01, 01, 12, 00, 00), y: 1.6), - Data(x: DateTime(2002, 01, 01, 13, 00, 00), y: 2.3), - Data(x: DateTime(2002, 01, 01, 14, 00, 00), y: 2.5), - Data(x: DateTime(2002, 01, 01, 15, 00, 00), y: 2.9), - Data(x: DateTime(2002, 01, 01, 16, 00, 00), y: 3.8), - Data(x: DateTime(2002, 01, 01, 17, 00, 00), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat('h:mm a'), - dateIntervalType: DateIntervalType.hours, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: _chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Hour date format support](images/label-and-divider/selector_hour_date_format.png) - -N> Refer the [`DateFormat`](https://api.flutter.dev/flutter/intl/DateFormat-class.html) class for other date format. - -## Label placement - -The [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/labelPlacement.html) property is used to place the labels either between the major ticks or on the major ticks. The default value of [`labelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/labelPlacement.html) property is `LabelPlacement.onTicks`. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 1, - dateFormat: DateFormat.y(), - labelPlacement: LabelPlacement.betweenTicks, - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Label placement support](images/label-and-divider/selector_label_placement.png) - -## Edge label placement - -The [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property determines how the edge (first and last) labels are positioned on the range selector. This property allows the edge labels to be placed either inside the major ticks or directly on the major ticks. - -The default value of [`edgeLabelPlacement`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/edgeLabelPlacement.html) property is `EdgeLabelPlacement.auto`. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01); -final DateTime _max = DateTime(2010, 01, 01); -SfRangeValues _values = SfRangeValues(DateTime(2005, 01, 01), DateTime(2008, 01, 01)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01), y: 2.2), - Data(x: DateTime(2003, 01, 01), y: 3.4), - Data(x: DateTime(2004, 01, 01), y: 2.8), - Data(x: DateTime(2005, 01, 01), y: 1.6), - Data(x: DateTime(2006, 01, 01), y: 2.3), - Data(x: DateTime(2007, 01, 01), y: 2.5), - Data(x: DateTime(2008, 01, 01), y: 2.9), - Data(x: DateTime(2009, 01, 01), y: 3.8), - Data(x: DateTime(2010, 01, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 1, - dateFormat: DateFormat.y(), - edgeLabelPlacement: EdgeLabelPlacement.inside, - dateIntervalType: DateIntervalType.years, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Edge Label placement support](images/label-and-divider/selector-edge-label-placement.png) - -## Customize label text - -You can format or change the whole numeric or date label text using the [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/labelFormatterCallback.html). Its arguments are, - -* **actualValue** – either `DateTime` or `double` based on given [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html). -* **formattedText** – If the actual value is `double`, it is formatted by [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). - ->**NOTE** -* [`labelFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/labelFormatterCallback.html) has been deprecated, you can use [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onLabelCreated.html) callback to customize both the text and text style of the label. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(100.0, 10000.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: 100.0, - max: 10000.0, - initialValues: _values, - showLabels: true, - interval: 9900, - labelFormatterCallback: (dynamic actualValue, String formattedText) { - return actualValue == 10000 ? '\$ $formattedText+' : '\$ $formattedText'; - }, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - ColumnSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Label formatter support](images/label-and-divider/selector_label_formatter.png) - -## Label style - -You can change the active and inactive label appearance of the range selector using the [`activeLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeLabelStyle.html) and [`inactiveLabelStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveLabelStyle.html) properties respectively. - -The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. - -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeLabelStyle: TextStyle(color: Colors.red, fontSize: 12, fontStyle: FontStyle.italic), - inactiveLabelStyle: TextStyle(color: Colors.red[200], fontSize: 12, fontStyle: FontStyle.italic), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Labels color support](images/label-and-divider/selector-labels-color.png) - -## Individual label style - -You can now customize the appearance of each label on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) individually by using the [`onLabelCreated`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onLabelCreated.html) callback. This callback allows you to have complete control over the text and text style for each label. - -{% tabs %} -{% highlight Dart %} - - final double _min = 2.0; - final double _max = 10.0; - SfRangeValues _values = const SfRangeValues(4.0, 8.0); - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _values, - onChanged: (dynamic value) { - setState(() { - _values = value; - }); - }, - onLabelCreated: ( - dynamic actualValue, - String text, - TextStyle labelTextStyle, - ) { - final int value = actualValue.toInt(); - final int start = _values.start.toInt(); - final int end = _values.end.toInt(); - return RangeSelectorLabel( - text: text, - textStyle: - (value == start || value == end) - ? const TextStyle( - color: Colors.blue, - fontSize: 14, - ) - : TextStyle( - color: Colors.red[200], - fontSize: 10, - ), - ); - }, - child: SizedBox( - height: 130, - child: SfCartesianChart( - margin: EdgeInsets.zero, - primaryXAxis: NumericAxis( - minimum: _min, - maximum: _max, - isVisible: false, - ), - primaryYAxis: const NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: const Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y, - ), - ], - ), - ), - ), - ), - ); - } - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Individual label style support](images/label-and-divider/selector-individual-label-color.png) - -## Label offset - -You can adjust the space between ticks and labels of the range selector using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property. - -The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property is `Offset(0.0, 13.0)` if the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `false`. -The default value of [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property is `Offset(0.0, 5.0)` if the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `true`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - labelOffset: Offset(0, 15), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showDividers: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Labels offset support](images/label-and-divider/selector-labels-offset.png) - -## Show dividers - -The [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showDividers.html) property is used to render the dividers on the track. The default value of [`showDividers`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showDividers.html) property is `false`. It is a shape which is used to represent the major interval points of the track. - -For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the dividers at 0.0, 2.0, 4.0 and so on. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Range selector dividers](images/label-and-divider/selector_show_divider.png) - -## Divider radius - -You can change the active and inactive divider radius of the range selector using the [`activeDividerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerRadius.html) and the [`inactiveDividerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerRadius.html) properties respectively. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerRadius: 5, - inactiveDividerRadius: 5 - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Divider radius support](images/label-and-divider/range-selector-divider-radius.png) - -## Divider stroke width and stroke color - -You can change the active and inactive divider stroke width of the range selector using the [`activeDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeWidth.html) and the [`inactiveDividerStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeWidth.html) properties respectively. - -Also, you can change the active and inactive divider stroke color of the range selector using the [`activeDividerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerStrokeColor.html) and the [`inactiveDividerStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerStrokeColor.html) properties respectively. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - activeDividerStrokeColor: Colors.red, - activeDividerStrokeWidth: 2, - inactiveDividerStrokeWidth: 2, - inactiveDividerStrokeColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Divider stroke width and color support](images/label-and-divider/range-selector-divider-stroke-color.png) - -## Divider color - -You can change the active and inactive divider color of the range selector using the [`activeDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/activeDividerColor.html) and [`inactiveDividerColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/inactiveDividerColor.html) properties respectively. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 5, - inactiveTrackHeight: 5, - activeDividerColor: Colors.red, - inactiveDividerColor: Colors.red[200], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showDividers: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Divider color support](images/label-and-divider/selector-divider-color.png) diff --git a/chart-sdk/flutter/range-selector/overview.md b/chart-sdk/flutter/range-selector/overview.md deleted file mode 100644 index c71c3ccc2..000000000 --- a/chart-sdk/flutter/range-selector/overview.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -layout: post -title: About Flutter Range Selector widget | Syncfusion -description: Learn here all about the introduction of Syncfusion Flutter Range Selector (SfRangeSelector) widget, its features, and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Flutter Range selector (SfRangeSelector) Overview - -Syncfusion® Flutter Range Selector is a highly interactive UI widget for selecting a smaller range from a larger data set. It provides a rich set of features such as numeric and date values, labels, ticks, dividers, and tooltips. It also supports adding any type of widget as content. - -![Range selector overview](images/overview/range-selector-overview.png) - -## Features - -* **Child support** - Add a child of any type inside the range selector. It is also possible to add [Charts](https://www.syncfusion.com/flutter-widgets/flutter-charts) widget. With the built-in integrations, the range selector is smart enough to handle features like segment selection and zooming in the chart based on the selected range in the range selector. Similar to the range slider, it also supports both numeric and date values. -* **Numeric and date support** - Provides functionality for selecting numeric and date ranges. For the date range, support is provided up to the seconds interval. -* **Labels** - Render labels for the date and numeric ranges with the option to customize their format based on your requirements. -* **Ticks and dividers** - Provides the option to show ticks and dividers based on the interval. Also enables minor ticks to indicate the values between each interval. These options present the selected range in a more intuitive way for end users. -* **Highly customizable** - In addition to the rich set of built-in features, fully customize the control in a much simpler way using the wide range of provided options. -* **Tooltips** - Render tooltips to show the selected range clearly. It is also possible to customize the format of the text shown in the tooltip. diff --git a/chart-sdk/flutter/range-selector/range-controller.md b/chart-sdk/flutter/range-selector/range-controller.md deleted file mode 100644 index 7eec4c073..000000000 --- a/chart-sdk/flutter/range-selector/range-controller.md +++ /dev/null @@ -1,486 +0,0 @@ ---- -layout: post -title: Controller in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Controller in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Controller in Flutter Range Selector (SfRangeSelector) - -You can use [`RangeController`](https://pub.dev/documentation/syncfusion_flutter_core/latest/core/RangeController-class.html) for setting and getting current selected values of range selector. - -The `start` represents the currently selected start value of the range selector. The left thumb of the range selector was drawn corresponding to this value. - -The `end` represents the currently selected end value of the range selector. The right thumb of the range selector was drawn corresponding to this value. - -You can get previous values using `previousStart` and `previousEnd` properties. - -The `start`, `end`, `previousStart`, `previousEnd` properties can be either `double` or `DateTime` based on whether it is date type [`SfRangeSelector`](https://help.syncfusion.com/flutter/range-selector/getting-started#set-date-range) or numeric [`SfRangeSelector`](https://help.syncfusion.com/flutter/range-selector/getting-started#set-numeric-range). - -I> You need not to set the [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html) property when using [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) property in the range selector. - -N> You must import the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) to use the range controller in the range selector. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 6.0); -RangeController _rangeController; - -@override -void initState() { - super.initState(); - _rangeController = RangeController( - start: _values.start, - end: _values.end); -} - -@override -void dispose() { - _rangeController.dispose(); - super.dispose(); -} - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - controller: _rangeController, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Range selector controller](images/range-controller/range-controller.png) - -## Selection with SfChart - -We have provided built-in support for selecting the chart segments based on the selected range in range selector. To achieve this segment selection, you must set the `SelectionSettings.selectionController` property in the `SfCartesianChart.series` property. - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _values = SfRangeValues(DateTime(2010, 03, 01), DateTime(2010, 06, 01)); -RangeController _rangeController; - -@override -void initState() { - super.initState(); - _rangeController = RangeController( - start: _values.start, - end: _values.end); -} - -@override -void dispose() { - _rangeController.dispose(); - super.dispose(); -} - -final List chartData = [ - Data(x: DateTime(2010, 01, 01), y: 2.2), - Data(x: DateTime(2010, 02, 01), y: 3.4), - Data(x: DateTime(2010, 03, 01), y: 2.8), - Data(x: DateTime(2010, 04, 01), y: 1.6), - Data(x: DateTime(2010, 05, 01), y: 2.3), - Data(x: DateTime(2010, 06, 01), y: 2.5), - Data(x: DateTime(2010, 07, 01), y: 2.9), - Data(x: DateTime(2010, 08, 01), y: 3.8), - Data(x: DateTime(2010, 09, 01), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRangeSelector( - min: DateTime(2010, 01, 01), - max: DateTime(2010, 09, 01), - interval: 2, - dateIntervalType: DateIntervalType.months, - dateFormat: DateFormat.yM(), - showTicks: true, - showLabels: true, - controller: _rangeController, - onChanged: (SfRangeValues values) { - setState(() {}); - }, - child: SizedBox( - height: 130, - child: SfCartesianChart( - margin: EdgeInsets.zero, - primaryXAxis: DateTimeAxis( - minimum: DateTime(2010, 01, 01), - maximum: DateTime(2010, 09, 01), - isVisible: false, - ), - primaryYAxis: const NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - plotAreaBackgroundColor: Colors.transparent, - series: >[ - ColumnSeries( - dataSource: chartData, - selectionBehavior: SelectionBehavior( - selectionController: _rangeController, - ), - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y, - pointColorMapper: (Data sales, int index) { - if (sales.x.isAfter(_rangeController.start) && - sales.x.isBefore(_rangeController.end)) { - return const Color.fromRGBO(0, 178, 206, 1); - } - return Colors.transparent; - }, - color: const Color.fromRGBO(255, 255, 255, 0), - dashArray: const [5, 4], - borderColor: const Color.fromRGBO(194, 194, 194, 1), - animationDuration: 0, - borderWidth: 1, - ), - ], - ), - ), - ), - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight Dart %} - -class Data { - Data({this.x, this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Selection support](images/range-controller/selection-controller-with-sfchart.gif) - -## Zooming with SfChart - -We have provided built-in support for updating the visible range of the chart based on the selected range in range selector. To update the visible range, you must set the `primaryYAxis.rangeController` property in the [`SfCartesianChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/SfCartesianChart-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 19.0; -SfRangeValues _values = SfRangeValues(8.0, 16.0); -RangeController _rangeController; -SfCartesianChart splineChart; - -@override -void initState() { - super.initState(); - _rangeController = RangeController(start: _values.start, end: _values.end); -} - -@override -void dispose() { - _rangeController.dispose(); - super.dispose(); -} - -final List chartData = [ - Data(x: 2.0, y: 2.2), - Data(x: 3.0, y: 3.4), - Data(x: 4.0, y: 2.8), - Data(x: 5.0, y: 1.6), - Data(x: 6.0, y: 2.3), - Data(x: 7.0, y: 2.5), - Data(x: 8.0, y: 2.9), - Data(x: 9.0, y: 3.8), - Data(x: 10.0, y: 3.7), - Data(x: 11.0, y: 2.2), - Data(x: 12.0, y: 3.4), - Data(x: 13.0, y: 2.8), - Data(x: 14.0, y: 1.6), - Data(x: 15.0, y: 2.3), - Data(x: 16.0, y: 2.5), - Data(x: 17.0, y: 2.9), - Data(x: 18.0, y: 3.8), - Data(x: 19.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - splineChart = SfCartesianChart( - margin: const EdgeInsets.only(left: 10, right: 10, bottom: 20), - primaryXAxis: NumericAxis( - minimum: _min, - maximum: _max, - isVisible: true, - rangeController: _rangeController), - primaryYAxis: NumericAxis(isVisible: true), - plotAreaBorderWidth: 0, - series: >[ - SplineSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - animationDuration: 0, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ); - - return Scaffold( - body: Center( - child: Padding( - padding: EdgeInsets.only(left: 10, right: 10, top: 80), - child: Column( - children: [ - Container( - child: splineChart, - ), - SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showTicks: true, - showLabels: true, - controller: _rangeController, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis( - minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ], - ), - ), - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Zooming support](images/range-controller/zooming-controller-with-sfchart.gif) - -## Deferred update - -You can control when the dependent components are updated while thumbs are being dragged continuously. It can be achieved by setting the [`SfRangeSelector.enableDeferredUpdate`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableDeferredUpdate.html) property and the delay in the update can be achieved by setting the [`SfRangeSelector.deferredUpdateDelay`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/deferredUpdateDelay.html) property. The default value of the [`deferredUpdateDelay`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/deferredUpdateDelay.html) property is `500 milliseconds`. - -It updates the [`controller`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/controller.html) start and end values and invoke the [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChanged.html) callback when the thumb is dragged and held for the duration specified in the [`deferredUpdateDelay`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/deferredUpdateDelay.html). However, range values are immediately updated in touch up action. - -{% tabs %} -{% highlight Dart %} - -final DateTime min = DateTime(2000, 01, 01, 0), max = DateTime(2000, 12, 15); -RangeController rangeController; -SfCartesianChart splineAreaChart, splineChart; -List data; - -@override -void initState() { - super.initState(); - rangeController = RangeController( - start: DateTime(2000, 04, 15), - end: DateTime(2000, 07, 15), - ); - - data = [ - Data(x: DateTime(2000, 01, 01, 0), y: 100), - Data(x: DateTime(2000, 01, 15), y: 10), - Data(x: DateTime(2000, 02, 01), y: 40), - Data(x: DateTime(2000, 02, 15), y: 34), - Data(x: DateTime(2000, 03, 01), y: 80), - Data(x: DateTime(2000, 03, 15), y: 49), - Data(x: DateTime(2000, 04, 01), y: 56), - Data(x: DateTime(2000, 04, 15), y: 26), - Data(x: DateTime(2000, 05, 01), y: 8), - Data(x: DateTime(2000, 05, 15), y: 80), - Data(x: DateTime(2000, 06, 01), y: 42), - Data(x: DateTime(2000, 06, 15), y: 12), - Data(x: DateTime(2000, 07, 01), y: 28), - Data(x: DateTime(2000, 07, 15), y: 68), - Data(x: DateTime(2000, 08, 01), y: 94), - Data(x: DateTime(2000, 08, 15), y: 24), - Data(x: DateTime(2000, 09, 01), y: 72), - Data(x: DateTime(2000, 09, 15), y: 32), - Data(x: DateTime(2000, 10, 01), y: 48), - Data(x: DateTime(2000, 10, 15), y: 4), - Data(x: DateTime(2000, 11, 01), y: 64), - Data(x: DateTime(2000, 11, 15), y: 10), - Data(x: DateTime(2000, 12, 01), y: 85), - Data(x: DateTime(2000, 12, 15), y: 96), - ]; - - splineAreaChart = SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis(isVisible: false, maximum: max), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - dataSource: data, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y, - ) - ], - ); -} - -@override -Widget build(BuildContext context) { - splineChart = SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: DateTimeAxis( - isVisible: false, - minimum: min, - maximum: max, - rangeController: rangeController), - primaryYAxis: NumericAxis( - labelPosition: ChartDataLabelPosition.inside, - labelAlignment: LabelAlignment.end, - majorTickLines: MajorTickLines(size: 0), - axisLine: AxisLine(color: Colors.transparent), - ), - series: >[ - SplineSeries( - dataSource: data, - animationDuration: 0, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y, - ) - ], - ); - final Widget page = Container( - margin: const EdgeInsets.all(0), - padding: const EdgeInsets.all(0), - child: Center( - child: Column( - children: [ - Expanded( - child: Container( - padding: const EdgeInsets.fromLTRB(5, 20, 15, 25), - child: splineChart), - ), - Container( - margin: const EdgeInsets.all(0), - padding: const EdgeInsets.all(0), - child: Center( - child: Padding( - padding: const EdgeInsets.fromLTRB(14, 0, 15, 15), - child: SfRangeSelector( - min: min, - max: max, - interval: 1, - enableDeferredUpdate: true, - deferredUpdateDelay: 500, - labelPlacement: LabelPlacement.betweenTicks, - dateIntervalType: DateIntervalType.months, - controller: rangeController, - showTicks: true, - showLabels: true, - dragMode: SliderDragMode.both, - labelFormatterCallback: - (dynamic actualLabel, String formattedText) { - String label = DateFormat.MMM().format(actualLabel); - label = label; - return label; - }, - onChanged: (SfRangeValues values) {}, - child: Container( - child: splineAreaChart, - height: 75, - padding: const EdgeInsets.all(0), - margin: const EdgeInsets.all(0), - ), - ), - ), - ), - ), - ], - ), - ) - ); - return Scaffold( - body: Center( - child: Container(height: 400, child: page), - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -![Deferred update support](images/range-controller/deferred-update.gif) diff --git a/chart-sdk/flutter/range-selector/right-to-left.md b/chart-sdk/flutter/range-selector/right-to-left.md deleted file mode 100644 index 6c685f622..000000000 --- a/chart-sdk/flutter/range-selector/right-to-left.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -layout: post -title: RTL in Flutter Range Selector widget | Syncfusion -description: Learn here all about the RTL rendering in Syncfusion Flutter Range Selector (SfRangeSelector) widget. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Right to Left (RTL) in Flutter Range Selector (SfRangeSelector) - -## RTL rendering ways - -Right to left rendering can be achieved in the following ways: - -### Wrapping the SfRangeSelector with Directionality widget - -The range selector 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`. - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Directionality( - textDirection: TextDirection.rtl, - child: Center( - child: SfRangeSelector( - min: 2.0, - max: 10.0, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _initialValues, - child: Container( - color: Colors.pink[200], - height: 150, - ), - ), - ) - ), - ) - ); -} - -{% endhighlight %} -{% endtabs %} - -### Changing the locale to RTL languages - -The range selector will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu. This can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file. - -{% tabs %} -{% highlight Dart %} - -dependencies: - flutter_localizations: - sdk: flutter - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight Dart %} - -SfRangeValues _initialValues = SfRangeValues(4.0, 8.0); - -@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: SfRangeSelector( - min: 2.0, - max: 10.0, - interval: 1, - showLabels: true, - showTicks: true, - initialValues: _initialValues, - child: Container( - color: Colors.pink[200], - height: 150, - ), - ), - ), - ); -} - -{% endhighlight %} -{% endtabs %} - -![RTL support](images/right-to-left/right-to-left-support.png) \ No newline at end of file diff --git a/chart-sdk/flutter/range-selector/shapes.md b/chart-sdk/flutter/range-selector/shapes.md deleted file mode 100644 index 0b5119ad8..000000000 --- a/chart-sdk/flutter/range-selector/shapes.md +++ /dev/null @@ -1,484 +0,0 @@ ---- -layout: post -title: Custom shapes in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the custom shapes in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Shapes in Flutter Range Selector (SfRangeSelector) - -This section helps to learn about how to customize the shapes of the range selector elements. - -## Track shape - -You can change the size and shape of the track using the [`trackShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/trackShape.html) property in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). - -* getPreferredSize() - Returns the size based on the values passed to it. -* paint() - Used to change the track shape. - -N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider track. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector track. - -{% tabs %} -{% highlight Dart %} - -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(3.0, 8.0); - - final List chartData = [ - Data(x: 2.0, y: 2.2), - Data(x: 3.0, y: 3.4), - Data(x: 4.0, y: 2.8), - Data(x: 5.0, y: 1.6), - Data(x: 6.0, y: 2.3), - Data(x: 7.0, y: 2.5), - Data(x: 8.0, y: 2.9), - Data(x: 9.0, y: 3.8), - Data(x: 10.0, y: 3.7), - ]; - -@override -Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - ), - child: SfRangeSelector( - min: 0.0, - max: 10.0, - initialValues: _values, - trackShape: _TrackShape(), - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: - NumericAxis(minimum: _min, maximum: _max, isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -class _TrackShape extends SfTrackShape { - void paint(PaintingContext context, Offset offset, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Animation enableAnimation, - required Paint? inactivePaint, - required Paint? activePaint, - required TextDirection textDirection}) { - Paint paint = Paint() - ..color = themeData.activeTrackColor! - ..style = PaintingStyle.stroke - ..strokeWidth = 1; - super.paint(context, offset, thumbCenter, startThumbCenter, endThumbCenter, - parentBox: parentBox, - themeData: themeData, - enableAnimation: enableAnimation, - inactivePaint: inactivePaint, - activePaint: paint, - textDirection: textDirection); - } -} - -{% endhighlight %} -{% endtabs %} - -![Track shape](images/shapes/track-shape.png) - -## Thumb shape - -You can change the size and shape of the thumb using the [`thumbShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/thumbShape.html) property in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). - -* getPreferredSize() - Returns the size based on the values passed to it. -* paint() - Used to change the thumb shape. - -N> -* You must use the `currentValue` parameter of paint override method for customizing slider thumb. -* You must use the `currentValues` parameter of paint override method for customizing range slider and range selector thumbs. - -{% tabs %} -{% highlight Dart %} - -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x: 2.0, y: 2.2), - Data(x: 3.0, y: 3.4), - Data(x: 4.0, y: 2.8), - Data(x: 5.0, y: 1.6), - Data(x: 6.0, y: 2.3), - Data(x: 7.0, y: 2.5), - Data(x: 8.0, y: 2.9), - Data(x: 9.0, y: 3.8), - Data(x: 10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData(overlayColor: Colors.transparent), - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _values, - thumbShape: _SfThumbShape(), - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis( - minimum: _min, maximum: _max, isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -class _SfThumbShape extends SfThumbShape { - @override - void paint(PaintingContext context, Offset center, - {required RenderBox parentBox, - required RenderBox? child, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Paint? paint, - required Animation enableAnimation, - required TextDirection textDirection, - required SfThumb? thumb}) { - final Path path = Path(); - - path.moveTo(center.dx, center.dy); - path.lineTo(center.dx + 10, center.dy - 15); - path.lineTo(center.dx - 10, center.dy - 15); - path.close(); - context.canvas.drawPath( - path, - Paint() - ..color = themeData.activeTrackColor! - ..style = PaintingStyle.fill - ..strokeWidth = 2); - } -} - -{% endhighlight %} -{% endtabs %} - -![Thumb shape](images/shapes/thumb-shape.png) - -## Divider shape - -You can change the size and shape of the divider using the [`dividerShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dividerShape.html) property in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). - -* getPreferredSize() - Returns the size based on the values passed to it. -* paint() - Used to change the divider shape. - -N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider divider. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector divider. - -{% tabs %} -{% highlight Dart %} - -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x: 2.0, y: 2.2), - Data(x: 3.0, y: 3.4), - Data(x: 4.0, y: 2.8), - Data(x: 5.0, y: 1.6), - Data(x: 6.0, y: 2.3), - Data(x: 7.0, y: 2.5), - Data(x: 8.0, y: 2.9), - Data(x: 9.0, y: 3.8), - Data(x: 10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _values, - interval: 1, - showDividers: true, - dividerShape: _DividerShape(), - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: - NumericAxis(minimum: _min, maximum: _max, isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -class _DividerShape extends SfDividerShape { - @override - void paint(PaintingContext context, Offset center, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Paint? paint, - required Animation enableAnimation, - required TextDirection textDirection}) { - final bool isActive = - center.dx >= startThumbCenter!.dx && center.dx <= endThumbCenter!.dx; - context.canvas.drawRect( - Rect.fromCenter(center: center, width: 5.0, height: 10.0), - Paint() - ..isAntiAlias = true - ..style = PaintingStyle.fill - ..color = isActive ? Colors.white : themeData.activeTrackColor!); - } -} - -{% endhighlight %} -{% endtabs %} - -![Divider shape](images/shapes/divider-shape.png) - -## Major and minor ticks shapes - -You can change the size and shape of the major and minor ticks using the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tickShape.html) and [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/minorTickShape.html) properties in the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html). - -* getPreferredSize() - Returns the size based on the values passed to it. -* paint() - Used to change the ticks shape. - -N> -* You must use the `thumbCenter` and `currentValue` parameters of paint override method for customizing slider ticks. -* You must use the `startThumbCenter`, `endThumbCenter`, and `currentValues` parameters of paint override method for customizing range slider and range selector ticks. - -{% tabs %} -{% highlight Dart %} - -double _min = 2.0; -double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x: 2.0, y: 2.2), - Data(x: 3.0, y: 3.4), - Data(x: 4.0, y: 2.8), - Data(x: 5.0, y: 1.6), - Data(x: 6.0, y: 2.3), - Data(x: 7.0, y: 2.5), - Data(x: 8.0, y: 2.9), - Data(x: 9.0, y: 3.8), - Data(x: 10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _values, - interval: 1, - showTicks: true, - minorTicksPerInterval: 3, - tickShape: _TickShape(), - minorTickShape: _MinorTickShape(), - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: - NumericAxis(minimum: _min, maximum: _max, isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ), - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -class _TickShape extends SfTickShape { - @override - void paint(PaintingContext context, Offset offset, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Animation enableAnimation, - required TextDirection textDirection}) { - final Size tickSize = getPreferredSize(themeData); - final bool isTickRightOfThumb = endThumbCenter == null - ? offset.dx > thumbCenter!.dx - : offset.dx < startThumbCenter!.dx || offset.dx > endThumbCenter.dx; - final Color begin = isTickRightOfThumb - ? themeData.disabledInactiveTickColor - : themeData.disabledActiveTickColor; - final Color end = isTickRightOfThumb - ? themeData.inactiveTickColor - : themeData.activeTickColor; - final Paint paint = Paint() - ..isAntiAlias = true - ..strokeWidth = tickSize.width - ..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!; - context.canvas.drawLine( - offset, Offset(offset.dx, offset.dy + tickSize.height), paint); - context.canvas.drawLine( - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight)), - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight) - - tickSize.height), - paint); - } -} - -class _MinorTickShape extends SfTickShape { - @override - void paint(PaintingContext context, Offset offset, Offset? thumbCenter, - Offset? startThumbCenter, Offset? endThumbCenter, - {required RenderBox parentBox, - required SfSliderThemeData themeData, - SfRangeValues? currentValues, - dynamic currentValue, - required Animation enableAnimation, - required TextDirection textDirection}) { - final Size minorTickSize = getPreferredSize(themeData); - final bool isMinorTickRightOfThumb = endThumbCenter == null - ? offset.dx > thumbCenter!.dx - : offset.dx < startThumbCenter!.dx || offset.dx > endThumbCenter.dx; - - final Color begin = isMinorTickRightOfThumb - ? themeData.disabledInactiveMinorTickColor - : themeData.disabledActiveMinorTickColor; - final Color end = isMinorTickRightOfThumb - ? themeData.inactiveMinorTickColor - : themeData.activeMinorTickColor; - final Paint paint = Paint() - ..isAntiAlias = true - ..strokeWidth = minorTickSize.width - ..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!; - context.canvas.drawLine( - offset, Offset(offset.dx, offset.dy + minorTickSize.height), paint); - context.canvas.drawLine( - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight)), - Offset( - offset.dx, - offset.dy - - 2 - - math.max(themeData.activeTrackHeight, - themeData.inactiveTrackHeight) - - minorTickSize.height), - paint); - } -} - -{% endhighlight %} -{% endtabs %} - -![Ticks shape](images/shapes/ticks-shape.png) \ No newline at end of file diff --git a/chart-sdk/flutter/range-selector/thumb-and-overlay.md b/chart-sdk/flutter/range-selector/thumb-and-overlay.md deleted file mode 100644 index f73e0c13a..000000000 --- a/chart-sdk/flutter/range-selector/thumb-and-overlay.md +++ /dev/null @@ -1,564 +0,0 @@ ---- -layout: post -title: Thumb in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the thumb and thumb overlay features in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Thumb and Thumb overlay in Flutter Range Selector (SfRangeSelector) - -This section helps to learn about how to customize the thumb and thumb overlay in the range selector. - -* **Thumb** - It is one of the elements of range selector which can be used to drag and change the selected values of the range selector. -* **Thumb overlay** - It is rendered around the thumb while interacting with them. - -## Thumb size - -You can change the size of the thumb in the range selector using the [`thumbRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbRadius.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbRadius: 13, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb size support](images/thumb-and-overlay/selector-thumb-size.png) - -## Thumb color - -You can change the color of the thumb in the range selector using the [`thumbColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb color support](images/thumb-and-overlay/selector-thumb-color.png) - -## Thumb stroke width and stroke color - -You can change the thumb stroke width using the [`thumbStrokeWidth`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbStrokeWidth.html) property and thumb stroke color using the [`thumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/thumbStrokeColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbStrokeWidth: 3, - thumbStrokeColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb stroke color support](images/thumb-and-overlay/selector-thumb-stroke-color.png) - -## Thumb icon - -You can show the custom widgets like icon or text inside the thumbs using the [`startThumbIcon`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/startThumbIcon.html) and the [`endThumbIcon`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/endThumbIcon.html) properties. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - thumbColor: Colors.white, - thumbRadius: 15, - thumbStrokeWidth: 2, - thumbStrokeColor: Colors.blue - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - startThumbIcon: Icon( - Icons.arrow_back_ios, - color: Colors.blue, - size: 20.0), - endThumbIcon: Icon( - Icons.arrow_forward_ios, - color: Colors.blue, - size: 20.0), - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb icon support](images/thumb-and-overlay/selector-thumb-icon.png) - -## Thumb overlay size - -You can change the size of the thumb overlay in the range selector using the [`overlayRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/overlayRadius.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlayRadius: 25, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb overlay size support](images/thumb-and-overlay/selector-overlay-size.png) - -## Thumb overlay color - -You can change the color of the thumb overlay in the range selector using the [`overlayColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/overlayColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlayColor: Colors.red[50], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb overlay color support](images/thumb-and-overlay/selector-overlay-color.png) - -## Thumb overlap stroke color - -You can change the overlap stroke color of the thumb in the range selector using the [`overlappingThumbStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlappingThumbStrokeColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlappingThumbStrokeColor: Colors.red, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Thumb overlap stroke color support](images/thumb-and-overlay/selector-overlap-stroke-color.png) diff --git a/chart-sdk/flutter/range-selector/ticks.md b/chart-sdk/flutter/range-selector/ticks.md deleted file mode 100644 index cca4a7385..000000000 --- a/chart-sdk/flutter/range-selector/ticks.md +++ /dev/null @@ -1,488 +0,0 @@ ---- -layout: post -title: Tick in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Ticks feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Ticks in Flutter Range Selector (SfRangeSelector) - -This section helps to learn about how to add major and minor ticks in the range selector. - -## Show major ticks - -You can enable the major ticks on the track. It is a shape which is used to represent the major interval points of the track. The default value of [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) property is `false`. - -For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the major ticks at 0.0, 2.0, 4.0 and so on. - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); -final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01, 09, 00, 00), y: 2.2), - Data(x: DateTime(2002, 01, 01, 10, 00, 00), y: 3.4), - Data(x: DateTime(2002, 01, 01, 11, 00, 00), y: 2.8), - Data(x: DateTime(2002, 01, 01, 12, 00, 00), y: 1.6), - Data(x: DateTime(2002, 01, 01, 13, 00, 00), y: 2.3), - Data(x: DateTime(2002, 01, 01, 14, 00, 00), y: 2.5), - Data(x: DateTime(2002, 01, 01, 15, 00, 00), y: 2.9), - Data(x: DateTime(2002, 01, 01, 16, 00, 00), y: 3.8), - Data(x: DateTime(2002, 01, 01, 17, 00, 00), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Major tick support](images/tick/selector_major_tick.png) - -N> Refer the [`tickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tickShape.html) and [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html) for customizing the major tick's visual appearance. - -## Show minor ticks - -It represents the number of smaller ticks between two major ticks. For example, if [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) is 0.0 and [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) is 10.0 and [`interval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/interval.html) is 2.0, the range selector will render the major ticks at 0.0, 2.0, 4.0 and so on. If [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/minorTicksPerInterval.html) is 1, then smaller ticks will be rendered on 1.0 and 3.0 and so on. - -I> The default value of [`minorTicksPerInterval`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/minorTicksPerInterval.html) property is `null` and it must be greater than 0. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showLabels: true, - showTicks: true, - minorTicksPerInterval: 1, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Minor tick support](images/tick/selector_minor_tick.png) - -N> -* Refer the [`showTicks`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/showTicks.html) to know about the rendering of major ticks at given interval. -* Refer the [`minorTickShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/minorTickShape.html) and [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html) for customizing the minor tick's visual appearance. - -## Major ticks color - -You can change the active and inactive major ticks color of the range selector using the [`activeTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTickColor.html) and [`inactiveTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTickColor.html) properties respectively. - -The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. - -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTickColor: Colors.red, - inactiveTickColor: Colors.red[100], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Major ticks support](images/tick/selector-major-tick.png) - -## Minor ticks color - -You can change the active and inactive minor ticks color of the range selector using the [`activeMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeMinorTickColor.html) and [`inactiveMinorTickColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveMinorTickColor.html) properties respectively. - -The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. - -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeMinorTickColor: Colors.red, - inactiveMinorTickColor: Colors.red[200], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Minor ticks support](images/tick/selector-minor-tick.png) - -## Ticks size - -You can change the major and minor ticks size of the range selector using the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickSize.html) and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/minorTickSize.html) properties respectively. The default value of the [`tickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickSize.html) property is `Size(1.0, 8.0)` and [`minorTickSize`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/minorTickSize.html) property is `Size(1.0, 5.0)`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tickSize: Size(3.0, 12.0), - minorTickSize: Size(3.0, 8.0), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Ticks size support](images/tick/selector-ticks-size.png) - -## Ticks offset - -You can adjust the space between track and ticks of the range selector using the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickOffset.html) property in the [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html). The default value of the [`tickOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tickOffset.html) property is `null`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tickOffset: Offset(0.0, 10.0), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - minorTicksPerInterval: 1, - showTicks: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Ticks offset support](images/tick/selector-ticks-offset.png) diff --git a/chart-sdk/flutter/range-selector/tooltip.md b/chart-sdk/flutter/range-selector/tooltip.md deleted file mode 100644 index 70ee8a423..000000000 --- a/chart-sdk/flutter/range-selector/tooltip.md +++ /dev/null @@ -1,477 +0,0 @@ ---- -layout: post -title: Tooltip in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Tooltip feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Tooltip in Flutter Range Selector (SfRangeSelector) - -This section helps to learn about how to add tooltip in the range selector. - -## Enable tooltips - -You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). - -I> By setting the value of [`shouldAlwaysShowTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/shouldAlwaysShowTooltip.html) to true, you can always show a tooltip without having to interact with the range selector thumb. The default value is `false` and it works independent of the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html) behavior. - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 2, - showLabels: true, - showTicks: true, - enableTooltip: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Tooltip support](images/tooltip/selector_tooltip.png) - -N> -* Refer the [`tooltipTextFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipTextFormatterCallback.html) for changing the default tooltip text. -* Refer the [`SfRangeSelectorThemeData`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData-class.html) for customizing the appearance of the tooltip text. - -## Tooltip shape - -You can show tooltip in rectangular or paddle shape using the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipShape.html) property. The default value of the [`tooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipShape.html) property is [`SfRectangularTooltipShape`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRectangularTooltipShape-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x: 2.0, y: 2.2), - Data(x: 3.0, y: 3.4), - Data(x: 4.0, y: 2.8), - Data(x: 5.0, y: 1.6), - Data(x: 6.0, y: 2.3), - Data(x: 7.0, y: 2.5), - Data(x: 8.0, y: 2.9), - Data(x: 9.0, y: 3.8), - Data(x: 10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - showLabels: true, - showTicks: true, - enableTooltip: true, - tooltipShape: SfPaddleTooltipShape(), - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Range selector tooltip shape](images/tooltip/selector-tooltip-shape.png) - -## Tooltip text format - -By default it is formatted based on [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) property and [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html) property based on whether it is date type [`SfRangeSelector`](https://help.syncfusion.com/flutter/range-selector/getting-started#set-date-range) or numeric [`SfRangeSelector`](https://help.syncfusion.com/flutter/range-selector/getting-started#set-numeric-range). - -You can format or change the whole tooltip label text using the [`tooltipTextFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/tooltipTextFormatterCallback.html). Its arguments are, - -* **actualValue** – either `DateTime` or `double` based on given [`initialValues`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/initialValues.html). -* **formattedText** – If the actual value is `double`, it is formatted by [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) and if the actual value is `DateTime`, it is formatted by [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html). - -{% tabs %} -{% highlight Dart %} - -final DateTime _min = DateTime(2002, 01, 01, 09, 00, 00); -final DateTime _max = DateTime(2002, 01, 01, 17, 00, 00); -SfRangeValues _values = SfRangeValues(DateTime(2002, 01, 01, 11, 00, 00), DateTime(2002, 01, 01, 15, 00, 00)); - -final List chartData = [ - Data(x: DateTime(2002, 01, 01, 09, 00, 00), y: 2.2), - Data(x: DateTime(2002, 01, 01, 10, 00, 00), y: 3.4), - Data(x: DateTime(2002, 01, 01, 11, 00, 00), y: 2.8), - Data(x: DateTime(2002, 01, 01, 12, 00, 00), y: 1.6), - Data(x: DateTime(2002, 01, 01, 13, 00, 00), y: 2.3), - Data(x: DateTime(2002, 01, 01, 14, 00, 00), y: 2.5), - Data(x: DateTime(2002, 01, 01, 15, 00, 00), y: 2.9), - Data(x: DateTime(2002, 01, 01, 16, 00, 00), y: 3.8), - Data(x: DateTime(2002, 01, 01, 17, 00, 00), y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelector( - min: _min, - max: _max, - showLabels: true, - showTicks: true, - interval: 2, - dateFormat: DateFormat('h:mm'), - dateIntervalType: DateIntervalType.hours, - enableTooltip: true, - tooltipTextFormatterCallback: (dynamic actualValue, String formattedText) { - return DateFormat('h:mm a').format(actualValue); - }, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: DateTimeAxis( - minimum: _min, - maximum: _max, - isVisible: false,), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final DateTime x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Tooltip format support](images/tooltip/tooltip_format.png) - -## Tooltip color - -You can change the background color of the tooltip in the range selector using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipBackgroundColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tooltipBackgroundColor: Colors.red[300], - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - enableTooltip: true, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Tooltip color support](images/tooltip/selector-tooltip-color.png) - -## Tooltip label style - -You can change the appearance of the tooltip text in the range selector using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipTextStyle.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - tooltipTextStyle: TextStyle(color: Colors.red, fontSize: 16, fontStyle: FontStyle.italic), - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - enableTooltip: true, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Tooltip style support](images/tooltip/selector-tooltip-style.png) - -## Tooltip overlap stroke color - -You can change the overlap stroke color of the tooltip in the range selector using the [`overlappingTooltipStrokeColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/overlappingTooltipStrokeColor.html) property. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 8.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - overlappingTooltipStrokeColor: Colors.white, - ), - child: SfRangeSelector( - min: _min, - max: _max, - interval: 1, - enableTooltip: true, - showTicks: true, - showLabels: true, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Tooltip overlap support](images/tooltip/selector-overlap-stroke-color.png) diff --git a/chart-sdk/flutter/range-selector/track.md b/chart-sdk/flutter/range-selector/track.md deleted file mode 100644 index d953ed221..000000000 --- a/chart-sdk/flutter/range-selector/track.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -layout: post -title: Track in Flutter Range Selector widget | Syncfusion -description: Learn here all about adding the Track feature in Syncfusion Flutter Range Selector (SfRangeSelector) widget and more. -platform: chart-sdk -control: SfRangeSelector -documentation: ug ---- - -# Track in Flutter Range Selector (SfRangeSelector) - -This section helps to learn about how to customize the track in the range selector. - -## Track color - -You can change the active and inactive track color of the range selector using the [`activeTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTrackColor.html) and [`inactiveTrackColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTrackColor.html) properties respectively. - -The active side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between start and end thumbs. - -The inactive side of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) is between the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value and the left thumb, and the right thumb and the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value. - -For RTL, the inactive side is between the [`max`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/max.html) value and the left thumb, and the right thumb and the [`min`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/min.html) value. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackColor: Colors.red, - inactiveTrackColor: Colors.red[100], - ), - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Track color support](images/track/selector-track-color.png) - -## Track height - -You can change the track height of the range selector using the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTrackHeight.html) properties. The default value of the [`activeTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/activeTrackHeight.html) and the [`inactiveTrackHeight`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/inactiveTrackHeight.html) properties are `6.0` and `4.0`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 8, - inactiveTrackHeight: 8, - ), - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Track size support](images/track/selector-track-size.png) - -## Track corner radius - -You can change the corner of the track to be round in the range selector using the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/trackCornerRadius.html) property. The default value of the [`trackCornerRadius`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/trackCornerRadius.html) property is `1.0`. - -N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html). - -{% tabs %} -{% highlight Dart %} - -final double _min = 2.0; -final double _max = 10.0; -SfRangeValues _values = SfRangeValues(4.0, 7.0); - -final List chartData = [ - Data(x:2.0, y: 2.2), - Data(x:3.0, y: 3.4), - Data(x:4.0, y: 2.8), - Data(x:5.0, y: 1.6), - Data(x:6.0, y: 2.3), - Data(x:7.0, y: 2.5), - Data(x:8.0, y: 2.9), - Data(x:9.0, y: 3.8), - Data(x:10.0, y: 3.7), -]; - -@override -Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: SfRangeSelectorTheme( - data: SfRangeSelectorThemeData( - activeTrackHeight: 10, - inactiveTrackHeight: 10, - trackCornerRadius: 5, - ), - child: SfRangeSelector( - min: _min, - max: _max, - initialValues: _values, - child: Container( - height: 130, - child: SfCartesianChart( - margin: const EdgeInsets.all(0), - primaryXAxis: NumericAxis(minimum: _min, - maximum: _max, - isVisible: false), - primaryYAxis: NumericAxis(isVisible: false), - plotAreaBorderWidth: 0, - series: >[ - SplineAreaSeries( - color: Color.fromARGB(255, 126, 184, 253), - dataSource: chartData, - xValueMapper: (Data sales, int index) => sales.x, - yValueMapper: (Data sales, int index) => sales.y) - ], - ), - ), - ), - ), - ) - ) - ); -} - -class Data { - Data({required this.x, required this.y}); - final double x; - final double y; -} - -{% endhighlight %} -{% endtabs %} - -![Track corner radius support](images/track/selector-track-corner-radius.png) diff --git a/chart-sdk/flutter/sparkcharts/accessibility.md b/chart-sdk/flutter/sparkcharts/accessibility.md new file mode 100644 index 000000000..6092a50ec --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/accessibility.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Accessibility in Flutter Spark Chart | Syncfusion® +description: The accessibility support in Flutter Spark Chart offers sufficient contrast and large font options, improving readability for all users. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# Accessibility in Flutter Spark Chart + +## Sufficient contrast + +The Syncfusion® Flutter Spark/Micro charts widget [`theming`](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements. + +The colors can be customized for the following chart elements. +* [Axis](https://help.syncfusion.com/flutter/sparkcharts/axis-types) +* [Chart types](https://help.syncfusion.com/flutter/sparkcharts/sparkcharts-types) +* [Special points](https://help.syncfusion.com/flutter/sparkcharts/sparkcharts-types#winloss-sparkline-chart) +* [Plot band](https://help.syncfusion.com/flutter/sparkcharts/plotband) +* [Trackball](https://help.syncfusion.com/flutter/sparkcharts/trackball) +* [Marker](https://help.syncfusion.com/flutter/sparkcharts/marker-datalabel) +* [Data label](https://help.syncfusion.com/flutter/sparkcharts/marker-datalabel) + +## Large fonts + +The Syncfusion® Flutter Spark/Micro charts widget font size can be adjusted automatically based on device settings and scaled using the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all elements in Spark chart. +* [Data label](https://help.syncfusion.com/flutter/sparkcharts/marker-datalabel#data-label) +* [Trackball tooltip](https://help.syncfusion.com/flutter/sparkcharts/trackball) \ No newline at end of file diff --git a/chart-sdk/flutter/sparkcharts/axis-types.md b/chart-sdk/flutter/sparkcharts/axis-types.md new file mode 100644 index 000000000..920be6fcf --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/axis-types.md @@ -0,0 +1,212 @@ +--- +layout: post +title: Axis types in Flutter Spark Chart | Syncfusion® +description: The axis types support in Flutter Spark Chart offers numeric, datetime, and category axes, enabling accurate visualization of diverse data formats. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# Axis types in Flutter Spark Chart + +Charts typically have two axes that are used to measure and categorize data: a vertical (Y) axis and a horizontal (X) axis. + +The vertical (Y) axis always uses a numerical scale. The horizontal (X) axis supports the following types of scale: + +* Category +* Numeric +* Date-time + + +## Numeric axis + +To use numeric values or to bind a custom data source, use the [`SfSparkBarChart.custom()`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/SfSparkBarChart.custom.html) method and map the x and y values to [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartIndexedValueMapper.html) and [`yValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartIndexedValueMapper.html) respectively. You must also specify the data length using the [`dataCount`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/SfSparkLineChart.custom.html) property. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(5), + child: SfSparkBarChart.custom( + axisLineWidth: 0, + dataCount: 7, + xValueMapper: (index) => data[index].xval, + yValueMapper: (index) => data[index].yval, + ) + ), + ); + } + + final List data = [ + ChartData(xval: 1, yval: 190), + ChartData(xval: 2, yval: 165), + ChartData(xval: 3, yval: 158), + ChartData(xval: 4, yval: 175), + ChartData(xval: 5, yval: 200), + ChartData(xval: 6, yval: 180), + ChartData(xval: 7, yval: 210), + ]; + + class ChartData { + ChartData({this.xval, this.yval}); + final double xval; + final double yval; + } + +{% endhighlight %} +{% endtabs %} + +![numeric Axis](images/axis-types/numeric.jpg) + +## Date-time axis + +To use date-time values or bind a custom data source, use the [`SfSparkBarChart.custom()`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/SfSparkBarChart.custom.html) method and map the x and y values to [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartIndexedValueMapper.html) and [`yValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartIndexedValueMapper.html) respectively. You must also specify the data length using the [`dataCount`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/SfSparkBarChart.custom.html) property. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(5), + child: SfSparkBarChart.custom( + axisLineWidth: 0, + dataCount: 23, + xValueMapper: (index) => data[index].xval, + yValueMapper: (index) => data[index].yval, + ) + ), + ); + } + final List data = [ + ChartData(xval: DateTime(2018, 0, 1), yval: 4), + ChartData(xval: DateTime(2018, 0, 2), yval: 4.5), + ChartData(xval: DateTime(2018, 0, 3), yval: 8), + ChartData(xval: DateTime(2018, 0, 4), yval: 7), + ChartData(xval: DateTime(2018, 0, 5), yval: 6), + ChartData(xval: DateTime(2018, 0, 8), yval: 8), + ChartData(xval: DateTime(2018, 0, 9), yval: 8), + ChartData(xval: DateTime(2018, 0, 10), yval: 6.5), + ChartData(xval: DateTime(2018, 0, 11), yval: 4), + ChartData(xval: DateTime(2018, 0, 12), yval: 5.5), + ChartData(xval: DateTime(2018, 0, 15), yval: 8), + ChartData(xval: DateTime(2018, 0, 16), yval: 6), + ChartData(xval: DateTime(2018, 0, 17), yval: 6.5), + ChartData(xval: DateTime(2018, 0, 18), yval: 7.5), + ChartData(xval: DateTime(2018, 0, 19), yval: 7.5), + ChartData(xval: DateTime(2018, 0, 22), yval: 4), + ChartData(xval: DateTime(2018, 0, 23), yval: 8), + ChartData(xval: DateTime(2018, 0, 24), yval: 6), + ChartData(xval: DateTime(2018, 0, 25), yval: 7.5), + ChartData(xval: DateTime(2018, 0, 26), yval: 4.5), + ChartData(xval: DateTime(2018, 0, 29), yval: 6), + ChartData(xval: DateTime(2018, 0, 30), yval: 5), + ChartData(xval: DateTime(2018, 0, 31), yval: 7), + ]; + + class ChartData { + ChartData({this.xval, this.yval}); + final DateTime xval; + final double yval; + } + +{% endhighlight %} +{% endtabs %} + +![Datetime Axis](images/axis-types/datetime.jpg) + +## Category Axis + +To use category values or bind a custom data source, use the [`SfSparkBarChart.custom()`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/SfSparkBarChart.custom.html) method and map the x and y values to [`xValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartIndexedValueMapper.html) and [`yValueMapper`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartIndexedValueMapper.html) respectively. You must also specify the data length using the [`dataCount`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/SfSparkBarChart.custom.html) property. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(5), + child: SfSparkLineChart.custom( + axisLineWidth: 0, + dataCount: 12, + xValueMapper: (index) => data[index].xval, + yValueMapper: (index) => data[index].yval, + ) + ), + ); + } + final List data = [ + ChartData(xval: 'Robert', yval: 60), + ChartData(xval: 'Andrew', yval: 65), + ChartData(xval: 'Suyama', yval: 70), + ChartData(xval: 'Michael', yval: 80), + ChartData(xval: 'Janet', yval: 55), + ChartData(xval: 'Davolio', yval: 90), + ChartData(xval: 'Fuller', yval: 75), + ChartData(xval: 'Nancy', yval: 85), + ChartData(xval: 'Margaret', yval: 77), + ChartData(xval: 'Steven', yval: 68), + ChartData(xval: 'Laura', yval: 96), + ChartData(xval: 'Elizabeth', yval: 57) + ]; + + class ChartData { + ChartData({this.xval, this.yval}); + final String xval; + final double yval; + } + +{% endhighlight %} +{% endtabs %} + +![category Axis](images/axis-types/category.jpg) + +### Axis line customization + +Axis line of the spark charts can be customized using the following properties. + +* [`axisCrossesAt`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisCrossesAt.html) - Specifies the horizontal axis line position. The default value is `0`. +* [`axisLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisLineColor.html) - Specifies the color of the axis line. +* [`axisLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisLineWidth.html) - Specifies the width of the axis line. +* [`axisLineDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisLineDashArray.html) - Specifies the axis line dash array. + + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Padding( + padding: EdgeInsets.all(5), + child: SfSparkLineChart.custom( + axisLineWidth: 2, + axisLineDashArray: [5,3], + axisCrossesAt: 174, + dataCount: 7, + xValueMapper: (index) => data[index].xval, + yValueMapper: (index) => data[index].yval, + ) + ), + ); + } + + final List data = [ + ChartData(xval: 1, yval: 190), + ChartData(xval: 2, yval: 165), + ChartData(xval: 3, yval: 158), + ChartData(xval: 4, yval: 175), + ChartData(xval: 5, yval: 200), + ChartData(xval: 6, yval: 180), + ChartData(xval: 7, yval: 210), + ]; + +{% endhighlight %} +{% endtabs %} + +![Axis customization](images/axis-types/axis-customization.jpg) \ No newline at end of file diff --git a/chart-sdk/flutter/sparkcharts/getting-started.md b/chart-sdk/flutter/sparkcharts/getting-started.md new file mode 100644 index 000000000..0691d86b6 --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/getting-started.md @@ -0,0 +1,198 @@ +--- +layout: post +title: Getting Started with Flutter Spark Chart | Syncfusion® +description: Learn how to get started with the Syncfusion® Flutter Spark Charts widget, its elements, and customization options. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# Getting Started with Flutter Spark Chart + +This section explains the steps required to populate the spark charts with data, data labels, and trackball. It covers only the minimal features needed to get started with spark charts. + +## Add Flutter Spark charts to an application + +Create a new Flutter project by following the instructions in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation. + +**Add dependency** + +Add the Syncfusion® Flutter Charts package dependency to your pubspec.yaml file. + +{% tabs %} +{% highlight dart %} + + dependencies: + + syncfusion_flutter_charts: ^xx.x.xx + +{% endhighlight %} +{% endtabs %} + +> **NOTE** +Here **xx.x.xx** denotes the current version of [`Syncfusion® Flutter Charts`](https://pub.dev/packages/syncfusion_flutter_charts/versions) package. + +**Get packages** + +Run the following command to get the required packages. + +{% tabs %} +{% highlight dart %} + + $ flutter pub get + +{% endhighlight %} +{% endtabs %} + +**Import package** + +Import the following package in your Dart code. + +{% tabs %} +{% highlight dart %} + + import 'package:syncfusion_flutter_charts/sparkcharts.dart'; + +{% endhighlight %} +{% endtabs %} + +## Initialize spark charts + +Once the package has been imported, place the spark chart as a child of any widget. Here, as we are rendering a line chart, initialize [`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html) as a child of the `Container` widget. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + //Initialize the spark charts + child: SfSparkLineChart() + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +## Bind data source + +Use the `data` property to bind data to the spark charts. This property accepts a list of numeric values. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + //Initialize the spark line chart + child: SfSparkLineChart( + data: [ + 10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10 + ] + ) + ), + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![bind datasource](images/getting-started/bind-data.png) + +## Spark charts types + +You can use the following widgets to create spark charts: [`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html), [`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html), [`SfSparkBarChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart-class.html), or [`SfSparkWinLossChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html). + +In this example, the spark chart type is set to [`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html). + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + //Initialize the spark area chart + child: SfSparkAreaChart( + axisLineWidth:0, + data: [ + 10, + ) + ), + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![chart type](images/getting-started/sparkline-type.png) + +## Enable data labels + +You can add data labels to improve chart readability by using the [`labelDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/labelDisplayMode.html) property. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + //Initialize spark line chart + child: SfSparthe spark line chart + child: SfSparkLineChart( + //Enable data labels + labelDisplayMode: SparkChartLabelDisplayMode.all, + data: [ + 10, + ) + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![datalabel](images/getting-started/sparkline-datalabel.png) + +## Enable trackball for spark chart + +The spark charts display additional information through trackball when you tap a specific location in the chart area. You can enable the trackball by setting the [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/trackball.html) property to [`SparkChartTrackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball-class.html). Once it is activated, it appears in the UI and moves based on your touch movement until you stop touching the chart. +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Container( + child: SfSparkLineChart( + //Enable trackball + trackball: SparkChartTrackball( + activationMode: SparkChartActivationMode.tap + ), + data: [ + 10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10 + ] + ) + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![trackball](images/getting-started/sparkline-trackball.png) \ No newline at end of file diff --git a/chart-sdk/flutter/sparkcharts/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/sparkcharts/how-to/custom-widget-on-flutterflow.md new file mode 100644 index 000000000..5da78c2e3 --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/how-to/custom-widget-on-flutterflow.md @@ -0,0 +1,75 @@ +--- +layout: post +title: How to add Syncfusion® Spark Chart in FlutterFlow | Syncfusion® +description: Add Syncfusion® Flutter Spark Chart in FlutterFlow to create compact, interactive charts that visualize trends and data patterns with ease. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# How to add Syncfusion® Spark Chart in FlutterFlow + +## Overview + +[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. It also lets you include custom widgets that are not part of the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate the `SfSparkLineChart` widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard). + +### Create a new project + +Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) and click the `+ Create New` button to create a new project. + +### Creating the custom widget + +1. Navigate to the `Custom Code` section in the left-side navigation menu. +2. Click the `+ Add` button to open a dropdown menu, then select `Widget`. +3. Update the widget name as desired. +4. Click the `View Boilerplate Code` button on the right side, represented by the `[]` icon. +5. A popup appears with the startup code; locate the ` Copy to Editor` button and click it. +6. Save the widget. + +![Custom Widget](how-to-section-images/custom-widget.png) + +### Add Spark Chart widget as a dependency + +1. Click `+ Add Dependency`; a text editor appears. +2. Navigate to [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option. +![Version](how-to-section-images/copy-version.png) +3. Paste the copied dependency into the text editor, then click `Refresh` and `Save`. + +>**Note**: The live version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) has been migrated to the latest version of Flutter SDK. To ensure compatibility, check [FlutterFlow](https://app.flutterflow.io/dashboard)'s current Flutter version and obtain the corresponding version of [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) by referring to the [SDK compatibility](https://help.syncfusion.com/flutter/system-requirements#sdk-version-compatibility). + +![Dependency](how-to-section-images/dependency.png) + +>**Note**: If you are using an older version of a dependency instead of the latest one, remove the caret symbol (^) prefix in the version number after pasting the dependency. For example, change `^21.3.0` to `21.3.0`. + +>**Note**: Since [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) depends on the [Syncfusion® Flutter Core](https://pub.dev/packages/syncfusion_flutter_core) package, make sure to add it as a dependency following the same steps mentioned above. + +### Import the package + +1. Navigate to the `Installing` tab on the [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) page. Under the `Import it` section, copy the package import statement. +![Package](how-to-section-images/copy-package.png) +2. Paste the copied import statement into the code editor and then `Save` it. +![Import](how-to-section-images/import-package-flutterflow.png) + +### Add widget code snippet in code editor + +1. Navigate to the [Example](https://pub.dev/packages/syncfusion_flutter_charts/example) tab in [Syncfusion® Flutter Charts](https://pub.dev/packages/syncfusion_flutter_charts) and copy the widget-specific code. +![Code](how-to-section-images/code-snippet.png) +2. Paste the copied code sample into the code editor, click `Format Code`, and `Save` it. +![Code snippet](how-to-section-images/Adding-code-snippent.png) + +### Compile the code + +1. Click the `Compile Code` button in the top-right corner. +2. If there are no errors, save the process. If errors are present, fix them and compile the code again. Once the code compiles successfully, save the process. + +![Compile code](how-to-section-images/compile-code.png) + +>**Note**: The compilation process takes 2 to 3 minutes to complete. + +### Utilize the custom widget + +1. Navigate to `Widget Palette` in the left-side navigation menu. +2. Click the `Components` tab. +3. Your custom widget appears under `Custom Code Widgets`. Drag and drop it onto your page. + +![Page](how-to-section-images/page.png) diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/Adding-code-snippent.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/Adding-code-snippent.png new file mode 100644 index 000000000..36ea9d523 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/Adding-code-snippent.png differ diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/code-snippet.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/code-snippet.png new file mode 100644 index 000000000..7d020fa5e Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/code-snippet.png differ diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/compile-code.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/compile-code.png new file mode 100644 index 000000000..b88fd7d54 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/compile-code.png differ diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/copy-package.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/copy-package.png new file mode 100644 index 000000000..3a16a7a61 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/copy-package.png differ diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/copy-version.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/copy-version.png new file mode 100644 index 000000000..3078a61b0 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/copy-version.png differ diff --git a/chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/custom-widget.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/custom-widget.png similarity index 100% rename from chart-sdk/flutter/3d-circular-charts/how-to/how-to-section-images/custom-widget.png rename to chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/custom-widget.png diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/dependency.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/dependency.png new file mode 100644 index 000000000..9e42ae589 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/dependency.png differ diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/import-package-flutterflow.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/import-package-flutterflow.png new file mode 100644 index 000000000..13c07216c Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/import-package-flutterflow.png differ diff --git a/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/page.png b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/page.png new file mode 100644 index 000000000..a1062e231 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/how-to/how-to-section-images/page.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/axis-types/axis-customization.jpg b/chart-sdk/flutter/sparkcharts/images/axis-types/axis-customization.jpg new file mode 100644 index 000000000..926a90565 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/axis-types/axis-customization.jpg differ diff --git a/chart-sdk/flutter/sparkcharts/images/axis-types/category.jpg b/chart-sdk/flutter/sparkcharts/images/axis-types/category.jpg new file mode 100644 index 000000000..6989b69e4 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/axis-types/category.jpg differ diff --git a/chart-sdk/flutter/sparkcharts/images/axis-types/datetime.jpg b/chart-sdk/flutter/sparkcharts/images/axis-types/datetime.jpg new file mode 100644 index 000000000..31c67ee68 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/axis-types/datetime.jpg differ diff --git a/chart-sdk/flutter/sparkcharts/images/axis-types/numeric.jpg b/chart-sdk/flutter/sparkcharts/images/axis-types/numeric.jpg new file mode 100644 index 000000000..9a20ee7e9 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/axis-types/numeric.jpg differ diff --git a/chart-sdk/flutter/sparkcharts/images/getting-started/bind-data.png b/chart-sdk/flutter/sparkcharts/images/getting-started/bind-data.png new file mode 100644 index 000000000..73a1d89a4 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/getting-started/bind-data.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-datalabel.png b/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-datalabel.png new file mode 100644 index 000000000..f8a608222 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-datalabel.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-trackball.png b/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-trackball.png new file mode 100644 index 000000000..857beedb0 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-trackball.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-type.png b/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-type.png new file mode 100644 index 000000000..9be3df212 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/getting-started/sparkline-type.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/marker/spark-datalabel.png b/chart-sdk/flutter/sparkcharts/images/marker/spark-datalabel.png new file mode 100644 index 000000000..127653239 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/marker/spark-datalabel.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/marker/spark-marker-circle.png b/chart-sdk/flutter/sparkcharts/images/marker/spark-marker-circle.png new file mode 100644 index 000000000..4ef3a3935 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/marker/spark-marker-circle.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/marker/spark-marker-square.png b/chart-sdk/flutter/sparkcharts/images/marker/spark-marker-square.png new file mode 100644 index 000000000..e384f4052 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/marker/spark-marker-square.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/plotband/spark-plotband.png b/chart-sdk/flutter/sparkcharts/images/plotband/spark-plotband.png new file mode 100644 index 000000000..29aea796a Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/plotband/spark-plotband.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-area.png b/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-area.png new file mode 100644 index 000000000..a208480be Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-area.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-bar.png b/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-bar.png new file mode 100644 index 000000000..930c198da Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-bar.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-win-loss.png b/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-win-loss.png new file mode 100644 index 000000000..96e40b0fc Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/sparkline-types/spark-win-loss.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/sparkline-types/sparkline-dasharray.png b/chart-sdk/flutter/sparkcharts/images/sparkline-types/sparkline-dasharray.png new file mode 100644 index 000000000..15434f61f Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/sparkline-types/sparkline-dasharray.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/sparkline-types/sparkline.png b/chart-sdk/flutter/sparkcharts/images/sparkline-types/sparkline.png new file mode 100644 index 000000000..86f5962d3 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/sparkline-types/sparkline.png differ diff --git a/chart-sdk/flutter/sparkcharts/images/trackball/spark-trackball.png b/chart-sdk/flutter/sparkcharts/images/trackball/spark-trackball.png new file mode 100644 index 000000000..88e047425 Binary files /dev/null and b/chart-sdk/flutter/sparkcharts/images/trackball/spark-trackball.png differ diff --git a/chart-sdk/flutter/sparkcharts/marker-datalabel.md b/chart-sdk/flutter/sparkcharts/marker-datalabel.md new file mode 100644 index 000000000..2f6d62218 --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/marker-datalabel.md @@ -0,0 +1,126 @@ +--- +layout: post +title: Marker and Data label in Flutter Spark Chart | Syncfusion® +description: The marker and data label support in Flutter Spark Chart offers clear data point value display, improving chart readability and data interpretation. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# Marker and Data label in Flutter Spark Chart + +## Marker + +Markers provide information about the exact point location. You can add a shape to each data point by using the [`marker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarker-class.html) property with [`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html) and [`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html) widgets. + +You can use the following properties to customize the appearance: + +* [`displayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarker/displayMode.html) - Toggles the visibility of the marker. Defaults to [`SparkChartMarkerDisplayMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarkerDisplayMode.html). +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarker/borderWidth.html) - Represents the border width of the marker. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarker/color.html) - Represents the color of the marker. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarker/borderColor.html) - Represents the border color of the marker. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth: 0, + marker: SparkChartMarker( + borderColor: Colors.orange, + borderWidth: 2, + displayMode: SparkChartMarkerDisplayMode.all + ), + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Sparkline marker](images/marker/spark-marker-circle.png) + +### Customizing marker shapes + +Markers can be assigned with different shapes using the [`shape`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartMarker/shape.html) property. By default, markers are rendered with circle shape. The shapes of markers are listed below. + +* circle, +* diamond, +* square, +* triangle, +* invertedTriangle + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth: 0, + marker: SparkChartMarker( + shape: SparkChartMarkerShape.square, + displayMode: SparkChartMarkerDisplayMode.all + ), + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Sparkline marker shape](images/marker/spark-marker-square.png) + +## Data label + +Data labels display data point values to improve readability. + +### Enable data labels + +To enable data labels for spark charts, use the [`labelDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/labelDisplayMode.html) property in spark chart widgets. + +The following values are available in spark charts to render data labels: + +* [`SparkChartLabelDisplayMode.none`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartLabelDisplayMode.html) - Does not allow to display data points on any side. +* [`SparkChartLabelDisplayMode.all`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartLabelDisplayMode.html) - Allows to display data labels on all points. +* [`SparkChartLabelDisplayMode.high`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartLabelDisplayMode.html) - Allows to display data labels on the high point. +* [`SparkChartLabelDisplayMode.low`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartLabelDisplayMode.html) - Allows to display data labels on the low point. +* [`SparkChartLabelDisplayMode.last`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartLabelDisplayMode.html) - Allows to display data labels on the last point. +* [`SparkChartLabelDisplayMode.first`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartLabelDisplayMode.html) - Allows to display data labels on the first point. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth: 0, + labelDisplayMode: SparkChartLabelDisplayMode.all, + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Sparkline datalabel](images/marker/spark-datalabel.png) + +> **Note**: The [`SfSparkWinLossChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html) widget doesn't support data labels. \ No newline at end of file diff --git a/chart-sdk/flutter/sparkcharts/overview.md b/chart-sdk/flutter/sparkcharts/overview.md new file mode 100644 index 000000000..11f97f885 --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/overview.md @@ -0,0 +1,20 @@ +--- +layout: post +title: About Syncfusion® Flutter Spark Chart widget | Syncfusion® +description: Learn about introduction of Syncfusion® Flutter Spark Charts widget, its features, and more customization details. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# About Syncfusion® Flutter Spark Chart widget + +Syncfusion® Flutter Spark/Micro charts are lightweight charts, typically drawn without axes or coordinates. They present the general shape of data in a simple and highly condensed way. + +## Key features + +* Supports four spark chart types: line, area, win-loss, and bar. +* Provides marker support for line and area chart types. +* Supports trackball to display additional information about data points when interacting with the spark charts. +* Supports data labels to display information about data points. +* Supports plot bands to highlight a particular range. diff --git a/chart-sdk/flutter/sparkcharts/plotband.md b/chart-sdk/flutter/sparkcharts/plotband.md new file mode 100644 index 000000000..2079b3168 --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/plotband.md @@ -0,0 +1,41 @@ +--- +layout: post +title: Plot band in Flutter Spark Chart | Syncfusion® +description: The plot band support in Flutter Spark Chart offers visual highlighting of value ranges to identify targets and thresholds. +platform: chart-sdk +control: Sparkline +documentation: ug +--- +# Plot band in Flutter Spark Chart + +This feature is used to highlight a particular region in spark charts along the Y axis. + +The following properties are used to customize the appearance: +* [`start`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartPlotBand/start.html) - Configures the start plot band value on the Y axis. +* [`end`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartPlotBand/end.html) - Configures the end plot band value on the Y axis. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartPlotBand/color.html) - Changes the plot band color. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartPlotBand/borderColor.html) - Changes the plot band border color. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartPlotBand/borderWidth.html) - Changes the plot band border width. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth:0, + plotBand: SparkChartPlotBand(start: 7, end: 8), + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Sparkline plot band](images/plotband/spark-plotband.png) \ No newline at end of file diff --git a/chart-sdk/flutter/sparkcharts/sparkcharts-types.md b/chart-sdk/flutter/sparkcharts/sparkcharts-types.md new file mode 100644 index 000000000..88bef1382 --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/sparkcharts-types.md @@ -0,0 +1,246 @@ +--- +layout: post +title: Chart types in Flutter Spark Chart | Syncfusion® +description: The chart types support in Flutter Spark Chart offers line, area, bar, and win-loss charts for compact and effective trend visualization. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# Chart types in Flutter Spark Chart + +## Line chart + +[`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html) is used to identify patterns and trends in data such as seasonal effects, large changes, and turning points over time. + +The following properties are used to customize the appearance: + +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/color.html) - Specifies the spark line color. +* [`data`] - Used to bind data to spark line charts. +* [`axisCrossesAt`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisCrossesAt.html) - Specifies the axis line's position. +* [`axisLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisLineColor.html) - Specifies the color of the axis line. +* [`axisLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisLineWidth.html) - Specifies the width of the axis line. +* [`axisLineDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/axisLineDashArray.html) - Specifies the dash array value of the axis line. +* [`marker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/marker.html) - Represents the marker settings of spark line chart. +* [`labelDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/labelDisplayMode.html) - Specifies the spark line data label. +* [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/labelStyle.html) - Specifies the spark line data label style. +* [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/trackball.html) - Represents the trackball options of spark line chart. +* [`plotBand`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/plotBand.html) - Represents the plot band settings for spark line chart. +* [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/isInversed.html) - Specifies whether to inverse the spark line chart. +* [`highPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/highPointColor.html) - Specifies the high point color. +* [`lowPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/lowPointColor.html) - Specifies the low point color. +* [`negativePointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/negativePointColor.html) - Specifies the negative point color. +* [`firstPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/firstPointColor.html) - Specifies the first point color. +* [`lastPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/lastPointColor.html) - Specifies the last point color. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/width.html) - Specifies the width of the line series. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth: 0, + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + highPointColor: Colors.red, + lowPointColor: Colors.red, + firstPointColor: Colors.orange, + lastPointColor: Colors.orange, + width: 3, + marker: SparkChartMarker( + displayMode: SparkChartMarkerDisplayMode.all + ), + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Spark line chart](images/sparkline-types/sparkline.png) + +### Dashed line + +The [`dashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/dashArray.html) property of [`SfSparkLineChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart-class.html) is used to render line chart with dashes. Odd value is considered as rendering size and even value is considered as gap. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth: 0, + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + dashArray: [5,3], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Spark line dashArray](images/sparkline-types/sparkline-dasharray.png) + +#### See Also + +* [Bind data to the Flutter Sparkline chart](https://support.syncfusion.com/kb/article/10813/how-to-bind-data-to-the-flutter-sparkline-chart-sfsparklinechart). + +## Area chart + +[`SfSparkAreaChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart-class.html) is used to emphasize changes in values. It is primarily used when the magnitude of the trend should be communicated rather than individual data values. + +The following properties are used to customize the appearance: + +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/color.html) - Specifies the fill color of spark area chart. +* [`data`]() - Used to bind the data to spark area charts. +* [`axisCrossesAt`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/axisCrossesAt.html) - Specifies the axis line's position. +* [`axisLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/axisLineColor.html) - Specifies the color of the axis line. +* [`axisLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/axisLineWidth.html) - Specifies the width of the axis line. +* [`axisLineDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/axisLineDashArray.html) - Specifies the dash array value of the axis line. +* [`marker`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/marker.html) - Represents the marker settings of spark area chart. +* [`labelDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/labelDisplayMode.html) - Specifies the spark area data label. +* [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/labelStyle.html) - Specifies the spark area data label style. +* [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/trackball.html) - Represents the trackball options of spark area chart. +* [`plotBand`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/plotBand.html) - Represents the plot band settings for spark area chart. +* [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/isInversed.html) - Specifies whether to inverse the spark area chart. +* [`highPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/highPointColor.html) - Specifies the high point color. +* [`lowPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/lowPointColor.html) - Specifies the low point color. +* [`negativePointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/negativePointColor.html) - Specifies the negative point color. +* [`firstPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/firstPointColor.html) - Specifies the first point color. +* [`lastPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/lastPointColor.html) - Specifies the last point color. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/borderWidth.html) - Changes the stroke width of the spark area chart. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkAreaChart/borderColor.html) - Changes the stroke color of the spark area chart. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkAreaChart( + data: [ + 34, 36, 32, 35, 40, 38, 33, 37, 34, 31, 30 + ], + borderColor: Colors.red.withOpacity(0.8), + borderWidth: 2, + marker: SparkChartMarker( + displayMode: SparkChartMarkerDisplayMode.high + ), + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Spark area chart](images/sparkline-types/spark-area.png) + +## Bar chart + +[`SfSparkBarChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart-class.html) is used to render spark bar series. The following properties are used to customize the appearance: + +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/color.html) - Specifies the fill color of the spark bar chart. +* [`data`]() - Used to bind the data to spark area charts. +* [`axisCrossesAt`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/axisCrossesAt.html) - Specifies the axis line's position. +* [`axisLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/axisLineColor.html) - Specifies the color of the axis line. +* [`axisLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/axisLineWidth.html) - Specifies the width of the axis line. +* [`axisLineDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/axisLineDashArray.html) - Specifies the dash array value of the axis line. +* [`labelDisplayMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/labelDisplayMode.html) - Specifies the spark bar data label. +* [`labelStyle`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/labelStyle.html) - Specifies the spark bar data label style. +* [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/trackball.html) - Represents the trackball options of spark bar chart. +* [`plotBand`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/plotBand.html) - Represents the plot band settings for spark bar chart. +* [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/isInversed.html) - Specifies whether to inverse the spark line chart. +* [`highPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/highPointColor.html) - Specifies the high point color. +* [`lowPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/lowPointColor.html) - Specifies the low point color. +* [`negativePointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/negativePointColor.html) - Specifies the negative point color. +* [`firstPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/firstPointColor.html) - Specifies the first point color. +* [`lastPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/lastPointColor.html) - Specifies the last point color. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/borderWidth.html) - Changes the stroke width of the series. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkBarChart/borderColor.html) - Changes the stroke color of the series. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkBarChart( + data: [ + 10, 6, 8, -5, 11, 5, -2, 7, -3, 6, 8, 10 + ], + highPointColor: Colors.red, + lowPointColor: Colors.green, + firstPointColor: Colors.orange, + lastPointColor: Colors.orange, + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Spark Bar chart](images/sparkline-types/spark-bar.png) + +#### See Also + +* [Export Flutter Spark bar charts as a pdf](https://support.syncfusion.com/kb/article/11432/how-to-export-flutter-spark-bar-charts-as-a-pdf-sfsparkbarchart). + +* [Customize the Flutter Spark bar charts](https://support.syncfusion.com/kb/article/10756/how-to-customize-the-flutter-spark-bar-charts-sfsparkbarchart). + +## WinLoss Sparkline chart + +[`SfSparkWinLossChart`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart-class.html) is used to show whether each value is positive or negative and visualize a win-loss scenario. + +The following properties are used to customize the appearance: + +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/color.html) - Specifies the spark line color. +* [`data`]() - Create the spark line chart with custom data source. +* [`axisCrossesAt`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/axisCrossesAt.html) - Specifies the axis line's position. +* [`axisLineColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/axisLineColor.html) - Specifies the color of the axis line. +* [`axisLineWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/axisLineWidth.html) - Specifies the width of the axis line. +* [`axisLineDashArray`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/axisLineDashArray.html) - Specifies the dash array value of the axis line. +* [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/trackball.html) - Represents the trackball options of spark bar chart. +* [`isInversed`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/isInversed.html) - Specifies whether to inverse the spark line chart. +* [`highPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/highPointColor.html) - Specifies the high point color. +* [`lowPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/lowPointColor.html) - Specifies the low point color. +* [`negativePointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/negativePointColor.html) - Specifies the negative point color. +* [`firstPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/firstPointColor.html) - Specifies the first point color. +* [`lastPointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/lastPointColor.html) - Specifies the last point color. +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/borderWidth.html) - Changes the stroke width of the win loss chart. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/borderColor.html) - Changes the stroke color of the win loss chart. +* [`tiePointColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkWinLossChart/tiePointColor.html) - Specifies the tie point color of the win-loss chart. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkWinLossChart( + data: [ + 12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Spark win-loss chart](images/sparkline-types/spark-win-loss.png) diff --git a/chart-sdk/flutter/sparkcharts/trackball.md b/chart-sdk/flutter/sparkcharts/trackball.md new file mode 100644 index 000000000..6267b1d0f --- /dev/null +++ b/chart-sdk/flutter/sparkcharts/trackball.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Trackball in Flutter Spark Chart | Syncfusion® +description: The trackball support in Flutter Spark Chart offers precise data point inspection with interactive tooltips for improved analysis. +platform: chart-sdk +control: Sparkline +documentation: ug +--- + +# Trackball in Flutter Spark Chart + +Trackball displays tooltips for data points near the point where you touch the chart area. It can be used instead of data labels when you cannot show labels for all data points because of space constraints. This feature can be enabled using the [`trackball`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SfSparkLineChart/trackball.html) property. Trackball is activated using the [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/activationMode.html) property. Once it is activated, it appears in the UI and moves based on your touch movement until you stop touching the chart. + +You can use the following properties to customize the appearance: + +* [`borderWidth`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/borderWidth.html) - Represents the border width. +* [`borderColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/borderColor.html) - Represents the border color. +* [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/backgroundColor.html) - Represents the background color for trackball. +* [`width`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/width.html) - Represents the width of trackball line. +* [`color`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/color.html) - Represents the color of trackball line. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkLineChart( + axisLineWidth: 0, + trackball: SparkChartTrackball( + backgroundColor: Colors.red.withOpacity(0.8), + borderColor: Colors.red.withOpacity(0.8), + borderWidth: 2, + color: Colors.red, + labelStyle: TextStyle(color: Colors.black), + activationMode: SparkChartActivationMode.tap + ), + marker: SparkChartMarker( + displayMode: SparkChartMarkerDisplayMode.all), + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} + +![Sparkline trackball](images/trackball/spark-trackball.png) + +### Activation mode + +The [`activationMode`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartTrackball/activationMode.html) property is used to restrict the visibility of trackball based on the touch actions. The default value of this property is [`ActivationMode.tap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode.html). + +* [`ActivationMode.longPress`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode.html) - Activates trackball only when performing the long press action. +* [`ActivationMode.tap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode.html) - Activates trackball only when performing tap action. +* [`ActivationMode.doubleTap`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/sparkcharts/SparkChartActivationMode.html) - Activates trackball only when performing double tap action. + +{% tabs %} +{% highlight dart %} + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: SfSparkAreaChart( + trackball: SparkChartTrackball( + activationMode: SparkChartActivationMode.doubleTap + ), + data: [ + 5, 6, 5, 7, 4, 3, 9, 5, 6, 5, 7, 8, 4, 5, 3, 4, 11, 10, 2, 12, 4, 7, 6, 8 + ], + ) + ) + ); + } + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/accessibility.md b/chart-sdk/flutter/treemap/accessibility.md index aeebb37a3..fc7b91f2e 100644 --- a/chart-sdk/flutter/treemap/accessibility.md +++ b/chart-sdk/flutter/treemap/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Flutter treemap widget | Syncfusion -description: Learn here all about the accessibility support in Syncfusion Flutter treemap (SfTreemap) widget and how to customize it. +title: Accessibility in Flutter Treemap | Syncfusion® +description: Learn about accessibility support in Syncfusion® Flutter Treemap (SfTreemap), including screen readers, keyboard navigation, and more. platform: chart-sdk control: SfTreemap documentation: ug @@ -11,61 +11,64 @@ documentation: ug ## Screen reader -The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) can be accessed by the screen readers by wrapping the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. +The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) can be accessed by screen readers by wrapping the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) widget with the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapAccessibilityExample extends StatefulWidget { + const TreemapAccessibilityExample({super.key}); + + @override + State createState() => + _TreemapAccessibilityExampleState(); +} + +class _TreemapAccessibilityExampleState + extends State { late List _source; - late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent'; + final String _semanticLabel = + 'Asia is the most populated continent and Australia is the least populated continent'; @override void initState() { - _source = const [ - PopulationModel('Asia', 456.07), - PopulationModel('Africa', 121.61), - PopulationModel('Europe', 74.64), - PopulationModel('North America', 57.9), - PopulationModel('South America', 42.25), - PopulationModel('Australia', 2.54), + _source = [ + const PopulationModel('Asia', 456.07), + const PopulationModel('Africa', 121.61), + const PopulationModel('Europe', 74.64), + const PopulationModel('North America', 57.9), + const PopulationModel('South America', 42.25), + const PopulationModel('Australia', 2.54), ]; super.initState(); } - @override - void dispose() { - _source.clear(); - super.dispose(); - } - @override Widget build(BuildContext context) { return Scaffold( body: Semantics( - label: 'Syncfusion Flutter Treemap', - value: _semanticLabel, - child: Column( - children: [ - Expanded( - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInCrores; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - ), - ], - ), - ), - ], - ), + label: 'Syncfusion Flutter Treemap', + value: _semanticLabel, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInCrores; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + ), + ], ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInCrores); @@ -81,19 +84,19 @@ class PopulationModel { You can customize the color of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) elements using the following APIs for the sufficient contrast. -* [`Level`](https://help.syncfusion.com/flutter/treemap/color-customization#level-color) -* [`Labels`](https://help.syncfusion.com/flutter/treemap/labels) -* [`Legend`](https://help.syncfusion.com/flutter/treemap/legend#icon-and-text-customization) -* [`Tooltip`](https://help.syncfusion.com/flutter/treemap/tooltip#appearance-customization) +* [`Level`](https://help.syncfusion.com/chart-sdk/flutter/treemap/color-customization#level-color) +* [`Labels`](https://help.syncfusion.com/chart-sdk/flutter/treemap/labels) +* [`Legend`](https://help.syncfusion.com/chart-sdk/flutter/treemap/legend#icon-and-text-customization) +* [`Tooltip`](https://help.syncfusion.com/chart-sdk/flutter/treemap/tooltip#appearance-customization) ## Large fonts The font size of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) will be automatically scaled based on the device settings. Additionally, you can change the font size of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) elements using the following APIs: -* [`Label style`](https://help.syncfusion.com/flutter/treemap/labels#add-labels) -* [`Legend text style`](https://help.syncfusion.com/flutter/treemap/legend#text-style) -* [`Tooltip label style`](https://help.syncfusion.com/flutter/treemap/tooltip#tooltip-for-the-tiles) +* [`Label style`](https://help.syncfusion.com/chart-sdk/flutter/treemap/labels#add-labels) +* [`Legend text style`](https://help.syncfusion.com/chart-sdk/flutter/treemap/legend#text-style) +* [`Tooltip label style`](https://help.syncfusion.com/chart-sdk/flutter/treemap/tooltip#tooltip-for-the-tiles) ## Easier touch targets -The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) has touch target as 48 * 48 for all elements, following standard accessibility guidelines. \ No newline at end of file +The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) has touch targets of 48 × 48 pixels for all elements, following standard accessibility guidelines. \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/color-customization.md b/chart-sdk/flutter/treemap/color-customization.md index c22511bdf..47642e8e7 100644 --- a/chart-sdk/flutter/treemap/color-customization.md +++ b/chart-sdk/flutter/treemap/color-customization.md @@ -1,105 +1,120 @@ --- layout: post -title: Colors Customization in Flutter Treemap widget | Syncfusion -description: Learn here all about the Colors Customization feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Color Customization in Flutter Treemap | Syncfusion® +description: Learn about color customization in Syncfusion® Flutter Treemap (SfTreemap), including color mapping, palettes, legends, and styling options. platform: chart-sdk control: SfTreemap documentation: ug --- -# Colors Customization in Flutter Treemap (SfTreemap) +# Color Customization in Flutter Treemap (SfTreemap) -This section explains about the customization of color for the tiles based on specific value or range of values. +This section explains the customization of color for the tiles based on a specific value or range of values. ## Level color You can apply uniform color to the whole level using the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapLevelColorExample extends StatefulWidget { + const TreemapLevelColorExample({super.key}); + + @override + State createState() => + _TreemapLevelColorExampleState(); +} + +class _TreemapLevelColorExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'Germany', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), + const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), + const JobVacancyModel( + country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 105), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 40), + const JobVacancyModel( + country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 60), + const JobVacancyModel( + country: 'Germany', job: 'Technical', group: 'Testers', vacancy: 25), + const JobVacancyModel( + country: 'Germany', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155), ]; super.initState(); } @override - Widget build(BuildContext context) { - return Scaffold( - body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.cyan, - padding: EdgeInsets.all(1.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.pink[200], - padding: EdgeInsets.all(10), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.green[400], - padding: EdgeInsets.all(10), - ), - ], - ), + Widget build(BuildContext context) { + return Scaffold( + body: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.cyan, + padding: const EdgeInsets.all(1.5), + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.pink[200], + padding: const EdgeInsets.all(10), + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.green[400], + padding: const EdgeInsets.all(10), + ), + ], + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -118,34 +133,47 @@ N> ## Equal color mapping -If you return a value of different type other than the color from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), then you must set the [`colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property which is a collection of [`TreemapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper-class.html). +If you return a value of a type other than color from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), then you must set the [`colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property, which is a collection of [`TreemapColorMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper-class.html). The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html) callback will be used for the comparison in the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html). For the matched values, the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) will be applied to the respective tiles. N> You can customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) and the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html) properties respectively. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TreemapEqualColorMappingExample extends StatefulWidget { + const TreemapEqualColorMappingExample({super.key}); + + @override + State createState() => + _TreemapEqualColorMappingExampleState(); +} + +class _TreemapEqualColorMappingExampleState + extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + const SocialMediaUsers('India', 'Facebook', 25.4), + const SocialMediaUsers('USA', 'Instagram', 19.11), + const SocialMediaUsers('Japan', 'Facebook', 13.3), + const SocialMediaUsers('Germany', 'Instagram', 10.65), + const SocialMediaUsers('France', 'Twitter', 7.54), + const SocialMediaUsers('UK', 'Instagram', 4.93), ]; _colorMappers = [ - TreemapColorMapper.value(value: 'Facebook', color: Colors.blue[200]!), - TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange), - TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!), - ]; + TreemapColorMapper.value(value: 'Facebook', color: Colors.blue[200]!), + TreemapColorMapper.value(value: 'Instagram', color: Colors.deepOrange), + TreemapColorMapper.value(value: 'Twitter', color: Colors.blue[800]!), + ]; super.initState(); } @@ -153,28 +181,29 @@ N> You can customize the legend icons color and texts using the [`TreemapColorMa Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(2.5), - groupMapper: (int index) { - return _source[index].country; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Text(_source[tile.indices[0]].socialMedia); - }, - colorValueMapper: (TreemapTile tile) { - return _source[tile.indices[0]].socialMedia; - }, - ), - ], - colorMappers: _colorMappers, - ), + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(2.5), + groupMapper: (int index) { + return _source[index].country; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Text(_source[tile.indices[0]].socialMedia); + }, + colorValueMapper: (TreemapTile tile) { + return _source[tile.indices[0]].socialMedia; + }, + ), + ], + colorMappers: _colorMappers, + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -203,41 +232,57 @@ The value returned from the [`TreemapLevel.colorValueMapper`](https://pub.dev/do N> Customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) and the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapRangeColorMappingExample extends StatefulWidget { + const TreemapRangeColorMappingExample({super.key}); + @override + State createState() => + _TreemapRangeColorMappingExampleState(); +} + +class _TreemapRangeColorMappingExampleState + extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + const SocialMediaUsers('India', 'Facebook', 25.4), + const SocialMediaUsers('USA', 'Instagram', 19.11), + const SocialMediaUsers('Japan', 'Facebook', 13.3), + const SocialMediaUsers('Germany', 'Instagram', 10.65), + const SocialMediaUsers('France', 'Twitter', 7.54), + const SocialMediaUsers('UK', 'Instagram', 4.93), ]; _colorMappers = [ - TreemapColorMapper.range( - from: 0, - to: 10, - minSaturation: 0.5, - maxSaturation: 1, - color: Colors.blue[200]!), - TreemapColorMapper.range( - from: 10, - to: 20, - minSaturation: 0.5, - maxSaturation: 1, - color: Colors.deepOrange), - TreemapColorMapper.range( - from: 20, - to: 30, - minSaturation: 0.5, - maxSaturation: 1, - color: Colors.blue[800]!), + TreemapColorMapper.range( + from: 0, + to: 10, + minSaturation: 0.5, + maxSaturation: 1, + color: Colors.blue[200]!, + ), + TreemapColorMapper.range( + from: 10, + to: 20, + minSaturation: 0.5, + maxSaturation: 1, + color: Colors.deepOrange, + ), + TreemapColorMapper.range( + from: 20, + to: 30, + minSaturation: 0.5, + maxSaturation: 1, + color: Colors.blue[800]!, + ), ]; super.initState(); } @@ -245,34 +290,35 @@ N> Customize the legend icons color and texts using the [`TreemapColorMapper.col @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - ), + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, + ), + ], + colorMappers: _colorMappers, ), ), + ), ); } +} class SocialMediaUsers { - SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); + const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); final String country; final String socialMedia; @@ -285,4 +331,4 @@ class SocialMediaUsers { ![Range color mapping](images/colors/range-color-mapping.png) N> -* Refer the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html), for applying color to the tiles based on the specific value. +* Refer the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.value.html), for applying color to the tiles based on the specific value. \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/drilldown.md b/chart-sdk/flutter/treemap/drilldown.md index d9cfa1a11..9571eae1e 100644 --- a/chart-sdk/flutter/treemap/drilldown.md +++ b/chart-sdk/flutter/treemap/drilldown.md @@ -1,7 +1,7 @@ --- layout: post -title: Drilldown in Flutter Treemap widget | Syncfusion -description: Learn here all about how to drilled down hierarchical level tiles in Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Drilldown in Flutter Treemap | Syncfusion® +description: Learn about drilldown support in Syncfusion® Flutter Treemap (SfTreemap), including hierarchical navigation, drilldown levels, and interactive data exploration. platform: chart-sdk control: SfTreemap documentation: ug @@ -9,12 +9,12 @@ documentation: ug # Drilldown in Flutter Treemap (SfTreemap) -The drilldown feature provides better visualization of larger set of hierarchical level data. +The drilldown feature provides better visualization of a larger set of hierarchical-level data. -To learn more about how to deep dive into the drill down feature in Flutter Treemap, you can watch this video. +To learn more about the drilldown feature in Flutter Treemap, you can watch this video. - - + + ## Enable drilldown @@ -22,180 +22,187 @@ You can drill down the tiles by setting the [`enableDrilldown`](https://pub.dev/ The widget returned by the [`TreemapBreadcrumbs.builder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbs/builder.html) will be added to the breadcrumbs item. While drilling down the tiles, it is called with the tapped tile details. -Selection for touch and mouse enabled devices, and tooltip for touch devices will work only for the tiles which don’t have descendants. +Selection for touch and mouse-enabled devices, and tooltip for touch devices, will work only for the tiles that don’t have descendants. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapDrilldownExample extends StatefulWidget { + const TreemapDrilldownExample({super.key}); + + @override + State createState() => + _TreemapDrilldownExampleState(); +} + +class _TreemapDrilldownExampleState extends State { late List _source; late Map _colors; @override void initState() { _source = [ - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), - CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), - CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), - CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), - CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), - CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), - CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), - CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), - CarSale(carName: 'Benz', model: 'E/ CLS-CLass', totalScale: 51312), - CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), - CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), - CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), - CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), - CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), - CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), - CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), - CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), - CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), - CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), - CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), - CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), - CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), - CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), - CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), - CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), - CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), - CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), - CarSale(carName: 'Jeep', model: 'Grand cherokee', totalScale: 240696), - CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), - CarSale(carName: 'Jeep', model: 'Renegada', totalScale: 103434), - CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), - CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), - CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), - CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), - CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), - CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), - CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Ford', model: 'F-series', totalScale: 896764), - CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), - CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), - CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), - CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), - CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), - CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), - CarSale(carName: 'Ford', model: 'E-series', totalScale: 53304), - CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), - CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), - CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), - CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), - CarSale(carName: 'Ford', model: 'Transit connect', totalScale: 34473), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 18390), + const CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), + const CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), + const CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), + const CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), + const CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), + const CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), + const CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), + const CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), + const CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), + const CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), + const CarSale(carName: 'Benz', model: 'E/CLS-Class', totalScale: 51312), + const CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), + const CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), + const CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), + const CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), + const CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), + const CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), + const CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), + const CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), + const CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), + const CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), + const CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), + const CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), + const CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), + const CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), + const CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), + const CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), + const CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), + const CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), + const CarSale(carName: 'Jeep', model: 'Grand Cherokee', totalScale: 240696), + const CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), + const CarSale(carName: 'Jeep', model: 'Renegade', totalScale: 103434), + const CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), + const CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), + const CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), + const CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), + const CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Ford', model: 'F-Series', totalScale: 896764), + const CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), + const CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), + const CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), + const CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), + const CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), + const CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), + const CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), + const CarSale(carName: 'Ford', model: 'E-Series', totalScale: 53304), + const CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), + const CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), + const CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), + const CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), + const CarSale(carName: 'Ford', model: 'Transit Connect', totalScale: 34473), ]; + _colors = { - 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), - 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), - 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), - 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), - 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), - 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), - 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), + 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), + 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), + 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), + 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), + 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), + 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), + 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), }; super.initState(); } - @override - void dispose() { - _source.clear(); - super.dispose(); - } - @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].totalScale!; + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].totalScale!; + }, + enableDrilldown: true, + breadcrumbs: TreemapBreadcrumbs( + builder: (BuildContext context, TreemapTile tile, bool isCurrent) { + return Text(tile.group, style: const TextStyle(color: Colors.black)); }, - enableDrilldown: true, - breadcrumbs: TreemapBreadcrumbs( - builder: - (BuildContext context, TreemapTile tile, bool isCurrent) { - return Text(tile.group, style: TextStyle(color: Colors.black)); + ), + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].carName, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; }, ), - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].carName, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - ), - TreemapLevel( - groupMapper: (int index) { - return _source[index].model; - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - ], - ), + TreemapLevel( + groupMapper: (int index) { + return _source[index].model; + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + ], ), ), + ), ); } +} class CarSale { - const CarSale( - {required this.carName, - this.model, - this.version, - this.versionNumber, - this.totalScale}); + const CarSale({ + required this.carName, + this.model, + this.version, + this.versionNumber, + this.totalScale, + }); + final String carName; final String? model; final String? version; @@ -210,198 +217,208 @@ class CarSale { ## Breadcrumb customization -The breadcrumb is used to display information about the drilled item and provides option to navigate back to previous level. You can customize the breadcrumb items using the following properties: +The breadcrumb is used to display information about the drilled item and provides an option to navigate back to the previous level. You can customize the breadcrumb items using the following properties: -* **Position** - Positions the breadcrumbs either top or bottom of the treemap. The default value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbs/position.html) is [` TreemapBreadcrumbPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbPosition.html#top). +* **Position** - Positions the breadcrumbs either at the top or bottom of the treemap. The default value of the [`position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbs/position.html) is [`TreemapBreadcrumbPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapBreadcrumbPosition.html#top). * **Divider** - Used to add a separator between two breadcrumbs. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapBreadcrumbCustomizationExample extends StatefulWidget { + const TreemapBreadcrumbCustomizationExample({super.key}); + + @override + State createState() => + _TreemapBreadcrumbCustomizationExampleState(); +} +class _TreemapBreadcrumbCustomizationExampleState + extends State { late List _source; late Map _colors; @override void initState() { _source = [ - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), - CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), - CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), - CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), - CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), - CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), - CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), - CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), - CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), - CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), - CarSale(carName: 'Benz', model: 'E/ CLS-CLass', totalScale: 51312), - CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), - CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), - CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), - CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), - CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), - CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), - CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), - CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), - CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), - CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), - CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), - CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), - CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), - CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), - CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), - CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), - CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), - CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), - CarSale(carName: 'Jeep', model: 'Grand cherokee', totalScale: 240696), - CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), - CarSale(carName: 'Jeep', model: 'Renegada', totalScale: 103434), - CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), - CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), - CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), - CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), - CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), - CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), - CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), - CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), - CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), - CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), - CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), - CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), - CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), - CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), - CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), - CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), - CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), - CarSale(carName: 'Ford', model: 'F-series', totalScale: 896764), - CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), - CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), - CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), - CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), - CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), - CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), - CarSale(carName: 'Ford', model: 'E-series', totalScale: 53304), - CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), - CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), - CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), - CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), - CarSale(carName: 'Ford', model: 'Transit connect', totalScale: 34473), - CarSale(carName: 'Ford', model: 'Transit', totalScale: 18390), + const CarSale(carName: 'Hyundai', model: 'Elantra', totalScale: 198210), + const CarSale(carName: 'Hyundai', model: 'Sonata', totalScale: 131803), + const CarSale(carName: 'Hyundai', model: 'Tucson', totalScale: 114735), + const CarSale(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171), + const CarSale(carName: 'Hyundai', model: 'Accent', totalScale: 58955), + const CarSale(carName: 'Hyundai', model: 'Veloster', totalScale: 12658), + const CarSale(carName: 'Hyundai', model: 'loniq', totalScale: 11197), + const CarSale(carName: 'Hyundai', model: 'Azera', totalScale: 3060), + const CarSale(carName: 'Benz', model: 'C-Class', totalScale: 77447), + const CarSale(carName: 'Benz', model: 'GLE-Class', totalScale: 54595), + const CarSale(carName: 'Benz', model: 'E/CLS-Class', totalScale: 51312), + const CarSale(carName: 'Benz', model: 'GLC-Class', totalScale: 48643), + const CarSale(carName: 'Benz', model: 'GLS-Class', totalScale: 322548), + const CarSale(carName: 'Benz', model: 'Sprinter', totalScale: 27415), + const CarSale(carName: 'Benz', model: 'CLA-Class', totalScale: 20669), + const CarSale(carName: 'Benz', model: 'GLA-Class', totalScale: 24104), + const CarSale(carName: 'Benz', model: 'S-Class', totalScale: 15888), + const CarSale(carName: 'Benz', model: 'Metris', totalScale: 7579), + const CarSale(carName: 'BMW', model: '3-Series', totalScale: 59449), + const CarSale(carName: 'BMW', model: 'X5', totalScale: 50815), + const CarSale(carName: 'BMW', model: 'X3', totalScale: 40691), + const CarSale(carName: 'BMW', model: '5-Series', totalScale: 40658), + const CarSale(carName: 'BMW', model: '4-Series', totalScale: 39634), + const CarSale(carName: 'BMW', model: '2-Series', totalScale: 11737), + const CarSale(carName: 'BMW', model: '7-Series', totalScale: 9276), + const CarSale(carName: 'BMW', model: 'X1', totalScale: 30826), + const CarSale(carName: 'BMW', model: 'X6', totalScale: 6780), + const CarSale(carName: 'BMW', model: 'X4', totalScale: 5198), + const CarSale(carName: 'BMW', model: '6-Series', totalScale: 3355), + const CarSale(carName: 'Jeep', model: 'Grand Cherokee', totalScale: 240696), + const CarSale(carName: 'Jeep', model: 'Cherokee', totalScale: 169822), + const CarSale(carName: 'Jeep', model: 'Renegade', totalScale: 103434), + const CarSale(carName: 'Jeep', model: 'Wrangler', totalScale: 190522), + const CarSale(carName: 'Jeep', model: 'Compass', totalScale: 83523), + const CarSale(carName: 'Jeep', model: 'Patriot', totalScale: 10735), + const CarSale(carName: 'Nissan', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Nissan', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Nissan', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Nissan', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Nissan', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Nissan', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Nissan', model: 'Pathfinder', totalScale: 81065), + const CarSale(carName: 'Nissan', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Nissan', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Nissan', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Nissan', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Nissan', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Nissan', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Honda', model: 'Rogue', totalScale: 403465), + const CarSale(carName: 'Honda', model: 'Sentra', totalScale: 218451), + const CarSale(carName: 'Honda', model: 'Murano', totalScale: 76732), + const CarSale(carName: 'Honda', model: 'Frontier', totalScale: 74360), + const CarSale(carName: 'Honda', model: 'Altima', totalScale: 254996), + const CarSale(carName: 'Honda', model: 'Versa', totalScale: 106772), + const CarSale(carName: 'Honda', model: 'Maxima', totalScale: 67627), + const CarSale(carName: 'Honda', model: 'Titan', totalScale: 52924), + const CarSale(carName: 'Honda', model: 'Armada', totalScale: 35667), + const CarSale(carName: 'Honda', model: 'NV', totalScale: 17858), + const CarSale(carName: 'Honda', model: 'NV200', totalScale: 18602), + const CarSale(carName: 'Honda', model: 'Duke', totalScale: 10157), + const CarSale(carName: 'Ford', model: 'F-Series', totalScale: 896764), + const CarSale(carName: 'Ford', model: 'Explorer', totalScale: 271134), + const CarSale(carName: 'Ford', model: 'Fusion', totalScale: 209623), + const CarSale(carName: 'Ford', model: 'Focus', totalScale: 158385), + const CarSale(carName: 'Ford', model: 'Edge', totalScale: 142603), + const CarSale(carName: 'Ford', model: 'Transit', totalScale: 127340), + const CarSale(carName: 'Ford', model: 'Mustang', totalScale: 81866), + const CarSale(carName: 'Ford', model: 'Escape', totalScale: 308286), + const CarSale(carName: 'Ford', model: 'E-Series', totalScale: 53304), + const CarSale(carName: 'Ford', model: 'Expedition', totalScale: 51833), + const CarSale(carName: 'Ford', model: 'Fiesta', totalScale: 46249), + const CarSale(carName: 'Ford', model: 'Taurus', totalScale: 41326), + const CarSale(carName: 'Ford', model: 'Flex', totalScale: 22389), + const CarSale(carName: 'Ford', model: 'Transit Connect', totalScale: 34473), ]; + _colors = { - 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), - 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), - 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), - 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), - 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), - 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), - 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), + 'Hyundai': const Color.fromRGBO(220, 103, 171, 1.0), + 'BMW': const Color.fromRGBO(160, 220, 103, 1.0), + 'Benz': const Color.fromRGBO(220, 210, 103, 1.0), + 'Nissan': const Color.fromRGBO(163, 103, 220, 1.0), + 'Jeep': const Color.fromRGBO(220, 105, 103, 1.0), + 'Ford': const Color.fromRGBO(103, 183, 220, 1.0), + 'Honda': const Color.fromRGBO(103, 220, 187, 1.0), }; super.initState(); } - @override - void dispose() { - _source.clear(); - super.dispose(); - } - @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].totalScale!; + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].totalScale!; + }, + enableDrilldown: true, + breadcrumbs: TreemapBreadcrumbs( + builder: (BuildContext context, TreemapTile tile, bool isCurrent) { + if (tile.group == 'Home') { + return const Icon(Icons.home, color: Colors.black); + } + + return Text( + tile.group, + style: const TextStyle(color: Colors.black), + ); }, - enableDrilldown: true, - breadcrumbs: TreemapBreadcrumbs( - builder: - (BuildContext context, TreemapTile tile, bool isCurrent) { - if (tile.group == 'Home') { - return Icon(Icons.home, color: Colors.black); - } else { - return Text(tile.group, - style: TextStyle(color: Colors.black)); - } + divider: const Icon(Icons.chevron_right, color: Colors.black), + position: TreemapBreadcrumbPosition.top, + ), + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].carName, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; }, - divider: Icon(Icons.chevron_right, color: Colors.black), - position: TreemapBreadcrumbPosition.top, ), - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].carName, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - ), - TreemapLevel( - groupMapper: (int index) { - return _source[index].model; - }, - colorValueMapper: (TreemapTile tile) { - return _colors[_source[tile.indices[0]].carName]; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only(left: 5.0, top: 5.0), - child: Text( - tile.group, - style: TextStyle(color: Colors.black), - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - ], - ), + TreemapLevel( + groupMapper: (int index) { + return _source[index].model; + }, + colorValueMapper: (TreemapTile tile) { + return _colors[_source[tile.indices[0]].carName]; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5.0, top: 5.0), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + ], ), ), + ), ); } +} class CarSale { - const CarSale( - {required this.carName, - this.model, - this.version, - this.versionNumber, - this.totalScale}); - final String carName; - final String? model; - final String? version; - final String? versionNumber; - final double? totalScale; + const CarSale({ + required this.carName, + this.model, + this.version, + this.versionNumber, + this.totalScale, + }); + + final String carName; + final String? model; + final String? version; + final String? versionNumber; + final double? totalScale; } {% endhighlight %} {% endtabs %} -![Treemap drilldown](images/drilldown/breadcrumb_customization.gif) +![Treemap drilldown](images/drilldown/breadcrumb_customization.gif) \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/getting-started.md b/chart-sdk/flutter/treemap/getting-started.md index 13bb188e9..5fe47837a 100644 --- a/chart-sdk/flutter/treemap/getting-started.md +++ b/chart-sdk/flutter/treemap/getting-started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting started with Flutter Treemap widget | Syncfusion -description: Learn about getting started with Syncfusion Flutter Treemap (SfTreemap) widget, its elements, and more. +title: Getting Started with Flutter Treemap | Syncfusion® +description: Learn how to get started with the Syncfusion® Flutter Treemap (SfTreemap). Explore setup, hierarchical data visualization, and customization options. platform: chart-sdk control: SfTreemap documentation: ug --- -# Getting started with Flutter Treemap (SfTreemap) +# Getting Started with Flutter Treemap (SfTreemap) -This section explains the steps required to add the treemap widget and enable its features such as labels, tooltip, assigning colors based on region, and legends. This section covers only basic features needed to know to get started with Syncfusion® treemap. +This section explains the steps required to add the treemap widget and enable its features such as labels, tooltip, assigning colors based on region, and legends. This section covers only the basic features needed to get started with Syncfusion® treemap. -To get start quickly with our Flutter Treemap widget, you can check on this video. +To get started quickly with our Flutter Treemap widget, you can refer to this video. @@ -24,32 +24,34 @@ Create a simple project using the instructions given in the [Getting Started wit Add the Syncfusion® Flutter Treemap dependency to your pubspec.yaml file. +{% tabs %} {% highlight dart %} dependencies: - -syncfusion_flutter_treemap: ^xx.x.xx - + syncfusion_flutter_treemap: ^xx.x.xx {% endhighlight %} +{% endtabs %} -N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Treemap`](https://pub.dev/packages/syncfusion_flutter_treemap/versions) package. +N> Here **xx.x.xx** denotes the current version of [`Syncfusion Flutter Treemap`](https://pub.dev/packages/syncfusion_flutter_treemap/versions) package. It is recommended to use the latest available version from pub.dev. **Get packages** Run the following command to get the required packages. +{% tabs %} {% highlight dart %} $ flutter pub get {% endhighlight %} +{% endtabs %} **Import package** Import the following package in your Dart code. {% tabs %} -{% highlight Dart %} +{% highlight dart %} import 'package:syncfusion_flutter_treemap/treemap.dart'; @@ -63,25 +65,54 @@ After importing the package, initialize the treemap widget as a child of any wid To populate the data source, set its count to the [`dataCount`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/dataCount.html) property of the treemap. The data will be grouped based on the values returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) callback. You can have more than one TreemapLevel in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. The quantitative value of the underlying data has to be returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. Based on this value, every tile (rectangle) will have its size. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -90,26 +121,27 @@ To populate the data source, set its count to the [`dataCount`](https://pub.dev/ Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -134,28 +166,57 @@ N> ## Add labels -You can add any type of custom widgets to the tiles as labels based on the index using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) property. +You can add any type of custom widgets to the tiles as labels based on the index using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) property. The following example extends the initial sample by adding a label builder. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -164,33 +225,36 @@ You can add any type of custom widgets to the tiles as labels based on the index Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - ), - ], - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + ), + ); + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -211,28 +275,57 @@ class SocialMediaUsers { ## Add tooltip -You can enable tooltip for any tile in the treemap and able to return the completely customized widget using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) property. +You can enable tooltip for any tile in the treemap and return a fully customized widget using the [`tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) property. The following example extends the initial sample by adding a tooltip builder. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -256,8 +349,11 @@ You can enable tooltip for any tile in the treemap and able to return the comple }, labelBuilder: (BuildContext context, TreemapTile tile) { return Padding( - padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: Text(tile.group, style: TextStyle(color: Colors.black)), + padding: const EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + ), ); }, tooltipBuilder: (BuildContext context, TreemapTile tile) { @@ -265,7 +361,7 @@ You can enable tooltip for any tile in the treemap and able to return the comple padding: const EdgeInsets.only(left: 5, right: 5, top: 2, bottom: 3), child: Text( 'Country : ${tile.group}\nSocial media : ${tile.weight}M', - style: TextStyle(color: Colors.black), + style: const TextStyle(color: Colors.black), ), ); }, @@ -276,6 +372,7 @@ You can enable tooltip for any tile in the treemap and able to return the comple ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -296,28 +393,57 @@ class SocialMediaUsers { ## Add legend -You can show legend by initializing the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property in the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). It is possible to customize the legend item's color and text using the [`SfTreemap.colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property. +You can show legend by initializing the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property in the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). It is possible to customize the legend item's color and text using the [`SfTreemap.colorMappers`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/colorMappers.html) property. The following example extends the initial sample by adding legend support. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TreemapExample extends StatefulWidget { + const TreemapExample({super.key}); + + @override + State createState() => _TreemapExampleState(); +} + +class _TreemapExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers( - country: 'India', socialMedia: 'Facebook', usersInMillions: 25.4), - SocialMediaUsers( - country: 'USA', socialMedia: 'Instagram', usersInMillions: 19.11), - SocialMediaUsers( - country: 'Japan', socialMedia: 'Facebook', usersInMillions: 13.3), - SocialMediaUsers( - country: 'Germany', socialMedia: 'Instagram', usersInMillions: 10.65), - SocialMediaUsers( - country: 'France', socialMedia: 'Twitter', usersInMillions: 7.54), - SocialMediaUsers( - country: 'UK', socialMedia: 'Instagram', usersInMillions: 4.93), + const SocialMediaUsers( + country: 'India', + socialMedia: 'Facebook', + usersInMillions: 25.4, + ), + const SocialMediaUsers( + country: 'USA', + socialMedia: 'Instagram', + usersInMillions: 19.11, + ), + const SocialMediaUsers( + country: 'Japan', + socialMedia: 'Facebook', + usersInMillions: 13.3, + ), + const SocialMediaUsers( + country: 'Germany', + socialMedia: 'Instagram', + usersInMillions: 10.65, + ), + const SocialMediaUsers( + country: 'France', + socialMedia: 'Twitter', + usersInMillions: 7.54, + ), + const SocialMediaUsers( + country: 'UK', + socialMedia: 'Instagram', + usersInMillions: 4.93, + ), ]; super.initState(); } @@ -326,43 +452,46 @@ You can show legend by initializing the [`legend`](https://pub.dev/documentation Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.only(left: 2.5, right: 2.4, top: 1), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - tooltipBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.only( - left: 5, right: 5, top: 2, bottom: 3), - child: Text( - 'Country : ${tile.group}\nSocial media : ${tile.weight}M', - style: TextStyle(color: Colors.black)), - ); - }, - ), - ], - legend: TreemapLegend(), - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 2.5, right: 2.4, top: 1), + child: Text( + tile.group, + style: const TextStyle(color: Colors.black), + ), + ); + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.only(left: 5, right: 5, top: 2, bottom: 3), + child: Text( + 'Country : ${tile.group}\nSocial media : ${tile.weight}M', + style: const TextStyle(color: Colors.black), + ), + ); + }, + ), + ], + legend: TreemapLegend(), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers({ @@ -379,4 +508,4 @@ class SocialMediaUsers { {% endhighlight %} {% endtabs %} -![Treemap legend](images/getting-started/legend.png) +![Treemap legend](images/getting-started/legend.png) \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/how-to/custom-widget-on-flutterflow.md b/chart-sdk/flutter/treemap/how-to/custom-widget-on-flutterflow.md index a333127fb..6b459106f 100644 --- a/chart-sdk/flutter/treemap/how-to/custom-widget-on-flutterflow.md +++ b/chart-sdk/flutter/treemap/how-to/custom-widget-on-flutterflow.md @@ -1,13 +1,13 @@ --- layout: post -title: Treemap Widget in FlutterFlow | Syncfusion -description: Learn here all about adding Syncfusion Flutter Treemap ( SfTreemap Widget ) widget in FlutterFlow Framework. +title: How to Add Treemap in FlutterFlow | Syncfusion® +description: Learn how to add and use Syncfusion® Flutter Treemap (SfTreemap) in FlutterFlow, including setup, integration, and configuration. platform: chart-sdk control: SfTreemap documentation: ug --- -# How to add Syncfusion® Treemap widget in FlutterFlow? +# How to Add Treemap in FlutterFlow (SfTreemap) ## Overview diff --git a/chart-sdk/flutter/treemap/images/overview/treemap_overview.png b/chart-sdk/flutter/treemap/images/overview/treemap_overview.png new file mode 100644 index 000000000..7bc275b7d Binary files /dev/null and b/chart-sdk/flutter/treemap/images/overview/treemap_overview.png differ diff --git a/chart-sdk/flutter/treemap/item-builder.md b/chart-sdk/flutter/treemap/item-builder.md index 62603a5a8..333c93339 100644 --- a/chart-sdk/flutter/treemap/item-builder.md +++ b/chart-sdk/flutter/treemap/item-builder.md @@ -1,7 +1,7 @@ --- layout: post -title: Item Builder in Flutter Treemap widget | Syncfusion -description: Learn here all about the Item Builder feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Item Builder in Flutter Treemap | Syncfusion® +description: Learn about item builder support in Syncfusion® Flutter Treemap (SfTreemap), including custom tile content, templates, layouts, and data visualization. platform: chart-sdk control: SfTreemap documentation: ug @@ -9,26 +9,37 @@ documentation: ug # Item Builder in Flutter Treemap (SfTreemap) -You can add any type of custom widgets such as image widget as a background of the tiles to easily visualize the type of data that a particular tile shows. +You can add any type of custom widget, such as an image widget as a background, to easily visualize the type of data that a particular tile shows. ## Add images You can add images as a background of the tiles using the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html) callback. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class ItemBuilderExample extends StatefulWidget { + const ItemBuilderExample({super.key}); + + @override + State createState() => _ItemBuilderExampleState(); +} + +class _ItemBuilderExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + const SocialMediaUsers('India', 'Facebook', 25.4), + const SocialMediaUsers('USA', 'Instagram', 19.11), + const SocialMediaUsers('Japan', 'Facebook', 13.3), + const SocialMediaUsers('Germany', 'Instagram', 10.65), + const SocialMediaUsers('France', 'Twitter', 7.54), + const SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -37,44 +48,43 @@ You can add images as a background of the tiles using the [`TreemapLevel.itemBui Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - itemBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Image.asset( - _getImageSource(tile)!, - ), - ); - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + itemBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Image.asset(_getImageSource(tile)!), + ); + }, + ), + ], ), ), + ), ); } -String? _getImageSource(TreemapTile tile) { - if (_source[tile.indices[0]].socialMedia == 'Facebook') { - return 'images/facebook.png'; - } else if (_source[tile.indices[0]].socialMedia == 'Instagram') { - return 'images/instagram.png'; - } else if (_source[tile.indices[0]].socialMedia == 'Twitter') { - return 'images/twitter.png'; - } - return null; + String? _getImageSource(TreemapTile tile) { + if (_source[tile.indices[0]].socialMedia == 'Facebook') { + return 'images/facebook.png'; + } else if (_source[tile.indices[0]].socialMedia == 'Instagram') { + return 'images/instagram.png'; + } else if (_source[tile.indices[0]].socialMedia == 'Twitter') { + return 'images/twitter.png'; + } + return null; + } } class SocialMediaUsers { @@ -92,4 +102,4 @@ class SocialMediaUsers { N> * Refer the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget, to change the position of the widget. -* Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), to add labels on the tiles. +* Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), to add labels on the tiles. \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/labels.md b/chart-sdk/flutter/treemap/labels.md index 84dfbe27e..cbb307a90 100644 --- a/chart-sdk/flutter/treemap/labels.md +++ b/chart-sdk/flutter/treemap/labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels in Flutter Treemap widget | Syncfusion -description: Learn here all about adding the Labels feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Labels in Flutter Treemap | Syncfusion® +description: Learn about label support in Syncfusion® Flutter Treemap (SfTreemap), including label customization, text styling, placement, and data visualization. platform: chart-sdk control: SfTreemap documentation: ug @@ -9,69 +9,120 @@ documentation: ug # Labels in Flutter Treemap (SfTreemap) -You can add any type of widgets like text widget to improve the readability of the individual tiles by providing brief descriptions on labels. +You can add any type of widget, like a text widget, to improve the readability of the individual tiles by providing brief descriptions on labels. ## Add labels You can add labels on the tiles using the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html) callback which is available in the [`SfTreemap.levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection. +The examples below use the same job vacancy data source and differ only in how the labels are rendered. + {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LabelsExample extends StatefulWidget { + const LabelsExample({super.key}); + + @override + State createState() => _LabelsExampleState(); +} +class _LabelsExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Testers', + vacancy: 35, + ), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 105, + ), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Management', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Accounts', + vacancy: 60, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Testers', + vacancy: 25, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 60, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Executive', + vacancy: 30, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Analyst', + vacancy: 40, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30, + ), + const JobVacancyModel( + country: 'UK', + job: 'HR Executives', + vacancy: 60, + ), + const JobVacancyModel( + country: 'UK', + job: 'Marketing', + vacancy: 40, + ), ]; super.initState(); } @@ -80,59 +131,62 @@ You can add labels on the tiles using the [`TreemapLevel.labelBuilder`](https:// Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.pink, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.green, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.blue, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text(tile.group), - ); - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.pink, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.green, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.blue, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text(tile.group), + ); + }, + ), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -147,67 +201,116 @@ class JobVacancyModel { ## Overflow mode -You can trim or fade the label when it is overflowed from the tile using the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) property. The possible values are [`visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible), [`ellipsis`](https://api.flutter.dev/flutter/painting/TextOverflow.html#ellipsis), [`clip`](https://api.flutter.dev/flutter/painting/TextOverflow.html#clip) and [`fade`](https://api.flutter.dev/flutter/painting/TextOverflow.html#fade). The default value of the [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html)property is [`TextOverflow.visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible). +You can trim or fade a label when it overflows the tile bounds by using the Flutter framework's [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) property inside the label builder. The possible values are [`visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible), [`ellipsis`](https://api.flutter.dev/flutter/painting/TextOverflow.html#ellipsis), [`clip`](https://api.flutter.dev/flutter/painting/TextOverflow.html#clip), and [`fade`](https://api.flutter.dev/flutter/painting/TextOverflow.html#fade). The default value of [`Text.overflow`](https://api.flutter.dev/flutter/widgets/Text/overflow.html) is [`TextOverflow.visible`](https://api.flutter.dev/flutter/painting/TextOverflow.html#visible). -By default, the labels will render even if it overflows from the tile. +By default, the labels render even if they overflow from the tile. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class LabelsOverflowExample extends StatefulWidget { + const LabelsOverflowExample({super.key}); + + @override + State createState() => _LabelsOverflowExampleState(); +} + +class _LabelsOverflowExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Testers', + vacancy: 35, + ), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 105, + ), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Management', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Accounts', + vacancy: 60, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Testers', + vacancy: 25, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 60, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Executive', + vacancy: 30, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Analyst', + vacancy: 40, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30, + ), + const JobVacancyModel( + country: 'UK', + job: 'HR Executives', + vacancy: 60, + ), + const JobVacancyModel( + country: 'UK', + job: 'Marketing', + vacancy: 40, + ), ]; super.initState(); } @@ -215,69 +318,72 @@ By default, the labels will render even if it overflows from the tile. @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.pink, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text( - tile.group, - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.green, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text( - tile.group, - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.blue, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Text( - tile.group, - overflow: TextOverflow.ellipsis, - ), - ); - }, - ), - ], - ), + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.pink, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text( + tile.group, + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.green, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text( + tile.group, + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.blue, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Text( + tile.group, + overflow: TextOverflow.ellipsis, + ), + ); + }, + ), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -292,65 +398,114 @@ class JobVacancyModel { ## Alignment -You can change the labels alignment by wrapping the text widget in the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget and setting the [`alignment`](https://api.flutter.dev/flutter/widgets/Align/alignment.html) property. +You can change the label alignment by wrapping the text widget in the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget and setting the [`alignment`](https://api.flutter.dev/flutter/widgets/Align/alignment.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LabelsAlignmentExample extends StatefulWidget { + const LabelsAlignmentExample({super.key}); + @override + State createState() => _LabelsAlignmentExampleState(); +} + +class _LabelsAlignmentExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Testers', + vacancy: 35, + ), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 105, + ), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Management', + vacancy: 40, + ), + const JobVacancyModel( + country: 'America', + job: 'Accounts', + vacancy: 60, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Testers', + vacancy: 25, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155, + ), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 60, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Executive', + vacancy: 30, + ), + const JobVacancyModel( + country: 'Germany', + job: 'Sales', + group: 'Analyst', + vacancy: 40, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100, + ), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30, + ), + const JobVacancyModel( + country: 'UK', + job: 'HR Executives', + vacancy: 60, + ), + const JobVacancyModel( + country: 'UK', + job: 'Marketing', + vacancy: 40, + ), ]; super.initState(); } @@ -359,59 +514,62 @@ You can change the labels alignment by wrapping the text widget in the [`Align`] Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.pink, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.green, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Text(tile.group), - ); - }, - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.blue, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Align( - alignment: Alignment.center, - child: Text(tile.group), - ); - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.pink, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.green, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Text(tile.group), + ); + }, + ), + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.blue, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Align( + alignment: Alignment.center, + child: Text(tile.group), + ); + }, + ), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -422,4 +580,4 @@ class JobVacancyModel { {% endhighlight %} {% endtabs %} -![labels alignment](images/labels/labels-alignment.png) +![labels alignment](images/labels/labels-alignment.png) \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/layout.md b/chart-sdk/flutter/treemap/layout.md index 53ba09b7f..46b1deafd 100644 --- a/chart-sdk/flutter/treemap/layout.md +++ b/chart-sdk/flutter/treemap/layout.md @@ -1,7 +1,7 @@ --- layout: post -title: Layouts in Flutter Treemap widget | Syncfusion -description: Learn here all about adding different layouts of the Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Layouts in Flutter Treemap | Syncfusion® +description: Learn about layout options in Syncfusion® Flutter Treemap (SfTreemap), including slice, dice, squarified, and custom data visualization layouts. platform: chart-sdk control: SfTreemap documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Layouts in Flutter Treemap (SfTreemap) -This section explains the different layouts in the treemap widget. The available layouts are, +This section explains the different layouts in the Treemap widget. The available layouts are: * Squarified * Slice @@ -17,22 +17,40 @@ This section explains the different layouts in the treemap widget. The available ## Squarified -The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.html) layout will arrange the rectangles in a row and wrap them to the next row according to the available size. The size of the particular rectangle is based on the value returned from [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. By default, squarified layout is used. +The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.html) layout arranges the rectangles in a row and wraps them to the next row according to the available size. The size of each rectangle is based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback. By default, the squarified layout is used. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SquarifiedLayoutExample extends StatefulWidget { + const SquarifiedLayoutExample({super.key}); + + @override + State createState() => + _SquarifiedLayoutExampleState(); +} + +class _SquarifiedLayoutExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -40,23 +58,30 @@ The [`squarified`](https://pub.dev/documentation/syncfusion_flutter_treemap/late @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _dataSource[index].continent; - }, - color: Colors.teal[200], - padding: const EdgeInsets.all(1.5), - ), - ], + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _dataSource[index].continent; + }, + color: Colors.teal[200], + padding: const EdgeInsets.all(1.5), + ), + ], + ), ), + ), ); } +} class PopulationModel { const PopulationModel({ @@ -75,22 +100,39 @@ class PopulationModel { ## Slice -The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.slice.html) layout will arrange each rectangle in a horizontal direction and the size of the rectangle will be based on the value returned from [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available height. +The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.slice.html) layout arranges each rectangle in a horizontal direction. The size of each rectangle is based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available height. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SliceLayoutExample extends StatefulWidget { + const SliceLayoutExample({super.key}); + @override + State createState() => _SliceLayoutExampleState(); +} + +class _SliceLayoutExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -98,23 +140,30 @@ The [`slice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/tr @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap.slice( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _dataSource[index].continent; - }, - color: Colors.teal[200], - padding: const EdgeInsets.all(1.5), - ), - ], + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap.slice( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _dataSource[index].continent; + }, + color: Colors.teal[200], + padding: const EdgeInsets.all(1.5), + ), + ], + ), ), + ), ); } +} class PopulationModel { const PopulationModel({ @@ -133,22 +182,39 @@ class PopulationModel { ## Dice -The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.dice.html) layout will arrange each rectangle in the vertical direction and the size of the rectangle will be based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available width. +The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/SfTreemap.dice.html) layout arranges each rectangle in the vertical direction. The size of each rectangle is based on the value returned from the [`weightValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/weightValueMapper.html) callback and the available width. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class DiceLayoutExample extends StatefulWidget { + const DiceLayoutExample({super.key}); + + @override + State createState() => _DiceLayoutExampleState(); +} +class _DiceLayoutExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -156,23 +222,30 @@ The [`dice`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/tre @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap.dice( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _dataSource[index].continent; - }, - color: Colors.teal[200], - padding: const EdgeInsets.all(1.5), - ), - ], + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap.dice( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _dataSource[index].continent; + }, + color: Colors.teal[200], + padding: const EdgeInsets.all(1.5), + ), + ], + ), ), + ), ); } +} class PopulationModel { const PopulationModel({ @@ -196,19 +269,36 @@ Tiles start to layout from the top-left to the bottom-right of the rectangle by N> It is applicable for squarified treemap. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LayoutDirectionExample extends StatefulWidget { + const LayoutDirectionExample({super.key}); + + @override + State createState() => _LayoutDirectionExampleState(); +} +class _LayoutDirectionExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -217,33 +307,37 @@ N> It is applicable for squarified treemap. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - layoutDirection: TreemapLayoutDirection.bottomRight, - levels: [ - TreemapLevel(groupMapper: (int index) { + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + layoutDirection: TreemapLayoutDirection.bottomRight, + levels: [ + TreemapLevel( + groupMapper: (int index) { return _dataSource[index].continent; - }, labelBuilder: (BuildContext context, TreemapTile tile) { + }, + labelBuilder: (BuildContext context, TreemapTile tile) { return Padding( padding: const EdgeInsets.all(4.0), child: Text( tile.group, - style: TextStyle(color: Colors.black), + style: const TextStyle(color: Colors.black), ), ); - }), - ], - ), + }, + ), + ], ), + ), ), ); } +} class PopulationModel { const PopulationModel({ @@ -267,19 +361,36 @@ You can sort the tiles either in ascending or descending order based on the [`so N> It is applicable for slice and dice treemap. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SortingExample extends StatefulWidget { + const SortingExample({super.key}); + + @override + State createState() => _SortingExampleState(); +} + +class _SortingExampleState extends State { late List _dataSource; @override void initState() { _dataSource = [ - PopulationModel(continent: 'Asia', populationInMillions: 25.4), - PopulationModel(continent: 'South America', populationInMillions: 19.11), - PopulationModel(continent: 'North America', populationInMillions: 13.3), - PopulationModel(continent: 'Europe', populationInMillions: 10.65), - PopulationModel(continent: 'Africa', populationInMillions: 7.54), - PopulationModel(continent: 'Australia', populationInMillions: 4.93), + const PopulationModel(continent: 'Asia', populationInMillions: 25.4), + const PopulationModel( + continent: 'South America', + populationInMillions: 19.11, + ), + const PopulationModel( + continent: 'North America', + populationInMillions: 13.3, + ), + const PopulationModel(continent: 'Europe', populationInMillions: 10.65), + const PopulationModel(continent: 'Africa', populationInMillions: 7.54), + const PopulationModel(continent: 'Australia', populationInMillions: 4.93), ]; super.initState(); } @@ -288,33 +399,37 @@ N> It is applicable for slice and dice treemap. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap.slice( - dataCount: _dataSource.length, - weightValueMapper: (int index) { - return _dataSource[index].populationInMillions; - }, - sortAscending: true, - levels: [ - TreemapLevel(groupMapper: (int index) { + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap.slice( + dataCount: _dataSource.length, + weightValueMapper: (int index) { + return _dataSource[index].populationInMillions; + }, + sortAscending: true, + levels: [ + TreemapLevel( + groupMapper: (int index) { return _dataSource[index].continent; - }, labelBuilder: (BuildContext context, TreemapTile tile) { + }, + labelBuilder: (BuildContext context, TreemapTile tile) { return Padding( padding: const EdgeInsets.all(4.0), child: Text( tile.group, - style: TextStyle(color: Colors.black), + style: const TextStyle(color: Colors.black), ), ); - }), - ], - ), + }, + ), + ], ), + ), ), ); } +} class PopulationModel { const PopulationModel({ diff --git a/chart-sdk/flutter/treemap/legend.md b/chart-sdk/flutter/treemap/legend.md index db61bfbd8..94fc3a8ec 100644 --- a/chart-sdk/flutter/treemap/legend.md +++ b/chart-sdk/flutter/treemap/legend.md @@ -1,7 +1,7 @@ --- layout: post -title: Legend in Flutter Treemap widget | Syncfusion -description: Learn here all about adding the Legend feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Legend in Flutter Treemap | Syncfusion® +description: Learn about legend support in Syncfusion® Flutter Treemap (SfTreemap), including legend customization, color mapping, positioning, and styling options. platform: chart-sdk control: SfTreemap documentation: ug @@ -15,9 +15,22 @@ The legend provides clarity about the data plotted on the treemap. To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property. By default, the legend item's text is rendered based on the value of [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) property. The default value of the [`legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property is `null`. +The examples in this section use the same data source and differ only in the legend constructor. + {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class DefaultLegendExample extends StatefulWidget { + const DefaultLegendExample({super.key}); + + @override + State createState() => _DefaultLegendExampleState(); +} +class _DefaultLegendExampleState extends State { late List _source; @override @@ -37,7 +50,7 @@ To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documen Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -58,6 +71,7 @@ To display a legend, initialize the [`SfTreemap.legend`](https://pub.dev/documen ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -80,8 +94,19 @@ N> You can show bar shape legend by initializing the [`SfTreemap.legend`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/legend.html) property as [`TreemapLegend.bar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.bar.html). By default, the legend item's text is rendered based on the value of [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class BarLegendExample extends StatefulWidget { + const BarLegendExample({super.key}); + + @override + State createState() => _BarLegendExampleState(); +} + +class _BarLegendExampleState extends State { late List _source; @override @@ -101,7 +126,7 @@ You can show bar shape legend by initializing the [`SfTreemap.legend`](https://p Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -122,6 +147,7 @@ You can show bar shape legend by initializing the [`SfTreemap.legend`](https://p ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -141,11 +167,23 @@ N> ## Icon and text customization -Customize legend icons and text based on the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) and [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) properties respectively by default. It is possible to customize the legend icons color and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) based on the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/value.html) or [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. You can also customize the legend item's text using the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) when setting the [`TreemapColorMapper.range`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.range.html) color mapper constructor. +Legend icons and text are customized based on the [`TreemapLevel.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/color.html) and [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) properties by default. It is possible to customize the legend icon colors and texts using the [`TreemapColorMapper.color`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/color.html) based on the [`TreemapColorMapper.value`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/value.html) or [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. You can also customize the legend item's text using the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) when setting the [`TreemapColorMapper.range`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/TreemapColorMapper.range.html) color mapper constructor. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class IconTextCustomizationExample extends StatefulWidget { + const IconTextCustomizationExample({super.key}); + + @override + State createState() => + _IconTextCustomizationExampleState(); +} + +class _IconTextCustomizationExampleState extends State { late List _source; late List _colorMappers; @@ -192,6 +230,7 @@ Customize legend icons and text based on the [`TreemapLevel.color`](https://pub ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -213,8 +252,20 @@ You can customize the first segment label of the legend by using the [`TreemapCo By default, the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value appears at the start of the first segment, and the [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) value appears at the end. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class FirstSegmentLabelExample extends StatefulWidget { + const FirstSegmentLabelExample({super.key}); + + @override + State createState() => + _FirstSegmentLabelExampleState(); +} +class _FirstSegmentLabelExampleState extends State { late List _source; late List _colorMappers; @@ -264,6 +315,7 @@ By default, the [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfu ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -280,13 +332,25 @@ class SocialMediaUsers { ## Scrollbar visibility -You can control the visibility of the scrollbar in the treemap legend using the [`shouldAlwaysShowScrollbar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/shouldAlwaysShowScrollbar.html) property. When set to `true`, the scrollbar for the legend will always be visible, making it easier to see and navigate through legend items, even if all items fit within the available space. +You can control the visibility of the scrollbar in the treemap legend using the [`shouldAlwaysShowScrollbar`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/shouldAlwaysShowScrollbar.html) property. When set to `true`, the scrollbar for the legend will always be visible, making it easier to see and navigate through legend items, even if all items fit within the available space. The default value is `false`, so the scrollbar appears in legend only when the legend items exceed the available space and scrolling is needed. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class ScrollbarVisibilityExample extends StatefulWidget { + const ScrollbarVisibilityExample({super.key}); + + @override + State createState() => + _ScrollbarVisibilityExampleState(); +} + +class _ScrollbarVisibilityExampleState extends State { late List _source; @override @@ -306,7 +370,7 @@ The default value is `false`, so the scrollbar appears in legend only when the l Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -330,6 +394,7 @@ The default value is `false`, so the scrollbar appears in legend only when the l ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -349,8 +414,19 @@ You can set a title specifically for the legend in the treemap by using the [`ti By default, the value of the legend's [`title`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/title.html) property is `null`, indicating that no title is displayed for the legend, unless it is specified explicitly. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendTitleExample extends StatefulWidget { + const LegendTitleExample({super.key}); + + @override + State createState() => _LegendTitleExampleState(); +} + +class _LegendTitleExampleState extends State { late List _source; @override @@ -370,7 +446,7 @@ By default, the value of the legend's [`title`](https://pub.dev/documentation/sy Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -393,6 +469,7 @@ By default, the value of the legend's [`title`](https://pub.dev/documentation/sy ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -412,8 +489,19 @@ class SocialMediaUsers { You can position the legend items in different directions using the [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property. The default value of the [position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property is [`TreemapLegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html). The possible values are [`left`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#left), [`right`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#right), [`top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#top), and [`bottom`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html#bottom). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendPositionExample extends StatefulWidget { + const LegendPositionExample({super.key}); + @override + State createState() => _LegendPositionExampleState(); +} + +class _LegendPositionExampleState extends State { late List _source; @override @@ -433,7 +521,7 @@ You can position the legend items in different directions using the [`TreemapLeg Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -456,6 +544,7 @@ You can position the legend items in different directions using the [`TreemapLeg ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -475,13 +564,24 @@ N> ## Offset -You can place the legend in custom position using the [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property. The default value of the [`offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property is `null`. +You can place the legend in a custom position using the [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property. The default value of the [`offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) property is `null`. -If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) has been set with the property [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) as top, then the legend will be placed in top but with absolute position, i.e. legend will not take dedicated position for it and will be drawn at the top of the map. +If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/offset.html) has been set with the property [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) as top, then the legend will be placed at the top but with an absolute position, meaning it will not take a dedicated position and will be drawn at the top of the map. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendOffsetExample extends StatefulWidget { + const LegendOffsetExample({super.key}); + + @override + State createState() => _LegendOffsetExampleState(); +} +class _LegendOffsetExampleState extends State { late List _source; @override @@ -501,7 +601,7 @@ If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusio Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( + child: SizedBox( height: 400, width: 400, child: SfTreemap( @@ -517,13 +617,14 @@ If the property [`TreemapLegend.offset`](https://pub.dev/documentation/syncfusio ), ], legend: TreemapLegend( - offset: Offset(70, 250), + offset: const Offset(70, 250), ), ), ), ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -549,8 +650,19 @@ If the legend position is `left` or `right`, then the default scroll direction i If the legend position is `top` or `bottom`, then the default scroll direction is `horizontal`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class OverflowModeExample extends StatefulWidget { + const OverflowModeExample({super.key}); + + @override + State createState() => _OverflowModeExampleState(); +} +class _OverflowModeExampleState extends State { late List _source; @override @@ -572,29 +684,30 @@ If the legend position is `top` or `bottom`, then the default scroll direction i Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - legend: TreemapLegend( - overflowMode: TreemapLegendOverflowMode.scroll, + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, ), + ], + legend: TreemapLegend( + overflowMode: TreemapLegendOverflowMode.scroll, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -618,8 +731,19 @@ If the legend position is `left` or `right`, then the default scroll direction i If the legend position is `top` or `bottom`, then the default scroll direction is `horizontal`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class BarOverflowModeExample extends StatefulWidget { + const BarOverflowModeExample({super.key}); + + @override + State createState() => _BarOverflowModeExampleState(); +} +class _BarOverflowModeExampleState extends State { late List _source; @override @@ -639,29 +763,30 @@ If the legend position is `top` or `bottom`, then the default scroll direction i Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - legend: TreemapLegend.bar( - overflowMode: TreemapLegendOverflowMode.scroll, + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, ), + ], + legend: TreemapLegend.bar( + overflowMode: TreemapLegendOverflowMode.scroll, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -684,19 +809,30 @@ N> You can customize the legend item's text style using the [`TreemapLegend.textStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/textStyle.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TextStyleExample extends StatefulWidget { + const TextStyleExample({super.key}); + + @override + State createState() => _TextStyleExampleState(); +} + +class _TextStyleExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -705,34 +841,35 @@ You can customize the legend item's text style using the [`TreemapLegend.textSty Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - legend: TreemapLegend( - textStyle: TextStyle( - color: Colors.red, - fontSize: 14, - fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], + legend: TreemapLegend( + textStyle: const TextStyle( + color: Colors.red, + fontSize: 14, + fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, ), ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -758,19 +895,31 @@ You can customize the legend items using the following properties. * **padding** - Used to set padding around the legend. The default value of the [`padding`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/padding.html) property is `EdgeInsets.all(10.0)`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LegendAppearanceExample extends StatefulWidget { + const LegendAppearanceExample({super.key}); + + @override + State createState() => + _LegendAppearanceExampleState(); +} + +class _LegendAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -779,33 +928,34 @@ You can customize the legend items using the following properties. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - legend: TreemapLegend( - iconType: TreemapIconType.triangle, - iconSize: Size(12.0, 12.0), - spacing: 15, - padding: EdgeInsets.all(12.0), - direction: Axis.vertical, + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, ), + ], + legend: TreemapLegend( + iconType: TreemapIconType.triangle, + iconSize: const Size(12.0, 12.0), + spacing: 15, + padding: const EdgeInsets.all(12.0), + direction: Axis.vertical, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -830,27 +980,38 @@ N> You can set solid color for the legend bar by using the [`TreemapLegendPaintingStyle.solid`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#solid). By defaults [`TreemapLegendPaintingStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html) will be [`solid`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#solid). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SolidBarLegendExample extends StatefulWidget { + const SolidBarLegendExample({super.key}); + + @override + State createState() => _SolidBarLegendExampleState(); +} +class _SolidBarLegendExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), - ]; + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), + ]; super.initState(); } @@ -858,28 +1019,29 @@ You can set solid color for the legend bar by using the [`TreemapLegendPaintingS Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.solid, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.solid, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -899,27 +1061,39 @@ class SocialMediaUsers { You can set gradient color for the legend bar by using the [`TreemapLegendPaintingStyle.gradient`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html#gradient). {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class GradientBarLegendExample extends StatefulWidget { + const GradientBarLegendExample({super.key}); + + @override + State createState() => + _GradientBarLegendExampleState(); +} +class _GradientBarLegendExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), - ]; + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), + ]; super.initState(); } @@ -927,28 +1101,29 @@ You can set gradient color for the legend bar by using the [`TreemapLegendPainti Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -975,19 +1150,31 @@ You can customize the legend items using the following properties. * **padding** - Used to set padding around the legend. The default value of the [`padding`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.bar.html) property is `EdgeInsets.all(10.0)`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class BarLegendAppearanceExample extends StatefulWidget { + const BarLegendAppearanceExample({super.key}); + + @override + State createState() => + _BarLegendAppearanceExampleState(); +} + +class _BarLegendAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('United Kingdom', 'Instagram', 4.93), - SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('United Kingdom', 'Instagram', 4.93), + SocialMediaUsers('France', 'Twitter', 7.54), ]; super.initState(); } @@ -996,34 +1183,35 @@ You can customize the legend items using the following properties. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - legend: TreemapLegend.bar( - segmentSize: Size(60, 12), - labelOverflow: TreemapLabelOverflow.ellipsis, - edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, - padding: EdgeInsets.all(12), - direction: Axis.horizontal, - spacing: 5, + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, ), + ], + legend: TreemapLegend.bar( + segmentSize: const Size(60, 12), + labelOverflow: TreemapLabelOverflow.ellipsis, + edgeLabelsPlacement: TreemapLegendEdgeLabelsPlacement.center, + padding: const EdgeInsets.all(12), + direction: Axis.horizontal, + spacing: 5, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1047,27 +1235,39 @@ You can place the labels either between the segments or on the segments using th The labels are positioned between the segments when setting range color mapper without setting color mapper [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property. The [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value of the first item is positioned at starting point of the first segment and the [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) value of the first item is placed at the first segment end position. For other segments, the values of [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) is positioned as label between the other segments. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class LabelPlacementRangeColorMapperExample extends StatefulWidget { + const LabelPlacementRangeColorMapperExample({super.key}); + + @override + State createState() => + _LabelPlacementRangeColorMapperExampleState(); +} +class _LabelPlacementRangeColorMapperExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; _colorMappers = [ - TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), - TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), - TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), - ]; + TreemapColorMapper.range(from: 0, to: 10, color: Colors.blue[200]!), + TreemapColorMapper.range(from: 10, to: 20, color: Colors.deepOrange), + TreemapColorMapper.range(from: 20, to: 30, color: Colors.blue[800]!), + ]; super.initState(); } @@ -1075,29 +1275,30 @@ The labels are positioned between the segments when setting range color mapper w Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1115,30 +1316,42 @@ class SocialMediaUsers { The labels are positioned between the segments when setting range color mapper along with setting color mapper [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property. The [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) value of the first item is positioned at starting point of the first segment and the [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) value of the first item is placed at the first segment end position. For Other segments, the value of [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) is positioned as label between the segments. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class NamedRangeColorMapperExample extends StatefulWidget { + const NamedRangeColorMapperExample({super.key}); + + @override + State createState() => + _NamedRangeColorMapperExampleState(); +} + +class _NamedRangeColorMapperExampleState extends State { late List _source; late List _colorMappers; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; _colorMappers = [ - TreemapColorMapper.range( - from: 0, to: 10, color: Colors.blue[200]!, name: '<10'), - TreemapColorMapper.range( - from: 10, to: 20, color: Colors.deepOrange, name: '10 - 20'), - TreemapColorMapper.range( - from: 20, to: 30, color: Colors.blue[800]!, name: '20 - 30'), - ]; + TreemapColorMapper.range( + from: 0, to: 10, color: Colors.blue[200]!, name: '<10'), + TreemapColorMapper.range( + from: 10, to: 20, color: Colors.deepOrange, name: '10 - 20'), + TreemapColorMapper.range( + from: 20, to: 30, color: Colors.blue[800]!, name: '20 - 30'), + ]; super.initState(); } @@ -1146,29 +1359,30 @@ The labels are positioned between the segments when setting range color mapper a Widget build(BuildContext context) { return Scaffold( body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - padding: const EdgeInsets.all(1.5), - groupMapper: (int index) { - return _source[index].country; - }, - colorValueMapper: (TreemapTile tile) { - return tile.weight; - }, - ), - ], - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + padding: const EdgeInsets.all(1.5), + groupMapper: (int index) { + return _source[index].country; + }, + colorValueMapper: (TreemapTile tile) { + return tile.weight; + }, ), + ], + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + labelsPlacement: TreemapLegendLabelsPlacement.betweenItems, + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1186,7 +1400,20 @@ class SocialMediaUsers { The labels are positioned at the center of the segments when setting the [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/TreemapLegend.bar.html) property to [`TreemapLegendLabelsPlacement.onItem`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendLabelsPlacement.html#onItem). The labels will based on the value of [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property. If the value of [`TreemapColorMapper.name`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/name.html) property is null, labels will be based on the values of [`TreemapColorMapper.from`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/from.html) and [`TreemapColorMapper.to`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapColorMapper/to.html) properties. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class BarLegendLabelPlacementExample extends StatefulWidget { + const BarLegendLabelPlacementExample({super.key}); + + @override + State createState() => + _BarLegendLabelPlacementExampleState(); +} + +class _BarLegendLabelPlacementExampleState extends State { late List _source; late List _colorMappers; @@ -1241,6 +1468,7 @@ The labels are positioned at the center of the segments when setting the [`label ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1260,7 +1488,20 @@ class SocialMediaUsers { The [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/labelsPlacement.html) option is not applicable for the legend label applied with equal color mapper. By default, the labels are positioned at center of the segment. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class PointerCustomizationExample extends StatefulWidget { + const PointerCustomizationExample({super.key}); + + @override + State createState() => + _PointerCustomizationExampleState(); +} + +class _PointerCustomizationExampleState extends State { late List _source; late List _colorMappers; @@ -1314,6 +1555,7 @@ The [`labelsPlacement`](https://pub.dev/documentation/syncfusion_flutter_treemap ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -1333,8 +1575,19 @@ class SocialMediaUsers { You may show a pointer on the solid or gradient bar legend while hovering over a tile using the [`showPointerOnHover`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/showPointerOnHover.html) property. The default value of the [`showPointerOnHover`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/showPointerOnHover.html) property is `false`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class ShowPointerExample extends StatefulWidget { + const ShowPointerExample({super.key}); + + @override + State createState() => _ShowPointerExampleState(); +} +class _ShowPointerExampleState extends State { late List _population; late List _colorMappers; @@ -1362,37 +1615,36 @@ You may show a pointer on the solid or gradient bar legend while hovering over a @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _population.length, - weightValueMapper: (int index) => - _population[index].population.toDouble(), - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, - showPointerOnHover: true, - ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _population[index].state; - }, - colorValueMapper: (TreemapTile tile) { - return _population[tile.indices[0]].population / 10000; - }, - ) - ], - ), + return Scaffold( + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _population.length, + weightValueMapper: (int index) => + _population[index].population.toDouble(), + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + showPointerOnHover: true, ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _population[index].state; + }, + colorValueMapper: (TreemapTile tile) { + return _population[tile.indices[0]].population / 10000; + }, + ) + ], ), ), + ), ); } +} class IndianPopulation { const IndianPopulation(this.state, this.population); @@ -1415,8 +1667,19 @@ The pointer is used to indicate the exact color of the hovering tile on the lege The [`pointerBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerBuilder.html) will be called when the user interacts with the tiles i.e., while tapping in touch devices and hovering in the mouse enabled devices. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class PointerBuilderExample extends StatefulWidget { + const PointerBuilderExample({super.key}); + @override + State createState() => _PointerBuilderExampleState(); +} + +class _PointerBuilderExampleState extends State { late List _population; late List _colorMappers; @@ -1444,40 +1707,39 @@ The [`pointerBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/ @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _population.length, - weightValueMapper: (int index) => - _population[index].population.toDouble(), - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, - showPointerOnHover: true, - pointerBuilder: (BuildContext context, dynamic value) { - return Icon(Icons.arrow_downward, size: 15); - }, - ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _population[index].state; - }, - colorValueMapper: (TreemapTile tile) { - return _population[tile.indices[0]].population / 10000; - }, - ) - ], - ), + return Scaffold( + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _population.length, + weightValueMapper: (int index) => + _population[index].population.toDouble(), + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + showPointerOnHover: true, + pointerBuilder: (BuildContext context, dynamic value) { + return const Icon(Icons.arrow_downward, size: 15); + }, ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _population[index].state; + }, + colorValueMapper: (TreemapTile tile) { + return _population[tile.indices[0]].population / 10000; + }, + ) + ], ), ), + ), ); } +} class IndianPopulation { const IndianPopulation(this.state, this.population); @@ -1496,8 +1758,20 @@ class IndianPopulation { You can customize the size and color of the pointer using the [`pointerSize`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerSize.html) and [`pointerColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerColor.html) properties. The default value of the [`pointerSize`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/pointerSize.html) property is `Size(16, 12)`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class PointerCustomizationExample extends StatefulWidget { + const PointerCustomizationExample({super.key}); + + @override + State createState() => + _PointerCustomizationExampleState(); +} + +class _PointerCustomizationExampleState extends State { late List _population; late List _colorMappers; @@ -1525,39 +1799,38 @@ You can customize the size and color of the pointer using the [`pointerSize`](ht @override Widget build(BuildContext context) { - return MaterialApp( - home: Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _population.length, - weightValueMapper: (int index) => - _population[index].population.toDouble(), - colorMappers: _colorMappers, - legend: TreemapLegend.bar( - segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, - showPointerOnHover: true, - pointerSize: Size(20, 20), - pointerColor: Colors.deepPurple, - ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _population[index].state; - }, - colorValueMapper: (TreemapTile tile) { - return _population[tile.indices[0]].population / 10000; - }, - ) - ], - ), + return Scaffold( + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _population.length, + weightValueMapper: (int index) => + _population[index].population.toDouble(), + colorMappers: _colorMappers, + legend: TreemapLegend.bar( + segmentPaintingStyle: TreemapLegendPaintingStyle.gradient, + showPointerOnHover: true, + pointerSize: const Size(20, 20), + pointerColor: Colors.deepPurple, ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _population[index].state; + }, + colorValueMapper: (TreemapTile tile) { + return _population[tile.indices[0]].population / 10000; + }, + ) + ], ), ), + ), ); } +} class IndianPopulation { const IndianPopulation(this.state, this.population); @@ -1569,4 +1842,4 @@ class IndianPopulation { {% endhighlight %} {% endtabs %} -![Bar legend pointer customization](images/legend/bar-legend-pointer-customization.png) +![Bar legend pointer customization](images/legend/bar-legend-pointer-customization.png) \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/levels.md b/chart-sdk/flutter/treemap/levels.md index 774ea54af..33e99a0fc 100644 --- a/chart-sdk/flutter/treemap/levels.md +++ b/chart-sdk/flutter/treemap/levels.md @@ -1,7 +1,7 @@ --- layout: post -title: Flat and Hierarchical Levels in Flutter Treemap | Syncfusion -description: Learn here all about the Flat and Hierarchical Levels feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Flat and Hierarchical Levels in Flutter Treemap | Syncfusion® +description: Learn about flat and hierarchical levels in Syncfusion® Flutter Treemap (SfTreemap), including grouping, hierarchy visualization, and drilldown support. platform: chart-sdk control: SfTreemap documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Flat and Hierarchical Levels in Flutter Treemap (SfTreemap) -The levels of the treemap can be categorized into the following two types, +The levels of the treemap can be categorized into the following two types: * Flat level. * Hierarchical level. @@ -18,22 +18,34 @@ The levels of the treemap can be categorized into the following two types, There will be a tile for each unique value returned in the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) callback which is added to the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection property of [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html). -### Squarified +### Squarified flat level example {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapFlatLevelExample extends StatefulWidget { + const TreemapFlatLevelExample({super.key}); + + @override + State createState() => + _TreemapFlatLevelExampleState(); +} + +class _TreemapFlatLevelExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('South America', 19.11), - PopulationModel('North America', 13.3), - PopulationModel('Europe', 10.65), - PopulationModel('Africa', 7.54), - PopulationModel('Australia', 4.93), + const PopulationModel('Asia', 25.4), + const PopulationModel('South America', 19.11), + const PopulationModel('North America', 13.3), + const PopulationModel('Europe', 10.65), + const PopulationModel('Africa', 7.54), + const PopulationModel('Australia', 4.93), ]; super.initState(); } @@ -42,26 +54,27 @@ There will be a tile for each unique value returned in the [`TreemapLevel.groupM Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - ), - ], - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + ), + ], ), ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -83,69 +96,82 @@ N> ## Hierarchical level -Hierarchical level arrange the tiles in the form of nested rectangles. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data. You can have more than one [`TreemapLevel`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel-class.html) in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. +Hierarchical levels arrange the tiles in the form of nested rectangles. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data. You can have more than one [`TreemapLevel`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel-class.html) in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection to form a hierarchical treemap. The first level will work similarly to the flat level. From the next level in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection, the items returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) for the indices, will be placed inside the rectangle for the same indices returned from the [`TreemapLevel.groupMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/groupMapper.html) in the previous level. This will go on until the last level in the [`levels`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/levels.html) collection. -### Squarified +### Squarified hierarchical level example {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapHierarchicalLevelExample extends StatefulWidget { + const TreemapHierarchicalLevelExample({super.key}); + + @override + State createState() => + _TreemapHierarchicalLevelExampleState(); +} +class _TreemapHierarchicalLevelExampleState + extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), + const JobVacancyModel( + country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 105), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), + const JobVacancyModel( + country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 60), + const JobVacancyModel( + country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), + const JobVacancyModel( + country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30), + const JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), + const JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), ]; super.initState(); } @@ -154,33 +180,36 @@ The first level will work similarly to the flat level. From the next level in th Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].vacancy; - }, - levels: [ - TreemapLevel(groupMapper: (int index) => _source[index].country), - TreemapLevel(groupMapper: (int index) => _source[index].job), - TreemapLevel(groupMapper: (int index) => _source[index].group), - TreemapLevel(groupMapper: (int index) => _source[index].role), - ], - ), + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel(groupMapper: (int index) => _source[index].country), + TreemapLevel(groupMapper: (int index) => _source[index].job), + TreemapLevel(groupMapper: (int index) => _source[index].group), + TreemapLevel(groupMapper: (int index) => _source[index].role), + ], ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; @@ -209,65 +238,77 @@ You can customize the levels using the following properties: * **Border** - Specifies the border color, border width and border radius for the group using the [`TreemapLevel.border`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/border.html) property. -### Squarified +### Squarified appearance example {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TreemapAppearanceExample extends StatefulWidget { + const TreemapAppearanceExample({super.key}); + + @override + State createState() => + _TreemapAppearanceExampleState(); +} +class _TreemapAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), - JobVacancyModel( - country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 105), - JobVacancyModel( - country: 'America', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 40), - JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), - JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), - JobVacancyModel( - country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 155), - JobVacancyModel( - country: 'India', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 60), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), - JobVacancyModel( - country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Windows', - vacancy: 100), - JobVacancyModel( - country: 'UK', - job: 'Technical', - group: 'Developers', - role: 'Web', - vacancy: 30), - JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), - JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Sales', vacancy: 70), + const JobVacancyModel( + country: 'America', job: 'Technical', group: 'Testers', vacancy: 35), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 105), + const JobVacancyModel( + country: 'America', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Management', vacancy: 40), + const JobVacancyModel(country: 'America', job: 'Accounts', vacancy: 60), + const JobVacancyModel( + country: 'India', job: 'Technical', group: 'Testers', vacancy: 25), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 155), + const JobVacancyModel( + country: 'India', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 60), + const JobVacancyModel( + country: 'Germany', job: 'Sales', group: 'Executive', vacancy: 30), + const JobVacancyModel( + country: 'Germany', job: 'Sales', group: 'Analyst', vacancy: 40), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Windows', + vacancy: 100), + const JobVacancyModel( + country: 'UK', + job: 'Technical', + group: 'Developers', + role: 'Web', + vacancy: 30), + const JobVacancyModel(country: 'UK', job: 'HR Executives', vacancy: 60), + const JobVacancyModel(country: 'UK', job: 'Marketing', vacancy: 40), ]; super.initState(); } @@ -275,68 +316,77 @@ You can customize the levels using the following properties: @override Widget build(BuildContext context) { return Scaffold( - body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].vacancy; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) => _source[index].country, - color: Colors.blue, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.blue, - width: 1, + body: Center( + child: Container( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].vacancy; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) => _source[index].country, + color: Colors.blue, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.blue, + width: 1, + ), ), + padding: const EdgeInsets.all(2.5), ), - padding: EdgeInsets.all(2.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].job, - color: Colors.orangeAccent, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.orangeAccent, - width: 1, + TreemapLevel( + groupMapper: (int index) => _source[index].job, + color: Colors.orangeAccent, + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.orangeAccent, + width: 1, + ), ), + padding: const EdgeInsets.all(2.5), ), - padding: EdgeInsets.all(2.5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].group, - color: Colors.green[300], - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.green, - width: 1, + TreemapLevel( + groupMapper: (int index) => _source[index].group, + color: Colors.green[300], + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.green, + width: 1, + ), ), + padding: const EdgeInsets.all(5), ), - padding: EdgeInsets.all(5), - ), - TreemapLevel( - groupMapper: (int index) => _source[index].role, - color: Colors.pink[300], - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.pink, - width: 1, + TreemapLevel( + groupMapper: (int index) => _source[index].role, + color: Colors.pink[300], + border: RoundedRectangleBorder( + side: BorderSide( + color: Colors.pink, + width: 1, + ), ), + padding: const EdgeInsets.all(5), ), - padding: EdgeInsets.all(5), - ), - ], + ], + ), ), + ), ); } +} class JobVacancyModel { - const JobVacancyModel( - {required this.country, - required this.job, - this.group, - this.role, - required this.vacancy}); + const JobVacancyModel({ + required this.country, + required this.job, + this.group, + this.role, + required this.vacancy, + }); + final String country; final String job; final String? group; diff --git a/chart-sdk/flutter/treemap/overview.md b/chart-sdk/flutter/treemap/overview.md index 96c0777fe..b6f5ff220 100644 --- a/chart-sdk/flutter/treemap/overview.md +++ b/chart-sdk/flutter/treemap/overview.md @@ -1,17 +1,19 @@ --- layout: post -title: About Flutter Treemap widget | Syncfusion -description: Learn here all about the introduction of Syncfusion Flutter Treemap (SfTreemap) widget, its features, and more. +title: About Flutter Treemap Control | Syncfusion® +description: Learn about the Syncfusion® Flutter Treemap (SfTreemap), its features, hierarchical data visualization, and customization options. platform: chart-sdk control: SfTreemap documentation: ug --- -# Flutter Treemap (SfTreemap) Overview +# About Flutter Treemap Control (SfTreemap) Syncfusion® Flutter Treemap is a powerful and customizable widget that allows you to create interactive treemaps in Flutter applications. It offers a rich feature set including selection, legends, labels, tooltips, color mapping, and more. -### Features +![Flutter Treemap](images/overview/treemap_overview.png) + +## Features * **Layouts** - Utilize various layouts based on algorithms such as squarified, slice, and dice to represent both flat and hierarchically-structured data. @@ -28,3 +30,5 @@ Syncfusion® Flutter Treemap is a powerful and customizable widget * **Tooltip** - Use customizable tooltips to display additional information about the tiles on the treemap. * **Custom background widgets** - Add custom widgets, such as image widgets, as backgrounds of the tiles to enrich the UI and easily visualize the data type that a particular tile represents. + +For step-by-step installation and setup instructions, see [Getting Started with Flutter Treemap](getting-started.md). \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/right-to-left.md b/chart-sdk/flutter/treemap/right-to-left.md index 0fb9d773b..3731ca5d7 100644 --- a/chart-sdk/flutter/treemap/right-to-left.md +++ b/chart-sdk/flutter/treemap/right-to-left.md @@ -1,44 +1,60 @@ --- layout: post -title: RTL in Flutter Treemap widget | Syncfusion -description: Learn here all about enabling the RTL rendering in the Syncfusion Flutter Treemap (SfTreemap) widget. +title: Right-to-Left (RTL) in Flutter Treemap | Syncfusion® +description: Learn about right-to-left (RTL) support in Syncfusion® Flutter Treemap (SfTreemap), including layout customization, localization, and RTL rendering. platform: chart-sdk control: SfTreemap documentation: ug --- -# Right to Left (RTL) in Flutter Treemap (SfTreemap) +# Right-to-Left (RTL) in Flutter Treemap (SfTreemap) -## RTL rendering ways +## Enable RTL rendering -Right to left rendering can be achieved in the following ways: +Right-to-left rendering can be achieved in the following ways: -### Wrapping the SfTreemap with Directionality widget +### Wrapping the SfTreemap with the Directionality widget -The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to [`rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). +The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget, and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to [`rtl`](https://api.flutter.dev/flutter/dart-ui/TextDirection.html#rtl). {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLExample()); +} + +class RTLExample extends StatefulWidget { + const RTLExample({super.key}); + + @override + State createState() => _RTLExampleState(); +} + +class _RTLExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Column( + return MaterialApp( + home: Scaffold( + body: Column( children: [ Expanded( child: Directionality( @@ -66,8 +82,10 @@ The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev ), ], ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -81,10 +99,10 @@ class PopulationModel { ### Changing the locale to RTL languages -The treemap elements will render in right to left direction if the locale belongs to RTL languages such as (Arabic ,Persian ,Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html), [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html), [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) and adding the flutter_localizations package to your pubspec.yaml file. +The treemap elements will render in the right-to-left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, or Urdu. You can achieve this by specifying the MaterialApp properties such as [`localizationsDelegates`](https://api.flutter.dev/flutter/material/MaterialApp/localizationsDelegates.html), [`supportedLocales`](https://api.flutter.dev/flutter/material/MaterialApp/supportedLocales.html), [`locale`](https://api.flutter.dev/flutter/material/MaterialApp/locale.html), and adding the flutter_localizations package to your pubspec.yaml file. {% tabs %} -{% highlight Dart %} +{% highlight yaml %} dependencies: flutter_localizations: @@ -94,19 +112,35 @@ dependencies: {% endtabs %} {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLLocaleExample()); +} + +class RTLLocaleExample extends StatefulWidget { + const RTLLocaleExample({super.key}); + @override + State createState() => _RTLLocaleExampleState(); +} + +class _RTLLocaleExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @@ -114,38 +148,37 @@ dependencies: @override Widget build(BuildContext context) { return MaterialApp( - localizationsDelegates: [ - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: [ - Locale("fa", "IR"), - ], - locale: Locale("fa", "IR"), - home: Scaffold( - backgroundColor: Colors.white, - body: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - ), - ], - ), + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: const [Locale('fa', 'IR')], + locale: const Locale('fa', 'IR'), + home: Scaffold( + backgroundColor: Colors.white, + body: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, + ), + ], ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -164,62 +197,74 @@ class PopulationModel { Labels will be rendered from right to left direction. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLLabelsExample()); +} + +class RTLLabelsExample extends StatefulWidget { + const RTLLabelsExample({super.key}); + + @override + State createState() => _RTLLabelsExampleState(); +} +class _RTLLabelsExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( + return MaterialApp( + home: Scaffold( + body: Center( + child: SizedBox( height: 400, width: 400, - child: Column( - children: [ - Expanded( - child: Directionality( - textDirection: TextDirection.rtl, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - ), - ], - ), + child: Directionality( + textDirection: TextDirection.rtl, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, ), - ), - ], + ], + ), ), ), ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -238,63 +283,75 @@ class PopulationModel { Legend items will be rendered from right to left direction. It is applicable for both solid and bar type legend. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLLegendExample()); +} + +class RTLLegendExample extends StatefulWidget { + const RTLLegendExample({super.key}); + @override + State createState() => _RTLLegendExampleState(); +} + +class _RTLLegendExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( + return MaterialApp( + home: Scaffold( + body: Center( + child: SizedBox( height: 400, width: 400, - child: Column( - children: [ - Expanded( - child: Directionality( - textDirection: TextDirection.rtl, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - ), - ], - legend: TreemapLegend(), - ), + child: Directionality( + textDirection: TextDirection.rtl, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, ), - ), - ], + ], + legend: TreemapLegend(), + ), ), ), ), + ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -313,98 +370,116 @@ class PopulationModel { Tooltip text will be rendered from right to left direction. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +void main() { + runApp(const RTLTooltipExample()); +} + +class RTLTooltipExample extends StatefulWidget { + const RTLTooltipExample({super.key}); + + @override + State createState() => _RTLTooltipExampleState(); +} +class _RTLTooltipExampleState extends State { late List _source; @override void initState() { _source = [ - PopulationModel('Asia', 25.4), - PopulationModel('Africa', 19.11), - PopulationModel('Europe', 13.3), - PopulationModel('North America', 10.65), - PopulationModel('South America', 7.54), - PopulationModel('Australia', 4.93), + PopulationModel('Asia', 25.4), + PopulationModel('Africa', 19.11), + PopulationModel('Europe', 13.3), + PopulationModel('North America', 10.65), + PopulationModel('South America', 7.54), + PopulationModel('Australia', 4.93), ]; super.initState(); } @override Widget build(BuildContext context) { - return Scaffold( - body: Center( - child: Container( + return MaterialApp( + home: Scaffold( + body: Center( + child: SizedBox( height: 400, width: 400, - padding: const EdgeInsets.all(5.0), - child: Column( - children: [ - Expanded( - child: Directionality( - textDirection: TextDirection.rtl, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].populationInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].continent; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(5.0), - child: Text(tile.group), - ); - }, - tooltipBuilder: - (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Continent : ', - style: TextStyle(color: Colors.white)), - Text(tile.group, - style: TextStyle(color: Colors.white)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Population : ', - style: TextStyle(color: Colors.white)), - Text(tile.weight.toString(), - style: TextStyle(color: Colors.white)), - ], - ), - ], - ), - ); - }, + child: Directionality( + textDirection: TextDirection.rtl, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].populationInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].continent; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5.0), + child: Text(tile.group), + ); + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text( + 'Continent : ', + style: TextStyle(color: Colors.white), + ), + Text( + tile.group, + style: const TextStyle(color: Colors.white), + ), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text( + 'Population : ', + style: TextStyle(color: Colors.white), + ), + Text( + tile.weight.toString(), + style: const TextStyle(color: Colors.white), + ), + ], + ), + ], ), - ], - ), + ); + }, ), - ), - ], + ], + ), ), ), + ), ), ); } +} class PopulationModel { const PopulationModel(this.continent, this.populationInMillions); @@ -416,4 +491,4 @@ class PopulationModel { {% endhighlight %} {% endtabs %} -![RTL treemap tooltip support](images/right-to-left/treemap-tooltip-rtl.png) +![RTL treemap tooltip support](images/right-to-left/treemap-tooltip-rtl.png) \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/selection.md b/chart-sdk/flutter/treemap/selection.md index 9a96192d8..8a8129469 100644 --- a/chart-sdk/flutter/treemap/selection.md +++ b/chart-sdk/flutter/treemap/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Tile selection in Flutter Treemap widget | Syncfusion -description: Learn here all about the Tile selection feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Tile Selection in Flutter Treemap | Syncfusion® +description: Learn about tile selection in Syncfusion® Flutter Treemap (SfTreemap), including selection customization, interaction, highlighting, and styling options. platform: chart-sdk control: SfTreemap documentation: ug --- -# Tile selection in Flutter Treemap (SfTreemap) +# Tile Selection in Flutter Treemap (SfTreemap) -You can select a tile in order to highlight that area on a treemap. You can use the callback for performing any action during tile selection. +You can select a tile to highlight that area on the treemap. You can use the callback to perform any action during tile selection. ## Enable tile selection @@ -18,19 +18,30 @@ You can enable tile selection on a treemap using the [`SfTreemap.onSelectionChan The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/onSelectionChanged.html) callback will be called with the details of the selected tile when the user is selecting a tile by tapping and you will be able to do any specific functionalities like showing pop-up or navigate to a different page. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class EnableSelectionExample extends StatefulWidget { + const EnableSelectionExample({super.key}); + + @override + State createState() => _EnableSelectionExampleState(); +} + +class _EnableSelectionExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -39,27 +50,28 @@ The [`onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_tree Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - onSelectionChanged: (TreemapTile) {}, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + onSelectionChanged: (TreemapTile tile) {}, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -85,19 +97,31 @@ You can customize the below appearance of the selected tile. * **Border** - Change the border color, border stroke width using the [`BorderSide.color`](https://api.flutter.dev/flutter/painting/BorderSide/color.html) and [`BorderSide.width`](https://api.flutter.dev/flutter/painting/BorderSide/width.html) properties in the [`RoundedRectangleBorder`](https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html). Also apply rounded border using the [`RoundedRectangleBorder.borderRadius`](https://api.flutter.dev/flutter/painting/RoundedRectangleBorder/borderRadius.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class SelectionAppearanceExample extends StatefulWidget { + const SelectionAppearanceExample({super.key}); + + @override + State createState() => + _SelectionAppearanceExampleState(); +} +class _SelectionAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -106,37 +130,38 @@ You can customize the below appearance of the selected tile. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - onSelectionChanged: (TreemapTile) {}, - selectionSettings: TreemapSelectionSettings( - color: Colors.orange, - border: RoundedRectangleBorder( - side: BorderSide( - color: Colors.deepOrange, - width: 1, - ), - borderRadius: BorderRadius.circular(10), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + onSelectionChanged: (TreemapTile tile) {}, + selectionSettings: TreemapSelectionSettings( + color: Colors.orange, + border: RoundedRectangleBorder( + side: const BorderSide( + color: Colors.deepOrange, + width: 1, ), + borderRadius: BorderRadius.circular(10), ), - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - ), - ], ), + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -156,19 +181,30 @@ class SocialMediaUsers { You can customize the hovered tile color and border using the [`tileHoverColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/tileHoverColor.html) and [`tileHoverBorder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/tileHoverBorder.html) properties. The default value of the [`tileHoverColor`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/tileHoverColor.html) is `Colors.transparent`. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class HoveredTileExample extends StatefulWidget { + const HoveredTileExample({super.key}); + + @override + State createState() => _HoveredTileExampleState(); +} +class _HoveredTileExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -176,43 +212,43 @@ You can customize the hovered tile color and border using the [`tileHoverColor`] @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - labelBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: const EdgeInsets.all(4), - child: - Text(tile.group, style: TextStyle(color: Colors.black)), - ); - }, - ), - ], - onSelectionChanged: (TreemapTile tile) {}, - tileHoverColor: Colors.tealAccent, - tileHoverBorder: RoundedRectangleBorder( - side: BorderSide( - color: Colors.teal, - width: 1, - ), - borderRadius: BorderRadius.circular(10), + body: Center( + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + labelBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(4), + child: Text(tile.group, style: const TextStyle(color: Colors.black)), + ); + }, + ), + ], + onSelectionChanged: (TreemapTile tile) {}, + tileHoverColor: Colors.tealAccent, + tileHoverBorder: RoundedRectangleBorder( + side: const BorderSide( + color: Colors.teal, + width: 1, ), + borderRadius: BorderRadius.circular(10), ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); diff --git a/chart-sdk/flutter/treemap/tooltip.md b/chart-sdk/flutter/treemap/tooltip.md index 401abd812..c39ee4ec9 100644 --- a/chart-sdk/flutter/treemap/tooltip.md +++ b/chart-sdk/flutter/treemap/tooltip.md @@ -1,7 +1,7 @@ --- layout: post -title: Tooltip in Flutter Treemap widget | Syncfusion -description: Learn here all about adding the Tooltip feature of Syncfusion Flutter Treemap (SfTreemap) widget and more. +title: Tooltip in Flutter Treemap | Syncfusion® +description: Learn about tooltip support in Syncfusion® Flutter Treemap (SfTreemap), including customization, formatting, templates, and data visualization. platform: chart-sdk control: SfTreemap documentation: ug @@ -9,28 +9,39 @@ documentation: ug # Tooltip in Flutter Treemap (SfTreemap) -Tooltip is used to provide information about the tile during the tap, or click interaction. This section helps to learn about how to show tooltip on a tile and customize them. +Tooltip is used to provide information about a tile during tap or click interaction. This section helps you learn how to show a tooltip on a tile and customize it. ## Tooltip for the tiles -It is used to clearly indicate the tile information on the tap or click. To show tooltip for the tile, return a widget in [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html). This widget will then be wrapped in the builtin shape which comes with the nose at the bottom. +Tooltips are used to clearly indicate tile information on tap or click. To show a tooltip for the tile, return a widget in [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html). This widget is then wrapped in the built-in shape with the nose at the bottom. -The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) will be called with the corresponding tile details every time you interact with the tile i.e., while tapping in touch devices and hover enter in the mouse enabled devices. +The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html) callback is called with the corresponding tile details every time you interact with the tile, while tapping on touch devices and hover-enter on mouse-enabled devices. {% tabs %} -{% highlight Dart %} +{% highlight dart %} +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; + +class TooltipExample extends StatefulWidget { + const TooltipExample({super.key}); + + @override + State createState() => _TooltipExampleState(); +} + +class _TooltipExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -39,60 +50,61 @@ The [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flu Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - tooltipBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Country : ', - style: TextStyle(color: Colors.black)), - Text(tile.group, - style: TextStyle(color: Colors.black)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Social media : ', - style: TextStyle(color: Colors.black)), - Text(tile.weight.toString(), - style: TextStyle(color: Colors.black)), - ], - ), - ], - ), - ); - }, - ), - ], - ), + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Country : ', + style: TextStyle(color: Colors.black)), + Text(tile.group, + style: const TextStyle(color: Colors.black)), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Social media : ', + style: TextStyle(color: Colors.black)), + Text(tile.weight.toString(), + style: const TextStyle(color: Colors.black)), + ], + ), + ], + ), + ); + }, + ), + ], ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -121,19 +133,31 @@ You can customize the appearance of the tooltip. * **Visibility** - Change the duration of the tooltip visibility using the [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/hideDelay.html) property. The default value of the [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/hideDelay.html) property is 3. By default, tooltip will hide automatically after 3 seconds of inactivity for mobile platforms. Also, you can increase or decrease the tooltip duration or show tooltip always by setting double.infinity to the [`hideDelay`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapTooltipSettings/hideDelay.html) property. {% tabs %} -{% highlight Dart %} +{% highlight dart %} + +import 'package:flutter/material.dart'; +import 'package:syncfusion_flutter_treemap/treemap.dart'; +class TooltipAppearanceExample extends StatefulWidget { + const TooltipAppearanceExample({super.key}); + + @override + State createState() => + _TooltipAppearanceExampleState(); +} + +class _TooltipAppearanceExampleState extends State { late List _source; @override void initState() { _source = [ - SocialMediaUsers('India', 'Facebook', 25.4), - SocialMediaUsers('USA', 'Instagram', 19.11), - SocialMediaUsers('Japan', 'Facebook', 13.3), - SocialMediaUsers('Germany', 'Instagram', 10.65), - SocialMediaUsers('France', 'Twitter', 7.54), - SocialMediaUsers('UK', 'Instagram', 4.93), + SocialMediaUsers('India', 'Facebook', 25.4), + SocialMediaUsers('USA', 'Instagram', 19.11), + SocialMediaUsers('Japan', 'Facebook', 13.3), + SocialMediaUsers('Germany', 'Instagram', 10.65), + SocialMediaUsers('France', 'Twitter', 7.54), + SocialMediaUsers('UK', 'Instagram', 4.93), ]; super.initState(); } @@ -142,67 +166,68 @@ You can customize the appearance of the tooltip. Widget build(BuildContext context) { return Scaffold( body: Center( - child: Container( - height: 400, - width: 400, - child: SfTreemap( - dataCount: _source.length, - weightValueMapper: (int index) { - return _source[index].usersInMillions; - }, - levels: [ - TreemapLevel( - groupMapper: (int index) { - return _source[index].country; - }, - tooltipBuilder: (BuildContext context, TreemapTile tile) { - return Padding( - padding: EdgeInsets.all(5), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Country : ', - style: TextStyle(color: Colors.black)), - Text(tile.group, - style: TextStyle(color: Colors.black)), - ], - ), - Row( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('Social media : ', - style: TextStyle(color: Colors.black)), - Text(tile.weight.toString(), - style: TextStyle(color: Colors.black)), - ], - ), - ], - ), - ); - }, - ), - ], - tooltipSettings: TreemapTooltipSettings( - color: Colors.orange[300], - borderColor: Colors.deepOrange[900], - borderWidth: 2, - borderRadius: BorderRadius.circular(10), - hideDelay: 6, + child: SizedBox( + height: 400, + width: 400, + child: SfTreemap( + dataCount: _source.length, + weightValueMapper: (int index) { + return _source[index].usersInMillions; + }, + levels: [ + TreemapLevel( + groupMapper: (int index) { + return _source[index].country; + }, + tooltipBuilder: (BuildContext context, TreemapTile tile) { + return Padding( + padding: const EdgeInsets.all(5), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Country : ', + style: TextStyle(color: Colors.black)), + Text(tile.group, + style: const TextStyle(color: Colors.black)), + ], + ), + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Social media : ', + style: TextStyle(color: Colors.black)), + Text(tile.weight.toString(), + style: const TextStyle(color: Colors.black)), + ], + ), + ], + ), + ); + }, ), + ], + tooltipSettings: TreemapTooltipSettings( + color: Colors.orange[300], + borderColor: Colors.deepOrange[900], + borderWidth: 2, + borderRadius: BorderRadius.circular(10), + hideDelay: 6, ), ), ), + ), ); } +} class SocialMediaUsers { const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions); @@ -218,4 +243,4 @@ class SocialMediaUsers { ![Treemap tooltip appearance customization](images/tooltip/tooltip_customization.png) N> -* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for enabling tooltip for the tile. +* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for enabling tooltip for the tile. \ No newline at end of file diff --git a/chart-sdk/maui/linear-gauge/ticks.md b/chart-sdk/maui/linear-gauge/ticks.md index 4a972278b..96d470d48 100644 --- a/chart-sdk/maui/linear-gauge/ticks.md +++ b/chart-sdk/maui/linear-gauge/ticks.md @@ -150,7 +150,7 @@ SfLinearGauge gauge = new SfLinearGauge(); {% endtabs %} -![Set .NET MAUI Linear Gauge tick position](images/axis-ticks/label-placement.PNG) +![Set .NET MAUI Linear Gauge tick position](images/axis-labels/label-placement.PNG) ## Customize Tick Offset diff --git a/chart-sdk/uwp/Map/Annotations.md b/chart-sdk/uwp/Map/Annotations.md index c095aff7b..d707fad06 100644 --- a/chart-sdk/uwp/Map/Annotations.md +++ b/chart-sdk/uwp/Map/Annotations.md @@ -9,93 +9,88 @@ documentation: ug # Annotations in UWP Map (SfMaps) -`Annotations` are notes used to leave some message on the map. In SfMap, annotations are denoted by the `MapAnnotations`. MapAnnotation has two major parts: +`Annotations` are notes used to leave some message on the map. In the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html), annotations are denoted by the [`MapAnnotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html). `MapAnnotations` has two major parts: -* AnnotationLabel -* AnnotationSymbol +* [`AnnotationLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabel) : A text that shows some information in text format. -`AnnotationLabel` is a “Text” that shows some information in the text format. - -`AnnotationSymbol` is a “VisualObject” that shows a note symbolically. +* [`AnnotationSymbol`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationSymbol) : A visual object that shows a note symbolically. ## Customize AnnotationLabel -AnnotationLabel’s appearance is customized by the following properties: +The appearance of `AnnotationLabel` is customized by the following properties: -* `AnnotationLabelForeground`: Gets or sets the foreground color of the annotation label. -* `AnnotationLabelFontStyle`: Gets or sets the font style of the annotation label. -* `AnnotationLabelBackground`: Gets or sets the background color of the annotation label. -* `AnnotationLabelFontFamily`: Gets or sets the font family for the annotation label. -* `AnnotationLabelFontSize`: Gets or sets the annotation label font size. +* [`AnnotationLabelForeground`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelForeground): Gets or sets the foreground color of the annotation label. +* [`AnnotationLabelFontStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontStyle): Gets or sets the font style of the annotation label. +* [`AnnotationLabelBackground`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelBackground): Gets or sets the background color of the annotation label. +* [`AnnotationLabelFontFamily`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontFamily): Gets or sets the font family for the annotation label. +* [`AnnotationLabelFontSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontSize): Gets or sets the annotation label font size. {% highlight html %} - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + {% endhighlight %} -![Features_img14](Features_images/Features_img14.png) +![UWP Map Control Annotations Customize AnnotationLabel](Features_images/Features_img14.png) ## Positioning a MapAnnotation -`MapAnnotation` can be positioned anywhere on the map based on latitude and longitude. MapAnnotation has two properties called `Latitude` and `Longitude` of string type used to set latitude and longitude co-ordinates of the MapAnnotation. +`MapAnnotation` can be positioned anywhere on the map based on latitude and longitude. `MapAnnotations` has two properties called [`Latitude`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Latitude) and [`Longitude`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Longitude) of double type, used to set the latitude and longitude coordinates of the `MapAnnotations`. ### Customizing the Annotation Template -The default appearance of the annotation can be customized by using the `AnnotationTemplate` property. The annotation template property is available in the ShapeFileLayer. +The default appearance of the annotation can be customized by using the [`AnnotationTemplate`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_AnnotationTemplate) property. The `AnnotationTemplate` property is available in the [`ShapeFileLayer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html). #### About the AnnotationTemplate Property -AnnotationTemplate is a `DataTemplate` type, used to customize or override the default template of MapAnnotations. +`AnnotationTemplate` is a `DataTemplate` type, used to customize or override the default template of `MapAnnotations`. {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} -![Features_img15](Features_images/Features_img15.png) +![UWP Map Control Annotations Template Customization](Features_images/Features_img15.png) diff --git a/chart-sdk/uwp/Map/Basic-KML-Format.md b/chart-sdk/uwp/Map/Basic-KML-Format.md index 721db907a..3d63993f1 100644 --- a/chart-sdk/uwp/Map/Basic-KML-Format.md +++ b/chart-sdk/uwp/Map/Basic-KML-Format.md @@ -1,7 +1,7 @@ --- layout: post title: Basic KML Format in UWP Map control | Syncfusion -description: Learn here all about Basic KML Format support in Syncfusion UWP Map (SfMaps) control and more. +description: Learn how to load and display KML geographic data using the Syncfusion UWP Map control, including supported elements and styling options. platform: chart-sdk control: SfMap documentation: ug @@ -11,7 +11,7 @@ documentation: ug KML is a file format used for rendering geographical data. It uses a tag-based structure with nested elements and attributes. KML is based on the XML standard, and all tags of a KML file are case-sensitive. -Currently, the SfMaps control supports the following KML elements: +Currently, the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following KML elements: * Place mark * Point diff --git a/chart-sdk/uwp/Map/Bubbles.md b/chart-sdk/uwp/Map/Bubbles.md index d4d8fb767..95997eab2 100644 --- a/chart-sdk/uwp/Map/Bubbles.md +++ b/chart-sdk/uwp/Map/Bubbles.md @@ -1,7 +1,7 @@ --- layout: post title: Bubbles in UWP Map control | Syncfusion -description: Learn here all about Bubbles support in Syncfusion UWP Map (SfMaps) control and more. +description: Learn how to add and customize bubbles in the Syncfusion UWP Map control, including bubble symbols, size settings, and range color mapping. platform: chart-sdk control: SfMaps documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Bubbles in UWP Map (SfMaps) -`Bubbles` in the Maps control represent the under-bound data values of the map. Bubbles are scattered throughout map shapes that contain bound values. +`Bubbles` in the Maps control represent the underlying data values of the map. Bubbles are scattered throughout the map shapes that contain bound values. -Bubbles are included when data binding is set as mentioned above and the `BubbleMarkerSetting` is set. +Bubbles are included when data binding is set as mentioned above and the [`BubbleMarkerSetting`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_BubbleMarkerSetting) is set. -The following properties are available in the BubbleMarkerSetting: +The following properties are available in the [`BubbleMarkerSetting`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html): @@ -23,27 +23,27 @@ Type +Gets or sets the maximum height and width of the bubble. +Gets or sets the name of the underlying property in ItemsSource. @@ -52,32 +52,31 @@ Gets or sets the tree map colors. ## Adding Bubbles to a Map -To add bubbles to a map, `BubbleMarkerSetting` has to be added to the `ShapeFileLayer`. Set the `AutoFillColor` as true and set the `Fill` property. Create the `Model` and `ViewModel` as illustrated in the [Data Binding](/winrt/Maps/Data-Binding "Data Binding") topic and add the following code. Also set the `MaxSize`, `MinSize`, and `ValuePath` properties as illustrated in the following code example. +To add bubbles to a map, [`BubbleMarkerSetting`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html) has to be added to the [`ShapeFileLayer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html). Set the [`AutoFillColor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) as true and set the [`Fill`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_Fill) property. Create the `Model` and `ViewModel` as illustrated in the [Data Binding](/winrt/Maps/Data-Binding "Data Binding") topic and add the following code. Also set the [`MaxSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize), [`MinSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize), and [`ValuePath`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) properties as illustrated in the following code example. {% highlight html %} - - - - - - - - - - - - - + + + + + + + + + + + + -{% endhighlight %} +{% endhighlight %} -![Features_img2](Features_images/Features_img2.png) +![UWP Map Control Bubbles Adding Bubbles to a Map](Features_images/Features_img2.png) ## Customizing Bubble Symbol -Bubble symbol can be modified using built-in symbols like circle, rectangle, diamond, triangle, trapezoid, star, pentagon, and pushpin available in the `BubbleType` enum property. Also, bubbles can be customized by setting the CustomTemplate of the BubbleMarkerSetting. +The bubble symbol can be modified using built-in symbols like circle, rectangle, diamond, triangle, trapezoid, star, pentagon, and pushpin available in the [`BubbleType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleType.html) enum property. Also, bubbles can be customized by setting the [`CustomTemplate`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_CustomTemplate) of the `BubbleMarkerSetting`.
Description
-AutoFillColor +[AutoFillColor](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) Boolean (true / false) Gets or sets whether the colors should be automatically filled.
-MaxSize +[MaxSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize) Double -Get or sets the maximum height and width of the bubble.
-MinSize +[MinSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize) Double Gets or sets the minimum height and width of the bubble.
-ValuePath +[ValuePath](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) String -Gets or sets the name of the under-bound property in ItemsSource.
-ColorMapping +[ColorMappings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ColorMappings) ObservableCollection<RangeColorMapping> Gets or sets the tree map colors.
@@ -87,57 +86,57 @@ Type +Gets or sets the template to customize the bubble. `BubbleType` should be set as `Custom` to show a customized bubble shape.
Description
-BubbleType -BubbleType (enum) +[BubbleType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_BubbleType) +[BubbleType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleType.html) (enum) Gets or sets the type of bubble symbol needed to be used in maps.
-CustomTemplate +[CustomTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_CustomTemplate) DataTemplate -Gets or sets the template to customize the bubble.> BubbleType should be set as “Custom” to show a customized bubble shape.
{% highlight html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} -![Features_img3](Features_images/Features_img3.png) +![UWP Map Control Bubbles Customizing Bubble Symbol](Features_images/Features_img3.png) ## Range Color Mapping -`RangeColorMapping` is one of the features used to differentiate the bubble fill, based on its under-bound value and color ranges. It contains the following properties: +[`RangeColorMapping`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.RangeColorMapping.html) is one of the features used to differentiate the bubble fill, based on its underlying value and color ranges. It contains the following properties: @@ -147,63 +146,63 @@ Type
Description
-Range +[Range](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.RangeColorMapping.html#Syncfusion_UI_Xaml_Maps_RangeColorMapping_Range) Double Gets or sets the value range of the bubble.
-Color +[Color](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ColorMapping.html#Syncfusion_UI_Xaml_Maps_ColorMapping_Color) Color Gets or sets the color values for a given range.
-The fill color of a particular bubble fill can be determined by its under-bound value and the color range. For example, consider the following color ranges: +The fill color of a particular bubble can be determined by its underlying value and the color range. For example, consider the following color ranges: {% highlight html %} - - - - - - - - + + + + + + + + -{% endhighlight %} +{% endhighlight %} -When the under-bound object value is 22789702, then the fill color of the corresponding bubble is set to “#7FEB737C”. As mentioned earlier, the under-bound value of the bubble is set through the “ValuePath” in the BubbleMarkerSetting. +When the underlying object value is 22789702, then the fill color of the corresponding bubble is set to `#7FEB737C`. As mentioned earlier, the underlying value of the bubble is set through the [`ValuePath`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) in the `BubbleMarkerSetting`. -When the under-bound value is under any of the given sorted range or above the sorted range, then the fill is set as “Black.” +When the underlying value is under any of the given sorted range or above the sorted range, then the fill is set as `Black`. -`AutoFillColor` must be set as `false` to enable range color mapping. +[`AutoFillColor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) must be set as `false` to enable range color mapping. {% highlight html %} - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} - -![Features_img4](Features_images/Features_img4.png) + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +![UWP Map Control Bubbles Range Color Mapping](Features_images/Features_img4.png) diff --git a/chart-sdk/uwp/Map/Commands-for-Zooming-and-Panning.md b/chart-sdk/uwp/Map/Commands-for-Zooming-and-Panning.md index a17bd91c0..f988c4300 100644 --- a/chart-sdk/uwp/Map/Commands-for-Zooming-and-Panning.md +++ b/chart-sdk/uwp/Map/Commands-for-Zooming-and-Panning.md @@ -9,101 +9,95 @@ documentation: ug # Commands for Zooming and Panning in UWP Map (SfMaps) -The Map control contains the following commands: +The [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control contains the following commands: -* ZoomIn Command -* ZoomOut Command -* Pan Command -* ZoomReset Command -* PanReset Command +* [ZoomIn Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) +* [ZoomOut Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomOutCommand) +* [Pan Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_PanCommand) +* [ZoomReset Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ResetCommand) +* [PanReset Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_PanResetCommand) ## ZoomIn Command -`ZoomIn` command zooms in the map. +The [`ZoomInCommand`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) zooms in the map. {% highlight xml %} - -             -                 - - - - -