استكشاف Scaffold و MaterialApp في Flutter: دليل شامل

Scaffold و MaterialApp في Flutter

 مقدمة “استكشاف Scaffold و MaterialApp في Flutter: دليل شامل”:

درسنا الجديد حول استكشاف Scaffold و MaterialApp في Flutter! يعتبر Scaffold و MaterialApp من أهم عناصر واجهة المستخدم في Flutter، حيث يسهلان علينا بناء تطبيقات جميلة ووظيفية.

في هذا الدرس، سنقوم بفحص كل من Scaffold و MaterialApp بشكل مفصل، حيث سنتعرف على وظائف كل منهما وكيفية استخدامهما بشكل صحيح في تطوير تطبيقات Flutter. سنقدم أمثلة عملية وتطبيقات عملية لتوضيح كيفية الاستفادة القصوى من هذين العنصرين الأساسيين في بناء تطبيقاتك.

بدءًا من فهم وظيفة كل من Scaffold و MaterialApp، وصولًا إلى استخداماتهما الأساسية والمتقدمة، ستتمكن بنهاية هذا الدرس من استخدام Scaffold و MaterialApp بثقة وفعالية في مشاريعك الخاصة.

الفرق بين Scaffold vs MaterialApp

“Scaffold” و “MaterialApp” هما عنصران مهمان في بنية تطبيقات Flutter، وكل منهما يقدم وظائف مختلفة:

Scaffold:

وظيفته:

Scaffold يوفر تصميمًا قياسيًا لتطبيقات Flutter المبنية على مفهوم Material Design.

يُستخدم لإنشاء واجهة مستخدم بسيطة ومبدئية ويوفر هيكل أساسي للتطبيقات.

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

يحتوي Scaffold على عناصر واجهة المستخدم الأساسية مثل AppBar (شريط العنوان العلوي) وBottomNavigationBar (شريط العنوان السفلي) وDrawer (القائمة الجانبية) و FloatingActionButton (زر الإجراء البارز).

يتضمن Scaffold عناصر واجهة مستخدم مشتركة مثل الشريط العلوي (AppBar)، ومساحة العرض (body)، والقائمة السفلية (bottomNavigationBar)، والقوائم الجانبية (Drawer).
يساعد Scaffold المطورين في تقديم واجهة مستخدم بسيطة ولكن قوية بشكل كافٍ لمعظم تطبيقات Flutter.

MaterialApp:

وظيفته:

MaterialApp هو عنصر أساسي لتطبيقات Flutter التي تستخدم تصميمًا مبنيًا على مفهوم Material Design.

يقوم MaterialApp بتحديد بيئة التطبيق وتضمين العديد من الإعدادات الأساسية مثل اللغة، والثيم، وعناصر المستخدم الافتراضية.

استخدامه: MaterialApp يُعتبر نقطة البداية لتطبيق Flutter، ويُستخدم عادة في main.dart كـ “Root widget“.

يمكن استخدام MaterialApp لتعريف مظهر التطبيق بأسلوب Material Design، وتكوين الإعدادات العامة للتطبيق مثل اللغة والثيم وموقع الخطوط وغيرها.

MaterialApp هو عنصر رئيسي في Flutter ويُستخدم لتحديد تطبيق بناءً على مفهوم Material Design من Google.
يُستخدم MaterialApp لتكوين العديد من الميزات التي تكون مشتركة لجميع شاشات التطبيق، مثل العنوان، وسُمك الخط، ومظهر الشريط العلوي.
يحتوي MaterialApp على عدة خصائص مهمة مثل home وroutes وtheme التي تمكن المطور من تخصيص سلوك التطبيق بشكل كامل.
لتوضيح الفكرة، يمكنك تصور MaterialApp كالإطار الرئيسي للتطبيق، بينما Scaffold هو البنية الداخلية للشاشة. Scaffold يساعد في تنظيم العناصر الأساسية على الشاشة مثل العنوان والقوائم والأزرار، بينما MaterialApp يحدد كيف يظهر التطبيق بشكل عام ويحتوي على الإعدادات الأساسية للتطبيق.

الاختلافات الرئيسية بينهما:

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

مثال:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Flutter App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}

في هذا المثال، MaterialApp تحدد تطبيقًا بناءً على مفهوم Material Design وتعرض Scaffold كواجهة مستخدم رئيسية.

