شريط التبويب في تطبيقات فلاترFlutter TabBar

عنصر التبويب في واجهات تطبيقات فلاتر

“تعلم استخدام علامات التبويب وجلب الصور من الإنترنت في تطبيق Flutter”

مقدمة:
في هذا الدرس، سنتعلم كيفية استخدام علامات التبويب (TabBar) في تطبيق Flutter لتنظيم وعرض محتوى متعدد الصفحات بشكل فعال. سنقوم بإنشاء تطبيق يعرض صورًا مختلفة من الإنترنت بواسطة API، حيث سنستخدم حزمة Unsplash كمصدر للصور. سنقوم بتنظيم الصور بواسطة علامات التبويب، حيث سيمكن المستخدم من التنقل بين فئات مختلفة من الصور بسهولة. سنستخدم أيضًا حزمة cached_network_image لتحميل الصور بفعالية وعرضها في واجهة المستخدم بشكل مؤقت. سيكون هذا الدرس مفيدًا للمطورين الذين يرغبون في تعلم كيفية بناء تطبيقات متعددة الصفحات باستخدام Flutter وكيفية استخدام البيانات من الإنترنت بشكل ديناميكي.

ماذا سنتعلم في هذا الدرس؟

في هذا الدرس، سنتعلم:

كيفية استخدام علامات التبويب (TabBar) في تطبيق Flutter لتنظيم وعرض محتوى متعدد الصفحات.

ما المقصود بشريط التبويب في تطبيقات فلاتر ؟

 TabBar widget in flutter

تُستخدم عناصر ويدجيت TabBar في تطوير تطبيقات Flutter لإنشاء واجهات المستخدم التي تحتوي على علامات تبويب متعددة. تسمح هذه العناصر للمستخدمين بالتنقل بين مجموعة من الصفحات أو العروض بسهولة.

Widget TabBar:

TabBar هو ويدجيت يُستخدم لعرض قائمة من علامات التبويب. يمكنك تخصيصه بشكل كبير ليتناسب مع تصميم التطبيق الخاص بك. يتكون TabBar من عنصر ويدجيت واحد في Flutter ويتعاون عادة مع عناصر ويدجيت أخرى مثل TabBarView و TabController.

Widget TabBarView:

TabBarView هو ويدجيت يعرض محتوى متعلق بعلامات التبويب الموجودة في TabBar.

عندما يتم تحديد علامة تبويب معينة في TabBar، يتم عرض المحتوى المقابل لها في TabBarView. هذا الويدجيت يسمح بعرض محتوى مختلف لكل علامة تبويب.

TabController:

TabController هو ويدجيت يُستخدم للتحكم في العلامات التبويبية ومحتواها في TabBar و TabBarView على حد سواء. يمكنك استخدام TabController لتحديد علامة تبويب محددة أو التحكم في التبديل بين العلامات.

طريقة الاستخدام:

قم بإنشاء TabController وربطه بـ TabBar و TabBarView.
قم بإنشاء TabBar وقم بتعيين TabController إليه.
قم بإنشاء TabBarView وربطه بنفس TabController.
باستخدام هذه العناصر معًا، يمكنك إنشاء واجهة مستخدم تحتوي على علامات تبويب يمكن للمستخدمين التنقل بينها بسهولة وعرض محتوى مختلف لكل علامة تبويب.

خطوة بخوة كيف نستخدم شريط التبويب في تطبيق فلاتر؟
TabBar widget in flutter خطوة بخطوة اشرح كيف نستخدم:

نقم بإضافة مكتبة Flutter Material Design إلى ملف الـ pubspec. الخاص بمشروعنا إذا لم يكن مضافًا بالفعل:

flutter:
sdk: flutter

flutter/material.dart:

في ملف الـ main.dart نجلب  المكتبة التالية:

تطبيق 1: شريط التبويب في تطبيقات فلاتر

import 'package:flutter/material.dart';

بناء واجهة المستخدم الخاصة بك باستخدام TabBar و TabBarView.

