آشنایی با قابلیت Sliver در برنامه نویسی فلاتر

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

یکی از مهم‌ترین قابلیت‌های فریم‌ورک فلاتر (Flutter) برای طراحی رابط‌های کاربری پیشرفته، Sliver است. Sliver مجموعه‌ای از ویجت‌های قدرتمند است که امکان ساخت اسکرول‌های سفارشی (Custom Scroll)، هدرهای چسبنده (Sticky Header)، نوارهای ابزار متحرک (Collapsible AppBar)، لیست‌های بهینه و صفحات پویا را فراهم می‌کند. برخلاف ویجت‌های معمولی مانند ListView و GridView، اسلیورها کنترل بسیار بیشتری روی نحوه نمایش و رفتار عناصر هنگام اسکرول در اختیار توسعه‌دهنده قرار می‌دهند.

امروزه بسیاری از اپلیکیشن‌های مطرح مانند Google Play، Gmail، Google Photos و ده‌ها برنامه دیگر از قابلیت‌های مشابه Sliver برای ایجاد تجربه‌ای روان و حرفه‌ای استفاده می‌کنند. اگر قصد دارید رابط‌های کاربری مدرن، انعطاف‌پذیر و با عملکرد بالا در فلاتر طراحی کنید، یادگیری Sliver یکی از مهارت‌های ضروری برای شما خواهد بود.

در این مقاله از آکادمی آموزنگار، ابتدا با مفهوم Sliver در فلاتر آشنا می‌شویم، سپس معماری و نحوه عملکرد آن را بررسی می‌کنیم و در ادامه مهم‌ترین ویجت‌های Sliver مانند SliverAppBar، SliverList، SliverGrid و SliverPersistentHeader را همراه با مثال‌های عملی معرفی خواهیم کرد. در پایان نیز با بهترین کاربردها، مزایا و نکات مهم استفاده از Sliver در پروژه‌های واقعی آشنا می‌شوید.

Sliver‌ در فلاتر چیست؟

Sliver یکی از قدرتمندترین قابلیت‌های فریمورک فلاتر برای ساخت رابط‌های کاربری اسکرول‌شونده (Scrollable UI) است. واژه Sliver در لغت به معنای «تکه‌ای باریک» یا «بخش نازک» است، اما در فلاتر به ویجت‌هایی گفته می‌شود که بخشی از یک ناحیه اسکرول‌پذیر را تشکیل می‌دهند. این ویجت‌ها درون CustomScrollView قرار می‌گیرند و به توسعه‌دهندگان اجازه می‌دهند رفتار اسکرول، نمایش و تغییر اندازه عناصر رابط کاربری را با دقت بسیار بالایی کنترل کنند.

برخلاف ویجت‌های رایج مانند ListView، GridView یا SingleChildScrollView که امکانات از پیش تعیین‌شده‌ای دارند، Sliverها انعطاف‌پذیری بسیار بیشتری ارائه می‌دهند. با استفاده از آن‌ها می‌توانید رابط‌های کاربری پویا و حرفه‌ای ایجاد کنید؛ برای مثال نوار ابزاری که هنگام اسکرول کوچک یا مخفی می‌شود، هدرهای چسبنده (Sticky Header)، لیست‌ها و گریدهای با عملکرد بالا یا ترکیبی از چندین نوع نمایش مختلف در یک صفحه.

یکی از مهم‌ترین ویژگی‌های Sliver، بهینه‌سازی مصرف حافظه و افزایش عملکرد (Performance) است. Sliverها تنها ویجت‌هایی را که در محدوده قابل مشاهده صفحه قرار دارند ایجاد (Render) می‌کنند و با خروج آن‌ها از صفحه، منابع موردنیاز را آزاد می‌کنند. این موضوع باعث می‌شود حتی در صفحات دارای هزاران آیتم نیز عملکرد برنامه روان و سریع باقی بماند.

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

تفاوت Sliver با ویجت‌های معمولی

برای درک بهتر، تفاوت بین ویجت‌های معمولی و Sliver را در جدول زیر مشاهده کنید:

