في درس اليوم سوف نتعرف على كيفية التعامل مع ابعاد الشاشات المختلفه في flutter وفي هذا الدرس سوف يكون اول درس في هذه السلسله وسوف نبدء معكم بتعلم فكرة عمل OrientationBuilder  وهي بكل بساطة عباره عن خاصية تسمح لنا بتحديد ابعاد الشاشه بكل سهوله انه عليك ان يكون الbody يبدء ب OrientationBuilder وبعدها تحتاج منك builder وهو يحتاج الى (context , orientation)  وبعدها نقوم بعمل تاكد اذا كانت الحالة صحيحه ام لا واذا كانت كذلك سوف يتم ارجاع التصميم عباره عن مجموعة من القوائم التي تحت بعضها واذا يكن كذلك فهذا يدل ان الهاتف في الوضع الافقي ولذلك سوف نقوم بتقسيم الشاشه الى 3 اجزاء ويظهر في السطر الواحد ثلاث عناصر .

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

الثانية اداء ممتاز. يجمع Dart إلى التعليمات البرمجية الأصلية ، ويوفر Flutter عناصر واجهة المستخدم الخاصة به ، لذلك ليست هناك حاجة لاستخدام أدوات OEM. هذا يعني أن الاتصال بين التطبيق والنظام الأساسي سيكون أقل توسطًا. “Flutter هو أول SDK للجوال يتيح طرق عرض تفاعلية دون الحاجة إلى جسر JavaScript ،” كما تصفه الشركة. كل هذا يضيف إلى أوقات بدء التطبيق الأسرع ومخاوف أقل بشأن الأداء.

كما شرحنا كلم في الاعلى الفكرة . عليك ان تضع التصميم يبدء ب OrientationBuilder لكي تتمكن من استخدامها ويستطيع تحديد ابعاد الشاشه الحاليه .

OrientationBuilder.code

class CodeLess extends StatelessWidget {
  const CodeLess({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: OrientationBuilder(
        builder: (context , orientation) {
          return orientation == Orientation.portrait ?
          ListView.builder(
          itemCount: 30,
          itemBuilder: (context , index) {
          return ListTile(
          leading: Icon(Icons.favorite_rounded),
          title: Text('Text $index'),
          );
          }
          )

          :

          GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          // distance between h / w ,
          childAspectRatio: 6
          ),
          itemCount: 30,
          itemBuilder: (context , index) {
          return ListTile(
          leading: Icon(Icons.favorite_rounded),
          title: Text('Text $index'),
          );
          }
          );

        },
        )
    );
  }
}

لمزيد من المقالات والدروس في فلاتر