هنا نقوم بتعريف مثال بسيط يحتوي على قائمة تبويب وعرض محتوى مختلف لكل تبويب:

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3, // عدد العلامات التبويبية
child: Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}

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

في هذا المثال، قمنا بإنشاء DefaultTabController وقدمنا له طولًا يعبر عن عدد العلامات التبويبية (هنا 3). ثم أضفنا TabBar إلى AppBar مع قائمة تبويب تحتوي على Tab مع أيقونات مختلفة. وأخيرًا، قمنا بإنشاء TabBarView لعرض محتوى مختلف لكل تبويب.

هذه هي الخطوات الأساسية لاستخدام ويدجيت TabBar في تطبيق Flutter. يمكنك تخصيص هذه العناصر بشكل أكبر وفقًا لاحتياجات تطبيقك الخاص.

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

بدايةً، قمنا بإنشاء MyApp كفئة تمتد من StatelessWidget:

class MyApp extends StatelessWidget {

ثم قمنا بتعريف دالة build التي تُقدم واجهة المستخدم الخاصة بك:

@override
Widget build(BuildContext context) {

ضمن دالة build، قمنا بإرجاع MaterialApp واستخدم DefaultTabController كأب للتحكم في عدد علامات التبويب:

return MaterialApp(
home: DefaultTabController(
length: 3, // عدد العلامات التبويبية
child: Scaffold(

ثم، قمنا ببناء الـ AppBar وأضف TabBar كقاعدة له:

appBar: AppBar(
title: Text('TabBar Example'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),

بعد ذلك، قمنا بتحديد محتوى كل تبويب في TabBarView:

body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),

في النهاية، في دالة main، قمنا بتشغيل التطبيق باستخدام runApp وقم بتمرير MyApp:

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

هذه هي الخطوات الأساسية التي قمنا بها لاستخدام ويدجيت TabBar في تطبيق Flutter.

شجرة الويدجيتات لهذا التطبيق

MyApp
└── MaterialApp
    └── DefaultTabController
        ├── Scaffold
        │   ├── AppBar
        │   │   └── Text
        │   │   └── TabBar
        │   │       └── Tab (icon: Icon(Icons.directions_car))
        │   │       └── Tab (icon: Icon(Icons.directions_transit))
        │   │       └── Tab (icon: Icon(Icons.directions_bike))
        │   └── TabBarView
        │       └── Icon(Icons.directions_car)
        │       └── Icon(Icons.directions_transit)
        │       └── Icon(Icons.directions_bike)
        └── MaterialApp

هذه الشجرة توضح ترتيب الويدجيتات في التطبيق. يبدأ التطبيق بـ MyApp ويستمر إلى MaterialApp، ثم DefaultTabController التي تحتوي على Scaffold ومن ثم AppBar و TabBar و TabBarView مع العناصر الفرعية الخاصة بها.

تشغيل التطبيق:

تطبيق 2: عن استخدامات TabBar widget in flutter مع الشرح

تطبيقنا سيكون عبارة عن تطبيق يتيح للمستخدم التبديل بين عدة عروض (مثل عرض الصور وعرض الفيديو وعرض الموسيقى) باستخدام علامات التبويب.

قم بإنشاء ملف 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 StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Photos'),
Tab(text: 'Videos'),
Tab(text: 'Music'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Displaying Photos')),
Center(child: Text('Displaying Videos')),
Center(child: Text('Playing Music')),
],
),
);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}
}

شرح الكود:

في البداية، قمنا بتضمين المكتبات الضرورية.

ثم قمنا بتعريف الفئة MyApp التي تعمل كمدخل للتطبيق.

في داخل MyApp، قمنا بتعريف MyHomePage كـ StatefulWidget، حيث ستكون هذه هي الصفحة الرئيسية للتطبيق.

في MyHomePage، قمنا بتعريف _MyHomePageState كـ State، ونستخدم SingleTickerProviderStateMixin لإدارة حالة التبديل بين العلامات.

في دالة initState()، قمنا بإنشاء TabController بطول 3 (لثلاث علامات تبويب) وربطه بالواجهة باستخدام vsync.

في دالة build()، قمنا ببناء واجهة المستخدم بواسطة Scaffold وأضفنا AppBar مع TabBar التي تحتوي على علامات التبويب Photos، Videos، وMusic.

أسفل AppBar، قمنا بإضافة TabBarView التي تعرض محتوى مختلف لكل علامة تبويب باستخدام TabBarView.

في دالة dispose()، قمنا بإزالة TabController عند تخلص الصفحة منه لتجنب تسرب الذاكرة.

هذا هو التطبيق المتقدم الذي يستخدم ويدجيت TabBar في Flutter مع شرح لكل جزء من الكود. يمكنك تخصيص هذا التطبيق وفقًا لاحتياجاتك الخاصة.

شجرة الويدجتات لهذا التطبيق:

MaterialApp
└── MyHomePage
    └── Scaffold
        ├── AppBar
        │   └── Text
        │   └── TabBar
        │       └── Tab (text: 'Photos')
        │       └── Tab (text: 'Videos')
        │       └── Tab (text: 'Music')
        └── TabBarView
            └── Center (child: Text('Displaying Photos'))
            └── Center (child: Text('Displaying Videos'))
            └── Center (child: Text('Playing Music'))

هذه الشجرة توضح الترتيب الهرمي للويدجتات في التطبيق. تبدأ مع MaterialApp كجذر رئيسي، ومن ثم MyHomePage كواجهة المستخدم الرئيسية. داخل MyHomePage، نجد Scaffold التي تحتوي على AppBar و TabBarView. تحت AppBar، توجد TabBar مع العلامات التبويبية، وتحت TabBarView يتم عرض محتوى كل علامة تبويب.

خصائص شريط التبويب في فلاتر

TabBar widget in flutter

ويدجيت TabBar في Flutter تحتوي على مجموعة من الخصائص التي يمكن تخصيصها لتناسب احتياجات التطبيق. إليك قائمة بالخصائص الرئيسية لويدجيت TabBar:

controller: تستخدم لتحديد TabController الذي يتحكم في العلامات التبويبية وعرض المحتوى المتعلق بها.

tabs: قائمة من العناصر التي تحتوي على عناصر التبويب. يمكن أن تحتوي على Tab وتعرض نصًا أو أيقونة أو كلاهما.

isScrollable: تستخدم لتحديد ما إذا كانت العلامات التبويبية يمكن التمرير إليها عندما يكون عددها كبيرًا. الافتراضي هو false.

indicatorColor: لون العلامة التبويبية النشطة.

indicatorWeight: سمك العلامة التبويبية النشطة.

indicatorPadding: حشوة العلامة التبويبية النشطة.

indicatorSize: حجم العلامة التبويبية النشطة. يمكن أن يكون TabBarIndicatorSize.tab لتتناسب مع عرض عنصر التبويب، أو TabBarIndicatorSize.label لتتناسب مع عرض نص التبويب.

labelColor: لون النص في العلامة التبويبية النشطة.

labelStyle: نمط النص في العلامة التبويبية النشطة.

unselectedLabelColor: لون النص في العلامات التبويبية غير النشطة.

unselectedLabelStyle: نمط النص في العلامات التبويبية غير النشطة.

dragStartBehavior: كيفية استجابة العلامة التبويبية للسحب. تستخدم لتحديد متى يبدأ التفاعل مع اللمس.

indicator: ويدجيت لتخصيص العلامة التبويبية النشطة. يمكن استخدامه لإنشاء تأثيرات مخصصة مثل تغيير شكل العلامة أو تحريكها.

indicatorRadius: نصف قطر الزاوية للعلامة التبويبية النشطة في حالة تخصيص الشكل.

indicatorBorderRadius: نصف قطر الزاوية للعلامة التبويبية النشطة عند استخدام الخاصية indicator.

indicatorMargin: الهامش الداخلي للعلامة التبويبية النشطة عند استخدام الخاصية indicator.

physics: التفاعل الفيزيائي للتبديل بين العلامات. يمكن استخدامه لتعيين قواعد التمرير والتفاعل مثل التمرير الطبيعي أو التمرير بالانزلاق.

onTap: دالة تستدعى عند النقر على علامة تبويب معينة.

tabsPadding: الهامش الداخلي لعناصر التبويب داخل شريط التبويب.

indicatorPadding: الهامش بين العلامة التبويبية والعلامة التبويبية النشطة.

indicatorColor: لون العلامة التبويبية النشطة.

indicatorWeight: سمك العلامة التبويبية النشطة.

indicatorSize: حجم العلامة التبويبية النشطة.

labelColor: لون النص في العلامة التبويبية النشطة.

labelPadding: الهامش بين النص والحدود الداخلية للعلامة التبويبية.

labelStyle: نمط النص في العلامة التبويبية النشطة.

unselectedLabelColor: لون النص في العلامات التبويبية غير النشطة.

unselectedLabelStyle: نمط النص في العلامات التبويبية غير النشطة.

automaticIndicatorColorAdjustment: تلقائيًا تعديل لون العلامة التبويبية النشطة للتكيف مع لون Material الفعلي.

dragStartBehavior: تحديد متى يبدأ التفاعل مع اللمس.

تطبيق 3 عن استخدام هذه الخصائص مع الشرح

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

قم بإنشاء ملف 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 StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(
length: 3,
vsync: this,
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Customized TabBar Example'),
bottom: TabBar(
controller: _tabController,
isScrollable: true, // يمكن التمرير بين العلامات
indicatorColor: Colors.orange, // لون العلامة التبويبية النشطة
indicatorWeight: 4.0, // سمك العلامة التبويبية النشطة
indicatorPadding: EdgeInsets.symmetric(horizontal: 16.0), // الهامش بين العلامة التبويبية والمحتوى
labelColor: Colors.black, // لون النص في العلامة التبويبية النشطة
unselectedLabelColor: Colors.grey, // لون النص في العلامات التبويبية غير النشطة
labelStyle: TextStyle(fontWeight: FontWeight.bold), // نمط النص في العلامة التبويبية النشطة
unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal), // نمط النص في العلامات التبويبية غير النشطة
tabs: [
Tab(text: 'Photos'),
Tab(text: 'Videos'),
Tab(text: 'Music'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Displaying Photos')),
Center(child: Text('Displaying Videos')),
Center(child: Text('Playing Music')),
],
),
);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}
}

