Skip to content

Commit 3e917c3

Browse files
Hariram-SF4428Hariram-SF4428
committed
FLUT-964629-[feature]: Updated code content and images for sliders
1 parent 7f3be4e commit 3e917c3

File tree

8 files changed

+317
-0
lines changed

8 files changed

+317
-0
lines changed

‎Flutter/range-selector/images/label-and-divider/selector-individual-label-color.png‎

5.94 KB
Loading

‎Flutter/range-selector/labels-and-divider.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,94 @@ class Data {
612612

613613
![Labels color support](images/label-and-divider/selector-labels-color.png)
614614

615+
## Individual label style
616+
617+
You can now customize the appearance of each label on the [`SfRangeSelector`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector-class.html) individually by using the [`onLabelCreated`] callback. This callback allows you to fully control the text and the TextStyle for each label.
618+
619+
{% tabs %}
620+
{% highlight Dart %}
621+
622+
final double _min = 2.0;
623+
final double _max = 10.0;
624+
SfRangeValues _values = const SfRangeValues(4.0, 8.0);
625+
626+
@override
627+
Widget build(BuildContext context) {
628+
return Scaffold(
629+
body: Center(
630+
child: SfRangeSelector(
631+
min: _min,
632+
max: _max,
633+
interval: 1,
634+
showLabels: true,
635+
showTicks: true,
636+
initialValues: _values,
637+
onChanged: (dynamic value) {
638+
setState(() {
639+
_values = value;
640+
});
641+
},
642+
onLabelCreated: (
643+
dynamic actualValue,
644+
String text,
645+
TextStyle labelTextStyle,
646+
) {
647+
final int value = actualValue.toInt();
648+
final int start = _values.start.toInt();
649+
final int end = _values.end.toInt();
650+
return RangeSelectorLabel(
651+
text: text,
652+
textStyle:
653+
(value == start || value == end)
654+
? const TextStyle(
655+
color: Colors.blue,
656+
fontSize: 12,
657+
fontStyle: FontStyle.italic,
658+
)
659+
: TextStyle(
660+
color: Colors.red[200],
661+
fontSize: 12,
662+
fontStyle: FontStyle.italic,
663+
),
664+
);
665+
},
666+
child: SizedBox(
667+
height: 130,
668+
child: SfCartesianChart(
669+
margin: EdgeInsets.zero,
670+
primaryXAxis: NumericAxis(
671+
minimum: _min,
672+
maximum: _max,
673+
isVisible: false,
674+
),
675+
primaryYAxis: const NumericAxis(isVisible: false),
676+
plotAreaBorderWidth: 0,
677+
series: <SplineAreaSeries<Data, double>>[
678+
SplineAreaSeries<Data, double>(
679+
color: const Color.fromARGB(255, 126, 184, 253),
680+
dataSource: chartData,
681+
xValueMapper: (Data sales, int index) => sales.x,
682+
yValueMapper: (Data sales, int index) => sales.y,
683+
),
684+
],
685+
),
686+
),
687+
),
688+
),
689+
);
690+
}
691+
692+
class Data {
693+
Data({required this.x, required this.y});
694+
final double x;
695+
final double y;
696+
}
697+
698+
{% endhighlight %}
699+
{% endtabs %}
700+
701+
![Labels color support](images/label-and-divider/selector-individual-label-color.png)
702+
615703
## Label offset
616704

617705
You can adjust the space between ticks and labels of the range selector using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property.

‎Flutter/range-slider/images/label-and-divider/slider-individual-label-color.png‎

2.76 KB
Loading

‎Flutter/range-slider/images/label-and-divider/vertical-slider-individual-label-color.png‎

4.11 KB
Loading

‎Flutter/range-slider/labels-and-divider.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -656,6 +656,124 @@ Widget build(BuildContext context) {
656656

657657
![Labels style support](images/label-and-divider/vertical-slider-labels-color.png)
658658

659+
## Individual label style
660+
661+
You can now customize the appearance of each label on the [`SfRangeSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider-class.html) individually by using the [`onLabelCreated`] callback. This callback allows you to fully control the text and the TextStyle for each label.
662+
663+
## Horizontal
664+
665+
{% tabs %}
666+
{% highlight Dart %}
667+
668+
SfRangeValues _values = const SfRangeValues(4.0, 8.0);
669+
670+
@override
671+
Widget build(BuildContext context) {
672+
return Scaffold(
673+
body: Center(
674+
child: SfRangeSlider(
675+
min: 2.0,
676+
max: 10.0,
677+
values: _values,
678+
interval: 1,
679+
showLabels: true,
680+
showTicks: true,
681+
onChanged: (SfRangeValues newValues) {
682+
setState(() {
683+
_values = newValues;
684+
});
685+
},
686+
onLabelCreated: (
687+
dynamic actualValue,
688+
String text,
689+
TextStyle labelTextStyle,
690+
) {
691+
final int value = actualValue.toInt();
692+
final int start = _values.start.toInt();
693+
final int end = _values.end.toInt();
694+
return RangeSliderLabel(
695+
text: text,
696+
textStyle:
697+
(value == start || value == end)
698+
? const TextStyle(
699+
color: Colors.blue,
700+
fontSize: 12,
701+
fontStyle: FontStyle.italic,
702+
)
703+
: TextStyle(
704+
color: Colors.red[200],
705+
fontSize: 12,
706+
fontStyle: FontStyle.italic,
707+
),
708+
);
709+
},
710+
),
711+
),
712+
);
713+
}
714+
715+
{% endhighlight %}
716+
{% endtabs %}
717+
718+
![Individual label style support](images/label-and-divider/slider-individual-label-color.png)
719+
720+
## Vertical
721+
722+
{% tabs %}
723+
{% highlight Dart %}
724+
725+
SfRangeValues _values = const SfRangeValues(4.0, 8.0);
726+
727+
@override
728+
Widget build(BuildContext context) {
729+
return Scaffold(
730+
body: Center(
731+
child: SfRangeSlider.vertical(
732+
min: 2.0,
733+
max: 10.0,
734+
values: _values,
735+
interval: 1,
736+
showLabels: true,
737+
showTicks: true,
738+
onChanged: (SfRangeValues newValues) {
739+
setState(() {
740+
_values = newValues;
741+
});
742+
},
743+
onLabelCreated: (
744+
dynamic actualValue,
745+
String text,
746+
TextStyle labelTextStyle,
747+
) {
748+
final int value = actualValue.toInt();
749+
final int start = _values.start.toInt();
750+
final int end = _values.end.toInt();
751+
return RangeSliderLabel(
752+
text: text,
753+
textStyle:
754+
(value == start || value == end)
755+
? const TextStyle(
756+
color: Colors.blue,
757+
fontSize: 12,
758+
fontStyle: FontStyle.italic,
759+
)
760+
: TextStyle(
761+
color: Colors.red[200],
762+
fontSize: 12,
763+
fontStyle: FontStyle.italic,
764+
),
765+
);
766+
},
767+
),
768+
),
769+
);
770+
}
771+
772+
{% endhighlight %}
773+
{% endtabs %}
774+
775+
![Individual label style support](images/label-and-divider/vertical-slider-individual-label-color.png)
776+
659777
## Label offset
660778

661779
You can adjust the space between ticks and labels of the range slider using the [`labelOffset`](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfSliderThemeData/labelOffset.html) property.

‎Flutter/slider/images/label-and-divider/slider-individual-label-color.png‎

2.6 KB
Loading

‎Flutter/slider/images/label-and-divider/vertical-slider-individual-label-color.png‎

3.21 KB
Loading

‎Flutter/slider/labels-and-divider.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,117 @@ Widget build(BuildContext context) {
653653

654654
![Labels style support](images/label-and-divider/vertical-slider-labels-color.png)
655655

656+
## Individual label style
657+
658+
You can customize the appearance of each label on the [`SfSlider`](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider-class.html) individually by using the [`onLabelCreated`] callback. This callback gives you full control over the text and the TextStyle for each label.
659+
660+
### Horizontal
661+
662+
{% tabs %}
663+
{% highlight Dart %}
664+
665+
double _value = 6.0;
666+
667+
@override
668+
Widget build(BuildContext context) {
669+
return Scaffold(
670+
body: Center(
671+
child: SfSlider(
672+
min: 2.0,
673+
max: 10.0,
674+
value: _value,
675+
interval: 1,
676+
showLabels: true,
677+
showTicks: true,
678+
onChanged: (dynamic value) {
679+
setState(() {
680+
_value = value;
681+
});
682+
},
683+
onLabelCreated: (
684+
dynamic actualValue,
685+
String text,
686+
TextStyle labelTextStyle,
687+
) {
688+
return SliderLabel(
689+
text: text,
690+
textStyle:
691+
actualValue == _value.toInt()
692+
? const TextStyle(
693+
color: Colors.blue,
694+
fontSize: 12,
695+
fontStyle: FontStyle.italic,
696+
)
697+
: TextStyle(
698+
color: Colors.red[200],
699+
fontSize: 12,
700+
fontStyle: FontStyle.italic,
701+
),
702+
);
703+
},
704+
),
705+
),
706+
);
707+
}
708+
709+
{% endhighlight %}
710+
{% endtabs %}
711+
712+
![Individual label style support](images/label-and-divider/slider-individual-label-color.png)
713+
714+
### Vertical
715+
716+
{% tabs %}
717+
{% highlight Dart %}
718+
719+
double _value = 6.0;
720+
721+
@override
722+
Widget build(BuildContext context) {
723+
return Scaffold(
724+
body: Center(
725+
child: SfSlider.vertical(
726+
min: 2.0,
727+
max: 10.0,
728+
value: _value,
729+
interval: 1,
730+
showLabels: true,
731+
showTicks: true,
732+
onChanged: (dynamic value) {
733+
setState(() {
734+
_value = value;
735+
});
736+
},
737+
onLabelCreated: (
738+
dynamic actualValue,
739+
String text,
740+
TextStyle labelTextStyle,
741+
) {
742+
return SliderLabel(
743+
text: text,
744+
textStyle:
745+
actualValue == _value.toInt()
746+
? const TextStyle(
747+
color: Colors.blue,
748+
fontSize: 12,
749+
fontStyle: FontStyle.italic,
750+
)
751+
: TextStyle(
752+
color: Colors.red[200],
753+
fontSize: 12,
754+
fontStyle: FontStyle.italic,
755+
),
756+
);
757+
},
758+
),
759+
),
760+
);
761+
}
762+
763+
{% endhighlight %}
764+
{% endtabs %}
765+
766+
![Individual label style support](images/label-and-divider/vertical-slider-individual-label-color.png)
656767

657768
## Label offset
658769

0 commit comments

Comments
 (0)