شرح الكود

import 'package:flutter/material.dart';

هذا السطر يستورد المكتبة material.dart التي تحتوي على مكونات وأدوات تصميم Material Design في Flutter.

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

هنا، يبدأ التطبيق باستدعاء الدالة main()، والتي تقوم بتشغيل تطبيق Flutter باستخدام runApp() وتمرير MyApp() كمعامل. MyApp() هو الـ “Root widget” للتطبيق.

class MyApp extends StatelessWidget {

هنا نعرف الكلاس MyApp الذي يمتد من StatelessWidget، مما يعني أنه لا يحتوي على حالة داخلية قابلة للتغيير.

@override
Widget build(BuildContext context) {

داخل الكلاس MyApp، نعيد تعريف الدالة build() التي تقوم بإرجاع شجرة عناصر الواجهة الخاصة بالتطبيق.

return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);

هنا نستخدم MaterialApp كـ “Root widget”، والذي يحتوي على ميزات تهيئة التطبيق مثل عنوان التطبيق والمظهر الافتراضي. داخل MaterialApp، نستخدم Scaffold كـ “home” ونحدد شريط العنوان ومحتوى الصفحة، حيث يتم وضع عنصر Text “Hello, World!” في وسط الصفحة.

 شجرة الويدجت

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Center
        └── Text

MaterialApp: هو الـ “Root widget” الذي يحتوي على تهيئة التطبيق العامة.
Scaffold: يوفر هيكل الصفحة الأساسي، بما في ذلك شريط العنوان والمحتوى الرئيسي.
AppBar: يحتوي على شريط العنوان الذي يعرض عنوان الصفحة.
Text: نص يعرض عنوان الصفحة.
Center: يُمكن استخدامه لوضع عناصر واجهة المستخدم في المركز الأفقي والرأسي للشاشة.
Text: نص آخر يعرض “Hello, World!” في وسط الصفحة.
هذه هي شجرة الويدجت لتطبيقك الذي يحتوي على MaterialApp مع Scaffold كعنصر فرعي.

تطبيق شامل على Scaffold vs MaterialApp

سننشيء تطبيقًا بسيطًا يوضح استخدام كل من Scaffold و MaterialApp في Flutter.

سنقوم ببناء تطبيق يعرض شاشة بسيطة تحتوي على AppBar وعنصر نصي في وسط الصفحة.

نقم بإنشاء مشروع Flutter جديد باستخدام الأمر التالي في سطر الأوامر أو في Terminal:

flutter create scaffold_vs_material_app

بمجرد إنشاء المشروع، افتح المجلد الخاص به في محرر النصوص الذي تفضله.

في المجلد lib، ستجد ملفًا يسمى main.dart. نقم بفتحه.

نستبدل الكود في main.dart بالكود التالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// تحديد عنوان التطبيق
title: 'Scaffold vs MaterialApp',

// تحديد المظهر الافتراضي للتطبيق
theme: ThemeData(
primarySwatch: Colors.blue,
),

// تحديد الصفحة الرئيسية للتطبيق
home: Scaffold(
// شريط العنوان
appBar: AppBar(
title: Text('Scaffold vs MaterialApp'),
),

// محتوى الصفحة
body: Center(
child: Text(
'This is a simple Scaffold vs MaterialApp app',
textAlign: TextAlign.center,
),
),
),
);
}
}

هيا لنشرح هذا الكود خطوة بخطوة:

-نستورد المكتبات الضرورية من Flutter.

-تعريف الدالة main() التي تشغل التطبيق. تقوم بتشغيل التطبيق بواسطة runApp() وتمرير MyApp() كمعامل.

-يتم تعريف MyApp كـ StatelessWidget. تُعتبر هذه الفئة لتصميم الواجهات التي لا تحتوي على حالة قابلة للتغيير.

-في داخل MyApp، نُعرف MaterialApp كـ “Root widget“. يتيح لنا MaterialApp تحديد عنوان التطبيق والمظهر الافتراضي والصفحة الرئيسية.

-يتم تحديد الـ title للتطبيق باستخدام خاصية title في MaterialApp.

-يتم تحديد المظهر الافتراضي للتطبيق باستخدام خاصية theme في MaterialApp، حيث يتم تعيين اللون الرئيسي للتطبيق على اللون الأزرق.