هذا التطبيق يستخدم العديد من الخصائص المتاحة في ويدجيت TabBar لتخصيص التصميم والمظهر الخاص بعلامات التبويب. سنقوم بتوضيح بعض الخصائص التي تم استخدامها في الكود:

isScrollable: تم تعيينها على true لتمكين التمرير بين العلامات في حال كان عددها كبيرًا.
indicatorColor: تم تعيين لون العلامة التبويبية النشطة إلى اللون البرتقالي.
indicatorWeight: تم تعيين سمك العلامة التبويبية النشطة إلى 4.0.
indicatorPadding: تم تعيين هامش العلامة التبويبية النشطة ليكون 16 نقطة على الجانبين.
labelColor: تم تعيين لون النص في العلامة التبويبية النشطة إلى اللون الأسود.
unselectedLabelColor: تم تعيين لون النص في العلامات التبويبية غير النشطة إلى اللون الرمادي.
labelStyle: تم تعيين نمط النص في العلامة التبويبية النشطة ليكون عريض الوزن.
unselectedLabelStyle: تم تعيين نمط النص في العلامات التبويبية غير النشطة ليكون عادي الوزن.
يمكنك تجربة هذا الكود وتعديل الخصائص حسب احتياجاتك لتخصيص تصميم علامات التبويب في تطبيقك.

 شجرة الويدجيتات لهذا التطبيق

