تعلم كيفية ضبط حجم الخط بشكل مثالي في تطبيقات Flutter

تعلم كيفية ضبط حجم الخط بشكل مثالي في تطبيقات Flutter

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

كيفية جعل حجم الخط Responsive؟

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

خطوات حساب عامل التحجيم

1. احسب عامل التحجيم

لنفترض أن لدينا ثلاثة أنواع من الأجهزة:

الهواتف المحمولة: يبلغ متوسط ​​عرضها حوالي 400 بكسل.

الأجهزة اللوحية: يبلغ متوسط ​​العرض حوالي 700 بكسل.

سطح المكتب: يبلغ متوسط ​​العرض حوالي 1000 بكسل.

لحساب عامل القياس، نأخذ عرض الجهاز الذي يعمل عليه التطبيق ونقسمه على المتوسط ​​لكل منصة.

مثال: إذا كان عرض الجهاز = 500 بكسل، فهذا يعني أن الجهاز هاتف محمول. عامل الحجم

1.25 = 500 / 400 = Scale Factor

2. قم بتطبيق عامل القياس على حجم الخط

بعد حساب عامل القياس، نقوم بضربه بحجم الخط الافتراضي للوصول إلى حجم الخط الصحيح.

حجم الخط المستجيب = 20 × 1.25 = 25

3. حدد الحدود الدنيا والعليا لحجم الخط

من المهم التحقق من حجم الخط بحيث لا يكون كبيرًا جدًا أو صغيرًا جدًا. ولتحقيق ذلك، قمنا بتحديد الحد الأقصى والحد الأدنى لمعدل النمو:

الحد الأقصى للتكبير: 120% من حجم الخط الافتراضي.

الحد الأدنى للحجم: 80% من حجم الخط الافتراضي. وبهذه الطريقة نضمن أن يظل حجم الخط مناسبًا وغير مبالغ فيه، بغض النظر عن الشاشة.

كيفية تنفيذ هذه الطريقة في Flutter

لتنفيذ هذه الفكرة بشكل صحيح في Flutter، تحتاج إلى ضبط TextScaler على 1.0 في MaterialApp. وهذا يضمن أن حجم الخط في التطبيق لن يتأثر بالتغييرات التي تطرأ على حجم الخط الافتراضي للنظام.

MaterialApp(
  builder: (context, child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: child,
    );
  },
);