أداة مجانية

فاحص RTL لتطبيقات Flutter

الصق كود الـ widget وشوف كل حتة هتبوظ في العربي: المسافات والمحاذاة والحدود والأماكن المكتوبة بـ left و right. الأداة بتعيد كتابتها بـ start و end عشان الشاشة تنعكس مع اللغة.

بتشتغل في المتصفح بتاعك. الكود مش بيتبعت لأي مكان.

7 للتصليح3 للمراجعة
  1. سطر 8اتصلّح تلقائي

    EdgeInsets.only فيها left/right

    left، right بتفضل في نفس الجنب في العربي. EdgeInsetsDirectional.only بيستخدم start، end وبينعكس مع اللغة.

    EdgeInsets.only(left: 16, right: 8)EdgeInsetsDirectional.only(start: 16, end: 8)
  2. سطر 9اتصلّح تلقائي

    EdgeInsets.fromLTRB

    الرقم الأول والتالت ثابتين على الشمال واليمين. fromSTEB بياخد نفس الأربع أرقام بس start و top و end و bottom.

    EdgeInsets.fromLTRB(…)EdgeInsetsDirectional.fromSTEB(…)
  3. سطر 11اتصلّح تلقائي

    BorderRadius.only بزوايا left/right

    topLeft بتفضل في نفس الجنب في العربي. BorderRadiusDirectional.only بيستخدم topStart وبينعكس مع اللغة.

    BorderRadius.only(topLeft: Radius.circular(12))BorderRadiusDirectional.only(topStart: Radius.circular(12))
  4. سطر 12اتصلّح تلقائي

    Border بجوانب left/right

    left بتفضل في نفس الجنب في العربي. BorderDirectional بيستخدم start وبينعكس مع اللغة.

    Border(left: BorderSide(color: Colors.blue, width: 3))BorderDirectional(start: BorderSide(color: Colors.blue, width: 3))
  5. سطر 14اتصلّح تلقائي

    Alignment.centerLeft

    بيشاور على الشمال في كل اللغات. AlignmentDirectional.centerStart بيمشي مع اتجاه القراية.

    Alignment.centerLeftAlignmentDirectional.centerStart
  6. سطر 18راجعه بإيدك

    جمع مكتوب بإيدك

    العربي فيه ست صيغ للجمع مش اتنين. استخدم plural في ملف ARB بدل الشرط ده.

    == 1 ? 'One item' : '$count items',
  7. سطر 19اتصلّح تلقائي

    TextAlign.left

    النص العربي المتحاذي شمال بيبان غلط. TextAlign.start بيتحاذى مع بداية السطر في كل لغة.

    TextAlign.leftTextAlign.start
  8. سطر 20راجعه بإيدك

    letterSpacing

    المسافة بين الحروف بتقطّع الحروف العربي المتوصلة. خليها صفر للنص العربي.

    letterSpacing: 1.2),
  9. سطر 22اتصلّح تلقائي

    Positioned فيها left/right

    right بتفضل في نفس الجنب في العربي. PositionedDirectional بيستخدم end وبينعكس مع اللغة.

    Positioned(right: 0, top: 0, child: Image.asset('assets/arrow_next.png'))PositionedDirectional(end: 0, top: 0, child: Image.asset('assets/arrow_next.png'))
  10. سطر 22راجعه بإيدك

    صورة اتجاه مش هتنعكس

    الأيقونات الجاهزة زي Icons.arrow_back بتنعكس لوحدها، إنما صور الأسهم بتاعتك لأ. ضيف matchTextDirection: true.

    Image.asset('assets/arrow_next.png')),

الكود بعد التصليح

class OrderCard extends StatelessWidget {
  const OrderCard({super.key, required this.count});
  final int count;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsetsDirectional.only(start: 16, end: 8),
      padding: EdgeInsetsDirectional.fromSTEB(20, 12, 8, 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadiusDirectional.only(topStart: Radius.circular(12)),
        border: BorderDirectional(start: BorderSide(color: Colors.blue, width: 3)),
      ),
      alignment: AlignmentDirectional.centerStart,
      child: Stack(
        children: [
          Text(
            count == 1 ? 'One item' : '$count items',
            textAlign: TextAlign.start,
            style: TextStyle(letterSpacing: 1.2),
          ),
          PositionedDirectional(end: 0, top: 0, child: Image.asset('assets/arrow_next.png')),
        ],
      ),
    );
  }
}

بتفحص إيه

  • EdgeInsets.only و fromLTRB ← EdgeInsetsDirectional
  • Alignment.centerLeft وأخواتها ← AlignmentDirectional
  • Positioned بـ left/right ← PositionedDirectional
  • BorderRadius.only وجوانب Border ← نسخها الـ Directional
  • TextAlign.left/right ← start/end
  • TextDirection.ltr المتثبّت، و letterSpacing مع العربي، وصور الأسهم من غير matchTextDirection، والجمع المكتوب بالإيد، ونسيان الـ localization delegates

افهم السبب

أسئلة

ليه left و right بيبوّظوا التطبيق في العربي؟
EdgeInsets.only(left:) و Alignment.centerLeft دايمًا بيشاوروا على الشمال الفعلي. في العربي الشاشة بتتقري من اليمين، فالمسافات والمحاذاة بتيجي في الجنب الغلط. النسخ الـ Directional بتستخدم start و end، وبيمشوا مع اتجاه اللغة.
الكود المصلّح آمن أحطه مكان القديم؟
التصليح التلقائي بيغيّر أسماء الـ constructors والـ arguments لنسخها الـ Directional بنفس القيم. التنبيهات بسيبهالك تقرر فيها، لأن الاتجاه الثابت أحيانًا بيكون مقصود، زي أرقام التليفون.
الكود بتاعي بيتبعت لسيرفر؟
لأ. الفحص كله بيحصل في المتصفح بتاعك.

بتبني تطبيق Flutter بالعربي والإنجليزي؟

ببني تطبيقات Flutter باللغتين مع دعم RTL من أول شاشة.

برمجة تطبيقات Flutter

متاح لمشاريع جديدة

واتسابالبريد الإلكتروني

حساباتي