في Flutter، يمكن استخدام عدة وسائل لعرض رسائل إعلامية للمستخدم، ومن بين هذه الوسائل هي AlertDialog. تعتبر AlertDialog واحدة من العناصر الأساسية في مكتبة واجهة المستخدم (UI) في Flutter، والتي تستخدم لعرض رسائل إعلامية للمستخدم، وغالبًا ما تستخدم لتأكيد الإجراءات التي يقوم المستخدم بها.
ما هو AlertDialog؟
AlertDialog هو عنصر واجهة المستخدم في Flutter، يتم استخدامه لعرض رسائل إعلامية للمستخدم في صورة نافذة منبثقة (pop-up window)، وغالبًا ما تستخدم لتأكيد الإجراءات التي يقوم المستخدم بها، أو لعرض رسائل خطأ أو تحذيرات، أو اختيار خيارات متعددة. يتم إنشاء AlertDialog باستخدام كلاس AlertDialog ويمكن تخصيص خصائصها لتتناسب مع احتياجات التطبيق.
“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“
خصائص AlertDialog
تحتوي ويديجت AlertDialog على العديد من الخصائص التي يمكن استخدامها لتخصيص مظهر وسلوك AlertDialog، فيما يلي بعض الخصائص الشائعة:
title:
تستخدم لعرض عنوان الرسالة المعروضة في AlertDialog. يمكن استخدام أي عنصر واجهة مستخدم (UI)، مثل Text أو Icon، أو أي عنصر مخصص.
return AlertDialog(
title: Text('تأكيد الحذف'),
content: Text('هل أنت متأكد أنك تريد حذف هذا الملف؟'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('إلغاء'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('حذف'),
),
],
);
content:
تستخدم لعرض النص أو العناصر الإضافية، مثل الصور أو القوائم، في AlertDialog. يمكن استخدام أي عنصر واجهة مستخدم (UI)، مثل Text أو List، أو أي عنصر مخصص.
return AlertDialog(
title: Text('تأكيد الحذف'),
content: Text('هل أنت متأكد أنك تريد حذف هذا الملف؟'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('إلغاء'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('حذف'),
),
],
);
“اقرأ أيضاً: شرح استخدام ويدجت WillPopScope في فلاتر“
actions:
تستخدم لإضافة العناصر الفرعية المرتبطة برسالة AlertDialog، مثل الأزرار. يمكن استخدام أي عنصر واجهة مستخدم (UI)، مثل TextButton أو ElevatedButton، أو أي عنصر مخصص.
return AlertDialog(
title: Text('تأكيد الحذف'),
content: Text('هل أنت متأكد أنك تريد حذف هذا الملف؟'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('إلغاء'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('حذف'),
),
],
);
backgroundColor:
تستخدم لتخصيص لون خلفية AlertDialog.
return AlertDialog(
title: Text('تأكيد الحذف'),
content: Text('هل أنت متأكد أنك تريد حذف هذا الملف؟'),
backgroundColor: Colors.white,
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('إلغاء'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('حذف'),
),
],
);
shape:
تستخدم لتخصيص شكل AlertDialog، ويمكن استخدام Border أو RoundedRectangleBorder.
return AlertDialog(
title: Text('تأكيد الحذف'),
content: Text('هل أنت متأكد أنك تريد حذف هذا الملف؟'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('إلغاء'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: Text('حذف'),
),
],
);
مثال على استخدام AlertDialog في فلاتر
هذا مثال كامل على استخدام AlertDialog في Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'AlertDialog Example',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AlertDialog Example'),
),
body: Center(
child: ElevatedButton(
child: const Text('Show Dialog'),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('تأكيد الحذف'),
content: const Text('هل أنت متأكد أنك تريد حذف هذا الملف؟'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: const Text('إلغاء'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: const Text('حذف'),
),
],
);
},
);
},
),
),
);
}
}
في هذا المثال، تم إنشاء تطبيق بسيط يتضمن زرًا يقوم بعرض رسالة AlertDialog عند النقر عليه. عند النقر على الزر، يتم استدعاء showDialog() الذي يقوم بإنشاء رسالة AlertDialog. تم تخصيص خصائص AlertDialog لتتناسب مع احتياجات التطبيق، مثل العنوان والنص والأزرار.
لاحظ أنه يجب استدعاء showDialog() داخل حاوية context، ويجب تحديد بناء AlertDialog داخل دالة builder() التي تقوم بإرجاع عنصر واجهة مستخدم (UI)، في هذه الحالة AlertDialog. يتم استخدام Navigator.of(context).pop() لإغلاق رسالة AlertDialog وإرجاع قيمة معينة، والتي يمكن استخدامها لاتخاذ إجراء معين في التطبيق.
“اقرأ أيضاً: شرح استخدام ويدجت InkWell في فلاتر“
تعد AlertDialog واحدة من العناصر الأساسية في مكتبة واجهة المستخدم (UI) في Flutter، والتي تستخدم لعرض رسائل إعلامية للمستخدم، وغالبًا ما تستخدم لتأكيد الإجراءات التي يقوم المستخدم بها. يمكن تخصيص خصائص AlertDialog لتتناسب مع احتياجات التطبيق، مثل العنوان والنص والأزرار ولون الخلفية والشكل. يمكن استخدام AlertDialog بشكل فعال في التطبيقات التي تتطلب عرض رسائل إعلامية للمستخدم.
