عنصر DropdownButton في تطبيقات فلاتر

 “استخدام DropdownButton في تطبيقات Flutter: التعرف على العنصر واستخدامه بكفاءة”

مقدمة
مرحبًا! في هذا الدرس، سنستكشف إحدى العناصر الأساسية في إطار العمل Flutter وهي DropdownButton. سنتعلم كيفية استخدام DropdownButton بشكل فعّال في تطبيقات Flutter لإنشاء قوائم منسدلة تسمح للمستخدمين باختيار خيار واحد من بين عدة خيارات.

خلال هذا الدرس، سنقوم بتغطية المواضيع التالية:

مفهوم DropdownButton ودوره في تطبيقات Flutter.
كيفية إنشاء واستخدام DropdownButton لعرض القوائم المنسدلة.
تخصيص مظهر DropdownButton والخيارات المتاحة لنا.
استجابة التطبيق لتغيير القيمة المحددة في DropdownButton.
إضافة DropdownButton إلى تطبيقات Flutter الخاصة بك واستخدامه في سيناريوهات الواقعية.
معرفة كيفية استخدام DropdownButton ستمكنك من إنشاء تجارب مستخدم مرنة ومتعددة الاستخدامات في تطبيقات Flutter الخاصة بك. دعونا نبدأ الاستكشاف والتعلم معًا!

ما هو عنصر DropdownButton في فلاتر ؟

DropdownButton هو عنصر واجهة مستخدم يستخدم عادة في تطبيقات الويب وتطبيقات الجوال لتوفير قائمة من الخيارات التي يمكن للمستخدم اختيار واحدة منها. يظهر الDropdownButton على شكل زر يمكن النقر عليه، وعند النقر يتم عرض قائمة منسدلة (dropdown menu) تحت الزر تحتوي على الخيارات المتاحة.

يتم استخدام DropdownButton في مجموعة متنوعة من السيناريوهات، مثل تحديد خيار من بين قائمة من الخيارات، أو تحديد قيمة من قائمة متعددة الخيارات، أو تحديد تصنيف معين، وما إلى ذلك.

عادةً ما يكون لدى DropdownButton خصائص تمكن المطور من تخصيص مظهره وسلوكه، مثل النص الذي يظهر على الزر، والخيارات المتاحة، واللون، والحجم، والعمليات التي يتم تنفيذها عند اختيار الخيارات.

في معظم الحالات، بمجرد اختيار الخيار من القائمة، يتم إغلاق القائمة المنسدلة ويتم عرض القيمة المحددة على الزر.

كيف نستخدم DropdownButton in flutter

في Flutter، DropdownButton هو عنصر واجهة مستخدم يستخدم لعرض قائمة منسدلة من الخيارات يمكن للمستخدم اختيار واحدة منها. إليك شرح لكيفية استخدام DropdownButton في Flutter:

إنشاء قائمة الخيارات:
قم بتحديد قائمة الخيارات التي ترغب في عرضها في DropdownButton. يمكن أن تكون هذه قائمة بسيطة من النصوص أو قائمة من الكائنات المخصصة.

استخدم DropdownButton وDropdownMenuItem:
قم بتضمين DropdownButton في واجهة مستخدم Flutter الخاصة بك. يجب أن تحتوي على قائمة من عناصر DropdownMenuItem. كل عنصر في هذه القائمة يمثل خيارًا في القائمة المنسدلة.

استجابة لتغيير القيمة:
عندما يقوم المستخدم بتحديد خيار معين من DropdownButton، يمكنك تنفيذ الإجراءات التي تريدها باستخدام القيمة التي تم تحديدها.

هاكم  مثال بسيط يوضح كيفية استخدام DropdownButton في Flutter:

تطبيق 1

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
String _selectedOption = 'Option 1';

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButton Example'),
),
body: Center(
child: DropdownButton<String>(
value: _selectedOption,
onChanged: (String? newValue) {
// Changed from String to String?
setState(() {
_selectedOption = newValue!;
});
},
items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
);
}
}

في هذا المثال، يتم إنشاء DropdownButton يعرض قائمة من الخيارات [‘Option 1’, ‘Option 2’, ‘Option 3’, ‘Option 4’]. عند تغيير القيمة المحددة، يتم تحديث المتغير _selectedOption وإعادة بناء واجهة المستخدم بالقيمة الجديدة.

