الفصل 51 — السمات وMaterial 3 والواجهات التكيفية

المستوى: متوسط المدة المقدّرة: 10 ساعات المتطلبات المسبقة: الفصل 50 — التنقل والمسارات ما ستكون قادرًا على فعله في النهاية: تعريف سمة كاملة لتطبيقك، وتبديلها إلى الوضع الداكن، وكتابة واجهة تبقى مقروءة ومتناسبة الأبعاد من الهاتف الصغير إلى شاشة سطح المكتب.

51.0 — أهداف الفصل

في نهاية هذا الفصل، ستكون قادرًا على:

• شرح سبب صعوبة إدارة الأنماط المكتوبة مباشرة داخل الـ widgets؛
• بناء ThemeData وربطه بـ MaterialApp؛
• معرفة ما الذي يغيّره useMaterial3 ولماذا هو القيمة الافتراضية؛
• توليد لوحة ألوان متناسقة باستخدام ColorScheme.fromSeed()؛
• تسمية الأدوار اللونية الرئيسية في Material 3 ومعرفة أيّها تستخدم؛
• قراءة السمة الحالية باستخدام Theme.of(context) وColorScheme.of(context)؛
• استخدام الأنماط الخمسة عشر المسمّاة في textTheme؛
• تخصيص نمط نصّي دون إفساد الأنماط الأخرى؛
• ضبط سمات المكوّنات: الأزرار، وAppBar، وCard، وحقول الإدخال؛
• توفير darkTheme والتحكم في كل ذلك عبر themeMode؛
• اتباع إعداد الوضع الفاتح/الداكن للنظام تلقائيًا؛
• تمكين المستخدم من اختيار سمته من داخل التطبيق؛
• تجاوز سمة شجرة فرعية واحدة فقط باستخدام الـ widget المسمّى Theme؛
• إضافة ألوانك الخاصة إلى السمة باستخدام ThemeExtension؛
• مركزة المسافات وأنصاف الأقطار في ملف ثوابت؛
• الاستعلام عن الشاشة باستخدام MediaQuery: الحجم، والاتجاه، وtextScaler، وpadding؛
• احترام تكبير الخط الذي اختاره المستخدم؛
• قياس المساحة المتاحة فعليًا باستخدام LayoutBuilder؛
• الاختيار بين MediaQuery وLayoutBuilder عن دراية؛
• وضع نقاط انقطاع (breakpoints) للهاتف / الجهاز اللوحي / سطح المكتب؛
• تبديل التخطيط من Column إلى Row بحسب العرض؛
• التفاعل مع اتجاه الشاشة باستخدام OrientationBuilder؛
• ضبط نص كبير جدًا باستخدام FittedBox؛
• عرض شبكة يتكيّف عدد أعمدتها؛
• عرض NavigationRail على الشاشات الكبيرة؛
• التعامل مع لوحة المفاتيح التي تغطي حقل الإدخال؛
• تفادي الحواف المقتطعة (notch) باستخدام SafeArea؛
• احترام قواعد إمكانية الوصول الأساسية: التباين، وأهداف اللمس، وSemantics؛
• اختبار واجهتك على عدة أحجام شاشات دون تغيير الجهاز؛
• تجميع تطبيق كامل يتكيّف مع الهاتف والجهاز اللوحي والوضع الداكن.