به همین دلیل، اگر قصد دارید رابط‌های کاربری مدرن و مشابه اپلیکیشن‌هایی مانند Google Play، Gmail، Google Photos یا سایر برنامه‌های حرفه‌ای طراحی کنید، یادگیری Sliver یکی از مهارت‌های ضروری در توسعه اپلیکیشن‌های فلاتر خواهد بود.

تفاوت بین رابط کاربری استاندارد و Sliverها

در فلاتر، برای ساخت صفحات اسکرول‌شونده معمولاً از ویجت‌هایی مانند ListView، GridView، SingleChildScrollView و AppBar استفاده می‌شود. این ویجت‌ها برای اکثر پروژه‌های ساده و متوسط کاملاً مناسب هستند و بدون نیاز به تنظیمات پیچیده، امکان نمایش لیست‌ها، گریدها و سایر عناصر رابط کاربری را فراهم می‌کنند. با این حال، زمانی که بخواهید رابط‌های کاربری پیشرفته با رفتارهای سفارشی هنگام اسکرول طراحی کنید، این ویجت‌ها محدودیت‌هایی خواهند داشت.

برای مثال، اگر بخواهید AppBar هنگام اسکرول کوچک شود، یک هدر در بالای صفحه ثابت بماند (Sticky Header)، چندین لیست و گرید را در یک اسکرول واحد ترکیب کنید یا انیمیشن‌های پیچیده هنگام اسکرول ایجاد کنید، استفاده از ویجت‌های استاندارد به‌تنهایی کافی نیست. در چنین شرایطی معمولاً باید از راه‌حل‌های پیچیده یا چندین ویجت تو در تو استفاده کنید که علاوه بر افزایش پیچیدگی کد، ممکن است روی عملکرد برنامه نیز تأثیر منفی بگذارد.

در مقابل، Sliverها دقیقاً برای حل این مشکلات طراحی شده‌اند. با استفاده از CustomScrollView می‌توانید چندین Sliver مختلف مانند SliverAppBar، SliverList، SliverGrid و SliverPersistentHeader را در کنار یکدیگر قرار دهید و یک رابط کاربری یکپارچه، روان و کاملاً قابل سفارشی‌سازی ایجاد کنید. علاوه بر این، Sliverها تنها ویجت‌هایی را که در محدوده قابل مشاهده صفحه قرار دارند رندر می‌کنند؛ به همین دلیل در نمایش لیست‌های بزرگ و صفحات پیچیده، عملکرد بهتری نسبت به بسیاری از ویجت‌های معمولی دارند.

مقایسه رابط کاربری استاندارد و Sliver

چه زمانی از Sliver استفاده کنیم؟

استفاده از Sliver زمانی توصیه می‌شود که بخواهید:

• یک AppBar با قابلیت کوچک یا بزرگ شدن هنگام اسکرول ایجاد کنید.
• Sticky Header یا هدر ثابت طراحی کنید.
• لیست، گرید و سایر بخش‌های رابط کاربری را در یک اسکرول واحد ترکیب کنید.
• صفحات طولانی با هزاران آیتم و عملکرد بالا پیاده‌سازی کنید.
• رابط‌های کاربری مدرن مشابه Google Play، Gmail، Google Photos یا سایر اپلیکیشن‌های حرفه‌ای بسازید.

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

آموزش پیاده‌سازی SliverList در فلاتر

یکی از پرکاربردترین ویجت‌های خانواده Sliver، ویجت SliverList است. این ویجت برای نمایش لیست‌های اسکرول‌شونده با تعداد زیادی آیتم طراحی شده و از نظر عملکرد شباهت زیادی به ListView.builder دارد. تفاوت اصلی این است که SliverList تنها درون CustomScrollView قابل استفاده است و می‌تواند در کنار سایر Sliverها مانند SliverAppBar و SliverGrid قرار گیرد.

SliverList آیتم‌ها را به‌صورت Lazy Loading ایجاد می‌کند؛ یعنی فقط ویجت‌هایی که در محدوده قابل مشاهده صفحه قرار دارند ساخته (Render) می‌شوند. این ویژگی باعث کاهش مصرف حافظه و افزایش سرعت اجرای برنامه، به‌خصوص در لیست‌های طولانی، می‌شود.

