كيف تقوم بعمل تصميم للموبايل وتصميم لسطح المكتب في Flutter ومعرفة المنصة التي يعمل عليها الهاتف وعرض التصميم المخصص لها

كيف تقوم بعمل تصميم للموبايل وتصميم لسطح المكتب في Flutter ومعرفة المنصة التي يعمل عليها الهاتف وعرض التصميم المخصص لها

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

How to Responsive Design in Flutter

في الكود التالي سوف نقوم هنا بعمل ارجاع للتصميم المناسب سواء للهاتف او لسطح المكتب حتى تتمكن من تنفيذ التصميم الصحيح على الجهاز الذي تعمل عليه في هذا الجزء يتم عمل اختبار اذا كانت الشاشه تحتوي على عرض اكبر من 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;
        }
      },
    );
  }
}

How to detect platform & show design

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

main.dart

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

code