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

بناء واحهات تطبيقات باستخدام IconButton في Flutter

مقدمة

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

ما المقصود ب بزر الأيقونة في فلاتر ؟

IconButton in flutter

في Flutter، IconButton هو عنصر واجهة مستخدم يُستخدم لعرض أيقونة قابلة للنقر. يسمح للمستخدمين بالتفاعل مع التطبيق عن طريق النقر على الأيقونة. يتيح للمطورين تحديد السلوك الذي يتم تنفيذه عند النقر على الأيقونة، مثل فتح قائمة منبثقة، تحويل الصفحة، أو تنفيذ وظائف مختلفة أخرى.

يمكن استخدام IconButton في تطوير التطبيقات لإضافة أزرار صغيرة تحتوي على رموز أيقونية لتنفيذ أنشطة معينة. على سبيل المثال، يمكن استخدام IconButton لإضافة زر لتشغيل أو إيقاف ميزة في التطبيق، أو لفتح شاشة جديدة، أو للتبديل بين العرض الرأسي والأفقي، وغيرها من الوظائف.

تطبيق 1: مثال بسيط على استخدام IconButton في Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('IconButton Example'),
),
body: Center(
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
// Add your onPressed behavior here
print('Button pressed!');
},
),
),
),
);
}
}

في هذا المثال، يتم عرض IconButton في وسط الشاشة مع أيقونة “add” وعند النقر عليها، سيتم طباعة “Button pressed!” في وحدة تحكم الطباعة.

شرح الكود في اسطر منفصلة

 شرح الكود خطوة بخطوة:

import 'package:flutter/material.dart';

: يقوم بإدخال مكتبة Flutter التي تحتوي على مجموعة كبيرة من العناصر والأدوات التي يمكن استخدامها في تطوير التطبيقات.

void main() {...}

: هذه هي دالة الدخول الرئيسية لتطبيق Flutter. يتم استدعاء runApp() داخلها لتشغيل التطبيق وتمرير MyApp() كمعلمة.

class MyApp extends StatelessWidget {...}

: يُنشئ فئة MyApp التي تمثل تطبيقنا. تمتد هذه الفئة من StatelessWidget، مما يعني أن التطبيق لا يحتوي على حالة قابلة للتغيير.

Widget build(BuildContext context) {...}

: هذه الدالة مطلوبة داخل الفئات التي تمتد من StatelessWidget. تُستخدم لبناء وتخطيط عناصر واجهة المستخدم للتطبيق.

return MaterialApp(...);

: يُعيد مواد التطبيق الرئيسية. MaterialApp هو عنصر واجهة مستخدم يوفر تخطيطًا موحدًا لتطبيقات Flutter ويدعم العديد من الميزات مثل التوجيه وإدارة الحالة والإعلانات.

Scaffold(...)

: يقوم بإنشاء هيكل أساسي للصفحة تحتوي على العديد من الميزات مثل AppBar وBody.

AppBar(...)

: يضيف شريطًا علويًا إلى الصفحة يحتوي على عنوان.

IconButton(...)

: يُنشئ زرًا صغيرًا يحتوي على أيقونة، ويسمح للمستخدم بالتفاعل معه عن طريق النقر عليه.

onPressed: () {...}

: يُعين السلوك الذي يحدث عندما يتم النقر على IconButton. في هذا المثال، يتم طباعة “Button pressed!” عند النقر.

print('Button pressed!');

: يُطبع النص “Button pressed!” على وحدة التحكم في الطباعة عند النقر على IconButton.

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

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

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - IconButton

تطبيقنا يحتوي على عنصر MaterialApp كوالد رئيسي، وتحته يأتي عنصر Scaffold الذي يحتوي على AppBar و Center كأطفال له. وفي داخل AppBar هناك عنصر Text، أما في داخل Center يوجد عنصر IconButton.

خطوة بخطوة كيف نسخدم IconButton in flutter في تطبيقات فلاتر ؟

