أداء Flutter للتطبيقات العربية:
RTL والخطوط وضبط الـ Animations

التحديات الفريدة لتطبيقات Flutter العربية

تطوير Flutter بالعربية ليس فقط عكساً للتخطيطات. يُدخل أربع فئات من التحديات التقنية:

• تعقيد تصيير النص: العربية خط cursive بأشكال حروف حسب السياق. تشكيل النص أكثر استهلاكاً للـ CPU من النص اللاتيني.
• نص ثنائي الاتجاه: محتوى مختلط عربي/إنجليزي يتطلب معالجة دقيقة.
• تحميل الخطوط: ملفات الخطوط العربية أكبر بكثير من اللاتينية.
• عكس تخطيط RTL: Flutter يعالج معظم العكس تلقائياً، لكن بعض الـ widgets المخصصة تحتاج معالجة RTL صريحة.

1. تحميل الخطوط: أكبر مشكلة أداء

ملف خط عربي نموذجي (Cairo أو Tajawal) يتراوح 200–400KB. تضمين 3–4 weights يضيف 600KB–1.6MB لحزمة التطبيق.

التحسين 1: ضمّن weights التي تستخدمها فقط. التحسين 2: استخدم variable fonts حيث متاحة — ملف واحد يحل محل 5+ ملفات ثابتة. التحسين 3: إذا كان تطبيقك يعرض مجموعة محدودة من الأحرف، استخدم pyftsubset لتقليل ملف خط 350KB لأقل من 80KB.

2. تخطيط RTL: افعله بشكل صحيح من البداية

// ❌ خاطئ — اتجاه مُرمَّز
Padding(padding: EdgeInsets.only(left: 16))

// ✅ صحيح — يحترم اتجاه النص تلقائياً
Padding(padding: EdgeInsetsDirectional.only(start: 16))

3. عكس الأيقونات صراحةً

Flutter لا يعكس الأيقونات تلقائياً. الأيقونات الاتجاهية (سهام، أزرار رجوع، chevrons) تحتاج عكساً RTL صريحاً:

Directionality.of(context) == TextDirection.rtl
  ? Transform.scale(scaleX: -1, child: myArrowIcon)
  : myArrowIcon

4. أداء animations في RTL

// ✅ slide animation تحترم اتجاه النص
final isRTL = Directionality.of(context) == TextDirection.rtl;
SlideTransition(
  position: Tween(
    begin: Offset(isRTL ? -1.0 : 1.0, 0),
    end: Offset.zero,
  ).animate(animation),
)

5. أداء القوائم بمحتوى عربي

• دائماً ListView.builder لأكثر من 20 عنصراً
• ضع itemExtent صريحاً إذا كانت العناصر متساوية الارتفاع
• استخدم RepaintBoundary حول typography عربية ثابتة ومعقدة

قائمة فحص الأداء

• ✅ خط عربي variable أو subset بأدنى weights ضرورية
• ✅ جميع padding/alignment باستخدام EdgeInsetsDirectional
• ✅ أيقونات اتجاهية معكوسة صراحةً لـ RTL
• ✅ slide animations تستخدم offsets مدركة للاتجاه
• ✅ RepaintBoundary حول typography عربية ثابتة معقدة
• ✅ ListView.builder مع itemExtent للقوائم العربية المتجانسة
• ✅ اختبار على جهاز Android mid-range حقيقي، لا simulator iOS فقط