Scaffold: ما هو، الهيكل والودجات في Flutter

ما هو Scaffold في Flutter

Scaffold هي ودجة تخطيط من مكتبة Material Design تشكل الهيكل البصري الأساسي للشاشة. إنها تنفذ نمط تطبيق Material القياسي: الشريط العلوي وجسم الشاشة والقائمة الجانبية والأزرار العائمة. على عكس Container، الذي يحدد ببساطة الأبعاد والنمط، يدير Scaffold الشاشة بأكملها كنظام موحد.

كل تطبيق Flutter مبني على Material Design يبدأ بـ MaterialApp، حيث يتم تغليف كل شاشة داخل Scaffold. إن Scaffold هو الذي يضمن العرض الصحيح لـ AppBar على جميع الأجهزة، مع مراعاة SafeArea لأجهزة iPhone X وما فوق. وهو أيضًا مسؤول عن ترتيب z: يظهر Drawer فوق body، ويظهر SnackBar فوق الواجهة بأكملها، ولكن أسفل نوافذ الحوار.

وفقًا لـ مرجع API Flutter (2026)، فإن Scaffold هو شرط إلزامي للتشغيل الصحيح لودجات مثل SnackBar وBottomSheet وPersistentBottomSheet. بدون Scaffold، تطرح هذه المكونات استثناءً لأنها تعتمد على InheritedWidget Scaffold.of للوصول إلى سياق Scaffold. لذلك، فإن وضع أي محتوى مباشرة في Container بدلاً من Scaffold هو خطأ شائع بين المطورين المبتدئين، يؤدي إلى فقدان وظائف Material.

Scaffold في التسلسل الهرمي للودجات

في تطبيق Flutter النموذجي، يقع Scaffold داخل MaterialApp، عادةً تحت WidgetsApp أو CupertinoApp في التطوير عبر المنصات. ينشئ MaterialApp الـ Navigator والقالب، بينما يحدد Scaffold هيكل الشاشة الحالية. يمكن أن تحتوي كل شاشة على Scaffold خاص بها مع AppBar وDrawer وBottomNavigationBar فريدة، مما يسمح بتخصيص مرن للواجهة لصفحة معينة.

للتخصيص المتقدم، يمكن دمج Scaffold مع NestedScrollView — وهذا يسمح بتنفيذ تأثيرات تمرير معقدة، مثل AppBar قابل للطي مع تأثير الخلفية. ومع ذلك، في معظم الحالات، يكون Scaffold القياسي مع خصائصه كافيًا لبناء شاشة جاهزة للإنتاج.

هيكل Scaffold: الأجزاء الرئيسية للإطار

يتكون Scaffold من عدة مناطق إلزامية واختيارية، كل منها مسؤولة عن جزء معين من الواجهة. دعنا ننظر إلى كل جزء على حدة لفهم كيفية تفاعلها مع بعضها البعض.

AppBar — الشريط العلوي

AppBar هو الشريط العلوي للشاشة الذي يعرض العنوان وزر التنقل والإجراءات. يحصل تلقائيًا على الارتفاع الصحيح البالغ 56dp ويراعي SafeArea للأجهزة ذات النتوء. يمكن تضمين TabBar في AppBar لتبديل علامات التبويب باستخدام الخاصية bottom.

Drawer — القائمة الجانبية

Drawer هو لوحة تنزلق من اليسار وتوفر التنقل عبر أقسام التطبيق. يضيف Scaffold تلقائيًا أيقونة الهامبرغر إلى AppBar إذا كانت الخاصية drawer مضبوطة. يمكن أن يحتوي Drawer على DrawerHeader وListView مع عناصر القائمة ومعلومات المستخدم.

BottomNavigationBar — التنقل السفلي

BottomNavigationBar هو لوحة في الجزء السفلي من الشاشة للتبديل بين الأقسام الرئيسية. يحتوي على 2 إلى 5 أيقونات مع تسميات ويدعم Material 3 مع مؤشر نشط عبر NavigationBar. يضعه Scaffold في أسفل الشاشة، مع تحريك body تلقائيًا لأعلى حتى لا يتداخل المحتوى.

FloatingActionButton — زر الإجراء العائم