طبقًا للشجرة السابقة  إليك كيفية استخدام IconButton في Flutter خطوة بخطوة:

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

import 'package:flutter/material.dart';

تعريف الدالة الرئيسية main(): يجب عليك تعريف الدالة الرئيسية main() التي ستكون نقطة البداية لتطبيق Flutter الخاص بك.

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

إنشاء فئة التطبيق MyApp: يجب عليك إنشاء فئة تمثل تطبيقك. يمكنك فعل ذلك عن طريق تمديد StatelessWidget.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// يتم بناء وتصميم واجهة التطبيق هنا
}
}

إنشاء واجهة التطبيق في دالة build(): داخل دالة build()، يجب عليك إنشاء وتصميم واجهة التطبيق الخاصة بك. سنستخدم MaterialApp و Scaffold كوالدين للتخطيط.

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
body: Center(
// يتم وضع عناصر واجهة المستخدم هنا
),
),
);
}

إضافة IconButton إلى واجهة المستخدم: في مثالنا، سنقوم بإضافة IconButton إلى مركز الشاشة.

body: Center(
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
// السلوك الذي سيتم تنفيذه عند النقر على الأيقونة هنا
},
),
),

تحديد السلوك الذي يتم تنفيذه عند النقر: يمكنك تحديد السلوك الذي يتم تنفيذه عندما يتم النقر على IconButton.

في هذا المثال، سنقوم بطباعة رسالة بسيطة عند النقر.

onPressed: () {
print('IconButton Pressed!');
}

تشغيل التطبيق: بمجرد كتابة الكود وحفظه، يمكنك تشغيل التطبيق عن طريق تشغيل البرنامج الرئيسي main(). سترى زر IconButton وعند النقر عليه، سيتم طباعة الرسالة التي حددناها.

هذه هي الخطوات الأساسية لاستخدام IconButton في تطبيق Flutter. تستطيع تعديل الكود واستخدام IconButton بالطريقة التي تراها مناسبة لتطبيقك المحدد.

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

IconButton في Flutter يحتوي على العديد من الخصائص والمكونات التي يمكنك استخدامها لتخصيص زر الأيقونة وتحديد سلوكه. إليك قائمة بالخصائص والمكونات الرئيسية لـ IconButton وكيفية استخدامها في الكود:

icon: تُستخدم هذه الخاصية لتحديد الأيقونة التي ستظهر داخل زر IconButton. يمكنك تمرير Icon كمعلمة لهذه الخاصية.