MaterialApp
└── MyHomePage
    └── Scaffold
        ├── AppBar
        │   └── Text
        │   └── TabBar
        │       └── Tab (text: 'Photos')
        │       └── Tab (text: 'Videos')
        │       └── Tab (text: 'Music')
        └── TabBarView
            └── Center (child: Text('Displaying Photos'))
            └── Center (child: Text('Displaying Videos'))
            └── Center (child: Text('Playing Music'))

هذه الشجرة توضح الترتيب الهرمي للويدجتات في التطبيق. تبدأ مع MaterialApp كجذر رئيسي، ومن ثم MyHomePage كواجهة المستخدم الرئيسية. داخل MyHomePage، نجد Scaffold التي تحتوي على AppBar و TabBarView. تحت AppBar، توجد TabBar مع العلامات التبويبية، وتحت TabBarView يتم عرض محتوى كل علامة تبويب.

تطبيق 4  عن خصائص شريط التبويب في فلاتر

طبعًا، سنقوم بإنشاء تطبيق آخر يشمل باقي الخصائص التي لم يتم استخدامها في التطبيق السابق. سنستخدم بعض الخصائص الإضافية مثل indicatorRadius و indicatorBorderRadius لتخصيص شكل العلامة التبويبية النشطة.

قم بإنشاء ملف 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 StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(
length: 3,
vsync: this,
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Customized TabBar Example'),
bottom: TabBar(
controller: _tabController,
isScrollable: true,
indicator: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(16.0),
),
indicatorPadding: EdgeInsets.symmetric(horizontal: 16.0),
labelColor: Colors.blue,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(fontWeight: FontWeight.bold),
unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
tabs: [
Tab(text: 'Photos'),
Tab(text: 'Videos'),
Tab(text: 'Music'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('Displaying Photos')),
Center(child: Text('Displaying Videos')),
Center(child: Text('Playing Music')),
],
),
);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}
}