شرح الكود سطرا بسطر :

هاكم الكود مقسمًا إلى أسطر منفصلة مع عناوين توضيحية مشروحا في التعليقات :

import 'package:flutter/material.dart'; // استيراد المكتبة المطلوبة

void main() {
runApp(MyApp()); // تشغيل التطبيق
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState(); // إنشاء حالة جديدة للتطبيق
}

class _MyAppState extends State<MyApp> {
String _selectedOption = 'Option 1'; // تعريف المتغير الحالي المختار

@override
Widget build(BuildContext context) {
return MaterialApp( // بناء التطبيق
home: Scaffold( // بناء الهيكل الرئيسي للتطبيق
appBar: AppBar(
title: Text('DropdownButton Example'), // عنوان شريط الأدوات
),
body: Center(
child: DropdownButton<String>( // إنشاء زر القائمة المنسدلة
value: _selectedOption, // تعيين القيمة المحددة
onChanged: (String newValue) { // استجابة لتغيير القيمة
setState(() { // تحديث الحالة
_selectedOption = newValue; // تعيين القيمة الجديدة
});
},
items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4'] // قائمة الخيارات
.map<DropdownMenuItem<String>>((String value) { // تحويل القيم إلى عناصر من القائمة المنسدلة
return DropdownMenuItem<String>(
value: value,
child: Text(value), // عرض النص في القائمة المنسدلة
);
}).toList(),
),
),
),
);
}
}

هذا يفصل الكود ويوضح وظيفة كل سطر من أسطره.

شجرة العناصر لهذا التطبيق:

هذه شجرة العناصر لتطبيق DropdownButton الذي تم شرحه:

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - DropdownButton
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text

تتكون شجرة العناصر من عناصر Flutter المختلفة التي تم استخدامها في تطبيقنا.

خصائص ومكونات ووظائف DropdownButton in flutter وكيف تستخدم في الكود

DropdownButton في Flutter هو عنصر واجهة مستخدم يتيح للمستخدم تحديد قيمة واحدة من بين مجموعة من الخيارات المتاحة. هنا قائمة بالخصائص والمكونات والوظائف الرئيسية لـ DropdownButton وكيفية استخدامها في الكود:

الخصائص:
value (القيمة):

القيمة المحددة حاليًا في قائمة السقوط.
يجب أن تكون من نفس النوع المحدد للـ DropdownButton.
items (العناصر):

قائمة من العناصر التي ستظهر في القائمة المنسدلة.
كل عنصر يتمثل في DropdownMenuItem.
onChanged (عند التغيير):

دالة تُنفذ عندما يتم تغيير القيمة المحددة.
يتم تمرير القيمة الجديدة كمعامل لهذه الدالة.
المكونات:
DropdownMenuItem:
عنصر في القائمة المنسدلة.
يحتوي على قيمة ونص لعرضه.
الوظائف:
اختيار القيمة:
المستخدم يمكنه اختيار قيمة من القائمة المنسدلة.
عندما يقوم المستخدم بتحديد قيمة، يتم تحديث قيمة DropdownButton وتنفيذ دالة onChanged إذا كانت معينة.
كيفية الاستخدام في الكود:

DropdownButton<String>(
value: _selectedValue,
onChanged: (String newValue) {
setState(() {
_selectedValue = newValue;
});
},
items: <String>['Option 1', 'Option 2', 'Option 3']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),

يتم إنشاء DropdownButton وتعيين القيمة المحددة وتحديد دالة onChanged.
يتم تحويل القيم المتاحة إلى قائمة DropdownMenuItem.
يتم تحديد عرض النص لكل DropdownMenuItem بواسطة child.

تطبيق 2: يتسخدم DropdownButton

هاكم  تطبيق بسيط يستخدم DropdownButton في Flutter خطوة بخطوة:

نقم بإنشاء مشروع Flutter جديد:
قم بإنشاء مشروع Flutter جديد باستخدام أي محرر رمز تفضله أو من خلال سطر الأوامر باستخدام الأمر التالي:

flutter create dropdown_button_app

نفتح ملف main.dart:
افتح ملف main.dart في مشروعنا الجديد.