IconButton(
icon: Icon(Icons.add),
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

onPressed: يُستخدم لتحديد السلوك الذي يتم تنفيذه عند النقر على IconButton. يمكنك تمرير دالة (Function) لهذه الخاصية لتنفيذ السلوك المطلوب.

IconButton(
icon: Icon(Icons.add),
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

color: تستخدم لتحديد لون الأيقونة داخل زر IconButton.

IconButton(
icon: Icon(Icons.add),
color: Colors.blue,
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

iconSize: تستخدم لتحديد حجم الأيقونة داخل زر IconButton.

IconButton(
icon: Icon(Icons.add),
iconSize: 36.0,
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

tooltip: يُستخدم لتحديد نص الوصف الذي يظهر عندما يمر المستخدم بالمؤشر فوق زر IconButton.

IconButton(
icon: Icon(Icons.add),
tooltip: 'إضافة',
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

padding: يستخدم لتحديد حجم الابتعاد الداخلي للزر IconButton.

IconButton(
icon: Icon(Icons.add),
padding: EdgeInsets.all(8.0),
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

splashColor وhighlightColor: يمكن استخدامهما لتخصيص ألوان تأثيرات الضغط واللمعان على الزر.

IconButton(
icon: Icon(Icons.add),
splashColor: Colors.green,
highlightColor: Colors.red,
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

disabledColor: يُستخدم لتحديد لون الأيقونة عندما يكون الزر غير نشطًا (مُعطّلًا).

IconButton(
icon: Icon(Icons.add),
onPressed: null,
disabledColor: Colors.grey,
)

alignment: يستخدم لتحديد موقع الأيقونة داخل الزر IconButton.

IconButton(
icon: Icon(Icons.add),
alignment: Alignment.centerLeft,
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

splashRadius: يُستخدم لتحديد نصف قطر التأثير المتموج عند النقر على الزر.

IconButton(
icon: Icon(Icons.add),
splashRadius: 24.0,
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

focusColor وhoverColor: يمكن استخدامهما لتحديد لون الزر عند الحصول على التركيز أو تحويل المؤشر فوقه.

IconButton(
icon: Icon(Icons.add),
focusColor: Colors.blue,
hoverColor: Colors.green,
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

iconTheme: يستخدم لتخصيص سمات الأيقونة مثل اللون والحجم والخط.

IconButton(
icon: Icon(Icons.add),
iconTheme: IconThemeData(
color: Colors.red,
size: 30.0,
),
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
},
)

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

تطبيق 2 يستخدم كل هذه الخصائص

طبقًا للخصائص التي تم ذكرها، سنقوم بإنشاء تطبيق بسيط يستخدم كل هذه الخصائص مع IconButton في Flutter. سنقوم بإنشاء زر IconButton بسيط يتم تخصيصه باستخدام كل هذه الخصائص. هنا خطوات العمل:

استيراد مكتبة Flutter:
قم بفتح ملف الكود الخاص بتطبيقك واستيراد مكتبة Flutter:

import 'package:flutter/material.dart';

تعريف الدالة الرئيسية main():
نقم بتعريف الدالة الرئيسية main() كنقطة بداية لتطبيقك:

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

إنشاء فئة التطبيق MyApp:
قم بإنشاء فئة تمثل تطبيقك والتي تمتد من StatelessWidget:

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// يتم بناء وتصميم واجهة التطبيق هنا
}
}

بناء واجهة التطبيق في دالة build():
داخل دالة build()، قم بإنشاء وتصميم واجهة التطبيق الخاصة بك. سنستخدم MaterialApp و Scaffold كوالدين للتخطيط.

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('IconButton Example'),
),
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
iconTheme: IconThemeData(
color: Colors.red,
size: 30.0,
),
),
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
print('IconButton Pressed!');
},
color: Colors.blue,
iconSize: 40.0,
splashColor: Colors.green,
highlightColor: Colors.yellow,
tooltip: 'إضافة',
padding: EdgeInsets.all(10.0),
splashRadius: 20.0,
alignment: Alignment.center,
focusColor: Colors.orange,
hoverColor: Colors.red,
disabledColor: Colors.grey,
),
),
),
),
);
}
}

الكود النهائي

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('IconButton Example'),
),
body: Center(
child: Theme(
data: Theme.of(context).copyWith(
iconTheme: IconThemeData(
color: Colors.red,
size: 30.0,
),
),
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
// السلوك الذي يتم تنفيذه عند النقر
print('IconButton Pressed!');
},
color: Colors.blue,
iconSize: 40.0,
splashColor: Colors.green,
highlightColor: Colors.yellow,
tooltip: 'إضافة',
padding: EdgeInsets.all(10.0),
splashRadius: 20.0,
alignment: Alignment.center,
focusColor: Colors.orange,
hoverColor: Colors.red,
disabledColor: Colors.grey,
),
),
),
),
);
}
}

تشغيل التطبيق:
بمجرد كتابة الكود وحفظه، يمكنك تشغيل التطبيق عن طريق تشغيل البرنامج الرئيسي main(). سترى زر IconButton وعند النقر عليه، سيتم طباعة الرسالة وستشاهد تأثيرات التحديد والتأثيرات البصرية الأخرى التي تم تخصيصها.