ساختار کلی SliverList

برای استفاده از SliverList ابتدا باید یک CustomScrollView ایجاد کنید و سپس SliverList را در بخش slivers قرار دهید.

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            leading: CircleAvatar(
              child: Text("${index + 1}"),
            ),
            title: Text("آیتم شماره ${index + 1}"),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

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

مثال کامل SliverList

در مثال زیر یک لیست شامل ۵۰ آیتم نمایش داده می‌شود.

import 'package:flutter/material.dart';

class SliverListExample extends StatelessWidget {
  const SliverListExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [

          SliverAppBar(
            floating: true,
            pinned: true,
            expandedHeight: 180,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("SliverList Example"),
            ),
          ),

          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return Card(
                  margin: const EdgeInsets.symmetric(
                    horizontal: 16,
                    vertical: 8,
                  ),
                  child: ListTile(
                    leading: CircleAvatar(
                      child: Text("${index + 1}"),
                    ),
                    title: Text("آیتم شماره ${index + 1}"),
                    subtitle: Text("نمونه استفاده از SliverList"),
                  ),
                );
              },
              childCount: 50,
            ),
          ),

        ],
      ),
    );
  }
}

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

آشنایی با SliverChildBuilderDelegate

مهم‌ترین بخش SliverList، کلاس SliverChildBuilderDelegate است.

این کلاس مشابه ListView.builder عمل می‌کند و تنها زمانی که یک آیتم موردنیاز باشد آن را ایجاد می‌کند.

SliverChildBuilderDelegate(
  (context, index) {
    return Text("Item $index");
  },
  childCount: 100,
)

پارامترهای مهم آن عبارت‌اند از:

• builder : تابعی که هر آیتم را ایجاد می‌کند.
• childCount : تعداد آیتم‌های لیست.
• findChildIndexCallback : برای مدیریت بهتر تغییرات لیست.
• addAutomaticKeepAlives : نگهداری وضعیت ویجت‌ها.
• addRepaintBoundaries : بهینه‌سازی عملیات رسم.
• addSemanticIndexes : بهبود دسترسی (Accessibility).

تفاوت SliverList و ListView.builder

چه زمانی از SliverList استفاده کنیم؟

استفاده از SliverList زمانی توصیه می‌شود که:

• صفحه دارای SliverAppBar باشد.
• بخواهید لیست را با SliverGrid ترکیب کنید.
• صفحه شامل چندین بخش اسکرول‌شونده باشد.
• رابط کاربری مشابه Google Play، Gmail یا Google Photos طراحی کنید.
• عملکرد بالا در نمایش لیست‌های طولانی اهمیت داشته باشد.

کاربرد SliverGrid در فلاتر

SliverGrid یکی از ویجت‌های خانواده Sliver در فلاتر است که برای نمایش مجموعه‌ای از آیتم‌ها به‌صورت شبکه‌ای (Grid) در یک صفحه اسکرول‌شونده استفاده می‌شود. این ویجت عملکردی مشابه GridView دارد، اما به‌گونه‌ای طراحی شده است که درون CustomScrollView قرار گیرد و بتواند در کنار سایر Sliverها مانند SliverAppBar، SliverList و SliverPersistentHeader استفاده شود.

SliverGrid برای صفحاتی مناسب است که نیاز به نمایش تعداد زیادی آیتم در قالب چند ستون دارند. این ویجت تنها آیتم‌هایی را که در محدوده قابل مشاهده صفحه قرار دارند ایجاد (Render) می‌کند؛ بنابراین مصرف حافظه کاهش یافته و عملکرد برنامه، حتی در نمایش صدها یا هزاران آیتم، بسیار روان باقی می‌ماند.

از آنجایی که SliverGrid بخشی از ساختار CustomScrollView است، می‌توان آن را به‌راحتی با سایر Sliverها ترکیب کرد و رابط‌های کاربری مدرن و حرفه‌ای طراحی نمود.

