سلسلة عناصر ( ودجات ) فلاتر -تخطيط الواجهة

1 - Scaffold 

يعتبر عنصر Scaffold  العنصر الأول في أي واجهة بصرية في التطبيق وهو يستخدم تخطيط Material Design  للواجهة 

من خلال Scaffold يمكنك تصميم الصفحة بكل سهولة عبر التخطيط المسبق للواجهة حيث يحوي عدة خصائص أساسية أهمها : 

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

• Drawer يستخدم كلاس Drawer وهو القائمة الجانبية للتطبيق , تفتح عند الضغط على أيقونة القائمة في  الشريط العلوي أو يمكن استدعاؤها بشكل برمجي .

• backgroundColor : وهو لون خلفية ال Scaffold ويأخذ قيمة لون .

• floatingActionButton : يستخدم كلاس Widget وهو الزر العائم الظاهر في الصورة في الأعلى يقوم بتنفيذ امر برمجي مسند له .

• bottomNavigationBar : يستخدم كلاس Widget وهو الشريط السلفي للنافذة يمكن ان يحوي على أيقونات للتنقل السريع بين النوافذ .

إقرأ أيضأ شرح عنصر BottomNavigationBar

• floatingActionButtonLocation : يستخدم كلاس FloatingActionButtonLocation ويحدد موقع الزر العائم  مثل : 

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked

• body : وهو ما تحتويه الصفحة من عناصر 

في المثال أدناه ستتعرف على Scaffold السهل والبسيط : 

class _MyStatefulWidgetState extends State {
 int _count = 0;

 @override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
   title: const Text('Sample Code'  ),
   ),
      backgroundColor: Colors.blueGrey,

      body: Center(
        child: Text('You have pressed the button $_count times.'),

              ),
      bottomNavigationBar: BottomAppBar(
            shape: const CircularNotchedRectangle(),
            child: Container(height: 50.0),
              )
      floatingActionButton: FloatingActionButton(
       onPressed: () => setState(() {
                   _count++;
            }) ,
             tooltip: 'Increment Counter',
             child: const Icon(Icons.add),
            ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      );
 }}

2 - Directionalty 

في الوضع الافتراضي يكون اتجاه عناصر الصفحة من اليسار لليمين , لكن ماذا لو أردت أن يكون الاتجاه من اليمين لليسار وخاصة عند تطويرك لتطبيق عربي ,
الحل ببساطة هو تضمين الـ Scaffold ضمن عنصر Directionalty الذي يحمل خاصية تحديد الاتجاه , مثال : 

 
Directionality(
       textDirection: TextDirection.ltr,
      child: Scaffold(
               body: Container()
              )
);

3 - SafeArea

مع ظهور الأشكال الجديدة للهواتف والتي تحمل تصميم النوتش , يمكن أن يغطي النوتش الشريط العلوي للتطبيق 
ولتجنب هذا الأمر يمكنك ببساطة تضمين الـ Scaffold ضمن عنصر SafeArea, مثال : 

 
SafeArea(
      child: Scaffold(
       body: Container()
      )
);

الخلاصة : 

تم تصميم هذه العناصر لتسهيل عملية التصميم و تم إضافة عناصر وخيارات غير محدودة للتعديل عليها واستخدامها بكفاءة عالية في إطار تصميم لواجهة التطبيق ,
طالعنا أهم العناصر التي تستخدم في أغلب التطبيق و في القسم التالي توجد مراجع مهمة لك في التعرف على كامل الخصائص المتعلقة بالـ Scaffold 

مراجع مهمة : 

Scaffold class - material library - Dart API (flutter.dev)

AppBar class - material library - Dart API (flutter.dev)

BottomNavigationBar class - material library - Dart API (flutter.dev)