هذه هي الخطوات الأساسية لإنشاء تطبيق Flutter يستخدم كل هذه الخصائص مع IconButton. يمكنك تجربة تعديل القيم والخصائص حسب احتياجات تطبيقك المحدد.

الخصائص المستخدمة في هذا التطبيق

في التطبيق الذي تم إنشاؤه، تم استخدام العديد من الخصائص التي تم ذكرها سابقًا مع IconButton. إليك قائمة بالخصائص التي تم استخدامها في هذا التطبيق:

icon: تم استخدامها لتحديد الأيقونة التي تظهر داخل زر IconButton.

onPressed: تم استخدامها لتحديد السلوك الذي يتم تنفيذه عند النقر على IconButton.

color: تم استخدامها لتحديد لون الأيقونة داخل زر IconButton.

iconSize: تم استخدامها لتحديد حجم الأيقونة داخل زر IconButton.

splashColor: تم استخدامها لتحديد لون تأثير الرذاذ عند النقر على الزر.

highlightColor: تم استخدامها لتحديد لون تأثير التمييز عند النقر على الزر.

tooltip: تم استخدامها لتحديد نص الوصف الذي يظهر عند مرور المؤشر فوق الزر.

padding: تم استخدامها لتحديد حجم الابتعاد الداخلي للزر IconButton.

splashRadius: تم استخدامها لتحديد نصف قطر التأثير المتموج عند النقر على الزر.

alignment: تم استخدامها لتحديد موقع الأيقونة داخل الزر IconButton.

focusColor: تم استخدامها لتحديد لون الزر عند الحصول على التركيز.

hoverColor: تم استخدامها لتحديد لون الزر عند تحويل المؤشر فوقه.

disabledColor: تم استخدامها لتحديد لون الأيقونة عندما يكون الزر غير نشطًا.

iconTheme: تم استخدامها لتخصيص سمات الأيقونة مثل اللون والحجم.

تم استخدام كل هذه الخصائص لتخصيص وتعديل زر IconButton في التطبيق الذي تم إنشاؤه.

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

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - IconButton

تطبيقنا يحتوي على عنصر MaterialApp كوالد رئيسي، وتحته يأتي عنصر Scaffold الذي يحتوي على AppBar و Center كأطفال له. وفي داخل AppBar هناك عنصر Text، أما في داخل Center يوجد عنصر IconButton.

تطبيق 3 : على IconButton in flutter

 سأقدم  خطوات بناء تطبيق متقدم يستخدم IconButton في Flutter. سنقوم بإنشاء تطبيق يعرض قائمة من العناصر، وعند النقر على كل عنصر سيتم عرض Snackbar للتفاعل مع المستخدم باستخدام IconButton. سنستخدم أيضًا أيقونات مخصصة لكل عنصر.

إليك الخطوات:

إعداد المشروع:
نقم بإنشاء مشروع Flutter جديد وافتح ملف pubspec.yaml وأضف الأيقونات التي تحتاجها إلى قائمة الاعتمادات. بعد ذلك، قم بتشغيل flutter pub get لتحميل الاعتمادات.

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

إنشاء Snackbar:
قم بإنشاء دالة تعيد واجهة Snackbar عند النقر على كل عنصر. يمكنك استخدام ScaffoldMessenger.of(context).showSnackBar() لعرض Snackbar.

استخدام IconButton:
نضع IconButton داخل كل ListTile لإضافة تفاعل عند النقر. يمكننا استخدام أيقونات مدمجة مثل Icons أو استخدام أيقونات مخصصة.

استخدام PopupMenuButton (اختياري):
يمكننا أيضًا استخدام PopupMenuButton لعرض قائمة منسدلة من الخيارات لكل عنصر، حيث يمكن للمستخدم اختيار الإجراء المناسب.

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

تنفيذ التطبيق:

