Skip to content

Commit fed5107

Browse files
Merge pull request #25 from syncfusion-content/FLUT-5887-UG-Vol4-new-features-tools-widgets
FLUT-5887 - UG for Vol4 new features in Flutter tools widgets
2 parents d28f753 + 5941827 commit fed5107

File tree

9 files changed

+213
-21
lines changed

9 files changed

+213
-21
lines changed

Flutter/maps/legend.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1845,9 +1845,7 @@ class Model {
18451845

18461846
## Show pointer
18471847

1848-
You may show a pointer on the bar gradient legend while hovering over a shape or bubble using the `showPointerOnHover` property. The default value of the `showPointerOnHover` property is `false`.
1849-
1850-
N> It is applicable for gradient type bar legend.
1848+
You may show a pointer on the solid or gradient bar legend while hovering over a shape or bubble using the `showPointerOnHover` property. The default value of the `showPointerOnHover` property is `false`.
18511849

18521850
{% tabs %}
18531851
{% highlight Dart %}

Flutter/range-selector/basic-features.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,65 @@ class Data {
169169

170170
![Date range selector](images/basic-features/selector_date_label.png)
171171

172-
**Handle value change**
172+
## Handle onChangeStart, onChanged, and onChangeEnd callbacks
173+
174+
**onChangeStart**
175+
176+
The `onChangeStart` callback is called when the user begins to interact with range selector using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range selector thumb.
177+
178+
{% tabs %}
179+
{% highlight Dart %}
180+
181+
SfRangeValues _values = SfRangeValues(4.0, 6.0);
182+
183+
@override
184+
Widget build(BuildContext context) {
185+
return Scaffold(
186+
body: SfRangeSelector(
187+
min: 0.0,
188+
max: 10.0,
189+
initialValues: _values,
190+
onChangeStart: (SfRangeValues startValues) {
191+
print('Interaction started');
192+
},
193+
onChanged: (SfRangeValues newValues) {},
194+
child: SizedBox(),
195+
),
196+
);
197+
}
198+
199+
{% endhighlight %}
200+
{% endtabs %}
201+
202+
**onChangeEnd**
203+
204+
The `onChangeEnd` callback is called when the user stops to interact with range selector using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range selector thumb.
205+
206+
{% tabs %}
207+
{% highlight Dart %}
208+
209+
SfRangeValues _values = SfRangeValues(4.0, 6.0);
210+
211+
@override
212+
Widget build(BuildContext context) {
213+
return Scaffold(
214+
body: SfRangeSelector(
215+
min: 0.0,
216+
max: 10.0,
217+
initialValues: _values,
218+
onChangeEnd: (SfRangeValues endValues) {
219+
print('Interaction ended');
220+
},
221+
onChanged: (SfRangeValues newValues) {},
222+
child: SizedBox(),
223+
),
224+
);
225+
}
226+
227+
{% endhighlight %}
228+
{% endtabs %}
229+
230+
**onChanged**
173231

174232
The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChanged.html) callback is called when the user is selecting the new values.
175233

Flutter/range-selector/tooltip.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ This section helps to learn about how to add tooltip in the range selector.
1515

1616
You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/dateFormat.html).
1717

18+
I> By setting the value of `shouldAlwaysShowTooltip` to true, you can always show a tooltip without having to interact with the range selector thumb. The default value is `false` and it works independent of the `enableTooltip` behavior.
19+
1820
{% tabs %}
1921
{% highlight Dart %}
2022

@@ -242,7 +244,7 @@ class Data {
242244

243245
## Tooltip color
244246

245-
You can change the background color of the tooltip in the range selector using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tooltipBackgroundColor.html) property.
247+
You can change the background color of the tooltip in the range selector using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipBackgroundColor.html) property.
246248

247249
N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html).
248250

@@ -320,7 +322,7 @@ class Data {
320322

321323
## Tooltip label style
322324

323-
You can change the appearance of the tooltip text in the range selector using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorThemeData/tooltipTextStyle.html) property.
325+
You can change the appearance of the tooltip text in the range selector using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipTextStyle.html) property.
324326