هذا التعديل يقوم بإعداد خصائص العلامة التبويبية بشكل صحيح، ويستخدم indicator و indicatorPadding بدلاً من indicatorRadius و indicatorBorderRadius.

شرح الكود :

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

يتم استيراد مكتبة flutter/material.dart التي تحتوي على عناصر تصميم واجهة المستخدم في Flutter.

تُعرف الدالة main() التي تُطلق تطبيق Flutter عبر استدعاء runApp() وتمرير MyApp() كمدخل.

يُنشئ MyApp كفئة StatelessWidget ويُرجع مادة MaterialApp. هذا يعني أنه يعتبر هذا التطبيق المادة الجذرية للتطبيق، والتي توفر ميزات مثل توجيه الشاشات وتنسيق المظهر العام.

MyHomePage هو StatefulWidget يُستخدم لبناء الشاشة الرئيسية. يستخدم الحقل _tabController للتحكم في تبديل المحتوى المعروض.

في initState()، يتم إعداد _tabController باستخدام TabController الذي يتيح التحكم في شريط التبويب.

build() يقوم بإنشاء واجهة المستخدم. تتضمن الشاشة شريط تبويب TabBar و TabBarView، حيث يتم عرض المحتوى المختار بواسطة المستخدم حسب العلامة التبويبية التي يختارها.

تُفرغ الذاكرة المخصصة لـ _tabController في dispose() لتجنب تسرب الذاكرة.

باختصار، الكود ينشئ تطبيقًا يحتوي على شريط تبويب مخصص يسمح للمستخدم بالتنقل بين محتويات مختلفة.

شجرة الويدجتات (Widget tree) لهذا التطبيق ستكون كالتالي:

MaterialApp
└─ Scaffold
   └─ AppBar
      └─ TabBar
   └─ TabBarView
      ├─ Center (for 'Photos')
         └─ Text
      ├─ Center (for 'Videos')
         └─ Text
      └─ Center (for 'Music')
         └─ Text

تحتوي الشجرة على MaterialApp كعنصر جذري، والذي يحتوي على Scaffold الذي يمثل تخطيط الصفحة. داخل Scaffold، يوجد AppBar يحتوي على TabBar الذي يعرض علامات التبويب. وفيما بعد، تأتي TabBarView التي تحتوي على عناصر الواجهة الفعلية التي يتم عرضها بناءً على العلامة التبويبية المحددة.

خصائص شريط التبويب المستخدمة في هذا التطبيق

في هذا التطبيق، تم تخصيص شريط التبويب (TabBar) باستخدام عدة خصائص لتحديد المظهر والسلوك الخاص به. إليك شرح لكل خصائص شريط التبويب المستخدمة:

