AppBar — ما هو، تكوينه ووجدات Flutter

ما هو AppBar في Flutter

AppBar هو مكون Material قياسي للوحة العلوية يظهر في أعلى Scaffold. يحتوي على عنوان الشاشة وزر تنقل (عادة أيقونة «هامبرجر» أو سهم «رجوع») وإجراءات — أيقونات تفتح البحث أو الإعدادات أو وظائف أخرى. يتكيف AppBar تلقائيًا مع المنصة: في Android يستخدم ظل Material سفلي قياسيًا، في iOS — تصميم أكثر تساطحًا مع شفافية.

يقوم AppBar بتنفيذ واجهة PreferredSizeWidget، مما يعني أن ارتفاعه ثابت ومعروف قبل البناء. افتراضيًا، يبلغ ارتفاع AppBar 56دبق على Android و 44دبق على iOS في الوضع العمودي، مع مراعاة SafeArea في الأعلى. تسمح هذه الميزة لـ Scaffold بحساب المساحة المتاحة لـ body مسبقًا، متجنبًا إعادة التركيب أثناء العرض.

وفقًا لـ Flutter Material Library Guide (2026)، مر AppBar بعدة تكرارات: في Flutter 1.x كان حاوية بسيطة بنص، في Flutter 2.x حصل على دعم Material 3 وflexibleSpace، وفي Flutter 3.x — التكامل مع System UI (لون شريط الحالة، الشفافية). يدعم AppBar الحديث Dynamic Color من Material You على أجهزة Android 12+.

بنية AppBar: الخصائص والوسائط

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

Title وleading: تكوين العنوان والتنقل

تقبل الخاصية title أي ويجت، ولكن الأكثر شيوعًا هو استخدام Text مع تكوين النمط عبر TextStyle. للعناوين الطويلة، يوصى بتغليف title في Flexible لضمان قطع النص بشكل صحيح عند ضيق المساحة. تتم استبدال الخاصية leading تلقائيًا بـ BackButton عند التنقل إلى شاشة متداخلة عبر Navigator.push، إذا لم يتم تعيينه صراحة.

Actions: وضع أيقونات الإجراء

تحتوي قائمة actions على ويجدات محاذاة للحافة اليمنى لـ AppBar. يجب ألا يزيد عرض كل عنصر عن 48دبق (معيار Material Design). لتجميع الإجراءات، استخدم PopupMenuButton — هذا يخفي الخيارات الأقل أهمية في قائمة منبثقة ويتوافق مع توصيات Material بشأن كثافة الواجهة.

تخصيص AppBar: الأنماط والألوان والسلوك

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

يتم تعيين لون خلفية AppBar من خلال backgroundColor. إذا لم يتم التحديد، يتم استخدام appBarTheme من ThemeData. في Material 3، يتم حساب لون AppBar تلقائيًا من ColorScheme.primary، ولكن يمكن تجاوزه لشاشة محددة. لـ AppBar شفاف (مستخدم عادة في الملفات الشخصية)، ضبط backgroundColor: Colors.transparent مع elevation: 0.

تتحكم الخاصية elevation في الظل تحت AppBar. القيمة 0 تزيل الظل، مما يخلق تأثير لوحة «مسطحة»، وهو أمر ذو صلة بـ Material 3. القيمة 4 تعطي ظل Material Design قياسيًا. للتحكم المخصص في الظل، استخدم shadowColor — لون الظل الذي يفصل اللوحة بصريًا عن المحتوى.

للتحكم في لون النص في AppBar، استخدم foregroundColor. تؤثر هذه الخاصية على لون العنوان والأيقونات والنص في actions. عند تغيير backgroundColor، يتم اختيار foregroundColor متباين تلقائيًا، ولكن يمكن فرضه للتصاميم غير القياسية.

SliverAppBar: نسخة متحركة من AppBar

SliverAppBar هو امتداد AppBar للاستخدام داخل CustomScrollView يدعم الرسوم المتحركة عند التمرير: الطي وتأثير التنوع والتثبيت. وبالخلاف من AppBar القياسي، فإن SliverAppBar هو ويجت sliver ويمكنه تغيير الحجم ديناميكيًا حسب موقع التمرير.

يتم تحديد الأوضاع الرئيسية لـ SliverAppBar من خلال المزيج من خصائص pinned وfloating وsnap. في وضع pinned، تبقى اللوحة دائمًا مرئية في أعلى الشاشة. في وضع floating، تظهر عند التمرير للخلف. يخلق المزيج floating + snap سلوك لوحة «لاصقة» تظهر عند أدنى تمرير للأعلى، وهو ما يستخدم عادة في خلافات الأخبار.

وفقًا لـ Flutter API SliverAppBar (2026)، لاستخدام SliverAppBar يلزم استبدال ListView أو Column العادي بـ CustomScrollView يحتوي على ويجدات sliver. يستمر Scaffold في العمل بشكل صحيح، ولكن يجب أن تكون خاصية appBar لـ Scaffold فارغة — يتم وضع SliverAppBar داخل CustomScrollView كأول sliver.

مثال تكوين AppBar في تطبيق

دعنا نلقي نظرة على مثال AppBar مع البحث والقائمة المنبثقة وTabBar. يوضح هذا الكود تكوينًا نموذجيًا للوحة العلوية في تطبيق إنتاجي على Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('الكتالوج'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('الإعدادات')),
          const PopupMenuItem(value: 'about', child: Text('حول التطبيق')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

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