سأقدم  كودًا يمثل التطبيق المتقدم الذي تم وصفه. يمكنك نسخ الكود التالي ولصقه في ملف main.dart في مشروع Flutter جديد، ثم تشغيل التطبيق لرؤية النتيجة:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IconButton Example'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index]),
trailing: IconButton(
icon: Icon(Icons.info),
onPressed: () {
showItemSnackbar(context, items[index]);
},
),
);
},
),
);
}

void showItemSnackbar(BuildContext context, String item) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('You clicked on $item'),
duration: Duration(seconds: 2),
),
);
}
}

هذا التطبيق يعرض قائمة من العناصر (Item 1، Item 2، إلخ)، ولكل عنصر يوجد IconButton (أيقونة Info) في الجانب الأيمن من كل عنصر. عند النقر على IconButton، سيتم عرض Snackbar يوضح العنصر الذي تم النقر عليه.

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

1. الاستيراد ودالة التطبيق الرئيسي:

في هذا السطر، نقوم بإدخال مكتبة Flutter وتشغيل التطبيق الرئيسي.

import 'package:flutter/material.dart';

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

2. فئة التطبيق MyApp:

نقوم بإنشاء فئة MyApp التي تمثل تطبيقنا.
نستخدم MaterialApp كوالد لهذه الفئة ونحدد MyHomePage كالصفحة الرئيسية للتطبيق.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

3. صفحة MyHomePage:

نقوم بإنشاء صفحة MyHomePage التي تعرض العناصر وأيقونة IconButton بجانب كل عنصر.
نستخدم ListView.builder لعرض قائمة العناصر.
نستخدم ListTile لكل عنصر في القائمة ونضع IconButton في الجانب الأيمن منه.
عند النقر على IconButton، يتم استدعاء showItemSnackbar لعرض Snackbar.

class MyHomePage extends StatelessWidget {
final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('IconButton Example'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index]),
trailing: IconButton(
icon: Icon(Icons.info),
onPressed: () {
showItemSnackbar(context, items[index]);
},
),
);
},
),
);
}
}

4. الدالة showItemSnackbar:

هذه الدالة تقوم بعرض Snackbar عند النقر على IconButton.
تقوم بإنشاء وعرض SnackBar مع رسالة تحتوي على العنصر الذي تم النقر عليه.
تستخدم ScaffoldMessenger.of(context) للوصول إلى Scaffold الأقرب لعرض Snackbar.

void showItemSnackbar(BuildContext context, String item) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('You clicked on $item'),
duration: Duration(seconds: 2),
),
);
}

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

- MaterialApp
  - MyHomePage
    - Scaffold
      - AppBar
        - Text
      - ListView.builder
        - ListTile
          - Text
          - IconButton

تطبيقنا يحتوي على عنصر MaterialApp كوالد رئيسي، وتحته يأتي عنصر MyHomePage الذي يمثل الصفحة الرئيسية للتطبيق. وفي داخل MyHomePage، يوجد عنصر Scaffold الذي يحتوي على AppBar و ListView.builder كأطفال له. في ListView.builder، تقوم كل ListTile بعرض عنصر من القائمة، وفي داخل كل ListTile يوجد Text يعرض اسم العنصر وIconButton يمثل أيقونة الإعلام.

تطييق 4 انشي تطبيق عن لاستخدام IconButton in flutter

لنقم بإنشاء تطبيق متقدم يستخدم IconButton بشكل أكبر. سنقوم بإنشاء تطبيق يعرض قائمة من العناصر، ولكل عنصر يوجد زر IconButton يمكن استخدامه لإجراء إجراءات مختلفة. سنستخدم أيضًا PopupMenuButton لتوفير خيارات إضافية.

خطوات بناء التطبيق:

إعداد المشروع:
نقم بإنشاء مشروع Flutter جديد وافتح ملف pubspec.yaml وأضف الاعتمادات الضرورية.

تصميم واجهة المستخدم:

نستخدم Scaffold مع AppBar لعرض القائمة وعنوان التطبيق.
نستخدم ListView.builder لعرض العناصر من القائمة.
نستخدام IconButton:

