يعتبر RangeSlider واحدًا من أهم الـWidgets في Flutter، حيث يسمح بتحديد نطاق محدد من القيم بالاستناد إلى اختيار المستخدم. ويمكن استخدامه في تطبيقات مختلفة، مثل تطبيقات الحجوزات وتطبيقات الإحصاءات. وفي هذه المقالة، سنتحدث بالتفصيل عن جميع خصائص RangeSlider في Flutter.
ما هو RangeSlider؟
يعد RangeSlider عبارة عن Widget في Flutter يتكون من شريط متحرك يمكن استخدامه لتحديد نطاق من القيم. ويمكن تخصيص أدواته لتحقيق المظهر والسلوك المرغوبين.
“اقرأ أيضاً: شرح استخدام ويدجت Row في فلاتر“
خصائص RangeSlider
تحتوي RangeSlider على عدد من الخصائص التي يمكن تخصيصها بطريقة سهلة وفعالة. وفيما يلي شرح لأهم هذه الخصائص:
values
هذه الخاصية تحدد القيمة الحالية لـ RangeSlider. وتتكون من زوج من القيم، والتي تحدد النطاق الذي يمكن للمستخدمين تحديده.
RangeSlider(
values: _values,
min: 0,
max: 100,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
“اقرأ أيضاً: شرح استخدام ويدجت PageView في فلاتر“
min و max
هذه الخاصيتان تحددان الحد الأدنى والأقصى لقيمة RangeSlider. يجب تحديد هذه الخاصيتين بالإضافة إلى القيمة الحالية.
RangeSlider(
values: _values,
min: 0,
max: 100,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
divisions
هذه الخاصية تحدد عدد الأقسام التي ينقسم إليها RangeSlider. يمكن استخدام هذه الخاصية لتحديد نقاط الانقسام في RangeSlider.
RangeSlider(
values: _values,
min: 0,
max: 100,
divisions: 10,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
labels
هذه الخاصية تحدد عرض القيمة الحالية لـ RangeSlider. يمكن استخدامها لعرض القيم المحددة بطريقة أكثر تفصيلاً.
RangeSlider(
values: _values,
min: 0,
max: 100,
labels: RangeLabels('$_values.start', '$_values.end'),
onChanged: (values) {
setState(() {
_values = values;
});
},
)
activeColor و inactiveColor
هذه الخاصيتان تحددان لون RangeSlider في حالة التفاعل وفي حالة عدم التفاعل.
RangeSlider(
values: _values,
min: 0,
max: 100,
activeColor: Colors.blue,
inactiveColor: Colors.grey,
onChanged: (values) {
setState(() {
_values = values;
});
},
)
onChanged وonChangeStart وonChangeEnd
هذه الخصائص تحدد الدوال التي ستتم استدعاؤها عندما يتم تحريك المقبض. يتم استدعاء الـ onChanged عندما يتم تحريك أي من المقابض، بينما يتم استدعاء الـ onChangeStart والـ onChangeEnd عندما يتم البدء في تحريك المقبض وعندما يتم الانتهاء من تحريك المقبض.
RangeSlider(
values: _values,
min: 0,
max: 100,
onChanged: (values) {
setState(() {
_values = values;
});
},
onChangeStart: (values) {
print('Started with values: $values');
},
onChangeEnd: (values) {
print('Ended with values: $values');
},
)
“اقرأ أيضاً: شرح استخدام ويدجت BottomSheet في فلاتر“
تعد RangeSlider أداة هامة جدًا في تطوير تطبيقات Flutter، حيث تسمح بتحديد نطاق من القيم بسهولة وفعالية. يمكن تخصيص خصائصها بسهولة لتلبية احتياجات التطبيق وتحقيق المظهر والسلوك المرغوبين. وباستخدام التوضيحات والأمثلة المذكورة في هذه المقالة، يمكن للمطورين في Flutter تطوير تطبيقات أكثر قوة وفعالية.
