في هذا المقال سوف نحاول تحسين مساحات التطبيق الخاصه بك حتى يعمل على الهاتف وايضا على المتصفح او كتطبيق والامر بسيط جدا فكل ما سوف نقوم به هو وضع مساحة قصوى لعرض الهاتف وهيا 720 واذا زادت المساحه سوف يتم تحويل التصميم الى وضع سطح المكتب حتى تتمكن عزيزي القارئ من عرض التصميم على شاشه سطح المكتب وسوف نقوم بعمل class جديد باسم ResponsiveLayout وسيكون المسؤول عن عرض التصميم المناسب بناء على المساحه المدخله .

في الكود التالي سوف نقوم هنا بعمل ارجاع للتصميم المناسب سواء للهاتف او لسطح المكتب حتى تتمكن من تنفيذ التصميم الصحيح على الجهاز الذي تعمل عليه في هذا الجزء يتم عمل اختبار اذا كانت الشاشه تحتوي على عرض اكبر من 720 فيتم ارجاع تصميم سطح المكتب واذا كانت اقل سيتم ارجاع تصميم الهاتف .

ResponsiveLayout.dart

const mobileWidth = 720;

class ResponsiveLayout extends StatelessWidget {
  final Widget mobileBody;
  final Widget desktopBody;

  ResponsiveLayout({required this.mobileBody, required this.desktopBody});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < mobileWidth) {
          return mobileBody;
        } else {
          return desktopBody;
        }
      },
    );
  }
}

في هذا الجزء حاول ان يكون ال body للتطبيق الخاص بك من خلال ResponsiveLayout حتى يتم عرض التصميم المناسب لك على حسب الحاله التي توجد فيها كما هو موضح هنا يتم ارجاع تصميم لسطح المكتب واخر للهاتف وبناء على قيمة عرض الشاشه يتم ارجاع التصميم المراد .

main.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ResponsiveLayout(
        mobileBody: MyMobileBody(),
        desktopBody: MyDesktopBody(),
      ),
    );
  }
  

code