نقم بإضافة استيرادات المكتبات الضرورية:
نقم بإضافة استيرادات المكتبات التالية في أعلى ملف main.dart:

import 'package:flutter/material.dart';

إنشاء الكلاس الرئيسي للتطبيق:
استبدل المحتوى الحالي للكلاس MyApp بالتالي:

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
String _selectedOption = 'Option 1';

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButton Example'),
),
body: Center(
child: DropdownButton<String>(
value: _selectedOption,
onChanged: (String newValue) {
setState(() {
_selectedOption = newValue;
});
},
items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
);
}
}

تشغيل التطبيق:
نقم بتشغيل التطبيق عن طريق تشغيل الأمر التالي في سطر الأوامر:

flutter run
أو نقم بتشغيل التطبيق من خلال محرر الكود الخاص بك.

بهذه الخطوات، قمنا بإنشاء تطبيق بسيط يستخدم DropdownButton في Flutter. ستلاحظ أنه يقوم بعرض قائمة من الخيارات ويسمح للمستخدم بتحديد واحدة منها.

شجرة العناصر

هاكم شجرة العناصر لتطبيقنا:

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - DropdownButton
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text

هذه الشجرة توضح هيكل التطبيق والعناصر التي تم استخدامها، بما في ذلك MaterialApp و Scaffold و AppBar و DropdownButton مع عناصره الفرعية.

تطبيق 3 :تطبيق شامل عن كيف نستخدم DropdownButton in flutter

سنتناول كيفية استخدام DropdownButton في تطبيق Flutter خطوة بخطوة بشكل شامل:

الخطوة 1: إعداد المشروع
إذا لم يكن لديك مشروع Flutter بعد، قم بإنشاء مشروع جديد. يمكنك استخدام الأمر التالي في سطر الأوامر:

flutter create dropdown_button_app

الخطوة 2: استيراد المكتبات الضرورية
افتح ملف pubspec.yaml وتأكد من أنك قمت بتضمين مكتبة flutter/material.dart كما يلي:

dependencies:
flutter:
sdk: flutter

# Add the following line
flutter_material:

ثم قم بتشغيل الأمر التالي في سطر الأوامر لتثبيت المكتبة:

flutter pub get

الخطوة 3: تعريف واستخدام DropdownButton
أفتح ملف main.dart واستبدل الكود بالكود التالي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
String _selectedOption = 'Option 1';

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButton Example'),
),
body: Center(
child: DropdownButton<String>(
value: _selectedOption,
onChanged: (String? newValue) {
// Change parameter type to String?
if (newValue != null) {
// Check for null
setState(() {
_selectedOption = newValue;
});
}
},
items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
);
}
}

الخطوة 4: تشغيل التطبيق
قم بتشغيل التطبيق عن طريق الضغط على الزر “Run” في محرر الرمز الخاص بك أو باستخدام الأمر التالي في سطر الأوامر:

flutter run

بهذه الخطوات، يجب أن يتم إنشاء تطبيق Flutter بسيط يستخدم DropdownButton لعرض قائمة من الخيارات. عند تحديد خيار معين، سيتم تحديث القيمة المعروضة في الزر.

إليك الشرح سطراً بسطر في أسطر منفصلة لكل جزء من الكود:

import 'package:flutter/material.dart';

يتم استيراد المكتبة الأساسية التي تحتوي على كل العناصر والأدوات اللازمة لتطوير تطبيقات Flutter.

void main() {
runApp(MyApp());
}

تعتبر دالة main نقطة البداية لتنفيذ التطبيق. في هذا السياق، يتم استدعاء دالة runApp لتشغيل التطبيق وتمرير MyApp() كمعامل لها.

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

يتم إنشاء فئة MyApp التي تمثل التطبيق. تُستخدم كلاسات StatefulWidget للعناصر التي يمكن تحديث حالتها.

class _MyAppState extends State<MyApp> {
String _selectedOption = 'Option 1';

تعريف الحالة الداخلية للتطبيق، في هذه الحالة، _selectedOption تحتوي على الخيار المحدد حاليًا من القائمة.

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('DropdownButton Example'),
),
body: Center(
child: DropdownButton<String>(
value: _selectedOption,
onChanged: (String newValue) {
setState(() {
_selectedOption = newValue;
});
},
items: <String>['Option 1', 'Option 2', 'Option 3', 'Option 4']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
);
}

