كيفية تقسيم جزء معين من التصميم في الشاشه باستخدام FractionallySizedBox

Ahmed Mahmoud

اخر تحديث :

كيفية تقسيم جزء معين من التصميم في الشاشه باستخدام FractionallySizedBox

فكرة الFractionallySizedBox بسيطة جدا جدا وهيا مهمه للغايه لكي تحافظ على تشغيل التطبيقات على مختلف المنصات والهواتف المختلفه ولا يحدث معك مشاكل خلافا عن المقاسات الثابته التي تقوم بإعطائها للتطبيق والعناصر بداخله وهذه النسب لا تكون دقيقه لان الهواتف تختلف من نسبة الطول للارتفاع بين الهواتف والشاشات والمتصفحات ولهذا سوف نشرح فكرة الFractionallySizedBox وهي ستوفر عليكم الكثير من العناء .

يعمل Flutter بجد لتوسيع قاعدة الشفرة نفسها عبر أي شيء به شاشة ، بما في ذلك Android و iOS و Web و Desktop ، يمكنك استخدام نفس قاعدة الشفرة بشكل فعال لإنشاء تطبيقات للويب سريع الاستجابة (تتنافس مع أطر عمل SPA مثل React و Angular و Vue) ، وسطح المكتب (يتنافس مع Electron و Qt) ، ونأمل أن تكون الأجهزة المضمنة والمزيد في المستقبل مع القليل من الجهد الإضافي.

ليس من السهل إنشاء العديد من تطبيقات Flutter (تسمى أهداف في Flutter) من قاعدة كود واحدة. من خلال شعارها "اكتب مرة واحدة ، ركض في أي مكان" ، وعدت React Native العالم أيضًا بهذا الشيئ ، ولكن كما يشهد المطورون ، فإن هذا بعيد كل البعد عن الواقع.

ببساطة قم بعمل FractionallySizedBox وبداخلها heightFactor و widthFactor وتقوم بوضع لهم نسبة مئوية وهنا قمنا بجعل الطول الخاص به ياخذ 80% من الشاشه و العرض ياخذ 60% من عرض الشاشه كامله ويمكنك تقسيم المشروع الخاص بك كما ترغب بالمقاسات التي تريدها .

FractionallySizedBox.dart

class Test extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child : FractionallySizedBox(
            heightFactor: 0.8,
            widthFactor: 0.6,
            child: Container(
              color: Colors.red,
              child: const Center(child: Text('GeeCoders'),),
            ),
          )
      ),
    );
  }
}