-الـ home يحدد الصفحة الرئيسية للتطبيق، والتي تحتوي على Scaffold.

-Scaffold يُعرف لإنشاء البنية الرئيسية للصفحة، ويحتوي على appBar وbody.

-appBar يحدد شريط العنوان، حيث يتم تعيين عنوان “Scaffold vs MaterialApp”.

-body يحدد محتوى الصفحة، حيث يتم وسط نص بسيط يعرض “This is a simple Scaffold vs MaterialApp app“.

بمجرد تحرير الكود، قم بحفظ الملف وقم بتشغيل التطبيق باستخدام الأمر التالي في سطر الأوامر أو Terminal:

flutter run

بهذه الخطوات، يجب أن تشاهد تطبيقًا بسيطًا يستخدم Scaffold و MaterialApp في Flutter.

انشيء مشروعا متكامل عن Scaffold vs MaterialApp

سنقوم بإنشاء مشروع Flutter متكامل يوضح استخدام Scaffold و MaterialApp.

سيتم إنشاء تطبيق بسيط يتضمن شريط عنوان وزرين في وسط الصفحة، حيث يقوم الزر الأول بالتبديل بين السمة الفاتحة والسمة الداكنة، والزر الثاني بفتح صفحة جديدة.

بدايةً، يجب علينا إنشاء مشروع Flutter جديد. يمكنك استخدام سطر الأوامر أو Terminal باستخدام الأمر التالي:

flutter create scaffold_vs_material_app
بعد ذلك، نقم بفتح المجلد الخاص بالمشروع الذي تم إنشاؤه في محرر النصوص الخاص بك.

ثم، نستبدل الكود في ملف lib/main.dart بالكود التالي:

import 'package:flutter/material.dart';
import 'package:scaffold_vs_material_app/second_screen.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scaffold vs MaterialApp',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scaffold vs MaterialApp'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
Theme.of(context).brightness == Brightness.light
? ThemeMode.dark
: ThemeMode.light;
},
child: Text('Toggle Theme'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Text('Open Second Screen'),
),
],
),
),
);
}
}

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Text(
'This is the second screen!',
style: TextStyle(fontSize: 24),
),
),
);
}
}

ثم، نقم بإنشاء ملف جديد بعنوان second_screen.dart في نفس المجلد، وقم بإضافة الكود التالي:

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Text(
'This is the second screen!',
style: TextStyle(fontSize: 24),
),
),
);
}
}

الآن، نقم بتشغيل التطبيق باستخدام الأمر التالي في سطر الأوامر أو Terminal:

flutter run

بهذه الخطوات، يجب أن تشاهد تطبيقًا بسيطًا يستخدم Scaffold و MaterialApp في Flutter، حيث يمكنك التبديل بين السمة الفاتحة والسمة الداكنة وفتح صفحة ثانية.

تطبيق يوضح الاختلاف بين Scaffold و MaterialApp في Flutter.

سنقوم بإنشاء تطبيق بسيط يعرض صفحة مع AppBar وعنصر نصي في وسط الصفحة، ثم سنقوم بتطبيق ثيم مخصص باستخدام MaterialApp.

نقم بإنشاء مشروع Flutter جديد باستخدام الأمر التالي في سطر الأوامر أو Terminal:

flutter create scaffold_vs_material_app

ثم نستبدل الكود في ملف main.dart بالكود التالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// تحديد عنوان التطبيق
title: 'Scaffold vs MaterialApp',

// تحديد المظهر الافتراضي للتطبيق
theme: ThemeData(
// تغيير اللون الرئيسي للتطبيق إلى اللون الأخضر
primarySwatch: Colors.green,
// تغيير نمط الخط للنصوص في التطبيق
textTheme: TextTheme(
// تحديد نمط الخط لعنوان الصفحة
headline6: TextStyle(color: Colors.red),
// تحديد نمط الخط للنص العادي في الصفحة
bodyText2: TextStyle(color: Colors.blue),
),
),

// تحديد الصفحة الرئيسية للتطبيق
home: Scaffold(
// شريط العنوان
appBar: AppBar(
// استخدام عنوان مخصص
title: Text(
'Scaffold vs MaterialApp',
// تحديد نمط الخط لعنوان الصفحة
style: Theme.of(context).textTheme.headline6,
),
),

// محتوى الصفحة
body: Center(
child: Text(
'This is a simple Scaffold vs MaterialApp app',
textAlign: TextAlign.center,
// تحديد نمط الخط للنص العادي في الصفحة
style: Theme.of(context).textTheme.bodyText2,
),
),
),
);
}
}

