Flutter 2: Dialogs & Menus – A Comprehensive Guide with Examples

This article provides a comprehensive guide to implementing dialogs and menus in Flutter 2. It explores four common widgets – AlertDialog, PopupMenuButton, CupertinoContextMenu, and ExpansionTile – with clear and concise examples. Learn how to enhance user interaction in your Flutter apps using these essential widgets.

تقدم هذه المقالة دليلاً شاملاً لتنفيذ الحوارات و القوائم في فلاتر 2. تستكشف أربع أدوات شائعة - AlertDialog و PopupMenuButton و CupertinoContextMenu و ExpansionTile - مع أمثلة واضحة وموجزة. تعلم كيفية تحسين تفاعل المستخدم في تطبيقات فلاتر الخاصة بك باستخدام هذه الأدوات الأساسية.

AlertDialog – Show Modal Alerts

The AlertDialog widget displays a modal dialog box with a title, content, and action buttons. It's ideal for confirmations, warnings, or any scenario where you need to grab the user's attention before proceeding.

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

Example:

AlertDialog(
  title: Text('Alert'),
  content: Text('This is an important alert!'),
  actions: [
    TextButton(onPressed: () => Navigator.pop(context), child: Text('OK')),
    TextButton(onPressed: () {}, child: Text('CANCEL')),
  ],
)

PopupMenuButton – Show Popup Menu

The PopupMenuButton widget displays a menu of options when the user taps a button. It's a convenient way to provide a list of actions or settings related to a specific element.

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

Example:

PopupMenuButton<String>(
  onSelected: (value) => print('Selected: $value'),
  itemBuilder: (context) => [
    PopupMenuItem(value: 'Edit', child: Text('Edit')),
    PopupMenuItem(value: 'Delete', child: Text('Delete')),
  ],
)

CupertinoContextMenu – iOS Style Long-Press Menu

The CupertinoContextMenu widget provides an iOS-style context menu that appears when the user long-presses a widget. It offers a sleek and familiar way to present contextual actions.

توفر أداة CupertinoContextMenu قائمة سياقية بنمط iOS تظهر عندما يضغط المستخدم لفترة طويلة على أداة. إنه يوفر طريقة أنيقة ومألوفة لتقديم الإجراءات السياقية.

Example:

CupertinoContextMenu(
  actions: [
    CupertinoContextMenuAction(child: Text('Share'), onPressed: () {}),
    CupertinoContextMenuAction(child: Text('Delete'), onPressed: () {}),
  ],
  child: Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),
)

ExpansionTile – Expand/Collapse Content

The ExpansionTile widget allows you to expand or collapse a section of content by tapping on a title. It's useful for organizing information and presenting additional details on demand.

تتيح لك أداة ExpansionTile توسيع أو طي قسم من المحتوى عن طريق النقر على عنوان. إنه مفيد لتنظيم المعلومات وتقديم تفاصيل إضافية عند الطلب.

Example:

ExpansionTile(
  title: Text('More Info'),
  children: [
    ListTile(title: Text('Details go here')),
    ListTile(title: Text('More details')),
  ],
)

• AlertDialog: Show modal alerts
• PopupMenuButton: Display popup menus
• CupertinoContextMenu: Implement iOS-style context menus
• ExpansionTile: Create expandable/collapsible content sections

• AlertDialog: عرض تنبيهات مشروطة
• PopupMenuButton: عرض القوائم المنبثقة
• CupertinoContextMenu: تنفيذ القوائم السياقية بنمط iOS
• ExpansionTile: إنشاء أقسام محتوى قابلة للتوسيع/الطي