diff --git a/chart-sdk/flutter/barcode-generator/accessibility.md b/chart-sdk/flutter/barcode-generator/accessibility.md index 1ac5e2bd0..9bbc5b419 100644 --- a/chart-sdk/flutter/barcode-generator/accessibility.md +++ b/chart-sdk/flutter/barcode-generator/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Flutter Barcodes | Syncfusion® +title: Accessibility in Flutter Barcode Generator | 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 --- -# Accessibility in Flutter Barcodes (SfBarcodeGenerator) +# Accessibility in Flutter Barcode Generator (SfBarcodeGenerator) ## Sufficient contrast @@ -19,9 +19,9 @@ You can customize colors for the following elements: ## 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/chart-sdk/flutter/barcode-generator/barcode-customization#text-customization) +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 Flutter Barcode Generator. +* [Input value of Barcode Generator](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 +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 Flutter 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 c99d37691..c24d80a2d 100644 --- a/chart-sdk/flutter/barcode-generator/barcode-customization.md +++ b/chart-sdk/flutter/barcode-generator/barcode-customization.md @@ -1,21 +1,21 @@ --- layout: post -title: Customization in Flutter Barcodes | Syncfusion® +title: Customization in Flutter Barcode Generator | Syncfusion® description: Learn about customization options in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including appearance, sizing, colors, and styling. platform: chart-sdk control: SfBarcodeGenerator documentation: ug --- -# Customization in Flutter Barcodes (SfBarcodeGenerator) +# Customization in Flutter Barcode Generator (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. +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](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. +To display the input value of the Barcode Generator, enable its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, it is set to false. {% tabs %} @@ -52,7 +52,7 @@ To display the input value of the barcode, enable its [`showValue`](https://pub. **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. +The text style can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the Flutter Barcode Generator. {% tabs %} @@ -99,7 +99,7 @@ The text style can be customized using the [`textStyle`](https://pub.dev/documen **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. +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 the Flutter Barcode Generator. By default, it is set to 2. {% tabs %} @@ -140,7 +140,7 @@ Control the space between the text and the barcode with the [`textSpacing`](http **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. +The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of the Flutter 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 %} @@ -351,7 +351,7 @@ The following code snippet shows the two-dimensional barcode without the [`modul **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 shown in the following code snippet. +Customize the bar color of the Barcode Generator using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as shown in the following code snippet. {% tabs %} @@ -391,7 +391,7 @@ Customize the barcode's bar color using the [`barColor`](https://pub.dev/documen **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 shown in the following code snippet. +You can customize the background color of the Barcode Generator using the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property, as shown in the following code snippet. {% tabs %} diff --git a/chart-sdk/flutter/barcode-generator/getting-started.md b/chart-sdk/flutter/barcode-generator/getting-started.md index 4f070832e..93650df96 100644 --- a/chart-sdk/flutter/barcode-generator/getting-started.md +++ b/chart-sdk/flutter/barcode-generator/getting-started.md @@ -1,24 +1,24 @@ --- layout: post -title: Getting Started with Flutter Barcodes | Syncfusion® +title: Getting Started with Flutter Barcode Generator | 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 Barcode Generator (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. +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® Flutter Barcode Generator widget. -## Add Flutter Barcode to an application +## Add Flutter Barcode Generator 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 Barcode dependency to your pubspec.yaml file. +Add the Syncfusion® Flutter Barcodes dependency to your pubspec.yaml file. {% tabs %} @@ -99,11 +99,11 @@ Add the Barcode Generator widget as a child of any widget. Here, the widget is a 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) +![Initialize Barcode Generator](images/getting-started/getting_started1.jpg) ## Initialize QR Code symbology -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. +You can set the required symbology type to the Flutter 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 %} @@ -144,7 +144,7 @@ You can set the required symbology type to the barcode generator based on input ## 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 shown in 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 Generator as shown in the following code snippet. {% tabs %} 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 ad16ea432..096fe9854 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,19 +1,19 @@ --- layout: post -title: How to Add Barcodes in FlutterFlow | Syncfusion® +title: How to Add Barcode Generator 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 Barcodes in FlutterFlow (SfBarcodeGenerator) +# How to Add Barcode Generator 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). -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. +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. ### Create a new project @@ -30,7 +30,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an ![Custom Widget](how-to-section-images/custom-widget.png) -### Add the Barcodes widget as a dependency +### Add the Barcode Generator widget as a dependency 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. diff --git a/chart-sdk/flutter/barcode-generator/one-dimensional.md b/chart-sdk/flutter/barcode-generator/one-dimensional.md index 855a29b44..db281f31d 100644 --- a/chart-sdk/flutter/barcode-generator/one-dimensional.md +++ b/chart-sdk/flutter/barcode-generator/one-dimensional.md @@ -1,17 +1,17 @@ --- layout: post -title: One-Dimensional Symbology in Flutter Barcodes | Syncfusion® +title: One-Dimensional Symbology in Flutter Barcode Generator | 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 Barcode (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. +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](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: +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) diff --git a/chart-sdk/flutter/barcode-generator/overview.md b/chart-sdk/flutter/barcode-generator/overview.md index e0ba159cc..85d6a9977 100644 --- a/chart-sdk/flutter/barcode-generator/overview.md +++ b/chart-sdk/flutter/barcode-generator/overview.md @@ -11,9 +11,9 @@ documentation: ug 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. +To get started with the Flutter Barcode Generator, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation. -![Overview flutter barcode](images/getting-started/overview1.jpg) +![Overview Flutter Barcode Generator](images/getting-started/overview1.jpg) ![Overview flutter QR Code](images/getting-started/getting_started3.jpg) @@ -29,4 +29,4 @@ To quickly get started with our Flutter Barcode Generator widget, watch the tuto * **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 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 +You can get the barcode sample in the following link: [`Flutter Barcode Generator 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 3be4daf6c..8303ab592 100644 --- a/chart-sdk/flutter/barcode-generator/two-dimensional.md +++ b/chart-sdk/flutter/barcode-generator/two-dimensional.md @@ -1,17 +1,17 @@ --- layout: post -title: Two-Dimensional Symbology in Flutter Barcodes | Syncfusion® +title: Two-Dimensional Symbology in Flutter Barcode Generator | 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 Barcode (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. +To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](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: +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 Flutter Barcode Generator widget 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) @@ -21,7 +21,7 @@ Two-dimensional barcode is a way to represent information by using the two-dimen A [`QR Code`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/QRCode-class.html) is a two-dimensional barcode that consists of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift JIS characters. * The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules. -* Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. +* Each version has its own capacity. By default, the Barcode Generator widget 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 %} diff --git a/chart-sdk/flutter/linear-gauge/animation.md b/chart-sdk/flutter/linear-gauge/animation.md index 989023e4a..bf293aedc 100644 --- a/chart-sdk/flutter/linear-gauge/animation.md +++ b/chart-sdk/flutter/linear-gauge/animation.md @@ -44,7 +44,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Animate axis in linear gauge](images/animation/animation-axis-range/animation-axis.gif) +![Animate axis in Flutter Linear Gauge](images/animation/animation-axis-range/animation-axis.gif) ## Animate range @@ -79,7 +79,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Animate range in linear gauge](images/animation/animation-axis-range/animation-range.gif) +![Animate range in Flutter Linear Gauge](images/animation/animation-axis-range/animation-range.gif) ## Pointer animation @@ -182,4 +182,4 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Animate marker pointer in linear gauge](images/animation/shape-pointer/bounceout.gif) +![Animate marker pointer in Flutter 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 dee84dea2..d67af0750 100644 --- a/chart-sdk/flutter/linear-gauge/axis.md +++ b/chart-sdk/flutter/linear-gauge/axis.md @@ -41,7 +41,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Initialize linear gauge for axis](images/getting-started/default_linear_gauge.png) +![Initialize Flutter Linear Gauge for axis](images/getting-started/default_linear_gauge.png) ## Customize minimum and maximum axis values @@ -73,7 +73,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Update linear gauge for axis scale](images/axis/minmax_axis_linear_gauge.png) +![Update Flutter Linear Gauge for axis scale](images/axis/minmax_axis_linear_gauge.png) ## Customize axis track style @@ -104,7 +104,7 @@ The following code sample demonstrates how to customize the [`thickness`](https: {% endhighlight %} -![Change axis track thickness in linear gauge](images/axis/axis_thickness.png) +![Change axis track thickness in Flutter Linear Gauge](images/axis/axis_thickness.png) ## Apply solid color @@ -138,7 +138,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Apply color to axis in linear gauge](images/axis/axis_solid_color.png) +![Apply color to axis in Flutter Linear Gauge](images/axis/axis_solid_color.png) ## Apply gradient @@ -182,7 +182,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Apply color to axis in linear gauge](images/axis/axis_gradient.png) +![Apply color to axis in Flutter Linear Gauge](images/axis/axis_gradient.png) ## Customize borders @@ -268,7 +268,7 @@ class LinearGaugeDemo extends StatelessWidget { ## Inverse the axis -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. +The direction of the Flutter 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 %} diff --git a/chart-sdk/flutter/linear-gauge/bar-pointer.md b/chart-sdk/flutter/linear-gauge/bar-pointer.md index 1f084fe93..40550dd92 100644 --- a/chart-sdk/flutter/linear-gauge/bar-pointer.md +++ b/chart-sdk/flutter/linear-gauge/bar-pointer.md @@ -169,7 +169,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge for bar pointer position](images/bar-pointer/bar_pointer_change_position.png) +![Customize Flutter Linear Gauge for bar pointer position](images/bar-pointer/bar_pointer_change_position.png) ## Customize the offset @@ -210,7 +210,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge bar pointer offset](images/bar-pointer/bar_pointer_offset.png) +![Customize Flutter Linear Gauge bar pointer offset](images/bar-pointer/bar_pointer_offset.png) ## Change the color of bar pointer @@ -437,7 +437,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge bar pointer border](images/bar-pointer/bar_border.png) +![Customize Flutter Linear Gauge bar pointer border](images/bar-pointer/bar_border.png) ## Add multiple bar pointers diff --git a/chart-sdk/flutter/linear-gauge/getting-started.md b/chart-sdk/flutter/linear-gauge/getting-started.md index 22005bdfa..9a591e07e 100644 --- a/chart-sdk/flutter/linear-gauge/getting-started.md +++ b/chart-sdk/flutter/linear-gauge/getting-started.md @@ -89,7 +89,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Initialize linear gauge](images/getting-started/default_linear_gauge.png) +![Initialize Flutter Linear Gauge](images/getting-started/default_linear_gauge.png) ## Add axis @@ -121,7 +121,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Add axis to linear gauge](images/getting-started/add_axis.png) +![Add axis to Flutter Linear Gauge](images/getting-started/add_axis.png) ## Update orientation @@ -155,7 +155,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Update Orientation of linear gauge](images/getting-started/vertical_orientation.png) +![Update Orientation of Flutter Linear Gauge](images/getting-started/vertical_orientation.png) ## Add range @@ -194,7 +194,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Add ranges to a linear gauge](images/getting-started/add_ranges.png) +![Add ranges to a Flutter Linear Gauge](images/getting-started/add_ranges.png) ## Add marker pointer @@ -271,7 +271,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Add widget pointer in linear gauge](images/getting-started/add_widget_pointer.png) +![Add widget pointer in Flutter Linear Gauge](images/getting-started/add_widget_pointer.png) ## Add bar pointer @@ -362,4 +362,4 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![A Linear gauge](images/getting-started/all_basic_elements.png) \ No newline at end of file +![A Flutter Linear Gauge](images/getting-started/all_basic_elements.png) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/interaction.md b/chart-sdk/flutter/linear-gauge/interaction.md index bac9017a6..b1bf74a70 100644 --- a/chart-sdk/flutter/linear-gauge/interaction.md +++ b/chart-sdk/flutter/linear-gauge/interaction.md @@ -196,4 +196,4 @@ class _LinearGaugeDemoState extends State { {% endhighlight %} {% endtabs %} -![Shape pointer interaction in linear gauge](images/interaction/interaction.gif) \ No newline at end of file +![Shape pointer interaction in Flutter 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 6a8d990fa..abceb43d8 100644 --- a/chart-sdk/flutter/linear-gauge/labels.md +++ b/chart-sdk/flutter/linear-gauge/labels.md @@ -11,7 +11,7 @@ documentation: ug The default style of axis labels is as follows. -![Initialize linear gauge for axis](images/getting-started/default_linear_gauge.png) +![Initialize Flutter Linear Gauge for axis](images/getting-started/default_linear_gauge.png) ## Customize label styles @@ -57,7 +57,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge axis label style](images/axis-labels/customize_label_style.png) +![Customize Flutter Linear Gauge axis label style](images/axis-labels/customize_label_style.png) ## Change visibility @@ -158,7 +158,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Set linear gauge label position](images/axis-labels/label-placement.png) +![Set Flutter Linear Gauge label position](images/axis-labels/label-placement.png) ## Change label offset @@ -193,7 +193,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Set linear gauge label offset](images/axis-labels/label_offset.png) +![Set Flutter Linear Gauge label offset](images/axis-labels/label_offset.png) ## Customize maximum number of visible labels diff --git a/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md b/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md index f3804a208..45c3d5815 100644 --- a/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md +++ b/chart-sdk/flutter/linear-gauge/mirror-linear-gauge.md @@ -39,10 +39,10 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Mirror linear gauge](images/mirrored/mirrored.png) +![Mirror Flutter Linear Gauge](images/mirrored/mirrored.png) ## Comparison for the mirrored and normal gauge The following screenshot provides a visual comparison between a mirrored Linear Gauge and a normal Linear Gauge. -![Mirrored linear gauge comparsion](images/mirrored/mirror_comparison.png) \ No newline at end of file +![Mirrored Flutter Linear Gauge comparsion](images/mirrored/mirror_comparison.png) \ No newline at end of file diff --git a/chart-sdk/flutter/linear-gauge/overview.md b/chart-sdk/flutter/linear-gauge/overview.md index 2d6dfdaac..d4f3fcc85 100644 --- a/chart-sdk/flutter/linear-gauge/overview.md +++ b/chart-sdk/flutter/linear-gauge/overview.md @@ -11,7 +11,7 @@ documentation: ug 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) +![Overview Flutter Linear Gauge](images/basic_elements.png) ## Key Features diff --git a/chart-sdk/flutter/linear-gauge/range.md b/chart-sdk/flutter/linear-gauge/range.md index 72dabcf27..26c3fff9d 100644 --- a/chart-sdk/flutter/linear-gauge/range.md +++ b/chart-sdk/flutter/linear-gauge/range.md @@ -9,7 +9,7 @@ documentation: ug # 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. +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 Flutter Linear Gauge. The default style of range will be as below. {% tabs %} {% highlight dart %} @@ -44,7 +44,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Initialize linear gauge for range](images/gauge-range/default-range.png) +![Initialize Flutter Linear Gauge for range](images/gauge-range/default-range.png) ## Customize range shape @@ -91,7 +91,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Draw linear gauge concave range](images/gauge-range/range-concave.png) +![Draw Flutter Linear Gauge concave range](images/gauge-range/range-concave.png) ## Customize edge style @@ -177,7 +177,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Set linear gauge range color](images/gauge-range/color_range.png) +![Set Flutter Linear Gauge range color](images/gauge-range/color_range.png) ## Apply radial gradient to a range @@ -318,7 +318,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Apply sweep gradient to linear gauge range](images/gauge-range/sweep_gradient_range.png) +![Apply sweep gradient to Flutter Linear Gauge range](images/gauge-range/sweep_gradient_range.png) ## Customize range position @@ -356,7 +356,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Position the linear gauge range](images/gauge-range/range_position.png) +![Position the Flutter Linear Gauge range](images/gauge-range/range_position.png) ## Setting range color to axis element @@ -462,4 +462,4 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Add multiple ranges in a linear gauge](images/gauge-range/multiple_ranges.png) \ No newline at end of file +![Add multiple ranges in a Flutter 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 9df0ac613..23e8cf4d8 100644 --- a/chart-sdk/flutter/linear-gauge/shape-marker-pointer.md +++ b/chart-sdk/flutter/linear-gauge/shape-marker-pointer.md @@ -47,7 +47,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Initialize linear gauge for shape pointer](images/shape-pointer/default_shape_pointer.png) +![Initialize Flutter Linear Gauge for shape pointer](images/shape-pointer/default_shape_pointer.png) ## Change the size @@ -82,7 +82,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Set size of linear gauge shape pointer](images/shape-pointer/shape_pointer_size.png) +![Set size of Flutter Linear Gauge shape pointer](images/shape-pointer/shape_pointer_size.png) ## Customize color @@ -319,7 +319,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge bar pointer offset](images/shape-pointer/shape_pointer_offset.png) +![Customize Flutter Linear Gauge bar pointer offset](images/shape-pointer/shape_pointer_offset.png) ## Drag behavior diff --git a/chart-sdk/flutter/linear-gauge/ticks.md b/chart-sdk/flutter/linear-gauge/ticks.md index a98a41d05..6384cea2a 100644 --- a/chart-sdk/flutter/linear-gauge/ticks.md +++ b/chart-sdk/flutter/linear-gauge/ticks.md @@ -11,7 +11,7 @@ documentation: ug The default style of axis ticks is as follows. -![Initialize linear gauge for axis](images/getting-started/default_linear_gauge.png) +![Initialize Flutter Linear Gauge for axis](images/getting-started/default_linear_gauge.png) ## Customize tick style @@ -47,7 +47,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize the linear gauge axis tick style](images/axis-ticks/axis-tick-style.png) +![Customize the Flutter Linear Gauge axis tick style](images/axis-ticks/axis-tick-style.png) ## Customize minor tick interval @@ -77,7 +77,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge ticks per interval](images/axis-ticks/minor-ticks-per-interval.png) +![Customize Flutter Linear Gauge ticks per interval](images/axis-ticks/minor-ticks-per-interval.png) ## Change tick visibility @@ -109,7 +109,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge ticks visibility](images/axis-ticks/linear-gauge-tick-visibility.png) +![Customize Linear Gauge ticks visibility](images/axis-ticks/linear-gauge-tick-visibility.png) ## Customize tick position @@ -173,5 +173,5 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge ticks offset from axis](images/axis-ticks/customize-tick-offset.png) +![Customize Flutter 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 a3458f2a9..767a1e72b 100644 --- a/chart-sdk/flutter/linear-gauge/widget-marker-pointer.md +++ b/chart-sdk/flutter/linear-gauge/widget-marker-pointer.md @@ -42,7 +42,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Initialize linear gauge for widget pointer](images/widget-pointer/default_widget_pointer.png) +![Initialize Flutter Linear Gauge for widget pointer](images/widget-pointer/default_widget_pointer.png) ## Change marker alignment @@ -166,7 +166,7 @@ class LinearGaugeDemo extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Customize linear gauge bar pointer offset](images/widget-pointer/widget_pointer_offset.png) +![Customize Flutter Linear Gauge bar pointer offset](images/widget-pointer/widget_pointer_offset.png) ## Drag behavior diff --git a/chart-sdk/flutter/maps/data-labels.md b/chart-sdk/flutter/maps/data-labels.md index 5d5d35728..45b816789 100644 --- a/chart-sdk/flutter/maps/data-labels.md +++ b/chart-sdk/flutter/maps/data-labels.md @@ -13,7 +13,7 @@ Data labels provide identification for the shapes by displaying their names. You ## Show data labels -You can show data labels on the map using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. By default, the data labels are rendered based on the value of [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property. The default value of the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property is `false`. +You can show data labels on the Flutter Maps using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. By default, the data labels are rendered based on the value of [`shapeDataField`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeDataField.html) property. The default value of the [`showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property is `false`. {% tabs %} {% highlight Dart %} diff --git a/chart-sdk/flutter/maps/getting-started.md b/chart-sdk/flutter/maps/getting-started.md index 5b0248c90..ddb992003 100644 --- a/chart-sdk/flutter/maps/getting-started.md +++ b/chart-sdk/flutter/maps/getting-started.md @@ -9,20 +9,20 @@ documentation: ug # 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. +This section explains the steps required to add the Flutter 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® Flutter Maps. To get started quickly with our Flutter Maps widget, you can check on this video. -## Add Flutter maps to an application +## Add Flutter Maps 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 maps dependency to your pubspec.yaml file. +Add the Syncfusion® Flutter Maps dependency to your pubspec.yaml file. {% tabs %} {% highlight dart %} @@ -60,9 +60,9 @@ import 'package:syncfusion_flutter_maps/maps.dart'; {% endhighlight %} {% endtabs %} -## Initialize maps +## Initialize Maps -After importing the package, initialize the maps widget as a child of any widget. +After importing the package, initialize the Flutter Maps widget as a child of any widget. {% tabs %} {% highlight Dart %} @@ -99,7 +99,7 @@ The [`layers`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps 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. +I> The Mercator projection is the default projection in Maps. ### From asset bundle @@ -324,9 +324,9 @@ N> * Refer the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html), for customizing the data label text. * Refer the [`MapShapeSource.shapeColorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/shapeColorValueMapper.html), for customizing the shape colors. -## Add shape layer maps elements +## Add shape layer Maps elements -Add the basic maps elements such as data labels, legend, and tooltip as shown in the code snippet below. +Add the basic Maps elements such as data labels, legend, and tooltip as shown in the code snippet below. * **Data labels** - You can show data labels using the [`MapShapeLayer.showDataLabels`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/showDataLabels.html) property. It is also possible to show data labels only for the particular shapes or show custom text using the [`MapShapeSource.dataLabelMapper`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSource/dataLabelMapper.html) property. diff --git a/chart-sdk/flutter/maps/legend.md b/chart-sdk/flutter/maps/legend.md index ab5ae7666..23a3a77f8 100644 --- a/chart-sdk/flutter/maps/legend.md +++ b/chart-sdk/flutter/maps/legend.md @@ -9,7 +9,7 @@ documentation: ug # Legend in Flutter Maps (SfMaps) -You can provide clear information on the data plotted on the map using legend. +You can provide clear information on the data plotted on the Flutter Maps using legend. ## Shape legend @@ -633,7 +633,7 @@ N> You can place the legend in custom position using the [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) property. The default value of the [`offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) property is `null`. -If the property [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) has been set with the property [`MapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/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 [`MapLegend.offset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/offset.html) has been set with the property [`MapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLegend/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 Flutter Maps. {% tabs %} {% highlight Dart %} diff --git a/chart-sdk/flutter/maps/markers.md b/chart-sdk/flutter/maps/markers.md index 5328ff28f..51d6362c4 100644 --- a/chart-sdk/flutter/maps/markers.md +++ b/chart-sdk/flutter/maps/markers.md @@ -9,13 +9,13 @@ documentation: ug # 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. +Markers can be used to denote specific locations on a Flutter Maps. You can use built-in symbols or display custom widgets at specific latitude and longitude coordinates on the Flutter Maps. ## Adding markers ### Shape layer -You can show markers at any position on the map by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property. +You can show markers at any position on the Flutter Maps by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property. The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property is `null`. @@ -88,7 +88,7 @@ N> ### Tile layer -You can show markers at any position on the map by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`MapTileLayer.markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property. +You can show markers at any position on the Flutter Maps by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`MapTileLayer.markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) property. The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialMarkersCount.html) property is `null`. @@ -886,9 +886,9 @@ typedef MapTapCallback = void Function(Offset position); ## Zoom markers to fit bounds -You can visualize a specific area on the map by specifying the northeast and southwest coordinate points to the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property in the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) and [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). It renders the map by calculating the center coordinate and zoom level depending on the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) value. +You can visualize a specific area on the Flutter Maps by specifying the northeast and southwest coordinate points to the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property in the [`MapTileLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapTileLayer-class.html) and [`MapShapeLayer`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer-class.html). It renders the Flutter Maps by calculating the center coordinate and zoom level depending on the [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) value. -The [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property can be set at load time alone. You can use the [`latLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/latLngBounds.html) property of [`MapZoomPanBehavior`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior-class.html) to dynamically update the map bounds. +The [`initialLatLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapLayer/initialLatLngBounds.html) property can be set at load time alone. You can use the [`latLngBounds`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/latLngBounds.html) property of [`MapZoomPanBehavior`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior-class.html) to dynamically update the bounds of the Flutter Maps. {% tabs %} {% highlight Dart %} diff --git a/chart-sdk/flutter/maps/overview.md b/chart-sdk/flutter/maps/overview.md index 7ea43ba25..1b291da73 100644 --- a/chart-sdk/flutter/maps/overview.md +++ b/chart-sdk/flutter/maps/overview.md @@ -23,19 +23,19 @@ Render GeoJSON data as geographical shapes or any custom shapes on a shape layer * **Data Labels** - Provide identification for shapes by displaying their names. Labels can be trimmed or hidden if they exceed shape boundaries. -* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the map. +* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the Flutter Maps. * **Bubbles** - Add information to shapes such as population density, number of users, and more. Bubbles can be rendered in different colors and sizes based on the data values of their assigned shapes. -* **Shape Selection** - Select shapes to highlight specific areas on the map. You can use callbacks to perform custom actions during shape selection. +* **Shape Selection** - Select shapes to highlight specific areas on the Flutter Maps. You can use callbacks to perform custom actions during shape selection. -* **Legend** - Provide clear information about the data plotted on the map. The legend toggling feature allows you to visualize only the shapes to which a specific legend applies. +* **Legend** - Provide clear information about the data plotted on the Flutter Maps. The legend toggling feature allows you to visualize only the shapes to which a specific legend applies. * **Colors** - Categorize shapes by customizing their colors based on underlying values. You can set shape colors for specific values or for ranges of values. * **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 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. +* **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 Flutter Maps to navigate across regions. You can also customize the initial zoom level and center point. ## Tile layer @@ -45,6 +45,6 @@ The interactive tile layer allows you to load map tiles from web map tile servic ### Features -* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the map. +* **Markers** - Denote specific locations using built-in symbols or display custom widgets at particular latitude and longitude coordinates on the Flutter Maps. -* **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. +* **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 Flutter Maps 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 05fc221ef..1a52a1a9b 100644 --- a/chart-sdk/flutter/maps/right-to-left.md +++ b/chart-sdk/flutter/maps/right-to-left.md @@ -15,7 +15,7 @@ Right to left rendering can be achieved in the following ways: ### Wrapping the SfMaps with Directionality widget -The maps can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl`. +The Flutter Maps 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 %} @@ -52,7 +52,7 @@ class MapsExample extends StatelessWidget { ### Changing the locale to RTL languages -The maps elements will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, or 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. +The elements of the Flutter Maps will render in right to left direction if the locale belongs to RTL languages such as Arabic, Persian, Hebrew, Pashto, or 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 %} diff --git a/chart-sdk/flutter/maps/selection.md b/chart-sdk/flutter/maps/selection.md index c8ff2431b..ce83d1f25 100644 --- a/chart-sdk/flutter/maps/selection.md +++ b/chart-sdk/flutter/maps/selection.md @@ -9,11 +9,11 @@ documentation: ug # Shape Selection in Flutter Maps (SfMaps) -You can select a shape to highlight a specific area on a map. You can also use callbacks to perform custom actions during shape selection. +You can select a shape to highlight a specific area on a Flutter Maps. You can also use callbacks to perform custom actions during shape selection. ## Enable shape selection -You can enable shape selection on a map using the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) property along with setting the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property. The default value of the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property is `-1`. +You can enable shape selection on a Flutter Maps using the [`MapShapeLayer.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/onSelectionChanged.html) property along with setting the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property. The default value of the [`selectedIndex`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/selectedIndex.html) property is `-1`. 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. diff --git a/chart-sdk/flutter/maps/shape-sublayer.md b/chart-sdk/flutter/maps/shape-sublayer.md index df902dfd4..4ca5d0b2f 100644 --- a/chart-sdk/flutter/maps/shape-sublayer.md +++ b/chart-sdk/flutter/maps/shape-sublayer.md @@ -823,7 +823,7 @@ class DataModel { ## Marker -You can show markers at any position on the map by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) property. +You can show markers at any position on the Flutter Maps by providing latitude and longitude coordinates to the [`MapMarker`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapMarker-class.html), which is returned from the [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) property. The [`markerBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/markerBuilder.html) callback will be called a number of times equal to the value specified in the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/initialMarkersCount.html) property. The default value of the [`initialMarkersCount`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeSublayer/initialMarkersCount.html) property is null. diff --git a/chart-sdk/flutter/maps/shape.md b/chart-sdk/flutter/maps/shape.md index bb632a83a..1e5f0e46b 100644 --- a/chart-sdk/flutter/maps/shape.md +++ b/chart-sdk/flutter/maps/shape.md @@ -9,11 +9,11 @@ documentation: ug # 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. +This section explains about shapes and how to apply colors to the shapes based on specific values in the Flutter Maps. ## Loading progress indicator -You can notify the user that the map is being loaded using the [`MapShapeLayer.loadingBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/loadingBuilder.html). It returns the widget which will be visible until the map is loaded. +You can notify the user that the Flutter Maps is being loaded using the [`MapShapeLayer.loadingBuilder`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapShapeLayer/loadingBuilder.html). It returns the widget which will be visible until the map is loaded. {% tabs %} {% highlight Dart %} diff --git a/chart-sdk/flutter/maps/tooltip.md b/chart-sdk/flutter/maps/tooltip.md index c95066247..c96bafc94 100644 --- a/chart-sdk/flutter/maps/tooltip.md +++ b/chart-sdk/flutter/maps/tooltip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in Flutter Maps (SfMaps) -Tooltip is used to indicate shape, bubble, and marker information during tap or click interactions. This section helps you learn how to show tooltips for shapes, bubbles, and markers in maps and customize them. +Tooltip is used to indicate shape, bubble, and marker information during tap or click interactions. This section helps you learn how to show tooltips for shapes, bubbles, and markers in Flutter Maps and customize them. ## Tooltip for the shapes diff --git a/chart-sdk/flutter/maps/zoom-pan.md b/chart-sdk/flutter/maps/zoom-pan.md index 6ebbfbfce..a77850a4f 100644 --- a/chart-sdk/flutter/maps/zoom-pan.md +++ b/chart-sdk/flutter/maps/zoom-pan.md @@ -9,7 +9,7 @@ documentation: ug # 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 Flutter Maps 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. @@ -791,7 +791,7 @@ N> ### Reset -You can [`reset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/reset.html) the map to the [`MapZoomPanBehavior.minZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/minZoomLevel.html) by calling this method. +You can [`reset`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/reset.html) the Flutter Maps to the [`MapZoomPanBehavior.minZoomLevel`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/MapZoomPanBehavior/minZoomLevel.html) by calling this method. {% tabs %} {% highlight Dart %} diff --git a/chart-sdk/flutter/radial-gauge/animation.md b/chart-sdk/flutter/radial-gauge/animation.md index 91a5fb415..f7d6d082f 100644 --- a/chart-sdk/flutter/radial-gauge/animation.md +++ b/chart-sdk/flutter/radial-gauge/animation.md @@ -11,7 +11,7 @@ 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 the [`animationDuration`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge/animationDuration.html) property of the gauge. +The Flutter 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. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/radial-gauge/annotation.md b/chart-sdk/flutter/radial-gauge/annotation.md index 349944f79..6d2d7f202 100644 --- a/chart-sdk/flutter/radial-gauge/annotation.md +++ b/chart-sdk/flutter/radial-gauge/annotation.md @@ -9,7 +9,7 @@ documentation: ug # Annotation in Flutter Radial Gauge (SfRadialGauge) -[`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. +[`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 Flutter Radial Gauge. 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) @@ -199,7 +199,7 @@ By default, the value of [`positionFactor`](https://pub.dev/documentation/syncfu ## Setting image for annotation -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. +Annotations provide options to add any image over the Flutter Radial Gauge with respect to its offset position. You can add multiple images in a single control. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/radial-gauge/axes.md b/chart-sdk/flutter/radial-gauge/axes.md index 4b9634cd2..d178031a3 100644 --- a/chart-sdk/flutter/radial-gauge/axes.md +++ b/chart-sdk/flutter/radial-gauge/axes.md @@ -609,7 +609,7 @@ class RadialGaugeDemo extends StatelessWidget { **Background color support** -[`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. +[`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 %} @@ -1413,7 +1413,7 @@ class RadialGaugeDemo extends StatelessWidget { ## 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. +[`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 %} diff --git a/chart-sdk/flutter/radial-gauge/getting-started.md b/chart-sdk/flutter/radial-gauge/getting-started.md index 37ad1f893..2c8e7fbab 100644 --- a/chart-sdk/flutter/radial-gauge/getting-started.md +++ b/chart-sdk/flutter/radial-gauge/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # 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. +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® Flutter Radial Gauge. -To get started quickly with our Flutter radial gauge widget, you can check out this video: +To get started quickly with our Flutter Radial Gauge widget, you can check out this video: @@ -112,11 +112,11 @@ After the package has been imported, initialize the [SfRadialGauge](https://www. {% endhighlight %} {% endtabs %} -![Initialize radial gauge](images/getting-started/default_gauge.png) +![Initialize Flutter Radial Gauge](images/getting-started/default_gauge.png) ## Add title -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: +You can add a title to the Flutter 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: {% tabs %} {% highlight dart %} @@ -149,7 +149,7 @@ You can add a title to the radial gauge to provide information to users about th {% endhighlight %} {% endtabs %} -![title to radial gauge](images/getting-started/gauge_title.png) +![title to Flutter Radial Gauge](images/getting-started/gauge_title.png) ## Add axis @@ -187,7 +187,7 @@ Axes contain a list of axis elements, where you can add any number of radial axe {% endhighlight %} {% endtabs %} -![Axis to radial gauge](images/getting-started/gauge_axis.png) +![Axis to Flutter Radial Gauge](images/getting-started/gauge_axis.png) ## Add range @@ -230,7 +230,7 @@ Ranges contain a list of range elements, where you can add any number of ranges {% endhighlight %} {% endtabs %} -![range support to radial gauge](images/getting-started/gauge_range.png) +![range support to Flutter Radial Gauge](images/getting-started/gauge_range.png) ## Add pointer @@ -270,7 +270,7 @@ Pointers contains a list of pointer elements, where you can add any number of ga {% endhighlight %} {% endtabs %} -![gauge pointers to radial gauge](images/getting-started/gauge_pointer.png) +![gauge pointers to Flutter Radial Gauge](images/getting-started/gauge_pointer.png) ## Add annotation @@ -313,7 +313,7 @@ You can add any number of widgets such as text or image as an annotation inside {% endhighlight %} {% endtabs %} -![annotation support to the radial gauge](images/getting-started/gauge_annotation.png) +![annotation support to the Flutter Radial Gauge](images/getting-started/gauge_annotation.png) The following code example gives you the complete code of above configurations. diff --git a/chart-sdk/flutter/radial-gauge/marker-pointer.md b/chart-sdk/flutter/radial-gauge/marker-pointer.md index daf285e38..418b5d1e6 100644 --- a/chart-sdk/flutter/radial-gauge/marker-pointer.md +++ b/chart-sdk/flutter/radial-gauge/marker-pointer.md @@ -9,9 +9,9 @@ documentation: ug # Marker Pointer in Flutter Radial Gauge (SfRadialGauge) -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). +A [`MarkerPointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer-class.html) is used to indicate a specific value on the axis of the Flutter Radial Gauge. 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. +The following example demonstrates adding a default marker pointer to the Radial Gauge. {% highlight dart %} @@ -60,7 +60,7 @@ class MarkerPointerExample extends StatelessWidget { ## 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): +The Flutter 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. @@ -292,7 +292,7 @@ class RectangleMarkerExample extends StatelessWidget { ### 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. +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 Flutter Radial Gauge. {% highlight dart %} diff --git a/chart-sdk/flutter/radial-gauge/needle-pointer.md b/chart-sdk/flutter/radial-gauge/needle-pointer.md index 74fa6b96a..196567146 100644 --- a/chart-sdk/flutter/radial-gauge/needle-pointer.md +++ b/chart-sdk/flutter/radial-gauge/needle-pointer.md @@ -9,7 +9,7 @@ documentation: ug # Needle Pointer in Flutter Radial Gauge (SfRadialGauge) -[`Needle Pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) contains three parts namely needle, [`knob`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/knobStyle.html), and [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) and that can be placed on a gauge to mark values. +[`Needle Pointer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer-class.html) contains three parts namely needle, [`knob`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/knobStyle.html), and [`tail`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/NeedlePointer/tailStyle.html) and that can be placed on a Flutter Radial Gauge to mark values. {% highlight dart %} diff --git a/chart-sdk/flutter/radial-gauge/overview.md b/chart-sdk/flutter/radial-gauge/overview.md index 8aa6162c5..08dbd2b3b 100644 --- a/chart-sdk/flutter/radial-gauge/overview.md +++ b/chart-sdk/flutter/radial-gauge/overview.md @@ -11,16 +11,16 @@ documentation: ug 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) +![Overview Flutter Radial Gauge](images/overview/gauge_overview.png) ## Key Features -* **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. +* **Title** - Add a descriptive title to the Flutter 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 Flutter 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** - Flutter Radial 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 Flutter 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 Flutter 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. +* **Accessibility** - The Flutter 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/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 fb79551fd..dd7185364 100644 --- a/chart-sdk/flutter/radial-gauge/pointers.md +++ b/chart-sdk/flutter/radial-gauge/pointers.md @@ -9,14 +9,14 @@ documentation: ug # Pointers in Flutter Radial Gauge (SfRadialGauge) - Pointer is used to indicate values on an axis. The Syncfusion Flutter Radial Gauge control offers four types of pointers: +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/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. +All pointers can be customized to meet your specific requirement. You can add multiple pointers to the Flutter Radial 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. ![multiple pointers](images/pointers/pointers.png) @@ -213,7 +213,7 @@ class _EventExampleState extends State { {% 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. +The [`onCreatePointerRenderer`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/MarkerPointer/onCreatePointerRenderer.html) callback allows you to create a custom pointer in the Flutter 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 %} diff --git a/chart-sdk/flutter/radial-gauge/radial-gauge-title.md b/chart-sdk/flutter/radial-gauge/radial-gauge-title.md index 30bcb1a71..132c4369c 100644 --- a/chart-sdk/flutter/radial-gauge/radial-gauge-title.md +++ b/chart-sdk/flutter/radial-gauge/radial-gauge-title.md @@ -23,7 +23,7 @@ The following properties are used to customize the appearance of title, ## 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). The default alignment is `GaugeAlignment.center`. +You can align the title text content horizontally to the near (left), center, or far (right) position relative to the Flutter Radial 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`. {% tabs %} {% highlight dart %} @@ -84,4 +84,4 @@ class MyHomePage extends StatelessWidget { {% endhighlight %} {% endtabs %} -![Gauge title](images/title/gauge_title.jpg) \ No newline at end of file +![Flutter Radial 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 6243f05d9..2055af729 100644 --- a/chart-sdk/flutter/radial-gauge/range-pointer.md +++ b/chart-sdk/flutter/radial-gauge/range-pointer.md @@ -9,7 +9,7 @@ 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. The default width is 10 logical pixels, with a default color of RGB(0, 168, 231). +A range pointer is an accenting line or shaded background range that can be placed on a Flutter Radial 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 %} diff --git a/chart-sdk/flutter/treemap/drilldown.md b/chart-sdk/flutter/treemap/drilldown.md index 9571eae1e..eef809130 100644 --- a/chart-sdk/flutter/treemap/drilldown.md +++ b/chart-sdk/flutter/treemap/drilldown.md @@ -219,7 +219,7 @@ class CarSale { 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 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). +* **Position** - Positions the breadcrumbs either at the top or bottom of the Flutter 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 %} diff --git a/chart-sdk/flutter/treemap/getting-started.md b/chart-sdk/flutter/treemap/getting-started.md index 5fe47837a..bfb0d0a6c 100644 --- a/chart-sdk/flutter/treemap/getting-started.md +++ b/chart-sdk/flutter/treemap/getting-started.md @@ -9,14 +9,14 @@ documentation: ug # Getting Started with Flutter Treemap (SfTreemap) -This section explains the steps required to add the treemap widget and enable its features such as labels, tooltip, assigning colors based on region, and legends. This section covers only the basic features needed to get started with Syncfusion® treemap. +This section explains the steps required to add the Flutter 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® Flutter Treemap. To get started quickly with our Flutter Treemap widget, you can refer to this video. -## Add Flutter treemap to an application +## Add Flutter Treemap 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. @@ -60,9 +60,9 @@ import 'package:syncfusion_flutter_treemap/treemap.dart'; ## Initialize treemap and populate data source -After importing the package, initialize the treemap widget as a child of any widget. +After importing the package, initialize the Flutter Treemap widget as a child of any widget. -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. +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 Flutter 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 %} @@ -275,7 +275,7 @@ class SocialMediaUsers { ## Add tooltip -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. +You can enable tooltip for any tile in the Flutter 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 %} diff --git a/chart-sdk/flutter/treemap/legend.md b/chart-sdk/flutter/treemap/legend.md index 94fc3a8ec..5faf4d530 100644 --- a/chart-sdk/flutter/treemap/legend.md +++ b/chart-sdk/flutter/treemap/legend.md @@ -409,7 +409,7 @@ class SocialMediaUsers { ## Title -You can set a title specifically for the legend in the treemap by using the [`title`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/title.html) property. This property lets you display a descriptive heading for the legend, helping users understand what the legend represents within the treemap. +You can set a title specifically for the legend in the Flutter Treemap by using the [`title`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/title.html) property. This property lets you display a descriptive heading for the legend, helping users understand what the legend represents within the Flutter Treemap. 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. @@ -566,7 +566,7 @@ N> 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 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. +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 Flutter Treemap. {% tabs %} {% highlight dart %} diff --git a/chart-sdk/flutter/treemap/levels.md b/chart-sdk/flutter/treemap/levels.md index 33e99a0fc..d764b3237 100644 --- a/chart-sdk/flutter/treemap/levels.md +++ b/chart-sdk/flutter/treemap/levels.md @@ -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 Flutter Treemap can be categorized into the following two types: * Flat level. * Hierarchical level. @@ -90,13 +90,13 @@ class PopulationModel { N> * Refer the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), for customizing the tile color. -* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for adding and customizing the tooltip on the treemap. +* Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for adding and customizing the tooltip on the Flutter Treemap. * Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), for adding and customizing the label on the tile. * Refer the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html), for adding and customizing the custom widget on the treemap. ## Hierarchical level -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. +Hierarchical levels arrange the tiles in the form of nested rectangles. Each tile of the Flutter 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. @@ -403,4 +403,4 @@ N> * Refer the [`TreemapLevel.colorValueMapper`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/colorValueMapper.html), for customizing the tile color. * Refer the [`TreemapLevel.tooltipBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/tooltipBuilder.html), for adding and customizing the tooltip on the treemap. * Refer the [`TreemapLevel.labelBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/labelBuilder.html), for adding and customizing the label on the tile. -* Refer the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html), for adding and customizing the custom widget on the treemap. \ No newline at end of file +* Refer the [`TreemapLevel.itemBuilder`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLevel/itemBuilder.html), for adding and customizing the custom widget on the Flutter Treemap. \ No newline at end of file diff --git a/chart-sdk/flutter/treemap/overview.md b/chart-sdk/flutter/treemap/overview.md index b6f5ff220..f23e648e0 100644 --- a/chart-sdk/flutter/treemap/overview.md +++ b/chart-sdk/flutter/treemap/overview.md @@ -17,17 +17,17 @@ Syncfusion® Flutter Treemap is a powerful and customizable widget * **Layouts** - Utilize various layouts based on algorithms such as squarified, slice, and dice to represent both flat and hierarchically-structured data. -* **Hierarchical support** - Besides flat structures, the treemap supports hierarchical data. Each tile is a rectangle filled with smaller rectangles representing sub-data. +* **Hierarchical support** - Besides flat structures, the Flutter Treemap supports hierarchical data. Each tile is a rectangle filled with smaller rectangles representing sub-data. * **Labels** - Add widgets, like text widgets, to enhance the readability of individual tiles by providing brief descriptions on labels. * **Selection** - Select tiles to highlight them and perform specific functionalities like displaying a pop-up or navigating to a different page. -* **Legend** - Use different legend styles to provide information on the treemap data clearly. +* **Legend** - Use different legend styles to provide information on the Flutter Treemap data clearly. * **Colors** - Customize tile colors on the treemap based on levels. Tile color can be set for specific values or ranges of values. -* **Tooltip** - Use customizable tooltips to display additional information about the tiles on the treemap. +* **Tooltip** - Use customizable tooltips to display additional information about the tiles on the Flutter 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. diff --git a/chart-sdk/flutter/treemap/right-to-left.md b/chart-sdk/flutter/treemap/right-to-left.md index 3731ca5d7..ba43f2c44 100644 --- a/chart-sdk/flutter/treemap/right-to-left.md +++ b/chart-sdk/flutter/treemap/right-to-left.md @@ -15,7 +15,7 @@ Right-to-left rendering can be achieved in the following ways: ### 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 Flutter 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 %} @@ -99,7 +99,7 @@ class PopulationModel { ### Changing the locale to RTL languages -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. +The elements of the Flutter Treemap 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 yaml %} diff --git a/chart-sdk/flutter/treemap/selection.md b/chart-sdk/flutter/treemap/selection.md index 8a8129469..32644cd47 100644 --- a/chart-sdk/flutter/treemap/selection.md +++ b/chart-sdk/flutter/treemap/selection.md @@ -9,11 +9,11 @@ documentation: ug # Tile Selection in Flutter Treemap (SfTreemap) -You can select a tile to highlight that area on the treemap. You can use the callback to perform any action during tile selection. +You can select a tile to highlight that area on the Flutter Treemap. You can use the callback to perform any action during tile selection. ## Enable tile selection -You can enable tile selection on a treemap using the [`SfTreemap.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/onSelectionChanged.html) property. The descendant tiles of the selected tile are also selected along with the selected tile when doing selection for hierarchical level. +You can enable tile selection on a Flutter Treemap using the [`SfTreemap.onSelectionChanged`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap/onSelectionChanged.html) property. The descendant tiles of the selected tile are also selected along with the selected tile when doing selection for hierarchical level. 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.