هذا التطبيق يقوم بتطبيق ثيم مخصص باستخدام MaterialApp، حيث يتم تغيير اللون الرئيسي للتطبيق إلى اللون الأخضر، وتغيير نمط الخط لعنوان الصفحة إلى اللون الأحمر ونمط الخط للنص العادي في الصفحة إلى اللون الأزرق.

لاحظ أن هذا مجرد مثال بسيط لاستخدام MaterialApp و Scaffold في Flutter وتطبيق ثيم مخصص. يمكنك توسيعه وتعديله حسب احتياجاتك. قم بحفظ الملف وتشغيل التطبيق باستخدام الأمر flutter run في سطر الأوامر أو Terminal.

اختبار على Scaffold vs MaterialApp مع الاجابات

هاكم اختبارا  بسيطا  حول Scaffold و MaterialApp في Flutter مع الإجابات:

السؤال الأول:
ما الفرق بين MaterialApp و Scaffold في Flutter؟

أ) MaterialApp هو عنصر واجهة المستخدم الجذري الذي يحدد تهيئة التطبيق العامة، بينما Scaffold يستخدم لبناء هيكل الصفحة الأساسي مع شريط عنوان ومحتوى الصفحة.

السؤال الثاني:
ما هو الدور الرئيسي لـ AppBar في Scaffold؟

ب) يستخدم لعرض شريط العنوان في الصفحة، الذي يحتوي على عنوان الصفحة.

السؤال الثالث:
من بين الخيارات التالية، أيهما يحتوي على خاصية لتحديد عنوان التطبيق؟

ج) MaterialApp

السؤال الرابع:
ما هو الاستخدام الأساسي لـ MaterialApp في Flutter؟

أ) تحديد التهيئة العامة للتطبيق مثل العنوان والمظهر الافتراضي والصفحة الرئيسية.

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

ب) يستخدم لعرض شريط العنوان في الصفحة، الذي يحتوي على عنوان الصفحة.

ج) MaterialApp

أ) تحديد التهيئة العامة للتطبيق مثل العنوان والمظهر الافتراضي والصفحة الرئيسية.

السؤال الخامس:
ما هي وظيفة خاصية home في MaterialApp؟

أ) تحديد لون الخلفية للتطبيق.

ب) تحديد الشاشة الرئيسية للتطبيق.

ج) تحديد نوع الخط المستخدم في التطبيق.

د) تحديد الأيقونة التي تظهر في شريط العنوان.

السؤال السادس:
ما الخاصية التي تستخدم لتحديد اللون الرئيسي لتطبيقك في MaterialApp؟

أ) primaryColor

ب) backgroundColor

ج) accentColor

د) primarySwatch

الإجابات:
ب) تحديد الشاشة الرئيسية للتطبيق.

د) primarySwatch

السؤال السابع:
ما هو العنصر الذي يستخدم لعرض الشاشة الرئيسية في MaterialApp؟

أ) MainScreen

ب) HomeScreen

ج) InitialScreen

د) Scaffold

السؤال الثامن:
ما هي وظيفة خاصية theme في MaterialApp؟

أ) تحديد المظهر العام للتطبيق مثل الألوان والخطوط.

ب) تحديد الصفحة الرئيسية للتطبيق.

ج) تحديد العنوان الرئيسي للتطبيق.

د) تحديد الأيقونة التي تظهر في شريط العنوان.

السؤال التاسع:
ما هو العنصر الذي يحتوي على الشريط العلوي والمحتوى الرئيسي في Scaffold؟

أ) Body

ب) Content

ج) AppBar

د) MainContent

السؤال العاشر:
ما هي وظيفة خاصية appBar في Scaffold؟

أ) تحديد لون الخلفية للتطبيق.

ب) تحديد الشريط العلوي الذي يظهر على الصفحة.

ج) تحديد نوع الخط المستخدم في التطبيق.

د) تحديد الأيقونة التي تظهر في شريط العنوان.

الإجابات:
ب) HomeScreen

أ) تحديد المظهر العام للتطبيق مثل الألوان والخطوط.

ج) AppBar

ب) تحديد الشريط العلوي الذي يظهر على الصفحة.