/images/avatar.jpg

ShrinkWrap vs Slivers in Flutter

🧠 خلاصه: ShrinkWrap در برابر Slivers در فلاتر

در فلاتر، مدیریت صحیح ویجت‌های قابل اسکرول برای دستیابی به عملکرد بهتر و تجربه کاربری روان‌تر اهمیت بالایی دارد. این پست به بررسی دو روش رایج می‌پردازد: استفاده از shrinkWrap و به‌کارگیری Slivers.

🔹 ShrinkWrap

  • تعریف: ویژگی‌ای که اگر مقدار آن روی true تنظیم شود، باعث می‌شود ویجت قابل اسکرول، اندازه خود را بر اساس فرزندانش تنظیم کند و نه فضای موجود.
  • موارد استفاده:
    • زمانی که یک ویجت قابل اسکرول را داخل ویجت قابل اسکرول دیگری قرار می‌دهید (مثلاً ListView داخل Column).
    • زمانی که تعداد ویجت‌های فرزند کم و مشخص است.
  • نکات مهم:
    • استفاده در لیست‌های بزرگ می‌تواند باعث افت عملکرد شود، زیرا باید اندازه تمام فرزندان را محاسبه کند.
    • ممکن است منجر به خطاهای محدودیت و overflow شود اگر به درستی مدیریت نشود.

✅ مثال با shrinkWrap

Column(
  children: [
    Text('Header'),
    ListView.builder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: 5,
      itemBuilder: (context, index) => ListTile(
        title: Text('آیتم \$index'),
      ),
    ),
  ],
)

🔹 Slivers

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

✅ مثال با Slivers

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('دموی Sliver'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text('آیتم \$index'),
        ),
        childCount: 20,
      ),
    ),
  ],
)

🆚 مقایسه

ویژگیShrinkWrapSlivers
پیچیدگیپیاده‌سازی ساده‌ترپیچیده‌تر، نیازمند درک Sliverها
عملکردناکارآمد در لیست‌های بزرگبهینه‌شده برای مجموعه داده‌های بزرگ
سفارشی‌سازیمحدودبسیار قابل سفارشی‌سازی
موارد استفادهویجت‌های اسکرول کوچک و تو در توافکت‌های اسکرول پیشرفته و لیست‌های حجیم

📝 جمع‌بندی

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