نضع IconButton في كل عنصر من القائمة لتوفير إمكانية تنفيذ إجراءات مختلفة.
قم بتعريف السلوك المرتبط بكل IconButton.
استخدام PopupMenuButton:

نضع PopupMenuButton في كل عنصر من القائمة لعرض قائمة منسدلة للخيارات الإضافية.
نقم بتعريف الخيارات والسلوك المرتبط بها.

تنفيذ السلوك المخصص:

نقم بتعريف السلوك الخاص بكل IconButton وكل خيار في قائمة الإجراءات.
استخدام الحالة والإدارة:

نقم بتعيين الحالة اللازمة لتتبع حالة التطبيق والتفاعلات المختلفة.
استخدم الإدارة لإدارة الحالة وتحديثها.

اختبار التطبيق:

نقم بتشغيل التطبيق واختبار الأنشطة المختلفة للتأكد من عملها بشكل صحيح.
باتباع هذه الخطوات، يمكنك بناء تطبيق متقدم يستخدم IconButton بشكل كبير ويوفر تجربة مستخدم محسنة ومرنة. 

تنفيذ التطبيق 

هاكم الكود النهائي  يمكنك نسخ الكود التالي ولصقه في ملف main.dart في مشروع Flutter جديد، ثم تشغيل التطبيق لرؤية النتيجة:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Advanced IconButton App'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index]),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.info),
onPressed: () {
_showSnackbar('Info', items[index]);
},
),
PopupMenuButton<String>(
onSelected: (String result) {
_showSnackbar('Selected', '$result: ${items[index]}');
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'Edit',
child: Text('Edit'),
),
PopupMenuItem<String>(
value: 'Delete',
child: Text('Delete'),
),
],
),
],
),
);
},
),
);
}

void _showSnackbar(String action, String item) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('$action: $item'),
duration: Duration(seconds: 2),
),
);
}
}

هذا التطبيق يعرض قائمة من العناصر، ولكل عنصر يوجد زر IconButton على يمينه وزر آخر معقد PopupMenuButton يظهر قائمة منسدلة للخيارات الإضافية عند النقر.

اشرح الكود :

بالطبع، سأشرح الكود خطوة بخطوة مع عناوين لكل جزء:

استيراد المكتبيات:
في هذا القسم، نقوم بإدخال المكتبيات اللازمة لتطوير تطبيق Flutter.

import 'package:flutter/material.dart';

التطبيق الرئيسي:
في هذا الجزء، نقوم بإنشاء التطبيق الرئيسي MyApp الذي يمثل نقطة البداية للتطبيق.

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

صفحة الصفحة الرئيسية:
في هذا الجزء، نقوم بإنشاء صفحة MyHomePage التي تعرض قائمة العناصر والأزرار.

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

بناء واجهة المستخدم:
في هذا الجزء، نقوم ببناء واجهة المستخدم باستخدام Scaffold وListView.builder.

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Advanced IconButton App'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index]),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [

زر IconButton:
في هذا الجزء، نقوم بإنشاء زر IconButton لكل عنصر في القائمة.

IconButton(
icon: Icon(Icons.info),
onPressed: () {
_showSnackbar('Info', items[index]);
},
),

قائمة منسدلة PopupMenuButton:
في هذا الجزء، نقوم بإنشاء قائمة منسدلة PopupMenuButton لكل عنصر في القائمة.

PopupMenuButton<String>(
onSelected: (String result) {
_showSnackbar('Selected', '$result: ${items[index]}');
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'Edit',
child: Text('Edit'),
),
PopupMenuItem<String>(
value: 'Delete',
child: Text('Delete'),
),
],
),

عرض Snackbar:
في هذا الجزء، نقوم بإنشاء وعرض Snackbar عند النقر على الأزرار.

void _showSnackbar(String action, String item) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('$action: $item'),
duration: Duration(seconds: 2),
),
);
}