دالة build تُستخدم لإنشاء وترتيب عناصر واجهة المستخدم. في هذا المثال، يتم إنشاء MaterialApp كواجهة للتطبيق، ويحتوي Scaffold على AppBar و DropdownButton في مركز الشاشة. يتم استخدام DropdownButton لعرض القائمة المنسدلة للاختيار من بينها. عندما يتم تحديد خيار جديد، يتم تحديث الحالة باستخدام setState، وبالتالي يتم إعادة بناء واجهة المستخدم لعرض القيمة الجديدة المحددة.

شجرة العناصر لهذا التطبيق

هاكم شجرة العناصر لتطبيق DropdownButton:

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - DropdownButton
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text
        - DropdownMenuItem
          - Text

هذه الشجرة توضح هيكل التطبيق والعناصر التي تم استخدامها، بما في ذلك MaterialApp و Scaffold و AppBar و DropdownButton مع عناصره الفرعية DropdownMenuItem و Text.

أختبار عن عنصر  DropdownButton

سؤال 1: ما هو دور DropdownButton في تطبيق Flutter؟

عرض صفحة جديدة
إظهار قائمة منسدلة من الخيارات
عرض صورة متحركة
إرسال بيانات إلى قاعدة البيانات

سؤال 2: ما هي الخاصية التي تحدد القيمة المحددة حاليًا في DropdownButton؟

currentValue
selectedValue
value
currentValueIndex

سؤال 3: كيف يتم تنفيذ عملية عند تغيير القيمة في DropdownButton؟

باستخدام الخاصية onChanged
باستخدام الخاصية onSelected
باستخدام الخاصية onChange
باستخدام الخاصية onValueChange

سؤال 4: ما هي الوظيفة الأساسية لـ DropdownMenuItem؟

عرض قائمة الخيارات
تحديد القيمة المحددة
عرض عنصر في قائمة الخيارات
تحديد خيار من القائمة

سؤال 5: ما هو الخاصية التي تستخدم لتحديد العنصر المحدد في DropdownMenuItem؟

selected
isSelected
isChecked
value

سؤال 6: ما هي الخاصية التي يمكن استخدامها لتمييز العناصر في DropdownButton بينما يتم عرضها؟

style
highlightStyle
selectedStyle
dropdownColor

سؤال 7: كيف يمكن تخصيص نصوص الخيارات في DropdownMenuItem؟

عبر استخدام خاصية text
عبر استخدام خاصية label
عبر استخدام وظيفة child
عبر استخدام وظيفة title

سؤال 8: ما الخاصية التي تستخدم لتحديد الحد الأقصى لعدد العناصر التي يمكن عرضها في القائمة المنسدلة؟

maxItems
maxLength
itemCount
maxDropdownItems

سؤال 9: ما هي الخاصية التي يمكن استخدامها لتحديد العرض الافتراضي للقائمة المنسدلة؟

width
dropdownWidth
menuWidth
itemWidth

سؤال 10: ما الخاصية التي يمكن استخدامها لتعيين قيمة مبدئية لـ DropdownButton؟

defaultValue
initialValue
defaultSelectedValue
initialSelectedValue

الاجابات

ها هي الإجابات على الأسئلة:

سؤال 1: الإجابة الصحيحة هي: 2. إظهار قائمة منسدلة من الخيارات
سؤال 2: الإجابة الصحيحة هي: 3. value
سؤال 3: الإجابة الصحيحة هي: 1. باستخدام الخاصية onChanged
سؤال 4: الإجابة الصحيحة هي: 3. عرض عنصر في قائمة الخيارات
سؤال 5: الإجابة الصحيحة هي: 4. value
سؤال 6: الإجابة الصحيحة هي: 4. dropdownColor
سؤال 7: الإجابة الصحيحة هي: 3. عبر استخدام وظيفة child
سؤال 8: الإجابة الصحيحة هي: 4. maxDropdownItems
سؤال 9: الإجابة الصحيحة هي: 2. dropdownWidth
سؤال 10: الإجابة الصحيحة هي: 2. initialValue
أتمنى أن تكون الإجابات واضحة! إذا كانت لديك أي أسئلة أخرى، فلا تتردد في طرحها.