Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
ff910edac2
Коммит
2113c7fa4d
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Barcodes widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Flutter Barcodes (SfBarcodeGenerator) widget and more.
|
||||
platform: flutter
|
||||
control: SfBarcodeGenerator
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Barcodes (SfBarcodeGenerator)
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfBarcodeGenerator` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The customization the colors can be done for the following elements.
|
||||
* [Bar color](https://help.syncfusion.com/flutter/barcode/barcode-customization)
|
||||
* [Background color](https://help.syncfusion.com/flutter/barcode/barcode-customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfBarcodeGenerator` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all text elements in barcode generator.
|
||||
* [Input value of barcode](https://help.syncfusion.com/flutter/barcode/barcode-customization#text-customization)
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Cartesian Charts widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Flutter Cartesian Charts (SfCartesianChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Cartesian Charts (SfCartesianChart)
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfCartesianChart` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The customization the colors can be done for the following chart elements.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/cartesian-charts/chart-title)
|
||||
* [Axis title](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-title)
|
||||
* [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-customization)
|
||||
* [Series color palette](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-palette)
|
||||
* [Color mapping for data points](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#color-mapping-for-data-points)
|
||||
* [Gradient fill](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#gradient-fill)
|
||||
* [Data label](https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#data-label)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/cartesian-charts/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/cartesian-charts/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/cartesian-charts/tooltip#customizing-the-appearance)
|
||||
* [Trackball tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball)
|
||||
* [Crosshair tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#show-axis-tooltip)
|
||||
* [Plot band](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands)
|
||||
* [Empty points data](https://help.syncfusion.com/flutter/cartesian-charts/series-customization#empty-point-customization)
|
||||
* [Selected data points](https://help.syncfusion.com/flutter/cartesian-charts/selection#customizing-the-segments)
|
||||
* [Selection zooming](https://help.syncfusion.com/flutter/cartesian-charts/zoom-pan#selection-zooming)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfCartesianChart` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all elements in Cartesian chart.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/cartesian-charts/chart-title)
|
||||
* [Axis title](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-title)
|
||||
* [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-customization)
|
||||
* [Data label](https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#data-label)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/cartesian-charts/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/cartesian-charts/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/cartesian-charts/tooltip#customizing-the-appearance)
|
||||
* [Trackball tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#trackball)
|
||||
* [Crosshair tooltip](https://help.syncfusion.com/flutter/cartesian-charts/trackball-crosshair#show-axis-tooltip)
|
||||
* [Plot band text](https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands)
|
||||
|
||||
## Easily tappable targets
|
||||
|
||||
The `SfCartesianChart` Provides callback support to notify when tapping on the essential elements in the chart.
|
||||
* [Axis label](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onaxislabeltapped)
|
||||
* [Data points](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onpointtapped)
|
||||
* [Data label](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#ondatalabeltapped)
|
||||
* [Legend](https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onlegendtapped)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Circular Charts widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Flutter Circular Charts (SfCircularChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Circular Charts (SfCircularChart)
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfCircularChart` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The customization the colors can be done for the following chart elements.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/circular-charts/chart-title)
|
||||
* [Series palette](https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#color-palette)
|
||||
* [Color mapping for data points](https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#color-mapping-for-data-points)
|
||||
* [Shader for data points](https://help.syncfusion.com/flutter/circular-charts/circular-series-customization#gradient-and-image-shader)
|
||||
* [Data label](https://help.syncfusion.com/flutter/circular-charts/datalabel)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/circular-charts/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/circular-charts/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/circular-charts/tooltip#customizing-the-appearance)
|
||||
* [Selected segments](https://help.syncfusion.com/flutter/circular-charts/selection#customizing-the-segments)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfCircularChart` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all elements in Circular chart.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/circular-charts/chart-title)
|
||||
* [Data label](https://help.syncfusion.com/flutter/circular-charts/datalabel)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/circular-charts/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/circular-charts/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/circular-charts/tooltip#customizing-the-appearance)
|
||||
|
||||
## Easily tappable targets
|
||||
|
||||
The `SfCircularChart` Provides callback support to notify when tapping on the essential elements in the chart.
|
||||
* [Data points](https://help.syncfusion.com/flutter/circular-charts/callbacks#onpointtapped)
|
||||
* [Data labels](https://help.syncfusion.com/flutter/circular-charts/callbacks#ondatalabeltapped)
|
||||
* [Legend](https://help.syncfusion.com/flutter/circular-charts/callbacks#onlegendtapped)
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Funnel Chart widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Flutter Funnel Chart (SfFunnelChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Funnel Charts (SfFunnelChart)
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfFunnelChart` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The customization the colors can be done for the following chart elements.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/funnel-chart/chart-title)
|
||||
* [Palette for data points](https://help.syncfusion.com/flutter/funnel-chart/funnel-customization#applying-palette-color)
|
||||
* [Color mapping for data points](https://help.syncfusion.com/flutter/funnel-chart/series-customization#color-mapping-for-data-points)
|
||||
* [Data label](https://help.syncfusion.com/flutter/funnel-chart/datalabel)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/funnel-chart/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/funnel-chart/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/funnel-chart/tooltip#customizing-the-appearance)
|
||||
* [Selected segments](https://help.syncfusion.com/flutter/funnel-chart/selection#customizing-the-segments)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfCFunnelChart` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all elements in Funnel chart.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/funnel-chart/chart-title)
|
||||
* [Data label](https://help.syncfusion.com/flutter/funnel-chart/datalabel)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/funnel-chart/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/funnel-chart/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/funnel-chart/tooltip#customizing-the-appearance)
|
||||
|
||||
## Easily tappable targets
|
||||
|
||||
The `SfFunnelChart` Provides callback support to notify when tapping on the essential elements in the chart.
|
||||
* [Data points](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onpointtapped)
|
||||
* [Data labels](https://help.syncfusion.com/flutter/funnel-chart/callbacks#ondatalabeltapped)
|
||||
* [Legend](https://help.syncfusion.com/flutter/funnel-chart/callbacks#onlegendtapped)
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter linear gauge widget | Syncfusion
|
||||
description: Learn here all about the accessibility support in Syncfusion Flutter linear gauge (SfLinearGauge) widget and how to customize it.
|
||||
platform: Flutter
|
||||
control: SfLinearGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Linear Gauge (SfLinearGauge)
|
||||
|
||||
## Screen reader
|
||||
|
||||
The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) can be accessed by the screen readers by wrapping the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
double _value = 50;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Semantics(
|
||||
label: 'Syncfusion Flutter Linear Gauge',
|
||||
value: _value.toString(),
|
||||
child:
|
||||
SfLinearGauge(markerPointers: [LinearShapePointer(value: _value)]),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Axis solid color`](https://help.syncfusion.com/flutter/linear-gauge/axis#apply-solid-color)
|
||||
* [`Axis gradient`](https://help.syncfusion.com/flutter/linear-gauge/axis#apply-gradient)
|
||||
* [`Ticks`](https://help.syncfusion.com/flutter/linear-gauge/ticks#customize-tick-style)
|
||||
* [`Labels`](https://help.syncfusion.com/flutter/linear-gauge/labels#customize-label-styles)
|
||||
* [`Range`](https://help.syncfusion.com/flutter/linear-gauge/getting-started#add-range)
|
||||
* [`Radial gradient`](https://help.syncfusion.com/flutter/linear-gauge/range#apply-radial-gradient-to-a-range)
|
||||
* [`Linear gradient`](https://help.syncfusion.com/flutter/linear-gauge/range#apply-linear-gradient-to-a-range)
|
||||
* [`Sweep gradient`](https://help.syncfusion.com/flutter/linear-gauge/range#apply-sweep-gradient-to-a-range)
|
||||
* [`Bar pointer`](https://help.syncfusion.com/flutter/linear-gauge/bar-pointer#change-the-color-of-bar-pointer)
|
||||
* [`Marker`](https://help.syncfusion.com/flutter/linear-gauge/shape-marker-pointer#customize-color)
|
||||
|
||||
## Large fonts
|
||||
|
||||
You can change the font size of the [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) elements using the following API:
|
||||
|
||||
* [`Labels`](https://help.syncfusion.com/flutter/linear-gauge/labels#customize-label-styles)
|
||||
|
||||
## Easily touch targets
|
||||
|
||||
The [`SfLinearGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfLinearGauge-class.html) has touch target as 48 * 48 as per the standard for all the elements.
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter maps widget | Syncfusion
|
||||
description: Learn here all about the accessibility support in Syncfusion Flutter maps (SfMaps) widget and how to customize it.
|
||||
platform: Flutter
|
||||
control: SfMaps
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Maps (SfMaps)
|
||||
|
||||
## Screen reader
|
||||
|
||||
The [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) can be accessed by the screen readers by wrapping the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _data;
|
||||
late MapShapeSource _dataSource;
|
||||
late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent';
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_data = const <PopulationModel>[
|
||||
PopulationModel('Asia', 456.07),
|
||||
PopulationModel('Africa', 121.61),
|
||||
PopulationModel('Europe', 74.64),
|
||||
PopulationModel('North America', 57.9),
|
||||
PopulationModel('South America', 42.25),
|
||||
PopulationModel('Australia', 2.54),
|
||||
];
|
||||
|
||||
_dataSource = MapShapeSource.asset(
|
||||
'assets/world_map.json',
|
||||
shapeDataField: 'continent',
|
||||
dataCount: _data.length,
|
||||
primaryValueMapper: (int index) => _data[index].continent,
|
||||
);
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Semantics(
|
||||
label: 'Syncfusion Flutter Maps',
|
||||
value: _semanticLabel,
|
||||
child: SfMaps(
|
||||
layers: <MapLayer>[
|
||||
MapShapeLayer(
|
||||
source: _dataSource,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel(this.continent, this.populationInCrores);
|
||||
|
||||
final String continent;
|
||||
final double populationInCrores;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Shape`](https://help.syncfusion.com/flutter/maps/shape#shape-color)
|
||||
* [`Bubble`](https://help.syncfusion.com/flutter/maps/bubble#color)
|
||||
* [`Data labels`](https://help.syncfusion.com/flutter/maps/data-labels#appearance-customization)
|
||||
* [`Legend`](https://help.syncfusion.com/flutter/maps/legend#icon-and-text-customization)
|
||||
* [`Tooltip`](https://help.syncfusion.com/flutter/maps/tooltip#appearance-customization)
|
||||
* [`Sublayer`](https://help.syncfusion.com/flutter/maps/shape-sublayer#color-and-stroke-color)
|
||||
* [`Line layer`](https://help.syncfusion.com/flutter/maps/vector-layers/line-layer#color)
|
||||
* [`Arc layer`](https://help.syncfusion.com/flutter/maps/vector-layers/arc-layer#color)
|
||||
* [`Polyline layer`](https://help.syncfusion.com/flutter/maps/vector-layers/polyline-layer#color)
|
||||
* [`Polygon layer`](https://help.syncfusion.com/flutter/maps/vector-layers/polygon-layer#fill-color)
|
||||
* [`Circle layer`](https://help.syncfusion.com/flutter/maps/vector-layers/circle-layer#fill-color)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The font size of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) will be automatically scaled based on the device settings.
|
||||
|
||||
Also, you can change the font size of the [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) elements using the following APIs:
|
||||
|
||||
* [`Data label style`](https://help.syncfusion.com/flutter/maps/data-labels#appearance-customization)
|
||||
* [`Legend text style`](https://help.syncfusion.com/flutter/maps/legend#text-style)
|
||||
* [`Tooltip label style`](https://help.syncfusion.com/flutter/maps/tooltip#tooltip-for-the-shapes)
|
||||
|
||||
## Easier touch targets
|
||||
|
||||
The [`SfMaps`](https://pub.dev/documentation/syncfusion_flutter_maps/latest/maps/SfMaps-class.html) has touch target as 48 * 48 as per the standard for all the applicable elements.
|
||||
|
|
@ -9,7 +9,43 @@ documentation: ug
|
|||
|
||||
# Right to Left (RTL) in Flutter Maps (SfMaps)
|
||||
|
||||
## Using locale
|
||||
## RTL rendering ways
|
||||
|
||||
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`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: Center(
|
||||
child: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: const MapShapeSource.asset(
|
||||
"assets/world_map.json",
|
||||
shapeDataField: "continent"),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### 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, Urdu). It can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
|
||||
|
||||
|
|
@ -55,38 +91,6 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Using Directionality widget
|
||||
|
||||
The maps can also 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 %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: Center(
|
||||
child: SfMaps(
|
||||
layers: [
|
||||
MapShapeLayer(
|
||||
source: const MapShapeSource.asset(
|
||||
"assets/world_map.json",
|
||||
shapeDataField: "continent"),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## RTL supported maps elements
|
||||
|
||||
### Legend
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter PDF Viewer widget | Syncfusion
|
||||
description: Learn here all about the accessibility feature of the Syncfusion Flutter PDF Viewer (SfPdfViewer) widget and more.
|
||||
platform: Flutter
|
||||
control: SfPdfViewer
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter PDF Viewer (SfPdfViewer)
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfPdfViewer` [theming](https://help.syncfusion.com/flutter/themes/themes) support provides a consistent and standardized appearance, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The following APIs allow you to customize the colors of the following elements.
|
||||
* [searchTextHighlightColor](https://help.syncfusion.com/flutter/pdf-viewer/text-search#customize-the-search-text-highlight-color)
|
||||
* [selectionColor and selectionHandleColor](https://help.syncfusion.com/flutter/pdf-viewer/text-selection#customize-the-text-selection-and-its-handle-color)
|
||||
|
||||
## Keyboard navigation
|
||||
|
||||
The `SfPdfViewer` supports the following keyboard interactions.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align:left" colspan="2">Shortcuts for page navigation</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Home</td>
|
||||
<td>Navigate to the first page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>End</td>
|
||||
<td>Navigate to the last page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Left arrow</td>
|
||||
<td>Navigate to the previous page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Right arrow</td>
|
||||
<td>Navigate to the next page</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align:left" colspan="2">Shortcuts for Zooming</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ctrl + =</td>
|
||||
<td>Perform zoom in operation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ctrl + -</td>
|
||||
<td>Perform zoom out operation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ctrl + 0</td>
|
||||
<td>Retain the zoom level to 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align:left" colspan="2">Shortcut for Text Search</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ctrl + f</td>
|
||||
<td>Open the search toolbar</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align:left" colspan="2">Shortcut for Text Selection</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ctrl + c</td>
|
||||
<td>Copy the selected text</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Pyramid Chart widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Flutter Pyramid Chart (SfPyramidChart) widget and more.
|
||||
platform: flutter
|
||||
control: Chart
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Pyramid Charts (SfPyramidChart)
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The `SfPyramidChart` [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The customization the colors can be done for the following chart elements.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title)
|
||||
* [Palette for data points](https://help.syncfusion.com/flutter/pyramid-chart/pyramid-customization#applying-palette-color)
|
||||
* [Color mapping for data points](https://help.syncfusion.com/flutter/pyramid-chart/series-customization#color-mapping-for-data-points)
|
||||
* [Data label](https://help.syncfusion.com/flutter/pyramid-chart/datalabel)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/pyramid-chart/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/pyramid-chart/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/pyramid-chart/tooltip#customizing-the-appearance)
|
||||
* [Selected segments](https://help.syncfusion.com/flutter/pyramid-chart/selection#customizing-the-segments)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The `SfPyramidChart` font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all elements in Pyramid chart.
|
||||
* [Chart title](https://help.syncfusion.com/flutter/pyramid-chart/chart-title)
|
||||
* [Data label](https://help.syncfusion.com/flutter/pyramid-chart/datalabel)
|
||||
* [Legend title](https://help.syncfusion.com/flutter/pyramid-chart/legend#legend-title)
|
||||
* [Legend item text](https://help.syncfusion.com/flutter/pyramid-chart/legend#customizing-legend)
|
||||
* [Series tooltip](https://help.syncfusion.com/flutter/pyramid-chart/tooltip#customizing-the-appearance)
|
||||
|
||||
## Easily tappable targets
|
||||
|
||||
The `SfPyramidChart` Provides callback support to notify when tapping on the essential elements in the chart.
|
||||
* [Data points](https://help.syncfusion.com/flutter/pyramid-chart/callbacks#onpointtapped)
|
||||
* [Data labels](https://help.syncfusion.com/flutter/pyramid-chart/callbacks#ondatalabeltapped)
|
||||
* [Legend](https://help.syncfusion.com/flutter/pyramid-chart/callbacks#onlegendtapped)
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter radial gauge widget | Syncfusion
|
||||
description: Learn here all about the accessibility support in Syncfusion Flutter radial gauge (SfRadialGauge) widget and how to customize it.
|
||||
platform: Flutter
|
||||
control: SfRadialGauge
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Radial Gauge (SfRadialGauge)
|
||||
|
||||
## Screen reader
|
||||
|
||||
The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) can be accessed by the screen readers by wrapping the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
double _value = 50;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Semantics(
|
||||
label: 'Syncfusion Flutter Radial Gauge',
|
||||
value: _value.toString(),
|
||||
child: SfRadialGauge(axes: <RadialAxis>[
|
||||
RadialAxis(pointers: <GaugePointer>[NeedlePointer(value: _value)])
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Title`](https://help.syncfusion.com/flutter/radial-gauge/radial-gauge-title#text-alignment)
|
||||
* [`Axis labels`](https://help.syncfusion.com/flutter/radial-gauge/axes#label-style-customization)
|
||||
* [`Ticks`](https://help.syncfusion.com/flutter/radial-gauge/axes#tick-customization)
|
||||
* [`Annotation`](https://help.syncfusion.com/flutter/radial-gauge/annotation#alignment-of-annotation)
|
||||
* [`Marker pointer`](https://help.syncfusion.com/flutter/radial-gauge/marker-pointer#marker-customization)
|
||||
* [`Text pointer`](https://help.syncfusion.com/flutter/radial-gauge/marker-pointer#text-pointer)
|
||||
* [`Knob`](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer#knob-customization)
|
||||
* [`Tail`](https://help.syncfusion.com/flutter/radial-gauge/needle-pointer#tail-customization)
|
||||
* [`Range pointer`](https://help.syncfusion.com/flutter/radial-gauge/ranges#range-customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
You can change the font size of the [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) elements using the following APIs:
|
||||
|
||||
* [`Title`](https://help.syncfusion.com/flutter/radial-gauge/radial-gauge-title#text-alignment)
|
||||
* [`Axis labels`](https://help.syncfusion.com/flutter/radial-gauge/axes#label-style-customization)
|
||||
* [`Annotation`](https://help.syncfusion.com/flutter/radial-gauge/annotation#alignment-of-annotation)
|
||||
|
||||
## Easier touch targets
|
||||
|
||||
The [`SfRadialGauge`](https://pub.dev/documentation/syncfusion_flutter_gauges/latest/gauges/SfRadialGauge-class.html) has touch target as 48 * 48 as per the standard for all the elements.
|
||||
|
|
@ -7,13 +7,15 @@ control: SfRangeSelector
|
|||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Range Selector (SfRangeSelector)
|
||||
# Accessibility in Flutter Range Selector (SfRangeSelector)
|
||||
|
||||
The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) can easily be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/semanticFormatterCallback.html) property.
|
||||
## Screen reader
|
||||
|
||||
For android, you can adjust the value of each thumb by tapping it and then pressing the volume buttons to increase or decrease the value.
|
||||
The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) can be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/semanticFormatterCallback.html) property.
|
||||
|
||||
For iOS, you can adjust the value of each thumb by tapping it and then swiping up or down to increase or decrease the value respectively.
|
||||
For android, you can adjust the value of each thumb by moving the focus to the thumb and then pressing the volume buttons to increase or decrease the value.
|
||||
|
||||
For iOS, you can adjust the value of each thumb by moving the focus to the thumb and then swiping up or down to increase or decrease the value respectively.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -52,3 +54,28 @@ Widget build(BuildContext context) {
|
|||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Track`](https://help.syncfusion.com/flutter/range-selector/track#track-color)
|
||||
* [`Major ticks`](https://help.syncfusion.com/flutter/range-selector/ticks#major-ticks-color)
|
||||
* [`Minor ticks`](https://help.syncfusion.com/flutter/range-selector/ticks#minor-ticks-color)
|
||||
* [`Labels`](https://help.syncfusion.com/flutter/range-selector/labels-and-divisor#label-style)
|
||||
* [`Divisors`](https://help.syncfusion.com/flutter/range-selector/labels-and-divisor#divisor-color)
|
||||
* [`Thumb`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay#thumb-color)
|
||||
* [`Thumb overlay`](https://help.syncfusion.com/flutter/range-selector/thumb-and-overlay#thumb-overlay-color)
|
||||
* [`Active region color`](https://help.syncfusion.com/flutter/range-selector/basic-features#active-region-color)
|
||||
* [`Inactive region color`](https://help.syncfusion.com/flutter/range-selector/basic-features#inactive-region-color)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The font size of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) will be automatically scaled based on the device settings. Also, you can change the font size of the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) elements using the following APIs:
|
||||
|
||||
* [`Label style`](https://help.syncfusion.com/flutter/range-selector/labels-and-divisor#label-style)
|
||||
* [`Tooltip label style`](https://help.syncfusion.com/flutter/range-selector/tooltip#tooltip-label-style)
|
||||
|
||||
## Easier touch targets
|
||||
|
||||
The [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) has touch target as 48 * 48 as per the standard for all the elements.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,13 @@ documentation: ug
|
|||
|
||||
# Right to Left (RTL) in Flutter Range Selector (SfRangeSelector)
|
||||
|
||||
The SfRangeSelector supports changing the layout direction of the widget in the right-to-left direction by setting the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl` in the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget.
|
||||
## RTL rendering ways
|
||||
|
||||
Right to left rendering can be achieved in the following ways:
|
||||
|
||||
### Wrapping the SfRangeSelector with Directionality widget
|
||||
|
||||
The range selector can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -44,4 +50,55 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
The range selector will render in right to left direction if the locale belongs to RTL languages such as (Arabic ,Persian ,Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
dependencies:
|
||||
flutter_localizations:
|
||||
sdk: flutter
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: [
|
||||
Locale("fa", "IR"),
|
||||
],
|
||||
locale: Locale("fa", "IR"),
|
||||
home: Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SfRangeSelector(
|
||||
min: 2.0,
|
||||
max: 10.0,
|
||||
interval: 1,
|
||||
showLabels: true,
|
||||
showTicks: true,
|
||||
initialValues: _initialValues,
|
||||
child: Container(
|
||||
color: Colors.pink[200],
|
||||
height: 150,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
@ -9,13 +9,15 @@ documentation: ug
|
|||
|
||||
# Accessibility in Flutter Range Slider (SfRangeSlider)
|
||||
|
||||
The [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) can easily be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/semanticFormatterCallback.html) property.
|
||||
## Screen reader
|
||||
|
||||
For android, you can adjust the value of each thumb by tapping it and then pressing the volume buttons to increase or decrease the value.
|
||||
The [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) can be accessed by screen readers. The default reading format for start thumb is `The start value is ${values.start}` and end thumb is `the end value is ${values.end}`. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/semanticFormatterCallback.html) property.
|
||||
|
||||
For iOS, you can adjust the value of each thumb by tapping it and then swiping up or down to increase or decrease the value respectively.
|
||||
For android, you can adjust the value of each thumb by moving the focus to it and then pressing the volume buttons to increase or decrease the value.
|
||||
|
||||
## Horizontal
|
||||
For iOS, you can adjust the value of each thumb by moving the focus to it and then swiping up or down to increase or decrease the value respectively.
|
||||
|
||||
### Horizontal
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -51,7 +53,7 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Vertical
|
||||
### Vertical
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -85,4 +87,27 @@ Widget build(BuildContext context) {
|
|||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Track`](https://help.syncfusion.com/flutter/range-slider/track#track-color)
|
||||
* [`Major ticks`](https://help.syncfusion.com/flutter/range-slider/ticks#major-ticks-color)
|
||||
* [`Minor ticks`](https://help.syncfusion.com/flutter/range-slider/ticks#minor-ticks-color)
|
||||
* [`Labels`](https://help.syncfusion.com/flutter/range-slider/labels-and-divisor#label-style)
|
||||
* [`Divisors`](https://help.syncfusion.com/flutter/range-slider/labels-and-divisor#divisor-color)
|
||||
* [`Thumb`](https://help.syncfusion.com/flutter/range-slider/thumb-and-overlay#thumb-color)
|
||||
* [`Thumb overlay`](https://help.syncfusion.com/flutter/range-slider/thumb-and-overlay#thumb-overlay-color)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The font size of the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) will be automatically scaled based on the device settings. Also, you can change the font size of the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) elements using the following APIs:
|
||||
|
||||
* [`Label style`](https://help.syncfusion.com/flutter/range-slider/labels-and-divisor#label-style)
|
||||
* [`Tooltip label style`](https://help.syncfusion.com/flutter/range-slider/tooltip#tooltip-label-style)
|
||||
|
||||
## Easily touch targets
|
||||
|
||||
The [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) has touch target as 48 * 48 as per the standard for all the elements.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL in Flutter Range Slider widget | Syncfusion
|
||||
description: Learn here all about the RTL rendering in Syncfusion Flutter Range Slider (SfRangeSlider) widget and more.
|
||||
description: This section explains about the RTL rendering in Syncfusion Flutter Range Slider (SfRangeSlider) widget.
|
||||
platform: Flutter
|
||||
control: SfRangeSlider
|
||||
documentation: ug
|
||||
|
|
@ -9,7 +9,13 @@ documentation: ug
|
|||
|
||||
# Right to Left (RTL) in Flutter Range Slider (SfRangeSlider)
|
||||
|
||||
The SfRangeSlider supports changing the layout direction of the widget in the right-to-left direction by setting the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl` in the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget.
|
||||
## RTL rendering ways
|
||||
|
||||
Right to left rendering can be achieved in the following ways:
|
||||
|
||||
### Wrapping the SfRangeSlider with Directionality widget
|
||||
|
||||
The range slider 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 %}
|
||||
|
|
@ -45,6 +51,58 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
The range slider will render in right to left direction if the locale belongs to RTL languages such as (Arabic ,Persian ,Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
dependencies:
|
||||
flutter_localizations:
|
||||
sdk: flutter
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
SfRangeValues _values = SfRangeValues(40.0, 60.0);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: [
|
||||
Locale("fa", "IR"),
|
||||
],
|
||||
locale: Locale("fa", "IR"),
|
||||
home: Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SfRangeSlider(
|
||||
min: 0.0,
|
||||
max: 100.0,
|
||||
values: _values,
|
||||
interval: 20.0,
|
||||
showLabels: true,
|
||||
showTicks: true,
|
||||
onChanged: (SfRangeValues newValues) {
|
||||
setState(() {
|
||||
_values = newValues;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> This RTL support is not applicable for the vertical orientation of the range slider.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter SignaturePad widget | Syncfusion
|
||||
description: Learn here all about the accessibility support in Syncfusion Flutter SignaturePad (SfSignaturePad) widget and how to customize it.
|
||||
platform: Flutter
|
||||
control: SfSignaturePad
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter SignaturePad (SfSignaturePad)
|
||||
|
||||
## Screen reader
|
||||
|
||||
The [`SfSignaturePad`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad-class.html) can be accessed by the screen readers by wrapping the [`SfSignaturePad`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Center(
|
||||
child: Semantics(
|
||||
label: 'Syncfusion Flutter SignaturePad',
|
||||
hint: 'Mark your signature in this',
|
||||
child: Container(
|
||||
child: SfSignaturePad(
|
||||
strokeColor: Colors.black,
|
||||
backgroundColor: Colors.white,
|
||||
maximumStrokeWidth: 5,
|
||||
minimumStrokeWidth: 1,
|
||||
),
|
||||
width: 200,
|
||||
height: 200,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfSignaturePad`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad-class.html) using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Background`](https://help.syncfusion.com/flutter/signaturepad/getting-started#initialize-signaturepad)
|
||||
* [`Stroke`](https://help.syncfusion.com/flutter/signaturepad/getting-started#customize-signature-stroke-color)
|
||||
|
||||
## Easier touch targets
|
||||
|
||||
The [`SfSignaturePad`](https://pub.dev/documentation/syncfusion_flutter_signaturepad/latest/signaturepad/SfSignaturePad-class.html) has touch target as 48 * 48 as per the standard.
|
||||
|
|
@ -9,13 +9,15 @@ documentation: ug
|
|||
|
||||
# Accessibility in Flutter Slider (SfSlider)
|
||||
|
||||
The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) can easily be accessed by screen readers. By default, it will read the current value. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/semanticFormatterCallback.html) property.
|
||||
## Screen reader
|
||||
|
||||
For android, you can adjust the value of thumb by tapping it and then pressing the volume buttons to increase or decrease the value.
|
||||
The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) can be accessed by screen readers. By default, it will read the current value. You can change the reading format using the [`semanticFormatterCallback`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/semanticFormatterCallback.html) property.
|
||||
|
||||
For iOS, you can adjust the value of thumb by tapping it and then swiping up or down to increase or decrease the value respectively.
|
||||
For android, you can adjust the value of thumb by moving the focus to it and then pressing the volume buttons to increase or decrease the value.
|
||||
|
||||
## Horizontal
|
||||
For iOS, you can adjust the value of thumb by moving the focus to it and then swiping up or down to increase or decrease the value respectively.
|
||||
|
||||
### Horizontal
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -51,8 +53,7 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
## Vertical
|
||||
### Vertical
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
|
@ -87,3 +88,26 @@ Widget build(BuildContext context) {
|
|||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Track`](https://help.syncfusion.com/flutter/slider/track#track-color)
|
||||
* [`Major ticks`](https://help.syncfusion.com/flutter/slider/ticks#major-ticks-color)
|
||||
* [`Minor ticks`](https://help.syncfusion.com/flutter/slider/ticks#minor-ticks-color)
|
||||
* [`Labels`](https://help.syncfusion.com/flutter/slider/labels-and-divisor#label-style)
|
||||
* [`Divisors`](https://help.syncfusion.com/flutter/slider/labels-and-divisor#divisor-color)
|
||||
* [`Thumb`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-color)
|
||||
* [`Thumb overlay`](https://help.syncfusion.com/flutter/slider/thumb-and-overlay#thumb-overlay-color)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The font size of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) will be automatically scaled based on the device settings. Also, you can change the font size of the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) elements using the following APIs:
|
||||
|
||||
* [`Label style`](https://help.syncfusion.com/flutter/slider/labels-and-divisor#label-style)
|
||||
* [`Tooltip label style`](https://help.syncfusion.com/flutter/slider/tooltip#tooltip-label-style)
|
||||
|
||||
## Easier touch targets
|
||||
|
||||
The [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) has touch target as 48 * 48 as per the standard for all the elements.
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
---
|
||||
layout: post
|
||||
title: RTL in Flutter Slider widget | Syncfusion
|
||||
description: Learn here all about enabling the RTL rendering in the Syncfusion Flutter Slider (SfSlider) widget and more.
|
||||
description: This section explains about the right to left (RTL) rendering in Syncfusion Flutter Slider (SfSlider) widget.
|
||||
platform: Flutter
|
||||
control: SfSlider
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Right to Left (RTL) in Flutter Slider (SfSlider)
|
||||
# Right to Left (RTL) in Flutter Slider (SfSlider)
|
||||
|
||||
The Slider supports changing the layout direction of the widget in the right-to-left direction by setting the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl` in the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget.
|
||||
## RTL rendering ways
|
||||
|
||||
Right to left rendering can be achieved in the following ways:
|
||||
|
||||
### Wrapping the SfSlider with Directionality widget
|
||||
|
||||
The slider 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 %}
|
||||
|
||||
double _value = 40.0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
|
|
@ -45,6 +49,58 @@ Widget build(BuildContext context) {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
N> RTL is not applicable for vertical orientation of the slider.
|
||||
The slider will render in right to left direction if the locale belongs to RTL languages such as (Arabic ,Persian ,Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
dependencies:
|
||||
flutter_localizations:
|
||||
sdk: flutter
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
double _value = 40.0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
localizationsDelegates: [
|
||||
GlobalMaterialLocalizations.delegate,
|
||||
GlobalWidgetsLocalizations.delegate,
|
||||
],
|
||||
supportedLocales: [
|
||||
Locale("fa", "IR"),
|
||||
],
|
||||
locale: Locale("fa", "IR"),
|
||||
home: Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SfSlider(
|
||||
min: 0.0,
|
||||
max: 100.0,
|
||||
value: _value,
|
||||
interval: 20,
|
||||
showLabels: true,
|
||||
showTicks: true,
|
||||
onChanged: (dynamic newValue) {
|
||||
setState(() {
|
||||
_value = newValue;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
N> RTL is not applicable for vertical orientation of the slider.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter Spark Charts widget | Syncfusion
|
||||
description: Learn here all about Accessibility feature of Syncfusion Spark Charts widget, its features and more.
|
||||
platform: flutter
|
||||
control: Sparkline
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Spark Charts
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
The Syncfusion Flutter Spark/Micro charts widget [theming](https://help.syncfusion.com/flutter/themes/themes) support offers a consistent and standardized look, as well as the ability to set the colors for all UI elements.
|
||||
|
||||
The customization the colors can be done for the following chart elements.
|
||||
* [Axis](https://help.syncfusion.com/flutter/sparkcharts/axis-types)
|
||||
* [Chart types](https://help.syncfusion.com/flutter/sparkcharts/sparkcharts-types)
|
||||
* [Special points](https://help.syncfusion.com/flutter/sparkcharts/sparkcharts-types#winloss-sparkline-chart)
|
||||
* [Plot band](https://help.syncfusion.com/flutter/sparkcharts/plotband)
|
||||
* [Trackball](https://help.syncfusion.com/flutter/sparkcharts/trackball)
|
||||
* [Marker](https://help.syncfusion.com/flutter/sparkcharts/marker-datalabel)
|
||||
* [Data label](https://help.syncfusion.com/flutter/sparkcharts/marker-datalabel)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The Syncfusion Flutter Spark/Micro charts widget font size can be adjusted automatically based on device settings and the font size scaled based on the `MediaQueryData.textScaleFactor`. And also it allows to change the font size of all elements in Spark chart.
|
||||
* [Data label](https://help.syncfusion.com/flutter/sparkcharts/marker-datalabel#data-label)
|
||||
* [Trackball tooltip](https://help.syncfusion.com/flutter/sparkcharts/trackball)
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
layout: post
|
||||
title: Accessibility in Flutter treemap widget | Syncfusion
|
||||
description: Learn here all about the accessibility support in Syncfusion Flutter treemap (SfTreemap) widget and how to customize it.
|
||||
platform: Flutter
|
||||
control: SfTreemap
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Accessibility in Flutter Treemap (SfTreemap)
|
||||
|
||||
## Screen reader
|
||||
|
||||
The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) can be accessed by the screen readers by wrapping the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) widget to the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _source;
|
||||
late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent';
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = const <PopulationModel>[
|
||||
PopulationModel('Asia', 456.07),
|
||||
PopulationModel('Africa', 121.61),
|
||||
PopulationModel('Europe', 74.64),
|
||||
PopulationModel('North America', 57.9),
|
||||
PopulationModel('South America', 42.25),
|
||||
PopulationModel('Australia', 2.54),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_source.clear();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Semantics(
|
||||
label: 'Syncfusion Flutter Treemap',
|
||||
value: _semanticLabel,
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].populationInCrores;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].continent;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel(this.continent, this.populationInCrores);
|
||||
|
||||
final String continent;
|
||||
final double populationInCrores;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Sufficient contrast
|
||||
|
||||
You can customize the color of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) elements using the following APIs for the sufficient contrast.
|
||||
|
||||
* [`Level`](https://help.syncfusion.com/flutter/treemap/color-customization#level-color)
|
||||
* [`Labels`](https://help.syncfusion.com/flutter/treemap/labels)
|
||||
* [`Legend`](https://help.syncfusion.com/flutter/treemap/legend#icon-and-text-customization)
|
||||
* [`Tooltip`](https://help.syncfusion.com/flutter/treemap/tooltip#appearance-customization)
|
||||
|
||||
## Large fonts
|
||||
|
||||
The font size of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) will be automatically scaled based on the device settings. Also, you can change the font size of the [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) elements using the following APIs:
|
||||
|
||||
* [`Label style`](https://help.syncfusion.com/flutter/treemap/labels#add-labels)
|
||||
* [`Legend text style`](https://help.syncfusion.com/flutter/treemap/legend#text-style)
|
||||
* [`Tooltip label style`](https://help.syncfusion.com/flutter/treemap/tooltip#tooltip-for-the-tiles)
|
||||
|
||||
## Easier touch targets
|
||||
|
||||
The [`SfTreemap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/SfTreemap-class.html) has touch target as 48 * 48 as per the standard for all the elements.
|
||||
|
|
@ -9,7 +9,77 @@ documentation: ug
|
|||
|
||||
# Right to Left (RTL) in Flutter Treemap (SfTreemap)
|
||||
|
||||
## Using locale
|
||||
## RTL rendering ways
|
||||
|
||||
Right to left rendering can be achieved in the following ways:
|
||||
|
||||
### Wrapping the SfTreemap with Directionality widget
|
||||
|
||||
The treemap can be wrapped inside the [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget and you can set the [`textDirection`](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property to `rtl`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
late List<PopulationModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <PopulationModel>[
|
||||
PopulationModel('Asia', 25.4),
|
||||
PopulationModel('Africa', 19.11),
|
||||
PopulationModel('Europe', 13.3),
|
||||
PopulationModel('North America', 10.65),
|
||||
PopulationModel('South America', 7.54),
|
||||
PopulationModel('Australia', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].populationInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].continent;
|
||||
},
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(5.0),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel(this.continent, this.populationInMillions);
|
||||
|
||||
final String continent;
|
||||
final double populationInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Changing the locale to RTL languages
|
||||
|
||||
The treemap elements will render in right to left direction if the locale belongs to RTL languages such as (Arabic ,Persian ,Hebrew, Pashto, Urdu). It can be achieved by specifying the MaterialApp properties such as `localizationsDelegates`, `supportedLocales`, `locale` and adding the flutter_localizations package to your pubspec.yaml file.
|
||||
|
||||
|
|
@ -87,72 +157,6 @@ class PopulationModel {
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Using Directionality widget
|
||||
|
||||
The treemap can also 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 %}
|
||||
|
||||
late List<PopulationModel> _source;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_source = <PopulationModel>[
|
||||
PopulationModel('Asia', 25.4),
|
||||
PopulationModel('Africa', 19.11),
|
||||
PopulationModel('Europe', 13.3),
|
||||
PopulationModel('North America', 10.65),
|
||||
PopulationModel('South America', 7.54),
|
||||
PopulationModel('Australia', 4.93),
|
||||
];
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Directionality(
|
||||
textDirection: TextDirection.rtl,
|
||||
child: SfTreemap(
|
||||
dataCount: _source.length,
|
||||
weightValueMapper: (int index) {
|
||||
return _source[index].populationInMillions;
|
||||
},
|
||||
levels: [
|
||||
TreemapLevel(
|
||||
groupMapper: (int index) {
|
||||
return _source[index].continent;
|
||||
},
|
||||
labelBuilder: (BuildContext context, TreemapTile tile) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(5.0),
|
||||
child: Text(tile.group),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class PopulationModel {
|
||||
const PopulationModel(this.continent, this.populationInMillions);
|
||||
|
||||
final String continent;
|
||||
final double populationInMillions;
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## RTL supported treemap elements
|
||||
|
||||
### Labels
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
<li><a href="/Flutter/barcode/one-dimensional">One dimensional symbology</a></li>
|
||||
<li><a href="/Flutter/barcode/two-dimensional">Two dimensional symbology</a></li>
|
||||
<li><a href="/Flutter/barcode/barcode-customization">Customization</a></li>
|
||||
<li><a href="/Flutter/barcode/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
<li><a href="/Flutter/cartesian-charts/export-cartesian-chart">Exporting</a></li>
|
||||
<li><a href="/Flutter/cartesian-charts/on-demand-loading">On-demand loading</a></li>
|
||||
<li><a href="/Flutter/cartesian-charts/rtl-support">RTL support</a></li>
|
||||
<li><a href="/Flutter/cartesian-charts/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/cartesian-charts/methods">Public Methods</a></li>
|
||||
<li><a href="/Flutter/cartesian-charts/callbacks">Callbacks</a></li>
|
||||
</ul>
|
||||
|
|
@ -122,6 +124,7 @@
|
|||
<li><a href="/Flutter/circular-charts/selection">Selection</a></li>
|
||||
<li><a href="/Flutter/circular-charts/export-circular-chart">Exporting</a></li>
|
||||
<li><a href="/Flutter/circular-charts/rtl-support">RTL support</a></li>
|
||||
<li><a href="/Flutter/circular-charts/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/circular-charts/methods">Public Methods</a></li>
|
||||
<li><a href="/Flutter/circular-charts/callbacks">Callbacks</a></li>
|
||||
</ul>
|
||||
|
|
@ -141,6 +144,7 @@
|
|||
<li><a href="/Flutter/pyramid-chart/selection">Selection</a></li>
|
||||
<li><a href="/Flutter/pyramid-chart/export-pyramid-chart">Exporting</a></li>
|
||||
<li><a href="/Flutter/pyramid-chart/rtl-support">RTL support</a></li>
|
||||
<li><a href="/Flutter/pyramid-chart/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/pyramid-chart/callbacks">Callbacks</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -159,6 +163,7 @@
|
|||
<li><a href="/Flutter/funnel-chart/selection">Selection</a></li>
|
||||
<li><a href="/Flutter/funnel-chart/export-funnel-chart">Exporting</a></li>
|
||||
<li><a href="/Flutter/funnel-chart/rtl-support">RTL support</a></li>
|
||||
<li><a href="/Flutter/funnel-chart/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/funnel-chart/callbacks">Callbacks</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -228,7 +233,8 @@
|
|||
<li><a href="/Flutter/maps/vector-layers/polygon-layer">Polygon layer</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/Flutter/maps/right-to-left">RTL</a></li>
|
||||
<li><a href="/Flutter/maps/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/maps/right-to-left">RTL support</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -247,6 +253,7 @@
|
|||
<li><a href="/Flutter/radial-gauge/annotation">Annotation</a></li>
|
||||
<li><a href="/Flutter/radial-gauge/animation">Animation</a></li>
|
||||
<li><a href="/Flutter/radial-gauge/export-radial-gauge">Exporting</a></li>
|
||||
<li><a href="/Flutter/radial-gauge/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -264,6 +271,7 @@
|
|||
<li><a href="/Flutter/linear-gauge/animation">Animation</a></li>
|
||||
<li><a href="/Flutter/linear-gauge/interaction">Interaction</a></li>
|
||||
<li><a href="/Flutter/linear-gauge/mirror-linear-gauge">Mirror gauge</a></li>
|
||||
<li><a href="/Flutter/linear-gauge/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -278,9 +286,9 @@
|
|||
<li><a href="/Flutter/slider/labels-and-divisor">Labels and divisors</a></li>
|
||||
<li><a href="/Flutter/slider/tooltip">Tooltip</a></li>
|
||||
<li><a href="/Flutter/slider/thumb-and-overlay">Thumb and thumb overlay</a></li>
|
||||
<li><a href="/Flutter/slider/right-to-left">Right to Left (RTL)</a></li>
|
||||
<li><a href="/Flutter/slider/enabled-and-disabled-state">Enabled and disabled state</a></li>
|
||||
<li><a href="/Flutter/slider/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/slider/right-to-left">RTL support</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -295,9 +303,9 @@
|
|||
<li><a href="/Flutter/range-slider/labels-and-divisor">Labels and divisors</a></li>
|
||||
<li><a href="/Flutter/range-slider/tooltip">Tooltip</a></li>
|
||||
<li><a href="/Flutter/range-slider/thumb-and-overlay">Thumb and thumb overlay</a></li>
|
||||
<li><a href="/Flutter/range-slider/right-to-left">Right to Left (RTL)</a></li>
|
||||
<li><a href="/Flutter/range-slider/enabled-and-disabled-state">Enabled and disabled state</a></li>
|
||||
<li><a href="/Flutter/range-slider/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/range-slider/right-to-left">RTL support</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -314,9 +322,9 @@
|
|||
<li><a href="/Flutter/range-selector/tooltip">Tooltip</a></li>
|
||||
<li><a href="/Flutter/range-selector/drag-mode">Drag mode</a></li>
|
||||
<li><a href="/Flutter/range-selector/thumb-and-overlay">Thumb and thumb overlay</a></li>
|
||||
<li><a href="/Flutter/range-selector/right-to-left">Right to Left (RTL)</a></li>
|
||||
<li><a href="/Flutter/range-selector/enabled-and-disabled-state">Disabled state</a></li>
|
||||
<li><a href="/Flutter/range-selector/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/range-selector/right-to-left">RTL support</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -332,7 +340,8 @@
|
|||
<li><a href="/Flutter/treemap/tooltip">Tooltip</a></li>
|
||||
<li><a href="/Flutter/treemap/labels">Labels</a></li>
|
||||
<li><a href="/Flutter/treemap/item-builder">Item builder</a></li>
|
||||
<li><a href="/Flutter/treemap/right-to-left">RTL</a></li>
|
||||
<li><a href="/Flutter/treemap/accessibility">Accessibility</a></li>
|
||||
<li><a href="/Flutter/treemap/right-to-left">RTL support</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -348,6 +357,7 @@
|
|||
<li><a href="/Flutter/pdf-viewer/document-link-annotation">Document link annotation</a></li>
|
||||
<li><a href="/Flutter/pdf-viewer/interaction-modes">Interaction modes</a></li>
|
||||
<li><a href="/Flutter/pdf-viewer/Localization">Localization</a></li>
|
||||
<li><a href="/Flutter/pdf-viewer/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -360,6 +370,7 @@
|
|||
<li><a href="/Flutter/sparkcharts/marker-datalabel">Marker and Data Label</a></li>
|
||||
<li><a href="/Flutter/sparkcharts/trackball">Trackball</a></li>
|
||||
<li><a href="/Flutter/sparkcharts/plotband">Plot Band</a></li>
|
||||
<li><a href="/Flutter/sparkcharts/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -367,6 +378,7 @@
|
|||
<ul>
|
||||
<li><a href="/Flutter/signaturepad/overview">Overview</a></li>
|
||||
<li><a href="/Flutter/signaturepad/getting-started">Getting Started</a></li>
|
||||
<li><a href="/Flutter/signaturepad/accessibility">Accessibility</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче