كيفية اضافة امكانية لعرض النص كامل او جزء منه في فلاتر Show more - Show less Text
في هذا المقال من مقالة تطوير تطبيقات الجوال سوف نشرح لكم كيف تقوم بإضافة خاصية لقراءة المزيد والتي توجد في معظم التطبيقات المنتشره في المتاجر وهيا خاصية تكون في نهاية النص تحتوي على عباره read more وعند النقر عليها يتم عرض النص بشكل كامل بدل عرض جزء منه كما هو متعارف عليه وهذا يحسن من تطبيقك بحيث المستخدمين الذي يضعون محتوى نصي كامل يمكنك عرض فقط اول سطرين منه وعباره read more لعرض باقي تفاصيل الرساله .
تعتبر تطبيقات الهاتف المحمول حاسمة في هذه الظاهرة حيث تتوسع الرقمنة بسرعة. قد يجد المستهلكون حلولًا لكل ما يحتاجون إليه ، من الخدمات المصرفية عبر الهاتف المحمول إلى التسوق. تتطلب كل شركة تطبيقًا لخدماتها ، و iOS و Android هما النظامان الأساسيان اللذان يمكن للشركات عرض تطبيقاتها فيهما. تنفق الشركات الكثير من الأموال لتوظيف مطورين متخصصين لإنشاء تطبيقاتهم. والآن المعركة بين تطوير تطبيق React Native و Flutter على وشك أن تبدأ! كل علامة تجارية بحاجة ماسة إلى تطوير تطبيقات الهاتف المحمول. 6.64 مليار شخص ، أو 84 في المائة من سكان العالم ، سيستخدمون الهواتف المحمولة اعتبارًا من مارس 2022 ، وفقًا لتقرير. هذا يعني أن الأعمال التجارية لديها إمكانات غير محدودة. بالتالي،
add packes
dependencies:
readmore: ^2.2.0
show more and less text in Flutter
بعد تثبيت المكتبة سوف تتمكن من استخدام ReadMoreText وهذه تحتوي على امكانية لعرض النص بشكل كامل او عرض جزء من النص بحيث في البداية قمنا بتحديد اول سطرين من الرسالة وبعد النقر على read more سيتم عرض النص بشكل كامل وفي نهايه عباره Show less لغلق النص وارجاعه لاول سطرين كما هو كان عليه , هذا سوف يساعدك من تحسن شكل التطبيق الخاص بك بشكل كبير , يمكنك استخدامه في مشاريعك والاعتماد عليه .
text.dart
Padding(
padding: EdgeInsets.all(15),
child: ReadMoreText(
'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: 'Show less',
moreStyle: TextStyle(
fontSize: 14, fontWeight: FontWeight.bold, color: Colors.red),
lessStyle: TextStyle(
fontSize: 14, fontWeight: FontWeight.bold, color: Colors.red),
),
),
android sdk manager تحميل flutter developers applications create app android android studio mac
