في هذه الصفحة
المقدمة
النهاردة هنتكلم عن حاجة بتقابلنا كتير في 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.
مثال على الـ Text Overflow
هنا بقوله انه لو ال text حدوده خلصت خليه يبقى على سطرين بس لو هيعدي السطرين خليه يظهر لي في آخر text "....." وباقي الكلام مش هيبان
طيب هنا softwrap ب false معناها انه النص يتناسب مع عدد السطور المحدد من غير اي مسافات
لو خليناها ب true يتناسب مع العدد المحدد بس هيخلي في مسافات بينهم
هي فعليا مش هتفرق كتير سواء true or false لأن في كلتا الحالتين هو هيكون لو زاد عن سطرين هيظهر ال …. و لكن هو ك شكلا بس
تقدروا دلوقتي تشتركوا في النشرة الأسبوعية لاقرأ-تِك بشكل مجاني تمامًا عشان يجيلكوا كل جديد بشكل أسبوعي فيما يخص مواضيع متنوعة وبشروحات بسيطة وسهلة وبجودة عالية 🚀
النشرة هيكون ليها شكل جديد ومختلف عن شكلها القديم وهنحاول انها تكون مميزة ومختلفة وخليط بين المحتوى الأساسي اللي بينزل ومفاجآت تانية كتير 🎉
Eqraatech - اقرأ-تِك
طيب هو كده امتى استخدم soft wrap ؟
ممكن نستخدم soft wrap مع text و هتكون قيمتها true من غير ما نحدد max lines وقتها الtext هينزل بشكل طبيعي لما مساحة الشاشة تخلص باختلاف احجام الاجهزة زي لو بنعرض وصف المنتج او بنكتب مقالة او اى برجراف
لو خليناها false لو احنا مش عاوزين النص ينزل علي اكتر من سطر و عايزينه يكون في سطر واحد زي لو بنكتب titles , labels مثلا
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 ابلكيشن بتاعك
في الختام
وبكدا نكون عرفنا ازاي نتعامل مع Text Overflow ، متنساش تستخدم كل خاصية على حسب الـ UI المناسب ليك و انت بتبنيه وان شاء الله هنتكلم عن بقية الأنواع في مقالات تانية
ولو في اي اضافة او طريقة تانية متنساش تشاركنا رأيك في التعليقات على المقال 👇