FloatingActionButton هو زر دائري يوضع في الزاوية اليمنى السفلية من الشاشة. يتم استخدامه للإجراء الرئيسي على الشاشة، مثل إضافة إدخال جديد أو إرسال رسالة. يدعم Scaffold عدة FABs مع حركة ممتدة من خلال الخصائص الممتدة.

Body — المحتوى الرئيسي

Body هو المنطقة المركزية للشاشة حيث يتم وضع المحتوى الرئيسي. يمكن أن يكون body أي ودجة: Column أو ListView أو GridView أو Stack أو تركيبة مخصصة. يحسب Scaffold تلقائيًا ارتفاع body مع مراعاة AppBar وBottomNavigationBar وSafeArea، مما يلغي الحاجة إلى ضبط الحجم يدويًا.

الخصائص الرئيسية لـ Scaffold

يوفر Scaffold أكثر من 30 خاصية لتخصيص مظهر وسلوك الشاشة. من بينها خصائص إلزامية (body) وخصائص اختيارية تتحكم في الهوامش والخلفية وحالة لوحة المفاتيح. يساعد فهم كل خاصية في تكوين الواجهة بدقة وفقًا لمتطلبات التصميم.

خاصية resizeToAvoidBottomInset مهمة بشكل خاص عند العمل مع النماذج: عندما تكون مضبوطة على true (افتراضيًا)، يقوم Scaffold تلقائيًا بتصغير body عند ظهور لوحة المفاتيح، مما يبقي حقل الإدخال مرئيًا. هذا يلغي الحاجة إلى كتابة مستمعي لوحة مفاتيح مخصصين. للسيناريوهات المخصصة مع SingleChildScrollView، يمكن تعطيل الخاصية.

مثال على استخدام Scaffold في تطبيق

دعنا ننظر إلى مثال عملي لـ Scaffold مع مجموعة كاملة من مكونات Material. ينشئ الكود شاشة مع AppBar وDrawer وBottomNavigationBar وFloatingActionButton وSnackBar — هيكل تطبيق جوال نموذجي في Flutter.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('تطبيقي'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('القائمة')),
            ListTile(title: const Text('الإعدادات'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('تم الإجراء')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

يستخدم المثال NavigationBar من Material 3 بدلاً من BottomNavigationBar القديم. يربط Scaffold تلقائيًا جميع الأجزاء: عند فتح Drawer، يختفي SnackBar؛ عند تبديل علامات التبويب، يتم تحديث body؛ ويبقى FloatingActionButton في مكانه. يضمن ScaffoldMessenger عرض SnackBar حتى مع وجود عدة Scaffold في التسلسل الهرمي.

Scaffold و Material 3: ميزات التكوين

Material 3 (M3) هو تطور Material Design الذي قدمته Google في 2023. تلقت Scaffold في M3 عدة تغييرات: ودجة NavigationBar جديدة بدلاً من BottomNavigationBar، ودعم الألوان الديناميكية عبر ColorScheme.fromSeed وتوصيات محدثة للهوامش وارتفاعات المكونات. لا يتطلب الانتقال إلى M3 استبدال Scaffold — فقط قم بتحديث قالب التطبيق.

لتمكين Material 3 في مشروع، يجب تعيين useMaterial3: true في ThemeData. يقوم Scaffold تلقائيًا بتكييف النمط البصري: تصبح الهوامش أكبر (24dp بدلاً من 16dp)، ويتم إعادة حساب الألوان من اللون الأساسي، ويحصل FloatingActionButton على أحجام أكبر بزوايا دائرية. في نفس الوقت، تظل جميع خصائص Scaffold الحالية وظيفية.

وفقًا لـ مواصفات Material Design 3 (2026)، يُوصى باستخدام NavigationBar بثلاثة إلى خمسة عناصر بدلاً من BottomNavigationBar. يدعم Scaffold كلا الخيارين، لكن NavigationBar يوفر دعمًا أفضل للتكيف و Material You على أجهزة Pixel.

تكوين Scaffold لـ Material 3

للتشغيل الصحيح لـ Scaffold مع M3، يكفي تحديث القالب واستبدال BottomNavigationBar بـ NavigationBar. سيتم حساب الألوان تلقائيًا عبر ColorScheme.fromSeed، وسيضبط Scaffold الهوامش وفقًا للمعايير الجديدة. إذا لزم الأمر، يمكن تجاوز backgroundColor مباشرة.