325327
N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSelectorTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSelectorTheme-class.html).
326328

Flutter/range-slider/basic-features.md

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,71 @@ Widget build(BuildContext context) {
174174

175175
![Date range slider](images/basic-features/vertical-date-labels.png)
176176

177-
**Handle value change**
177+
## Handle onChangeStart, onChanged, and onChangeEnd callbacks
178+
179+
**onChangeStart**
180+
181+
The `onChangeStart` callback is called when the user begins to interact with range slider using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the range slider thumb.
182+
183+
{% tabs %}
184+
{% highlight Dart %}
185+
186+
SfRangeValues _values = SfRangeValues(4.0, 6.0);
187+
188+
@override
189+
Widget build(BuildContext context) {
190+
return Scaffold(
191+
body: SfRangeSlider(
192+
min: 0.0,
193+
max: 10.0,
194+
values: _values,
195+
onChangeStart: (SfRangeValues startValues) {
196+
print('Interaction started');
197+
},
198+
onChanged: (SfRangeValues newValues) {
199+
setState(() {
200+
_values = newValues;
201+
});
202+
},
203+
),
204+
);
205+
}
206+
207+
{% endhighlight %}
208+
{% endtabs %}
209+
210+
**onChangeEnd**
211+
212+
The `onChangeEnd` callback is called when the user stops to interact with range slider using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the range slider thumb.
213+
214+
{% tabs %}
215+
{% highlight Dart %}
216+
217+
SfRangeValues _values = SfRangeValues(4.0, 6.0);
218+
219+
@override
220+
Widget build(BuildContext context) {
221+
return Scaffold(
222+
body: SfRangeSlider(
223+
min: 0.0,
224+
max: 10.0,
225+
values: _values,
226+
onChangeEnd: (SfRangeValues endValues) {
227+
print('Interaction ended');
228+
},
229+
onChanged: (SfRangeValues newValues) {
230+
setState(() {
231+
_values = newValues;
232+
});
233+
},
234+
),
235+
);
236+
}
237+
238+
{% endhighlight %}
239+
{% endtabs %}
240+
241+
**onChanged**
178242

179243
The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/onChanged.html) callback is called when the user selects a value through interaction.
180244

Flutter/range-slider/tooltip.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ This section helps to learn about how to add tooltip in the range slider.
1515

1616
You can enable tooltips for both thumbs using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/enableTooltip.html). It is used to clearly indicate the current selection of the ranges during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dateFormat.html).
1717

18+
I> By setting the value of `shouldAlwaysShowTooltip` to true, you can always show a tooltip without having to interact with the range slider thumb. The default value is `false` and it works independent of the `enableTooltip` behavior.
19+
1820
### Horizontal
1921

2022
{% tabs %}
@@ -138,7 +140,7 @@ Widget build(BuildContext context) {
138140

139141
N> This is only applicable for vertical orientation of the range sliders.
140142

141-
You can show tooltip in left or right positions using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipPosition.html) property. The default value of the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/tooltipPosition.html) property is `SliderTooltipPosition.left`.
143+
You can show tooltip in left or right positions using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderTooltipPosition.html) property. The default value of the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderTooltipPosition.html) property is `SliderTooltipPosition.left`.
142144