مهم‌ترین کاربردهای SliverGrid

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

• نمایش محصولات در فروشگاه‌های اینترنتی
• گالری تصاویر و آلبوم عکس
• نمایش دسته‌بندی‌ها (Categories)
• صفحه فیلم‌ها و سریال‌ها
• نمایش آیکون‌ها و منوهای اصلی
• لیست بازی‌ها یا برنامه‌ها در مارکت‌ها
• داشبوردهای مدیریتی با کارت‌های اطلاعاتی

مزایای استفاده از SliverGrid

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

تفاوت SliverGrid و GridView

چه زمانی از SliverGrid استفاده کنیم؟

استفاده از SliverGrid زمانی توصیه می‌شود که:

• قصد دارید یک فروشگاه اینترنتی یا کاتالوگ محصولات طراحی کنید.
• صفحه شامل هدر متحرک (SliverAppBar) و بخش‌های مختلف اسکرول‌شونده باشد.
• بخواهید لیست و گرید را در یک صفحه ترکیب کنید.
• پروژه نیاز به عملکرد بالا و تجربه کاربری روان داشته باشد.
• در حال توسعه رابط‌های کاربری مدرن با Flutter و CustomScrollView باشید.

پیاده‌سازی SliverAppBar

یکی از پرکاربردترین ویجت‌های خانواده Sliver، ویجت SliverAppBar است. این ویجت نسخه پیشرفته‌تر AppBar محسوب می‌شود و امکان ایجاد نوار ابزاری پویا را فراهم می‌کند که هنگام اسکرول می‌تواند کوچک شود، بزرگ شود، ثابت بماند یا حتی به‌طور کامل مخفی شود. به همین دلیل، SliverAppBar یکی از مهم‌ترین ابزارها برای طراحی رابط‌های کاربری مدرن در فلاتر است.

برخلاف AppBar معمولی که همیشه اندازه ثابتی دارد، SliverAppBar درون CustomScrollView قرار می‌گیرد و رفتار آن به میزان اسکرول صفحه وابسته است. این ویژگی باعث می‌شود بتوان صفحات جذابی مشابه اپلیکیشن‌های Google Play، Gmail، Google Photos و بسیاری از برنامه‌های حرفه‌ای طراحی کرد.

ساختار کلی SliverAppBar

برای استفاده از SliverAppBar ابتدا باید یک CustomScrollView ایجاد کنید و سپس SliverAppBar را در لیست slivers قرار دهید.

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 220,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text("Flutter Sliver"),
      ),
    ),

    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text("Item $index"),
        ),
        childCount: 30,
      ),
    ),
  ],
)

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

مثال کامل SliverAppBar

import 'package:flutter/material.dart';

class SliverAppBarExample extends StatelessWidget {
  const SliverAppBarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [

          SliverAppBar(
            expandedHeight: 250,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text("آموزش SliverAppBar"),
              background: Image.network(
                "https://picsum.photos/800/600",
                fit: BoxFit.cover,
              ),
            ),
          ),

          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  leading: CircleAvatar(
                    child: Text("${index + 1}"),
                  ),
                  title: Text("آیتم شماره ${index + 1}"),
                );
              },
              childCount: 40,
            ),
          ),

        ],
      ),
    );
  }
}

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

مهم‌ترین ویژگی‌های SliverAppBar

expandedHeight

ارتفاع نوار ابزار در حالت باز را مشخص می‌کند.

expandedHeight: 250,

pinned

اگر مقدار آن true باشد، پس از کوچک شدن، AppBar در بالای صفحه ثابت می‌ماند.

pinned: true,

اگر مقدار آن false باشد، هنگام اسکرول کاملاً مخفی می‌شود.

floating

مشخص می‌کند آیا AppBar هنگام اسکرول به سمت بالا بلافاصله ظاهر شود یا خیر.

floating: true,

snap

این ویژگی فقط زمانی قابل استفاده است که floating برابر true باشد.

floating: true,
snap: true,

