</>پیشگامان خلاقآکادمی و استودیو دیجیتال
ویجت ها

ویجت FractionallySizedBoxویجت FractionallySizedBox

تعیین سایز ویجت با درصد با کمک این ویجت طراحی ریسپانسیو راحت مییشه و دیگر نگران بهم ریختی اندازه ها در صفحات مختلف نیستی

وراهنمای مرحله‌ای
تعیین سایز ویجت با درصد با کمک این ویجت طراحی ریسپانسیو راحت مییشه و دیگر نگران بهم ریختی اندازه ها در صفحات مختلف نیستی

ویجت FractionallySizedBox که در نسخه 3.0 فلاتر معرفی شده، به شما امکان می‌دهد تا اندازه یک ویجت را به صورت کسری از اندازه والد آن تنظیم کنید. این ویجت می‌تواند برای ایجاد طرح‌های انعطاف‌پذیر و ریسپانسیو که به طور خودکار با اندازه صفحه نمایش سازگار می‌شوند، مفید باشد.

برخی از ویژگی‌های کلیدی ویجت FractionallySizedBox عبارتند از:

  • قابلیت تنظیم اندازه: می‌توانید اندازه ویجت را به صورت کسری از عرض یا ارتفاع والد آن تنظیم کنید.
  • قابلیت تنظیم موقعیت: می‌توانید موقعیت ویجت را در داخل والد آن تنظیم کنید.
  • قابلیت انعطاف‌پذیری: ویجت FractionallySizedBox به طور خودکار با اندازه صفحه نمایش سازگار می‌شود.

مثال:

فرض کنید می خواهید یک طرح دو ستونه ایجاد کنید که در آن ستون سمت چپ 20 درصد و ستون سمت راست 80 درصد عرض صفحه را اشغال کند. برای این کار می توانید از کد زیر استفاده کنید:

Dart

Row(
  children: [
    FractionallySizedBox(
      widthFactor: 0.2,
      child: Container(
        color: Colors.red,
      ),
    ),
    FractionallySizedBox(
      widthFactor: 0.8,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

بخش عملی این مطلب

از مفهوم تا استفاده واقعی

یادگیری پروژه‌محور
به زبان ساده

مفهوم را به یک تصمیم یا خروجی قابل مشاهده وصل کن. اگر نتوانی بگویی این نکته در چه موقعیتی به کار می‌آید، هنوز باید آن را با یک مثال ساده‌تر بررسی کنی.

یک مثال از دنیای واقعی

برای یک کسب‌وکار کوچک، قبل از ساخت محصول کامل یک نمونه یک‌صفحه‌ای آماده کن و از سه کاربر بخواه فقط یک کار اصلی را انجام دهند. رفتار واقعی آن‌ها از حدس‌های تیم ارزشمندتر است.

مسئله: کاربر چه کاری را سخت انجام می‌دهد؟
نسخه کوچک: فقط مهم‌ترین جریان
معیار موفقیت: ۳ کاربر بدون راهنمایی کار را کامل کنند
قدم بعد: اصلاح بزرگ‌ترین مانع
تمرین ۲۰ دقیقه‌ای

حالا نوبت توست

یک مسئله واقعی از کار یا زندگی خودت انتخاب کن و نسخه کوچک راه‌حل را در سه خط توضیح بده.

  1. نمونه را یک‌بار اجرا یا بازنویسی کن.
  2. تغییر خواسته‌شده را بدون کپی کامل انجام بده.
  3. خروجی را با انتظار خودت مقایسه کن.
  4. در یک جمله توضیح بده چرا راه‌حل کار کرد.
سه نکته‌ای که باید یادت بماند
۱

اول مسئله و خروجی مورد انتظار را روشن کن؛ بعد ابزار را انتخاب کن.

۲

نمونه کوچکِ کامل از پروژه بزرگِ نیمه‌تمام بیشتر به یادگیری کمک می‌کند.

۳

کد را فقط نخوان؛ تغییرش بده، خطا بساز و دلیل نتیجه را توضیح بده.

این مسیر را ادامه بده

تمرین این صفحه را انجام بده، نتیجه را برای خودت توضیح بده و بعد سراغ درس مرتبط بعدی برو.

انتخاب مسیر بعدی ←