الختام:
هذا الجزء يغلق الأقواس وينهي الكلاسات والوظائف.

],
),
);
},
),
);
}
}

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

- MaterialApp
  - MyHomePage
    - Scaffold
      - AppBar
        - Text
      - ListView.builder
        - ListTile
          - Text
          - Row
            - IconButton
            - PopupMenuButton
              - PopupMenuItem
              - PopupMenuItem

تطبيقنا يحتوي على عنصر MaterialApp كوالد رئيسي، وتحته يأتي عنصر MyHomePage الذي يمثل الصفحة الرئيسية للتطبيق. وفي داخل MyHomePage، يوجد عنصر Scaffold الذي يحتوي على AppBar و ListView.builder كأطفال له. في ListView.builder، تقوم كل ListTile بعرض عنصر من القائمة، وفي داخل كل ListTile يوجد Text لعرض اسم العنصر ويحتوي على Row تحتوي على IconButton و PopupMenuButton التي تمثل الأزرار.

اختبار  على هذا الدرس IconButton in flutter

لنقم بإنشاء كويز قصير لاختبار فهمنا لموضوع IconButton في Flutter.

سأقدم لك بعض الأسئلة مع الخيارات المتعددة الاختيارات، ويتعين عليك اختيار الإجابة الصحيحة.

1-ما هو دور عنصر IconButton في Flutter؟

أ) عرض نص على الشاشة
ب) تمثيل زر يحتوي على أيقونة
ج) إنشاء قائمة منسدلة
د) تشغيل ملف صوتي

2- ما هي الخاصية المستخدمة لتحديد الأيقونة داخل زر IconButton؟

أ) iconSize
ب) splashColor
ج) color
د) icon

3-كيف يمكننا تعيين سلوك عند النقر على زر IconButton؟

أ) باستخدام الخاصية onPressed
ب) باستخدام الخاصية onSelected
ج) باستخدام الخاصية onTap
د) باستخدام الخاصية onHover

5-ما هي وظيفة PopupMenuButton في Flutter؟

أ) عرض قائمة منسدلة للخيارات
ب) عرض نص في Snackbar
ج) تحريك العناصر بالتأثير البصري
د) تغيير لون الخلفية

6-كيف يمكن تعريف قائمة الخيارات لـ PopupMenuButton؟

أ) بإضافتها كأطفال مباشرة لـ PopupMenuButton
ب) باستخدام الخاصية items
ج) باستخدام الخاصية options
د) بتكوين قائمة واجتيازها كمعلمة إلى PopupMenuButton

7-ما هي الوسيلة المستخدمة لعرض رسائل مؤقتة في Flutter؟

أ) AlertDialog
ب) Snackbar
ج) BottomSheet
د) Toast

8-ما هو استخدام خاصية iconSize في IconButton؟

أ) لتحديد حجم الزر
ب) لتحديد حجم الأيقونة داخل الزر
ج) لتحديد لون الأيقونة
د) لتحديد موقع الأيقونة داخل الزر

9-ما هو الوسيلة المستخدمة لتخصيص سمات الأيقونة في IconButton؟

أ) iconStyle
ب) iconTheme
ج) iconAppearance
د) iconConfig

10-ما هي الخاصية التي تستخدم لتحديد لون الزر عند الحصول على التركيز؟

أ) focusColor
ب) splashColor
ج) hoverColor
د) disabledColor

11-ما هو الوسيلة المستخدمة لتحديد نصف قطر التأثير المتموج عند النقر على الزر؟

أ) splashRadius
ب) splashSize
ج) rippleRadius
د) effectRadius

12-ما هي الوسيلة المستخدمة لتحديد لون الزر عند تحويل المؤشر فوقه؟

أ) hoverColor
ب) focusColor
ج) activeColor
د) splashColor

13-ما هو الوسيلة المستخدمة لتحديد لون الأيقونة عندما يكون الزر غير نشطًا؟

أ) disabledColor
ب) inactiveColor
ج) offColor
د) mutedColor