TabBar

🔹 ما هو TabBar ؟

• TabBar: عبارة عن شريط ألسنة (Tabs) يُستخدم للتنقل بين صفحات أو أقسام مختلفة.
• غالبًا يُستخدم مع:
  • TabBarView لعرض المحتوى.
  • DefaultTabController لإدارة الحالة (أي تبويب نشط الآن).
• يظهر عادة داخل AppBar، لكن يمكن وضعه في أي مكان.

🔹 المكونات الأساسية

لعمل TabBar تحتاج 3 عناصر:

1. DefaultTabController → يدير حالة التبويبات (كم عددها وأي تبويب مفعّل).
2. TabBar → شريط التبويبات نفسه.
3. TabBarView → المحتوى المرتبط بكل تبويب.

🔹 مثال أساسي

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // 👈 عدد التبويبات
        child: Scaffold(
          appBar: AppBar(
            title: Text("مثال TabBar"),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: "الرئيسية"),
                Tab(icon: Icon(Icons.star), text: "المفضلة"),
                Tab(icon: Icon(Icons.settings), text: "الإعدادات"),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("محتوى الرئيسية")),
              Center(child: Text("محتوى المفضلة")),
              Center(child: Text("محتوى الإعدادات")),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // 👈 عدد التبويبات
        child: Scaffold(
          appBar: AppBar(
            title: Text("مثال TabBar"),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: "الرئيسية"),
                Tab(icon: Icon(Icons.star), text: "المفضلة"),
                Tab(icon: Icon(Icons.settings), text: "الإعدادات"),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("محتوى الرئيسية")),
              Center(child: Text("محتوى المفضلة")),
              Center(child: Text("محتوى الإعدادات")),
            ],
          ),
        ),
      ),
    );
  }
}

🔹 شرح الخصائص المهمة في TabBar

• tabs: قائمة التبويبات (كل عنصر غالبًا Tab).
• isScrollable:
  • false (افتراضي) → التبويبات تتوزع بالتساوي.
  • true → تسمح بالتمرير الأفقي إذا كانت كثيرة.
• indicatorColor: لون الخط السفلي اللي يحدد التبويب النشط.
• indicatorWeight: سمك الخط السفلي.
• indicatorPadding: مسافة فارغة حول المؤشر.
• indicatorSize:
  • TabBarIndicatorSize.tab → يغطي عرض التبويب بالكامل.
  • TabBarIndicatorSize.label → يغطي فقط النص/الأيقونة.
• labelColor: لون النص/الأيقونة في التبويب النشط.
• unselectedLabelColor: لون التبويبات غير النشطة.
• labelStyle: تنسيق النص للتبويب النشط.
• unselectedLabelStyle: تنسيق النص للتبويبات غير النشطة.

🔹 TabBarView

• يمثل المحتوى اللي يتغير مع كل تبويب.
• children: قائمة Widgets بعدد مساوي لـ tabs.
• ملاحظة: العدد في TabBar و TabBarView يجب أن يتطابق وإلا يحدث خطأ.

🔹 أماكن الاستخدام

• التطبيقات متعددة الأقسام (الرئيسية – المفضلة – البحث – الإعدادات).
• عند عرض بيانات من أنواع مختلفة (مثلاً “صور – فيديو – مقالات”).
• لعرض خطوات أو مراحل في تطبيق (مثل خطوات التسجيل أو الشراء).

🔹 نصائح ومحاذير

1. إذا التبويبات كثيرة جدًا → اجعل isScrollable: true.
2. لا تضع TabBarView داخل ScrollView مباشرة (قد يسبب مشاكل في التمرير).
3. دائمًا غلّف الهيكل بـ DefaultTabController أو أدِر التبويبات يدويًا عبر TabController.
4. يمكنك وضع TabBar في أي مكان (حتى تحت الشاشة) باستخدام bottomNavigationBar في Scaffold.

🔹 مثال مع TabBar في أسفل الشاشة

Scaffold(
  appBar: AppBar(title: Text("TabBar في الأسفل")),
  body: TabBarView(
    children: [
      Center(child: Text("صفحة 1")),
      Center(child: Text("صفحة 2")),
    ],
  ),
  bottomNavigationBar: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.home), text: "الرئيسية"),
      Tab(icon: Icon(Icons.person), text: "الحساب"),
    ],
    labelColor: Colors.teal,
    unselectedLabelColor: Colors.grey,
    indicatorColor: Colors.teal,
  ),
)

Scaffold(
  appBar: AppBar(title: Text("TabBar في الأسفل")),
  body: TabBarView(
    children: [
      Center(child: Text("صفحة 1")),
      Center(child: Text("صفحة 2")),
    ],
  ),
  bottomNavigationBar: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.home), text: "الرئيسية"),
      Tab(icon: Icon(Icons.person), text: "الحساب"),
    ],
    labelColor: Colors.teal,
    unselectedLabelColor: Colors.grey,
    indicatorColor: Colors.teal,
  ),
)

✨ الخلاصة:

• TabBar + TabBarView مع DefaultTabController = نظام تبويبات كامل.
• TabBar للتحكم بالشكل (ألوان، مؤشرات، تنسيقات).
• TabBarView للمحتوى.
• عدد التبويبات = عدد الصفحات دائمًا.