در این حالت، با یک اسکرول کوچک، AppBar به‌صورت کامل باز یا بسته می‌شود.

stretch

امکان کشیده شدن AppBar هنگام کشیدن صفحه به سمت پایین (Pull Down) را فراهم می‌کند.

stretch: true,

FlexibleSpaceBar

برای ایجاد محتوای پویا در بخش بزرگ‌شونده AppBar استفاده می‌شود.

flexibleSpace: FlexibleSpaceBar(
  title: Text("Flutter"),
  background: Image.asset(
    "images/flutter.jpg",
    fit: BoxFit.cover,
  ),
)

در این بخش می‌توان از تصویر، ویدئو، گرادیان یا هر ویجت دلخواه استفاده کرد.

تفاوت pinned و floating

چه زمانی از SliverAppBar استفاده کنیم؟

استفاده از SliverAppBar در شرایط زیر توصیه می‌شود:

• طراحی هدرهای متحرک (Collapsible Header)
• نمایش تصاویر بزرگ در ابتدای صفحه
• ساخت صفحات پروفایل کاربران
• طراحی صفحات فروشگاهی
• پیاده‌سازی رابط‌های کاربری مشابه Google Play و Gmail
• ایجاد تجربه کاربری مدرن و روان

مزایای SliverAppBar

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

ایجاد نوار ابزار پویا و انیمیشن‌دار

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

عملکرد روان هنگام اسکرول

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

امکان استفاده از تصاویر و محتوای سفارشی

با استفاده از FlexibleSpaceBar می‌توانید در بخش بالایی SliverAppBar از تصاویر، آیکون‌ها، متن، گرادیان‌ها، ویدئو یا هر ویجت دلخواه دیگری استفاده کنید. این قابلیت به شما اجازه می‌دهد هدرهای جذاب و کاملاً سفارشی برای صفحات مختلف اپلیکیشن طراحی کنید.

هماهنگی کامل با CustomScrollView

SliverAppBar به‌صورت اختصاصی برای استفاده در CustomScrollView طراحی شده است و به‌خوبی با سایر ویجت‌های خانواده Sliver هماهنگ می‌شود. این موضوع باعث می‌شود تمام بخش‌های صفحه در یک اسکرول یکپارچه و بدون مشکل با یکدیگر تعامل داشته باشند.

قابلیت ترکیب با سایر Sliverها

یکی دیگر از مزیت‌های مهم SliverAppBar، امکان استفاده در کنار ویجت‌هایی مانند SliverList، SliverGrid، SliverPersistentHeader و SliverToBoxAdapter است. این قابلیت به توسعه‌دهندگان اجازه می‌دهد صفحات پیچیده و چندبخشی را با یک ساختار منظم و قابل نگهداری پیاده‌سازی کنند.

تجربه کاربری مدرن و حرفه‌ای

امروزه بسیاری از اپلیکیشن‌های مطرح مانند Google Play، Google Photos، Gmail و فروشگاه‌های اینترنتی از نوارهای ابزار متحرک استفاده می‌کنند. SliverAppBar این امکان را فراهم می‌کند تا بدون نیاز به پیاده‌سازی‌های پیچیده، رابط‌های کاربری مشابه این برنامه‌ها ایجاد کنید و تجربه‌ای مدرن و روان در اختیار کاربران قرار دهید.

انعطاف‌پذیری بالا در سفارشی‌سازی

ویژگی‌هایی مانند pinned، floating، snap و stretch به شما اجازه می‌دهند رفتار SliverAppBar را دقیقاً مطابق نیاز پروژه تنظیم کنید. این انعطاف‌پذیری باعث می‌شود بتوان از یک نوار ابزار ساده تا هدرهای پیشرفته با انیمیشن‌های مختلف را تنها با چند خط کد پیاده‌سازی کرد.

نتیجه‌گیری