controller: يستخدم لتوصيل TabBar بمتحكم التبويب (TabController) المُستخدم لإدارة العلامات التبويبية والتبديل بين المحتوى المختلف.

isScrollable: تُستخدم لتحديد ما إذا كانت علامات التبويب يمكن تمريرها عمودياً إذا كانت أكثر من عدد العلامات المرئية.

indicator: تستخدم لتعيين الزخرفة (decoration) التي تظهر تحت العلامة التبويبية النشطة. في هذا المثال، يتم تعيين لون الزخرفة للون الأخضر.

indicatorPadding: يتم استخدامها لتحديد التباعد بين العلامة التبويبية والزخرفة.

labelColor: يحدد لون النص للعلامة التبويبية النشطة.

unselectedLabelColor: يحدد لون النص للعلامات التبويبية غير النشطة.

labelStyle: يستخدم لتعيين نمط النص للعلامة التبويبية النشطة، مثل الوزن والحجم والنمط.

unselectedLabelStyle: يستخدم لتعيين نمط النص للعلامات التبويبية غير النشطة.

tabs: قائمة من عناصر Tab التي تحتوي على نص يمثل العلامات التبويبية المختلفة.

باستخدام هذه الخصائص، يمكن تخصيص مظهر وسلوك شريط التبويب بشكل دقيق وفقًا لاحتياجات التطبيق.

اختبار لفهم علامات التبويب واستخدامها في Flutter:

1-ما هي فائدة استخدام علامات التبويب في تطبيقات Flutter؟

أ) تسهيل التنقل بين عدة صفحات.
ب) توفير واجهة مستخدم متعددة الصفحات.
ج) تنظيم المحتوى وعرضه بشكل منظم.

2-كيف يمكن تخصيص مظهر علامات التبويب في Flutter؟

أ) عن طريق تغيير لون الخلفية فقط.
ب) عن طريق تغيير لون الخط والخلفية والحجم والنمط والهامش والزوايا، والمزيد.
ج) لا يمكن تخصيص مظهر علامات التبويب.

3-ما هي الخاصية التي تسمح بتحديد عدد غير محدود من علامات التبويب في Flutter؟

أ) isExpanded
ب) isScrollable
ج) isInfinite

4-كيف يمكن إضافة محتوى مختلف لكل علامة تبويب في Flutter؟

أ) من خلال إنشاء صفحة مخصصة لكل علامة تبويب.
ب) من خلال تغيير العناصر داخل الصفحة نفسها.
ج) من خلال استخدام طرق التبديل المتقدمة في علامات التبويب.

5-ما هي الخاصية التي تسمح بتحديد شكل العلامة التبويبية النشطة في Flutter؟

أ) indicatorStyle
ب) indicatorColor
ج) indicatorRadius

6-ما الحزمة التي يمكن استخدامها لتحميل الصور من الإنترنت في Flutter؟

أ) http
ب) cached_network_image
ج) image_loader

7-ما هي الخطوة الأولى في جلب الصور من API في Flutter؟

أ) تحضير بنية المشروع وإضافة التبويبات.
ب) إنشاء ملف لإدارة حالة التطبيق.
ج) إنشاء ملف لجلب البيانات من API.

8-ما هي العملية التي تستخدم لتحميل البيانات من API في Flutter؟

أ) fetchData()
ب) http.get()
ج) api.fetch()

9-ما هي الوظيفة الرئيسية لـ FutureBuilder في Flutter؟

أ) إنشاء صفحة مخصصة لكل علامة تبويب.
ب) عرض مؤشر التحميل أثناء استرجاع البيانات من API.
ج) إدارة حالة التطبيق وتحديث الواجهة بناءً على البيانات الجديدة.

10-كيف يمكن تشغيل التطبيق بعد كتابة الكود في Flutter؟

أ) باستخدام أمر run في سطر الأوامر.
ب) باستخدام زر التشغيل في محرر النصوص.
ج) كلاهما.

11-ما هو الفرق بين SingleChildScrollView و ListView في Flutter؟