143145
{% tabs %}
144146
{% highlight Dart %}
@@ -157,7 +159,7 @@ Widget build(BuildContext context) {
157159
showTicks: true,
158160
showLabels: true,
159161
enableTooltip: true,
160-
tooltipPosition:SliderTooltipPosition.right,
162+
tooltipPosition: SliderTooltipPosition.right,
161163
values: _values,
162164
onChanged: (SfRangeValues newValues) {
163165
setState(() {
@@ -268,7 +270,7 @@ Widget build(BuildContext context) {
268270

269271
## Tooltip color
270272

271-
You can change the background color of the tooltip in the range slider using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tooltipBackgroundColor.html) property.
273+
You can change the background color of the tooltip in the range slider using the [`tooltipBackgroundColor`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipBackgroundColor.html) property.
272274

273275
N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html).
274276

@@ -356,7 +358,7 @@ Widget build(BuildContext context) {
356358

357359
## Tooltip label style
358360

359-
You can change the appearance of the tooltip text in the range slider using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderThemeData/tooltipTextStyle.html) property.
361+
You can change the appearance of the tooltip text in the range slider using the [`tooltipTextStyle`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/tooltipTextStyle.html) property.
360362

361363
N> You must import the `theme.dart` library from the [`Core`](https://pub.dev/packages/syncfusion_flutter_core) package to use [`SfRangeSliderTheme`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfRangeSliderTheme-class.html).
362364

Flutter/slider/basic-features.md

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,71 @@ Widget build(BuildContext context) {
174174

175175
![Date slider](images/basic-features/vertical_date_labels.png)
176176

177-
**Handle value change**
177+
## Handle onChangeStart, onChanged, and onChangeEnd callbacks
178+
179+
**onChangeStart**
180+
181+
The `onChangeStart` callback is called when the user begins to interact with slider using a tap or drag action. This callback is only used to notify the user that the interaction has started and it does not change the value of the slider thumb.
182+
183+
{% tabs %}
184+
{% highlight Dart %}
185+
186+
double _value = 4.0;
187+
188+
@override
189+
Widget build(BuildContext context) {
190+
return Scaffold(
191+
body: SfSlider(
192+
min: 0.0,
193+
max: 10.0,
194+
value: _value,
195+
onChangeStart: (dynamic startValue) {
196+
print('Interaction started');
197+
},
198+
onChanged: (dynamic newValue) {
199+
setState(() {
200+
_value = newValue;
201+
});
202+
},
203+
),
204+
);
205+
}
206+
207+
{% endhighlight %}
208+
{% endtabs %}
209+
210+
**onChangeEnd**
211+
212+
The `onChangeEnd` callback is called when the user stops to interact with slider using a tap or drag action. This callback is only used to notify the user that the interaction has ended and it does not change the value of the slider thumb.
213+
214+
{% tabs %}
215+
{% highlight Dart %}
216+
217+
double _value = 4.0;
218+
219+
@override
220+
Widget build(BuildContext context) {
221+
return Scaffold(
222+
body: SfSlider(
223+
min: 0.0,
224+
max: 10.0,
225+
value: _value,
226+
onChanged: (dynamic newValue) {
227+
setState(() {
228+
_value = newValue;
229+
});
230+
},
231+
onChangeEnd: (dynamic endValue) {
232+
print('Interaction ended');
233+
},
234+
),
235+
);
236+
}
237+
238+
{% endhighlight %}
239+
{% endtabs %}
240+
241+
**onChanged**
178242

179243
The [`onChanged`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/onChanged.html) callback is called when the user selects a value through interaction.
180244

Flutter/slider/tooltip.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ This section helps to learn about how to add tooltip in the slider.
1515

1616
You can enable tooltip for the thumb using the [`enableTooltip`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/enableTooltip.html). It is used to clearly indicate the current selection of the value during interaction. By default, tooltip text is formatted with either [`numberFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/numberFormat.html) or [`dateFormat`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/dateFormat.html).
1717

18+
I> By setting the value of `shouldAlwaysShowTooltip` to true, you can always show a tooltip without having to interact with the slider thumb. The default value is `false` and it works independent of the `enableTooltip` behavior.
19+
1820
### Horizontal
1921

2022
{% tabs %}
@@ -137,7 +139,7 @@ Widget build(BuildContext context) {
137139

138140
N> This is only applicable for vertical orientation of the sliders.
139141

140-
You can show tooltip in left or right positions using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipPosition.html) property. The default value of the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/tooltipPosition.html) property is `SliderTooltipPosition.left`.
142+
You can show tooltip in left or right positions using the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderTooltipPosition.html) property. The default value of the [`tooltipPosition`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderTooltipPosition.html) property is `SliderTooltipPosition.left`.
141143

142144
{% tabs %}
143145
{% highlight Dart %}

Flutter/treemap/legend.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ class SocialMediaUsers {
278278

279279
## Position
280280

281-
You can position the legend items in different directions using the [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property. The default value of the `position` property is [`TreemapLegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition-class.html). The possible values are `left`, `right`, `top`, and `bottom`.
281+
You can position the legend items in different directions using the [`TreemapLegend.position`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/position.html) property. The default value of the `position` property is [`TreemapLegendPosition.top`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPosition.html). The possible values are `left`, `right`, `top`, and `bottom`.
282282

283283
{% tabs %}
284284
{% highlight Dart %}
@@ -411,7 +411,7 @@ class SocialMediaUsers {
411411

412412
<b>For default legend</b>
413413

414-
You can wrap or scroll the legend items using the [`TreemapLegend.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property. The default value of the `overflowMode` property is [`TreemapLegendOverflowMode.wrap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode-class.html). The possible values are `scroll` and `wrap`.
414+
You can wrap or scroll the legend items using the [`TreemapLegend.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property. The default value of the `overflowMode` property is [`TreemapLegendOverflowMode.wrap`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode.html). The possible values are `scroll` and `wrap`.
415415

416416
If the legend position is `left` or `right`, then the default scroll direction is `vertical`.
417417

@@ -480,7 +480,7 @@ class SocialMediaUsers {
480480

481481
<b>For bar legend</b>
482482

483-
You can wrap or scroll the bar legend items using the [`TreemapLegend.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property. The default value of the `overflowMode` property is [`TreemapLegendOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode-class.html). The possible values are `scroll` and `wrap`.
483+
You can wrap or scroll the bar legend items using the [`TreemapLegend.overflowMode`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegend/overflowMode.html) property. The default value of the `overflowMode` property is [`TreemapLegendOverflowMode.scroll`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendOverflowMode.html). The possible values are `scroll` and `wrap`.
484484

485485
If the legend position is `left` or `right`, then the default scroll direction is `vertical`.
486486

@@ -696,7 +696,7 @@ N>
696696

697697
### Solid
698698

699-
You can set solid color for the bar by using the `TreemapLegendPaintingStyle.solid`. By defaults [`TreemapLegendPaintingStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle-class.html) will be `solid`.
699+
You can set solid color for the bar by using the `TreemapLegendPaintingStyle.solid`. By defaults [`TreemapLegendPaintingStyle`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html) will be `solid`.
700700

701701
{% tabs %}
702702
{% highlight Dart %}
@@ -765,7 +765,7 @@ class SocialMediaUsers {
765765

766766
### Gradient
767767

768-
You can set gradient color for the bar by using the [`TreemapLegendPaintingStyle.gradient`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle-class.html).
768+
You can set gradient color for the bar by using the [`TreemapLegendPaintingStyle.gradient`](https://pub.dev/documentation/syncfusion_flutter_treemap/latest/treemap/TreemapLegendPaintingStyle.html).
769769

770770
{% tabs %}
771771
{% highlight Dart %}
@@ -1199,9 +1199,7 @@ class SocialMediaUsers {
11991199

12001200
## Show pointer
12011201

1202-
You may show a pointer on the bar gradient legend while hovering over a tile using the `showPointerOnHover` property. The default value of the `showPointerOnHover` property is `false`.
1203-
1204-
N> It is applicable for gradient type bar legend.
1202+
You may show a pointer on the solid or gradient bar legend while hovering over a tile using the `showPointerOnHover` property. The default value of the `showPointerOnHover` property is `false`.
12051203

12061204
{% tabs %}
12071205
{% highlight Dart %}

0 commit comments

Comments
 (0)