في تطبيقات Flutter، يمكن استخدام عنصر DropdownButtonFormField لإنشاء قوائم منسدلة قابلة للتحديد. يتميز هذا العنصر بسهولة الاستخدام والتخصيص، حيث يمكن تعيين الخيارات والقيم وخصائص التصميم بسهولة. في هذه المقالة، سنتحدث بالتفصيل عن عنصر DropdownButtonFormField وجميع خصائصه.
ما هو DropdownButtonFormField في فلاتر؟
DropdownButtonFormField هو عنصر واجهة مستخدم في Flutter يسمح بإضافة قائمة منسدلة قابلة للتحديد. يسمح بتحديد قيمة افتراضية وتحديد الخيارات المتاحة في القائمة منسدلة. يمكن استخدامه لتحسين تجربة المستخدم وجعل اختيار الخيارات أسهل وأكثر بديهية.
“اقرأ أيضاً: شرح استخدام ويدجت AspectRatio في فلاتر“
خصائص DropdownButtonFormField
يحتوي DropdownButtonFormField على العديد من الخصائص التي يمكن تعيينها لتخصيص سلوك القائمة المنسدلة. سنتحدث بالتفصيل عن كل خاصية من هذه الخصائص ونوضحها بالأكواد الكاملة المناسبة.
الخاصية value
تحدد القيمة الافتراضية للقائمة المنسدلة. يمكن تعيين هذه الخاصية عبر الكود التالي:
String? selectedValue = 'أحمر';
DropdownButtonFormField<String>(
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue;
});
},
items: <String>['أحمر', 'أخضر', 'أزرق', 'أصفر']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
“اقرأ أيضاً: شرح استخدام ويدجت PositionedTransition في فلاتر“
الخاصية items
تحدد الخيارات المتاحة في القائمة المنسدلة. يمكن تعيين هذه الخاصية عبر الكود التالي:
String? selectedValue = 'أحمر';
DropdownButtonFormField<String>(
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue;
});
},
items: <String>['أحمر', 'أخضر', 'أزرق', 'أصفر']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
);
الخاصية onChanged
تحدد الدالة التي يتم استدعاؤها عند تغيير القيمة المحددة في القائمة المنسدلة. يمكن تعيين هذه الخاصية عبر الكود التالي:
String? selectedValue = 'أحمر';
DropdownButtonFormField<String>(
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue;
});
},
items: <String>['أحمر', 'أخضر', 'أزرق', 'أصفر']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
);
الخاصية decoration
تحدد تصميم القائمة المنسدلة. يمكن تعيين هذه الخاصية عبر الكود التالي:
String? selectedValue = 'أحمر';
DropdownButtonFormField<String>(
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue;
});
},
decoration: InputDecoration(
labelText: 'اللون',
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.grey[200],
),
items: <String>['أحمر', 'أخضر', 'أزرق', 'أصفر']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
);
الخاصية icon
تحدد الأيقونة التي تظهر على يمين النص الحالي في القائمة المنسدلة. يمكن تعيين هذه الخاصية عبر الكود التالي:
String? selectedValue = 'أحمر';
DropdownButtonFormField<String>(
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue;
});
},
icon: Icon(Icons.arrow_downward),
items: <String>['أحمر', 'أخضر', 'أزرق', 'أصفر']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
);
الخاصية isExpanded
تحدد إذا ما كانت القائمة المنسدلة تمتد إلى أقصى حد ممكن. يمكن تعيين هذه الخاصية عبر الكود التالي:
String? selectedValue = 'أحمر';
DropdownButtonFormField<String>(
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue;
});
},
isExpanded: true,
items: <String>['أحمر', 'أخضر', 'أزرق', 'أصفر']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
);
“اقرأ أيضاً: شرح استخدام ويدجت CircleAvatar في فلاتر“
DropdownButtonFormField عنصر واجهة مستخدم سهل الاستخدام والتخصيص لإضافة قائمة منسدلة قابلة للتحديد في تطبيقات Flutter. يمكن تعيين القيم الافتراضية والخيارات وخصائص التصميم بسهولة وكذلك تحديد الدالة التي يتم استدعاؤها عند تغيير القيمة في القائمة المنسدلة. عند استخدام DropdownButtonFormField، يمكن تحسين تجربة المستخدم وجعل اختيار الخيارات أسهل وأكثر بديهية.