أ) SingleChildScrollView يمكن استخدامه لعرض محتوى قابل للتمرير في أي اتجاه واحد، بينما ListView يستخدم لعرض قائمة محتويات قابلة للتمرير في اتجاه واحد.
ب) ListView يمكن استخدامه لعرض محتوى قابل للتمرير في أي اتجاه واحد، بينما SingleChildScrollView يستخدم لعرض قائمة محتويات قابلة للتمرير في اتجاه واحد.
ج) لا يوجد فرق بينهما، يمكن استخدام أي منهما لنفس الغرض.

12-كيف يمكن تخصيص شكل علامات التبويب في Flutter؟

أ) باستخدام خاصية indicatorColor فقط.
ب) باستخدام خاصية indicator لتعيين مظهر مخصص للعلامات التبويبية.
ج) لا يمكن تخصيص شكل علامات التبويب في Flutter.

13-ما هي الطريقة الموصى بها لتخزين مفاتيح API في تطبيق Flutter؟

أ) استخدام المفاتيح مباشرة داخل الكود.
ب) تخزين المفاتيح في ملف نصي على الجهاز المحلي.
ج) استخدام متغيرات التشغيل للبيئة.

14-ما هي الطريقة الصحيحة لتحميل الصور من الإنترنت في Flutter؟

أ) باستخدام Image.network.
ب) باستخدام حزمة http لتحميل الصور.
ج) باستخدام حزمة cached_network_image لتحميل الصور بشكل مؤقت.

15-ما هو الفرق بين حالة الاتصال ConnectionState.waiting و ConnectionState.done في FutureBuilder؟

أ) ConnectionState.waiting تشير إلى أن العملية قيد التنفيذ، بينما ConnectionState.done تشير إلى أن العملية قد انتهت.
ب) ConnectionState.waiting تشير إلى أن العملية قد انتهت بنجاح، بينما ConnectionState.done تشير إلى أن العملية قد فشلت.
ج) ConnectionState.waiting تشير إلى أن العملية قد فشلت، بينما ConnectionState.done تشير إلى أن العملية قيد التنفيذ.

16-ما هو الغرض من استخدام ClipRRect في Flutter؟

أ) لتحويل عناصر واجهة المستخدم إلى مربعات دائرية.
ب) لعرض محتوى محدد فقط داخل إطار مستطيل.
ج) لتقليم الأطراف الزوايا للعناصر مثل الصور والمربعات.
هذه بعض الأسئلة التي يمكن استخدامها كاختبار لمعرفة فهم الطلاب لمفهوم علامات التبويب واستخدامها في Flutter، بالإضافة إلى بعض المفاهيم الأساسية الأخرى في Flutter. يمكنك تعديلها وإضافة المزيد بناءً على مستوى الطلاب والموضوع المطروح.

الاجابات 

ب) توفير واجهة مستخدم متعددة الصفحات.

ب) عن طريق تغيير العناصر داخل الصفحة نفسها.

ب) isScrollable.

أ) indicatorStyle.

ب) cached_network_image.

ب) http.get().

ج) إنشاء ملف لجلب البيانات من API.

ب) http.get().

ج) إدارة حالة التطبيق وتحديث الواجهة بناءً على البيانات الجديدة.

ج) كلاهما.

أ) SingleChildScrollView يمكن استخدامه لعرض محتوى قابل للتمرير في أي اتجاه واحد، بينما ListView يستخدم لعرض قائمة محتويات قابلة للتمرير في اتجاه واحد.

ب) باستخدام خاصية indicator لتعيين مظهر مخصص للعلامات التبويبية.

ج) استخدام متغيرات التشغيل للبيئة.

ج) باستخدام حزمة cached_network_image لتحميل الصور بشكل مؤقت.

أ) ConnectionState.waiting تشير إلى أن العملية قيد التنفيذ، بينما ConnectionState.done تشير إلى أن العملية قد انتهت.

ج) لتقليم الأطراف الزوايا للعناصر مثل الصور والمربعات.

إذا كان لديك أي أسئلة أو استفسارات إضافية، فلا تتردد في طرحها!