Flutter هي إطار عمل متعدد المنصات يسمح للمطورين بإنشاء تطبيقات عالية الجودة التي تعمل على أنظمة iOS و Android و Web وغيرها. واحدة من العناصر الأساسية في تصميم التطبيقات هي DropdownButton، والذي يسمح للمستخدمين بتحديد خيار واحد فقط من بين قائمة من الخيارات.
ما هو DropdownButton في فلاتر؟
DropdownButton هو عنصر تحكم يُستخدم في تطبيقات Flutter لتمكين المستخدمين من تحديد خيار واحد فقط من بين قائمة من الخيارات. يتم تمثيل الخيارات في قائمة منبثقة، يتم عرضها عند النقر على الزر.
“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“
خصائص DropdownButton
تحتوي DropdownButton على عدد من الخصائص التي يمكن تعديلها لتحقيق السلوك المطلوب. فيما يلي تفاصيل كل خاصية:
items
هي القائمة التي يتم عرضها في DropdownButton. تحتوي على قائمة من العناصر، حيث يتم عرض أحدها في DropdownButton. يتم تمثيل العناصر بعنوان وقيمة.
DropdownButton(
items: [
DropdownMenuItem(
value: 'option1',
child: Text('Option 1'),
),
DropdownMenuItem(
value: 'option2',
child: Text('Option 2'),
),
DropdownMenuItem(
value: 'option3',
child: Text('Option 3'),
),
],
value: _selectedOption,
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
value
هي القيمة التي تم تحديدها في DropdownButton.
DropdownButton(
items: [...],
value: _selectedOption,
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
onChanged
هي دالة تستدعى عندما يتم تغيير حالة DropdownButton.
DropdownButton(
items: [...],
value: _selectedOption,
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“
hint
هي نص يظهر في DropdownButton عندما لا تكون هناك قيمة محددة.
DropdownButton(
items: [...],
value: _selectedOption,
hint: Text('Select an option'),
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
icon
هي الأيقونة التي تظهر بجانب DropdownButton.
DropdownButton(
items: [...],
value: _selectedOption,
icon: Icon(Icons.arrow_downward),
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
isExpanded
هي قيمة منطقية تحدد ما إذا كان DropdownButton يتمدد ليشغل كامل عرض الشاشة.
DropdownButton(
items: [...],
value: _selectedOption,
isExpanded: true,
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
iconSize
هي حجم الأيقونة التي تظهر بجانب DropdownButton.
DropdownButton(
items: [...],
value: _selectedOption,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
disabledHint
هي نص يظهر في DropdownButton عندما يكون غير قابل للتحرير.
DropdownButton(
items: [...],
value: _selectedOption,
disabledHint: Text('Disabled'),
onChanged: null,
),
elevation
هي عدد المستويات التي يمكن أن تظهر في DropdownButton.
DropdownButton(
items: [...],
value: _selectedOption,
elevation: 2,
onChanged: (value) {
setState(() {
_selectedOption = value;
});
},
),
مثال على استخدام DropdownButton في فلاتر
هذا مثال كامل على كيفية استخدام DropdownButton في Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late String _selectedOption;
@override
void initState() {
super.initState();
_selectedOption = 'option1';
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'DropdownButton Example',
home: Scaffold(
appBar: AppBar(
title: const Text('DropdownButton Example'),
),
body: Center(
child: DropdownButton(
items: [
const DropdownMenuItem(
value: 'option1',
child: Text('Option 1'),
),
const DropdownMenuItem(
value: 'option2',
child: Text('Option 2'),
),
const DropdownMenuItem(
value: 'option3',
child: Text('Option 3'),
),
],
value: _selectedOption,
onChanged: (value) {
setState(() {
_selectedOption = value.toString();
});
},
),
),
),
);
}
}
في هذا المثال، يتم إنشاء عنصر تحكم DropdownButton يحتوي على ثلاثة خيارات. تم تعيين القيمة الافتراضية لـ “option1″، ويتم تحديد القيمة المحددة في DropdownButton باستخدام خاصية value. يتم تحديد القيمة المحددة عند تغييرها في DropdownButton باستخدام دالة onChanged.
يتم إنشاء التطبيق باستخدام MaterialApp و Scaffold. تم إنشاء AppBar ووضعها في Scaffold. يتم وضع DropdownButton في وسط Scaffold باستخدام عنصر واجهة المستخدم Center.
عند تشغيل التطبيق، سيتم عرض DropdownButton مع الخيارات المتاحة. عند تحديد خيار معين، سيتم تحديد القيمة في DropdownButton وستظهر القيمة المحددة في التطبيق.
“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“
DropdownButton هو عنصر تحكم مهم في تصميم التطبيقات بإستخدام Flutter، حيث يتيح للمستخدمين تحديد خيار واحد فقط من بين قائمة. يمكن تعديل خصائص DropdownButton لتحقيق السلوك المطلوب، مثل القائمة والقيمة المحددة والعنوان والأيقونة وحجم الأيقونة ومستوى الارتفاع. يمكن استخدام DropdownButton في Flutter لتحديد الخيارات في التطبيقات والتحكم في سلوك التطبيق بناءً على الخيار المحدد.
