المقدمة

النهاردة هنتكلم عن حاجة بتقابلنا كتير  في Flutter و هي Overflow Errors هنتعرف علي انواعه و ازاي نقدر نحل كل نوع منهم.

في انواع كتير من ال Overflow زي

  • Text overflow 
  • Widget overflow 
  • Flex overflow
  • List overflow
  • Overflow bar
  • Scaffold overflow 

فتعالوا نتعرف على الـ Text Overflow ونشوف هنتعامل معاه ازاي

Text Overflow

اما نيجي نحط اي Text عندنا في الصفحة  بيكون عندنا أحجام مختلفة منه و احنا بنشتغل علي مقاسات أجهزة مختلفة خصوصا ان النص مش هيكون لوحده احنا بنحط معاه صور و ايقونات.

فممكن يحصل overflow لو حجم النص كبير و الشاشة صغيرة و بيعمل مشكلة في الشكل عندك فلازم نتاكد ان حجم النص اللي حاطينه هيكون مناسب لكل الاجهزة و يكون متناسق مع الشكل العام للتطبيق بتاعنا. 

خلينا نشوف فلاتر وفرت لنا ايه علشان نحل المشكلة دي 🌟

في Text Widget في Property اسمها Overflow  دي بتتحكم ايه اللي هيحصل لما ال Text حجمه يعدي الحجم المسموح ليه او هيتعرض إزاى و دي بتاخد قيم مختلفة و بيكون معاها كذا property  تانيين علشان ال Text يتعرض بشكل مظبوط .

الـ Max Lines Property

دي بتحدد عدد السطور اللي الtext  ممكن ينزل فيها لو حجمه زاد عن عرض الشاشة  و دي بتاخد ارقام integers .

الـ Softwrap Property

و دي بتحدد اذا كان ال text ممكن ينزل علي كذا سطر ولا هيفضل مكمل في سطر واحد و دي بتاخد قيمة Bool  

لو False  معناها لو عدي حجم الشاشة مش هينزل علي سطر تاني 

لو True  لو عدي الحجم بتاع الشاشة يقدر ينزل علي اكتر من سطر على حسب المناسب لحجم الشاشة 

قيم الـ Overflow المختلفة وازاي نستخدمها مع بعض

خلينا نشوف قيم ال overflow المختلفة و ازاي نقدر نستخدمها مع بعض 

  • الـ Overflow.ellipsis: 

دي اما يحصل overflow بخلي بقيت الكلام يبان علي هيئة نقط (....) 

  • الـ overflow.visible:

و هنا هيخلي النص يظهر كله حتى لو حدود  container و ممكن يبوظ شكل الصفحة لو كانت تحته عناصر تانية لازم نستخدمه صح على حسب احتياجنا 

  • الـ Overflow.fade 

هنا لو محددة مساحة معينة ال text مفروض يكون فيها لو المساحة دي خلصت ال text هيكون شفاف اكنه مش موجود 

  • الـ Overflow.clip 

هنا اي نص زيادة عن حجم الشاشة عندي هيقصه و مش هيتعرض 

  • الـ Overflow.values 

 تعرضلي قائمة بكل القيم الممكنة لخاصية الـ Text OverFlow. 

Overflow.values

مثال على الـ Text Overflow

Text Overflow

هنا بقوله انه لو ال text حدوده خلصت خليه يبقى على سطرين بس لو هيعدي السطرين خليه يظهر لي في آخر text "....." وباقي الكلام مش هيبان 

طيب هنا softwrap ب false معناها انه النص يتناسب مع عدد السطور المحدد من غير اي مسافات

لو خليناها ب true يتناسب مع العدد المحدد بس هيخلي في مسافات بينهم 

هي فعليا مش هتفرق كتير سواء true or false لأن في كلتا الحالتين هو هيكون لو زاد عن سطرين هيظهر ال …. و لكن هو ك شكلا بس 

💡
خلي بالك لو استخدمت maxline لوحدها من غير overflow هيديك ايرور 

طيب هو كده امتى استخدم soft wrap ؟

ممكن نستخدم soft wrap مع text و هتكون قيمتها true من غير ما نحدد max lines وقتها الtext هينزل بشكل طبيعي لما مساحة الشاشة تخلص باختلاف احجام الاجهزة زي لو بنعرض وصف المنتج او بنكتب مقالة او اى برجراف 

لو خليناها false لو احنا مش عاوزين النص ينزل علي اكتر من سطر و عايزينه يكون في سطر واحد زي لو بنكتب titles , labels مثلا 

Using Softwrap in Text Overflow

Output

لو انا بقي عايزة النص يكون فيه scrolling أو جزء منه يتقص و ينزل على سطر تاني او ميكونش موجود خالص فهنا بستخدم overflow مع maxlines و يفضل ان  softwrap تكون ب false و دا ال output  للأمثلة اللي قلناها 

طيب اكيد ال text بيكون موجود جوه widget تانية سواء row أو column و هيكون له fontsize هنا ممكن يحصل overflow  لو الخط كبير و الشاشة صغيرة

هنا ممكن استخدم Expanded و هستخدم معاها overflow  عادي و لو هتحط max line برضو عادي علي حسب الشكل اللي عايزة 

او fitted box مع ال expanded و هنا هستخدم معاه fit : box fit.scale down كدا هو هيخلي حجم الخط علي حسب الشاشة هيصغره لو هو حجمه كبير و هنا لو حطتله max lines مش هيعمل حاجة و هيتجاهلها علشان fit هيفضل يصغر في الخط علشان يخليها على سطر واحد 

في بقي باكدج اسمها autosize text دي تقدر تظبط شكل الخط بيها و تقوله انه لو صغر الخط ميصغرش عن قيمة معينة علشان شكل text تقدر تبص عليها من هنا و تقرأ عنها اكتر و لكن طبعا يفضل انك تظبط الخط بنفسك علشان الباكدجات بتقلل من performance ابلكيشن بتاعك 

auto_size_text | Flutter package
Flutter widget that automatically resizes text to fit perfectly within its bounds.
Dart packages

في الختام

وبكدا نكون عرفنا ازاي نتعامل مع Text Overflow ، متنساش تستخدم كل خاصية على حسب الـ UI المناسب ليك و انت بتبنيه وان شاء الله هنتكلم عن بقية الأنواع في مقالات تانية

ولو في اي اضافة او طريقة تانية متنساش تشاركنا رأيك في التعليقات على المقال 👇