بنية الصفحة الرئيسية

void main() {
  runApp(MyApp());
}

void main() {
  runApp(MyApp());
}

🧩 1. void main():

✅ ما هي؟

• هذه هي نقطة البداية لأي برنامج بلغة Dart (اللغة التي تُستخدم في Flutter).
• يعني: عندما تبدأ تشغيل التطبيق، أول شيء يتم تنفيذه هو هذا الدالة main().

✅ لماذا void؟

• كلمة void تعني أن هذه الدالة لا تُرجع أي قيمة (أي لا تعيد نتيجة).

🧩 2. runApp(MyApp());

✅ ما هي؟

• هذه دالة من مكتبة Flutter الأساسية.
• تقوم بــ تشغيل التطبيق على شاشة الهاتف.
• تأخذ ويدجت (Widget) كوسيط – وهذا الوسيط هو عادةً أول واجهة في التطبيق.

في هذا المثال:

runApp(MyApp());

runApp(MyApp());

• نحن نطلب من Flutter أن يعرض واجهة التطبيق التي تعرفنا عليها في كلاس اسمه MyApp.

void main() {
  runApp(
    MaterialApp(
      title: "Main App",
      home: Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          title: Text("Main App", style: TextStyle(color: Colors.green)),
          elevation: 5,
        ),
        body: Center(child: Text("أهلا بكم بالدرس الأول")),
      ),
    ),
  );
}

void main() {
  runApp(
    MaterialApp(
      title: "Main App",
      home: Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          title: Text("Main App", style: TextStyle(color: Colors.green)),
          elevation: 5,
        ),
        body: Center(child: Text("أهلا بكم بالدرس الأول")),
      ),
    ),
  );
}

🔤 ما هو MyApp؟

هذا يكون عادة ويدجت رئيسي (Main Widget)، يكون معرف في مكان آخر من الكود، مثل:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'تطبيقي',
      home: Scaffold(
        appBar: AppBar(title: Text('مرحبًا')),
        body: Center(child: Text('أهلاً بالعالم')),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'تطبيقي',
      home: Scaffold(
        appBar: AppBar(title: Text('مرحبًا')),
        body: Center(child: Text('أهلاً بالعالم')),
      ),
    );
  }
}

📌 تسلسل التشغيل في Flutter:

1. يبدأ من main().
2. ينفذ runApp(MyApp()).
3. يقوم Flutter برسم الواجهة التي تعود من MyApp.
4. MyApp ترجع MaterialApp (غالبًا).
5. ثم MaterialApp تعرض صفحة البداية home.

✅ ملاحظة للمبتدئين:

إذا أردت تشغيل واجهتك الخاصة، كل ما عليك فعله هو تعديل محتوى MyApp بحيث تعرض ما تريد باستخدام Widgets.

✅ أولًا: ما هو MaterialApp؟

📌 التعريف:

MaterialApp هو الويدجت الرئيسي في تطبيقات Flutter المبنية باستخدام تصميم Material Design من Google.
وهو المسؤول عن ضبط إعدادات التطبيق العامة، مثل:

• العنوان (title)
• الثيم (Theme)
• اللغة (Locale)
• التنقل بين الصفحات (Routing)
• الصفحة الرئيسية (home)

⭐️ الاستخدام النموذجي:

void main() {
  runApp(MaterialApp(
    title: 'My App',
    theme: ThemeData(primarySwatch: Colors.blue),
    home: MyHomePage(),
  ));
}

void main() {
  runApp(MaterialApp(
    title: 'My App',
    theme: ThemeData(primarySwatch: Colors.blue),
    home: MyHomePage(),
  ));
}

🧩 أهم الخصائص:

📍 لماذا نستخدم MaterialApp؟

• يوفر بنية جاهزة لتصميم Material Design.
• يسهل التعامل مع التنقل بين الصفحات.
• يسمح بتخصيص الثيم العام للتطبيق.
• يُعتبر الغلاف العام لباقي ويدجتات التطبيق.

✅ ثانيًا: ما هو Scaffold؟

📌 التعريف:

Scaffold هو ويدجت يوفّر الهيكل الأساسي للشاشة (صفحة واحدة) بتصميم Material، ويُستخدم عادةً داخل الصفحة التي تظهر ضمن home أو route.

🧩 يقدم لك Scaffold العديد من المكونات الجاهزة:

⭐️ مثال استخدام:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('الصفحة الرئيسية')),
      body: Center(child: Text('مرحبًا بك')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('الصفحة الرئيسية')),
      body: Center(child: Text('مرحبًا بك')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

📍 الفرق بين MaterialApp و Scaffold:

📚 ملاحظات مهمة:

• لا يمكن استخدام Scaffold بدون MaterialApp لأن Scaffold يعتمد على Material Design context.
• يمكنك تخصيص Scaffold لعرض مختلف عناصر الواجهة مثل AppBar و Drawer دون الحاجة إلى بنائها يدويًا.