Sliver یکی از قدرتمندترین قابلیت‌های فلاتر برای طراحی رابط‌های کاربری پویا، روان و بهینه است. با یادگیری و استفاده از ویجت‌هایی مانند SliverAppBar، SliverList و SliverGrid می‌توانید اپلیکیشن‌هایی با تجربه کاربری مدرن و عملکرد بالا توسعه دهید. اگر قصد دارید مهارت‌های خود را در آموزش فلاتر به سطح حرفه‌ای برسانید، تسلط بر Sliverها یکی از مهم‌ترین مباحثی است که نباید از آن غافل شوید. همچنین پیشنهاد می‌کنیم برای یادگیری عمیق‌تر، سایر مقالات و دوره‌های آموزش فلاتر در آکادمی آموزنگار را نیز دنبال کنید.

سوالات متداول

Sliver در فلاتر چیست؟

Sliver مجموعه‌ای از ویجت‌های پیشرفته در فلاتر است که برای ساخت رابط‌های کاربری اسکرول‌شونده و پویا استفاده می‌شود. این ویجت‌ها درون CustomScrollView قرار می‌گیرند و امکان طراحی AppBar متحرک، لیست‌ها، گریدها و هدرهای سفارشی را فراهم می‌کنند.

تفاوت Sliver با ListView چیست؟

ListView برای نمایش لیست‌های ساده مناسب است، اما Sliver انعطاف‌پذیری بسیار بیشتری دارد. با استفاده از Sliver می‌توان چندین نوع ویجت مانند SliverAppBar، SliverList و SliverGrid را در یک اسکرول واحد ترکیب کرد و رابط‌های کاربری حرفه‌ای ایجاد نمود.

SliverAppBar چه کاربردی دارد؟

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

SliverList چه تفاوتی با ListView.builder دارد؟

هر دو ویجت آیتم‌ها را به‌صورت Lazy Loading ایجاد می‌کنند، اما SliverList فقط در CustomScrollView قابل استفاده است و می‌تواند در کنار سایر Sliverها قرار گیرد، در حالی که ListView.builder یک ویجت مستقل برای نمایش لیست است.

SliverGrid چیست؟

SliverGrid ویجتی برای نمایش آیتم‌ها به‌صورت شبکه‌ای (Grid) در CustomScrollView است. این ویجت گزینه‌ای مناسب برای پیاده‌سازی گالری تصاویر، فروشگاه‌های اینترنتی، نمایش محصولات و صفحات دسته‌بندی محسوب می‌شود.

آیا استفاده از Sliver باعث افزایش عملکرد برنامه می‌شود؟

بله. ویجت‌های Sliver تنها آیتم‌هایی را که در محدوده قابل مشاهده صفحه قرار دارند رندر می‌کنند. این ویژگی باعث کاهش مصرف حافظه و افزایش عملکرد برنامه، به‌ویژه در صفحات دارای تعداد زیادی آیتم، می‌شود.

آیا می‌توان Sliver را با سایر ویجت‌های فلاتر ترکیب کرد؟

بله. در CustomScrollView می‌توانید از ویجت‌هایی مانند SliverAppBar، SliverList، SliverGrid، SliverPersistentHeader و SliverToBoxAdapter در کنار یکدیگر استفاده کنید و صفحات پیچیده و کاملاً سفارشی بسازید.

چه زمانی باید از Sliver استفاده کنیم؟

اگر صفحه شما شامل هدرهای متحرک، لیست و گرید در یک اسکرول، Sticky Header، انیمیشن هنگام اسکرول یا رابط کاربری مشابه Google Play و Gmail است، استفاده از Sliver بهترین انتخاب خواهد بود. برای صفحات ساده، ویجت‌هایی مانند ListView و GridView معمولاً کافی هستند.

آیا Sliver فقط در Flutter قابل استفاده است؟

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

یادگیری Sliver برای چه کسانی ضروری است؟

یادگیری Sliver برای توسعه‌دهندگان Flutter که قصد طراحی رابط‌های کاربری حرفه‌ای، بهینه و مدرن دارند، به‌شدت توصیه می‌شود. این قابلیت به‌ویژه در پروژه‌های بزرگ، فروشگاه‌های اینترنتی، شبکه‌های اجتماعی و اپلیکیشن‌های محتوایی کاربرد فراوانی دارد.