عنصر شريط العنوان في فلاتر AppBar Widget
التعامل مع شريط العنوان في فلاتر
AppBar widget in flutter
في فلاتر (Flutter)، تُستخدم الـ “AppBar” ويدجت (Widget) لإنشاء شريط العنوان (AppBar) الذي يظهر في أعلى الشاشة داخل التطبيق. يعتبر شريط العنوان من العناصر الهامة في تصميم التطبيقات حيث يعرض عادةً العنوان الرئيسي للصفحة الحالية وبعض الأزرار أو الإجراءات المهمة.
يوفر ويدجت “AppBar” العديد من الخصائص التي يمكن استخدامها لتخصيص شريط العنوان وفقًا لاحتياجات التطبيق.
يمكنك تغيير لون الخلفية، إضافة أزرار وأيقونات لتنفيذ إجراءات معينة، تحديد ارتفاع شريط العنوان، وغير ذلك الكثير.
تطبيق 1: مثال بسيط على كيفية استخدام “AppBar” ويدجت في فلاتر:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('شريط العنوان'),
backgroundColor: Colors.blue, // تغيير لون الخلفية
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على الزر
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على الزر
},
),
],
),
body: Center(
child: Text('مرحباً بالعالم!'),
),
),
);
}
}
في هذا المثال، قمنا بإنشاء تطبيق بسيط يحتوي على شريط عنوان مخصص باستخدام “AppBar” ويدجت.
تم تغيير لون خلفية الشريط إلى اللون الأزرق وتمت إضافة زرين إلى الجانب الأيمن من الشريط يقوم كل منهما بأداء إجراء معين عند النقر عليه.
شرح الكود :
هيا نقوم بشرح الكود السابق في أسطر منفصلة:
استيراد المكتبات اللازمة من فلاتر:
import 'package:flutter/material.dart';
تعريف الدالة الرئيسية لتشغيل التطبيق:
void main() {
runApp(MyApp());
}
إنشاء فئة التطبيق الخاصة بنا:
class MyApp extends StatelessWidget {تنفيذ الواجهة المستخدمة:
@override
Widget build(BuildContext context) {
return MaterialApp(
تعيين الشاشة الرئيسية للتطبيق:
home: Scaffold(
تعريف شريط العنوان باستخدام “AppBa” ويدجت:
appBar: AppBar(
تحديد عنوان شريط العنوان:
title: Text('شريط العنوان'),تخصيص لون خلفية شريط العنوان:
backgroundColor: Colors.blue,
إضافة أزرار إلى شريط العنوان:
actions: [
إضافة زر البحث:
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على الزر
},
),
إضافة زر الإعدادات:
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على الزر
},
),
إغلاق قائمة الأزرار:
],
تعريف جسم الصفحة الرئيسية:
body: Center(
child: Text('مرحباً جوجو!'),
),
إغلاق الـ “Scaffold”:
),
إغلاق الـ “MaterialApp”:
),
إغلاق فئة التطبيق:
} }
هذه هي الأسطر التي تشكل الكود السابق، حيث يتم فيها بناء وتخصيص تطبيق فلاتر بشكل بسيط وإضافة شريط عنوان مخصص باستخدام “AppBa” ويدجت.
خصائص AppBar widget
في Flutter، يحتوي ويدجت AppBar على العديد من الخصائص التي يمكن استخدامها لتخصيص شريط العنوان في التطبيق. إليك قائمة بأهم الخصائص المتوفرة في ويدجت AppBar:
title: يستخدم لتحديد عنوان شريط العنوان. يمكنك استخدام ويدجت Text أو أي ويدجت آخر لعرض العنوان.
actions: يمكن استخدامه لإضافة أزرار أو إجراءات إضافية إلى شريط العنوان. يجب أن يكون قائمة من الأزرار أو الأيقونات.
backgroundColor: يستخدم لتحديد لون خلفية شريط العنوان.
elevation: يحدد الظل الذي يتم عرضه تحت شريط العنوان. يمكن استخدامه لتعيين عمق الظل.
leading: يمكن استخدامه لإضافة ويدجت في الجزء الأيسر من شريط العنوان، عادة ما يستخدم لإضافة زر العودة للصفحة السابقة.
automaticallyImplyLeading: يحدد ما إذا كان يجب على شريط العنوان أن يقوم تلقائياً بتضمين زر العودة للصفحة السابقة أو لا.
centerTitle: يحدد ما إذا كان يجب توسيط عنوان شريط العنوان أم لا.
flexibleSpace: يمكن استخدامه لتوسيع المساحة المتاحة لشريط العنوان، ويمكن استخدامه لعرض محتوى مخصص مثل الصور أو الألوان.
هذه بعض الخصائص الرئيسية لويدجت AppBar في Flutter، ويمكن استخدامها لتخصيص شريط العنوان وفقًا لاحتياجات التطبيق.
بالطبع، إليك مزيدًا من الخصائص التي يمكن استخدامها مع ويدجت AppBar في Flutter:
brightness: يحدد سطوع عناصر شريط العنوان، حيث يمكن تعيينه إما إلى Brightness.light أو Brightness.dark.
textTheme: يمكن استخدامه لتخصيص نمط النص في عناصر شريط العنوان، مثل حجم الخط والوزن واللون وغيرها.
iconTheme: يستخدم لتخصيص نمط الأيقونات في عناصر شريط العنوان، مثل حجم الأيقونة واللون وغيرها.
textTheme: يمكن استخدامه لتخصيص نمط النص في عناصر شريط العنوان مثل حجم الخط والوزن واللون وغيرها.
toolbarOpacity: يحدد شفافية شريط العنوان، حيث يمكن تعيين قيمة من 0.0 إلى 1.0 حيث 0.0 يعني شريط عنوان مخفي تمامًا و 1.0 يعني شريط عنوان غير شفاف.
bottom: يمكن استخدامه لإضافة عنصر إلى الجزء السفلي من شريط العنوان مثل عنصر TabBar أو عنصر PreferredSize.
shape: يستخدم لتخصيص شكل شريط العنوان، مثل تقريب الزوايا أو تغيير الشكل بشكل كامل.
titleSpacing: يحدد المسافة بين عنصر العنوان وباقي عناصر شريط العنوان.
actionsIconTheme: يمكن استخدامه لتخصيص نمط الأيقونات في قائمة الأزرار الموجودة في شريط العنوان.
هذه بعض الخصائص الإضافية التي يمكن استخدامها مع ويدجت AppBar في Flutter لتخصيص شكل وسلوك شريط العنوان بالطريقة التي تناسب تطبيقك.
تطبيق 2: إنشاء تطبيق خطوة بخطوة يستخدم AppBar widget with their properties
سنقوم بإنشاء تطبيق بسيط يستخدم ويدجت AppBar مع بعض الخصائص التي تم ذكرها سابقًا.
سنقوم بتعيين عنوان للشريط وإضافة بعض الأزرار.
خطوة 1: إعداد المشروع
قم بإنشاء مشروع جديد Flutter عبر أمر flutter create my_app في محرر الأوامر أو Terminal.
خطوة 2: تحرير ملف main.dart
قم بتعديل ملف main.dart ليحتوي على الكود التالي:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق Flutter مع AppBar'),
backgroundColor: Colors.green, // تخصيص لون الخلفية
elevation: 5.0, // تحديد عمق الظل
centerTitle: true, // توسيط العنوان
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على الزر
print('تم البحث');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على الزر
print('تم الضبط');
},
),
],
),
body: Center(
child: Text(
'مرحبا بك في تطبيق Flutter!', style: TextStyle(fontSize: 24.0),
),
),
);
}
}
خطوة 3: تشغيل التطبيق
نقم بتشغيل التطبيق عبر الأمر flutter run في محرر الأوامر أو Terminal.
بهذه الطريقة، يمكننا إنشاء تطبيق Flutter بسيط يستخدم ويدجت AppBar مع بعض الخصائص المخصصة، مثل تخصيص لون الخلفية، وتحديد عمق الظل، وتوسيط العنوان، وإضافة بعض الأزرار.
شرح الكود :
سأقوم بشرح الكود خطوة بخطوة:
الخطوط 1-3: استيراد حزم Flutter اللازمة وتعريف دالة ال main التي تشغل التطبيق.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
الخطوط 5-15: تعريف فئة MyApp التي تمثل التطبيق بأكمله. يتم فيها إعادة MaterialApp وتحديد MyHomePage كشاشة رئيسية.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}الخطوط 17-43: تعريف فئة MyHomePage التي تمثل الشاشة الرئيسية للتطبيق. يتم فيها تعريف Scaffold مع AppBar مخصص.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق Flutter مع AppBar'),
backgroundColor: Colors.green, // تخصيص لون الخلفية
elevation: 5.0, // تحديد عمق الظل
centerTitle: true, // توسيط العنوان
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على الزر
print('تم البحث');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على الزر
print('تم الضبط');
},
),
],
),
body: Center(
child: Text(
'مرحبا بك في تطبيق Flutter!',
style: TextStyle(fontSize: 24.0),
),
),
);
}
}الخطوط 20-40: تعريف AppBar مخصص مع عنوان، لون خلفية، عمق ظل، وأزرار مخصصة.
الخطوط 23-39: تعريف Body للـ Scaffold يحتوي على عنصر واحد وهو Text وسطي.
باستخدام هذه الخطوات، يتم إنشاء تطبيق بسيط في Flutter يستخدم ويدجت AppBar مع بعض الخصائص المخصصة مثل لون الخلفية وتحديد عمق الظل وتوسيط العنوان وإضافة بعض الأزرار.
شجرة الويدجيتات
بناءً على الكود السابق وتوضيح التسلسل الهرمي للويدجتات، يمكن تمثيل شجرة الويدجتات على النحو التالي:
MyApp
└── MaterialApp
└── MyHomePage
└── Scaffold
├── AppBar
│ ├── IconButton (Search Icon)
│ └── IconButton (Settings Icon)
└── Center
└── Text
هذه الشجرة توضح التسلسل الهرمي للويدجتات في التطبيق.
يتم تضمين كل ويدجت داخل الويدجت الذي يحتوي عليه. على سبيل المثال، AppBar يحتوي على أزرار البحث والإعدادات، بينما Scaffold يحتوي على AppBar وBody.
تطبيق 3 : على استخدام AppBar وخصائصه
سننشء تطبيقا أخر يستخدم AppBar ويوضح بعض خصائصه:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter AppBar شامل'),
backgroundColor: Colors.blue, // تحديد لون الخلفية
elevation: 4.0, // تحديد عمق الظل
centerTitle: true, // توسيط العنوان
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على زر البحث
print('تم البحث');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على زر الإعدادات
print('تم الضبط');
},
),
],
),
body: Center(
child: Text(
'مرحبًا بك في تطبيق Flutter الشامل!',
style: TextStyle(fontSize: 24.0),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// أداء إجراء بالضغط على زر الفلوتنج أكشن
print('تم الضغط على الفلوتنج أكشن');
},
child: Icon(Icons.add),
backgroundColor: Colors.green, // تخصيص لون زر الفلوتنج أكشن
),
);
}
}
هذا التطبيق يتضمن عنوانًا مخصصًا لـ AppBar بالإضافة إلى زري بحث وإعدادات، كما أنه يحتوي على زر فلوتنج أكشن. قم بتشغيل التطبيق باستخدام Flutter SDK للاستمتاع برؤية كيفية عمل AppBar وخصائصه في التطبيق.
شرح الكود:
الخطوط 1-4: استيراد حزم Flutter اللازمة وتعريف دالة ال main التي تشغل التطبيق.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
الخطوط 6-11: تعريف فئة MyApp التي تمثل التطبيق بأكمله. يتم فيها إعادة MaterialApp وتحديد MyHomePage كشاشة رئيسية.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
الخطوط 13-44: تعريف فئة MyHomePage التي تمثل الشاشة الرئيسية للتطبيق. يتم فيها تعريف Scaffold مع AppBar مخصص، وBody يحتوي على عنصر واحد وهو Text وسطي، وزر فلوتنج أكشن.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter AppBar شامل'),
backgroundColor: Colors.blue, // تحديد لون الخلفية
elevation: 4.0, // تحديد عمق الظل
centerTitle: true, // توسيط العنوان
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على زر البحث
print('تم البحث');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على زر الإعدادات
print('تم الضبط');
},
),
],
),
body: Center(
child: Text(
'مرحبًا بك في تطبيق Flutter الشامل!',
style: TextStyle(fontSize: 24.0),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// أداء إجراء بالضغط على زر الفلوتنج أكشن
print('تم الضغط على الفلوتنج أكشن');
},
child: Icon(Icons.add),
backgroundColor: Colors.green, // تخصيص لون زر الفلوتنج أكشن
),
);
}
}
هذه الشروحات السطرية توضح الغرض والوظيفة لكل قطعة من الكود في التطبيق الخاص بك.
شجرة الويدجيتات
بناءً على الكود الذي تم توضيحه، يمكن تمثيل شجرة الويدجيتات على النحو التالي:
MyApp
└── MaterialApp
└── MyHomePage
└── Scaffold
├── AppBar
│ ├── IconButton (Search Icon)
│ └── IconButton (Settings Icon)
├── Center
│ └── Text
└── FloatingActionButtonهذه الشجرة توضح التسلسل الهرمي للويدجتات في التطبيق. كل ويدجت موضحة تحت الويدجت الأب التي تحتوي عليها. على سبيل المثال، AppBar يحتوي على IconButton لزر البحث وزر الإعدادات، بينما Scaffold يحتوي على AppBar وBody وزر الفلوتنج أكشن.
تطبيق 4: عن خصائص ال AppBar
سننشيء تطبيقًا يستخدم AppBar بالإضافة إلى بعض العناصر الأخرى مثل قوائم التنقل والأزرار المنسدلة والعناوين المتغيرة. هذا التطبيق سيكون أكثر تقدمًا وشمولًا. هيا نبدأ:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق شامل'),
backgroundColor: Colors.blue,
),
body: Center(
child: Text(
'مرحبًا بك في تطبيق Flutter الشامل!',
style: TextStyle(fontSize: 24.0),
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'قائمة التنقل',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('الصفحة الأولى'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الأولى');
},
),
ListTile(
title: Text('الصفحة الثانية'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الثانية');
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// أداء إجراء بالضغط على زر الفلوتنج أكشن
print('تم الضغط على الفلوتنج أكشن');
},
child: Icon(Icons.add),
backgroundColor: Colors.green,
),
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: Icon(Icons.home),
onPressed: () {
// أداء إجراء بالضغط على زر الصفحة الرئيسية
print('تم الضغط على زر الصفحة الرئيسية');
},
color: Colors.white,
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على زر البحث
print('تم الضغط على زر البحث');
},
color: Colors.white,
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على زر الإعدادات
print('تم الضغط على زر الإعدادات');
},
color: Colors.white,
),
],
),
),
);
}
}
هذا التطبيق يحتوي على قائمة تنقل جانبية (Drawer) للتنقل بين الصفحات، زر فلوتنج أكشن (FloatingActionButton) لإضافة محتوى جديد، وشريط تنقل سفلي (BottomNavigationBar) يحتوي على أزرار للتنقل بين الصفحات أيضًا.
شرح الكود:
الخطوط 1-6: استيراد حزم Flutter اللازمة وتعريف دالة ال main التي تشغل التطبيق.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
الخطوط 8-14: تعريف فئة MyApp التي تمثل التطبيق بأكمله. يتم فيها إعادة MaterialApp وتحديد MyHomePage كشاشة رئيسية.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
الخطوط 16-57: تعريف فئة MyHomePage التي تمثل الشاشة الرئيسية للتطبيق. يتم فيها تعريف Scaffold مع AppBar مخصص وBody وDrawer وFloatingActionButton وBottomAppBar.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق شامل'),
backgroundColor: Colors.blue,
),
body: Center(
child: Text(
'مرحبًا بك في تطبيق Flutter الشامل!',
style: TextStyle(fontSize: 24.0),
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'قائمة التنقل',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('الصفحة الأولى'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الأولى');
},
),
ListTile(
title: Text('الصفحة الثانية'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الثانية');
},
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// أداء إجراء بالضغط على زر الفلوتنج أكشن
print('تم الضغط على الفلوتنج أكشن');
},
child: Icon(Icons.add),
backgroundColor: Colors.green,
),
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: Icon(Icons.home),
onPressed: () {
// أداء إجراء بالضغط على زر الصفحة الرئيسية
print('تم الضغط على زر الصفحة الرئيسية');
},
color: Colors.white,
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// أداء إجراء بالضغط على زر البحث
print('تم الضغط على زر البحث');
},
color: Colors.white,
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// أداء إجراء بالضغط على زر الإعدادات
print('تم الضغط على زر الإعدادات');
},
color: Colors.white,
),
],
),
),
);
}
}
تشغيل التطبيق :
تطبيق 5: عن AppBar
لنقم بإنشاء مشروع Flutter يحتوي على AppBar مع بعض العناصر الأساسية مثل العنوان وأزرار الإعدادات والبحث. يمكننا استخدام قائمة التنقل Drawer لإضافة المزيد من التفاصيل إلى التطبيق. سأقوم بإنشاء مشروع جديد باستخدام الأداة النصية (Command-Line) في Flutter:
قم بفتح Terminal أو Command Prompt.
استخدم الأمر flutter create my_app لإنشاء مشروع جديد بمسمى “my_app”.
بعد إنشاء المشروع، قم بفتح المشروع في محرر النصوص المفضل لديك.
افتح ملف lib/main.dart واستبدل الكود بالكود التالي:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق Flutter مع AppBar'),
backgroundColor: Colors.blue, // لون خلفية الـ AppBar
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('تم الضغط على زر البحث');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print('تم الضغط على زر الإعدادات');
},
),
],
),
body: Center(
child: Text(
'مرحبًا بك في تطبيق Flutter مع AppBar!',
style: TextStyle(fontSize: 24.0),
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'قائمة التنقل',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('الصفحة الأولى'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الأولى');
},
),
ListTile(
title: Text('الصفحة الثانية'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الثانية');
},
),
],
),
),
);
}
}
قم بحفظ التغييرات وقم بتشغيل التطبيق باستخدام أمر flutter run في Terminal.
بهذه الخطوات، يجب أن تكون قادرًا على إنشاء تطبيق Flutter متكامل يحتوي على AppBar مع عناصر مثل العنوان وأزرار الإعدادات والبحث، بالإضافة إلى قائمة التنقل Drawer.
شرح الكود :
الخطوط 1-5: استيراد حزم Flutter اللازمة وتعريف دالة ال main التي تشغل التطبيق.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}الخطوط 7-14: تعريف فئة MyApp التي تمثل التطبيق بأكمله. يتم فيها إعادة MaterialApp وتحديد MyHomePage كشاشة رئيسية.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
الخطوة 16-78: تعريف فئة MyHomePage التي تمثل الشاشة الرئيسية للتطبيق. يتم فيها تعريف Scaffold مع AppBar مخصص وBody وDrawer.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق Flutter مع AppBar'),
backgroundColor: Colors.blue, // لون خلفية الـ AppBar
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print('تم الضغط على زر البحث');
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print('تم الضغط على زر الإعدادات');
},
),
],
),
body: Center(
child: Text(
'مرحبًا بك في تطبيق Flutter مع AppBar!',
style: TextStyle(fontSize: 24.0),
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'قائمة التنقل',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('الصفحة الأولى'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الأولى');
},
),
ListTile(
title: Text('الصفحة الثانية'),
onTap: () {
// أداء إجراء عند النقر على العنصر
print('تم النقر على الصفحة الثانية');
},
),
],
),
),
);
}
}
هذه الشروحات السطرية توضح الغرض والوظيفة لكل قطعة من الكود في التطبيق الخاص بك.
شجرة الويدجيت:
يمكن تمثيل شجرة الويدجيتات على النحو التالي:
MyApp
└── MaterialApp
└── MyHomePage
└── Scaffold
├── AppBar
│ ├── IconButton (Search Icon)
│ └── IconButton (Settings Icon)
├── Center
│ └── Text
└── Drawer
└── ListView
├── DrawerHeader
└── ListTile
├── Text (Page 1)
└── Text (Page 2)هذه الشجرة توضح التسلسل الهرمي للويدجتات في التطبيق. كل ويدجت موضحة تحت الويدجت الأب التي تحتوي عليها. على سبيل المثال، AppBar تحتوي على أزرار البحث والإعدادات، وScaffold تحتوي على AppBar وBody وDrawer.
تشغيل التطبيق:
اختبار على AppBar
1-ما هو دور ويدجت AppBar في تطبيق Flutter؟
خيارات الإجابة:
a. عرض الصفحات
b. عرض القوائم
c. عرض العناوين والأزرار في الجزء العلوي من التطبيق
d. عرض الرسائل النصية
2-ما هي وظيفة خاصية title في ويدجت AppBar؟
خيارات الإجابة:
a. تحديد عنوان الصفحة
b. تحديد لون الخلفية
c. تحديد العنوان في القائمة الجانبية
d. تحديد نوع الخط المستخدم
3-كيف يمكن إضافة أزرار إضافية إلى AppBar؟
خيارات الإجابة:
a. عن طريق إضافتها داخل الـ Body
b. باستخدام خاصية actions في ويدجت AppBar
c. عن طريق تعريف Drawer
d. عن طريق استخدام FloatingActionButton
4-ما هي وظيفة Drawer في تطبيق Flutter؟
خيارات الإجابة:
a. عرض الأزرار في الجزء السفلي من التطبيق
b. عرض العناصر التي يمكن للمستخدم التنقل إليها
c. عرض الصور والفيديوهات
d. عرض الرسائل النصية في الجزء العلوي من التطبيق
5-كيف يمكن إضافة أزرار التنقل في الجزء السفلي من التطبيق في Flutter؟
خيارات الإجابة:
a. باستخدام ويدجت FloatingActionButton
b. باستخدام ويدجت BottomNavigationBar
c. باستخدام ويدجت AppBar
d. باستخدام ويدجت Drawer
6-كيف يمكن تغيير لون خلفية AppBar في Flutter؟
خيارات الإجابة:
a. باستخدام خاصية backgroundColor في ويدجت AppBar
b. باستخدام خاصية color في ويدجت Scaffold
c. باستخدام خاصية backgroundColor في ويدجت Scaffold
d. باستخدام خاصية color في ويدجت AppBar
7-ما هي الطريقة المناسبة لتوسيط عنوان AppBar في الشاشة؟
خيارات الإجابة:
a. باستخدام خاصية centerTitle في ويدجت AppBar
b. باستخدام خاصية textAlign في ويدجت AppBar
c. باستخدام خاصية center في ويدجت Scaffold
d. باستخدام خاصية mainAxisAlignment في ويدجت AppBar
8-ما هي وظيفة FloatingActionButton في تطبيق Flutter؟
خيارات الإجابة:
a. عرض القوائم الخيارية
b. عرض الأزرار في الجزء السفلي من التطبيق
c. عرض القوائم في الجزء العلوي من التطبيق
d. عرض الأزرار في الجزء العلوي من التطبيق
9-ما هي الخاصية التي يمكن استخدامها لإضافة عناصر مخصصة إلى الشريط السفلي BottomAppBar في Flutter؟
خيارات الإجابة:
a. actions
b. body
c. floatingActionButton
d. bottomNavigationBar
10-كيف يمكن إضافة قائمة تنقل جانبية (Drawer) في تطبيق Flutter؟
خيارات الإجابة:
a. باستخدام ويدجت Scaffold وتعيين خاصية drawer
b. باستخدام ويدجت AppBar وتعيين خاصية drawer
c. باستخدام ويدجت MaterialApp وتعيين خاصية drawer
d. باستخدام ويدجت Drawer وتعيينها كطفل لويدجت محددة في Scaffold
هذه بعض الأسئلة الإضافية التي يمكن استخدامها لاختبار المفاهيم والمهارات المتعلقة بويدجت AppBar في Flutter.
الاجابات
ما هو دور ويدجت AppBar في تطبيق Flutter؟
الإجابة الصحيحة: c. عرض العناوين والأزرار في الجزء العلوي من التطبيق
ما هي وظيفة خاصية title في ويدجت AppBar؟
الإجابة الصحيحة: a. تحديد عنوان الصفحة
كيف يمكن إضافة أزرار إضافية إلى AppBar؟
الإجابة الصحيحة: b. باستخدام خاصية actions في ويدجت AppBar
ما هي وظيفة Drawer في تطبيق Flutter؟
الإجابة الصحيحة: b. عرض العناصر التي يمكن للمستخدم التنقل إليها
كيف يمكن إضافة أزرار التنقل في الجزء السفلي من التطبيق في Flutter؟
الإجابة الصحيحة: b. باستخدام ويدجت BottomNavigationBar
كيف يمكن تغيير لون خلفية AppBar في Flutter؟
الإجابة الصحيحة: a. باستخدام خاصية backgroundColor في ويدجت AppBar
ما هي الطريقة المناسبة لتوسيط عنوان AppBar في الشاشة؟
الإجابة الصحيحة: a. باستخدام خاصية centerTitle في ويدجت AppBar
ما هي وظيفة FloatingActionButton في تطبيق Flutter؟
الإجابة الصحيحة: d. عرض الأزرار في الجزء العلوي من التطبيق
ما هي الخاصية التي يمكن استخدامها لإضافة عناصر مخصصة إلى الشريط السفلي BottomAppBar في Flutter؟
الإجابة الصحيحة: a. actions
كيف يمكن إضافة قائمة تنقل جانبية (Drawer) في تطبيق Flutter؟
الإجابة الصحيحة: a. باستخدام ويدجت Scaffold وتعيين خاصية drawer
هذه هي الإجابات الصحيحة لكل سؤال. استخدمها لتقييم معرفتك وفهمك حول ويدجت AppBar في Flutter.