اسکرول های پیشرفته در فلاتر | custom scroll view

یک بار برای همیشه کار با کاستوم اسکرول ویو تو فلاتر رو یاد بگیر !

تو این آموزش قراره به طور کامل با ساختار CustomScrollView و ویجت های sliver آشنا بشیم .

راستی قبلش بگم ممنون میشم پیج ایسنتاگرامم رو فالو کنید چون آموزش های خفنی از فلاتر میذارم اونجا
https://www.instagram.com/mr.aslamiii

---------------------

خب ما معمولا برای نمایش دادن هر چیزی توی اپلیکیشن مون از ویجت ها استفاده میکنیم ... میشه گفت تو فلاتر همه چیز ویجت هستن !

کلاس Render Object هسته ی کتابخونه ی رندر هست و کارش مدیریت درخت لیوت ها هست و طرح بندی ها و نقاشی ها و ... رو مشخص میکنه. در واقع اون لایه ی زیری ویجت ها هست که ما نمیبینیم !

در واقع خود Render Object سیستم چیدمان و مدل های فرزند رو معرفی نمیکنه ، بلکه این کار بر عهده کلاس های وابسته به Render Object هستن مثل (RenderBox، RenderSliver، RenderAbstractViewport و RenderView) . یعنی Render Object مدیریت میکنه که یک آبجکت الان باید از کدوم پروتکل طرح بندی استفاده کنه !؟ Render Box یا Render Sliver یا .......

تا اینجا که همه چی مشخصه دیگه ؟

اکثر Render Object ها RenderBox هستن .

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

نمونه های رایج RenderBox مثل Container، SizedBox و غیره. اونها از پرتکل RenderBox استفاده میکنن تا مدل طرح بندی رو بر اساس فضای دکوراتی و محدودیت های داده شده مثل عرض و ارتفاع توصیف و نقاشی کنن.

حالا Slivers ها دقیقا چی هستن ؟

گفتم که Render Box برای آبجکت هایی که عرض و ارتفاعشون از قبل مشخص میشه و محدودیت دارن عالی هستن ! اما برای ویجت های اسکرولی خوب نیستن ! برای اسکرول ویجت ها ، پروتکل Sliver وجود داره .

همه ی آبجکت ها و ویجت هایی که افکت های اسکرولی رو باید در View Port نمایش بدن از Render Sliver بعنوان کلاس پایه شون استفاده میکنن.

در مورد رفتار این پروتکل ، sliver به چیدمان لیست نگاه میکنه و میبینه که الان کدوم فرزندش در محدوده ی ViewPort قرار داره و داره نمایش داده میشه ، عرض و ارتفاعش رو میگیره ، جایگاهش در لیست رو میگیره و در ویو پورت قرار میده

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

زیر اپ بار ، Sliver برای نمایش دادن همه ی ویو های قابل پیمایش و اسکرولی مثل ListView وGridView قابل استفاده هست. با این ویژگی که کنترل دقیق تری روی اجرای منطقه ی قابل اسکرول داره .

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

چجوری با Sliver میتونم کار کنم؟

برای استفاده از ویجت های Sliver ، ما به ویجت CustomScrollView بعنوان ویجت روت نیازمندیم.

ویجت های Sliver بصورت مستقیم داخل CustomScrollView قرار میگیرن.

اپ بار ، با قابلیت اسکرول

با اپ بار که اشنا هستید . معمولا بعنوان اولین ویجت قرار میگیره . حالا اینجا هم از اپ بار با ویجت SliverAppbar استفاده میکنیم که یه سری ویژگی های خاص تر رو بهمون میده مثل پین شدن اپ بار افکت محو شدن و...

یک پارامتر در اسلیور اپ بار وجود داره به اسم Flexible Space . اگر این پارامتر رو تعریف کنید یک فضایی به پایین اپ بار اضافه میشه و میتونید عکس یا هر ویجتی رو اضافه کنید . ارتفاع این بخش رو میشه از روی ExpededHeight مشخص کرد.

اینم خروجی این کد !

قابلیت های Pinned, Floating و Snap app bar

سه تا فیچر باحال داره اسلیور اپ بار که باهم بررسی شون میکنیم.

اولیش Pinned :

این فیچر رو اگه فعال کنید اپ بارتون بالای صفحه همیشه پین میمونه ، و اگه فالس بذارید مقدارش رو ، موقع پیمایش صفحه تو اسکرول ، اپ بار مخفی میشه .

فیچر floating :

فکر کن وسط صفحه هستی ، به محض اینکه اسکرول رو به سمت عقب میکشی اپ بار نمایش داده میشه ... این مورد با true کردن floating توی اپتون اتفاق میفته ..اما اگر روی فالس بذاری باید اسکرول رو تا اخر بری بالا و برسی به بالای صفحه و بعد اپ بار نمایش داده میشه .

فیچر snap :

با فعال کردن این مورد ، به محض اینکه اسکرول رو به سمت عقب بکشید اپ بارتون مثل اهن ربا باز میشه . یادتون باشه این مورد فقط وقتی کار میده که floating هم فعال باشه

SliverAppBar(
  expandedHeight: 165.0, 
 centerTitle: true, 
 // ----- 
 pinned: true,
  floating: true,
  snap: true,
 // ----- 
 title: Text(    
context.findAncestorWidgetOfExactType<MaterialApp>()!.title,
  ),
  flexibleSpace: FlexibleSpaceBar( ... ),
),

همه چیز راجب sliverList

ویجت sliverList مثل همون listView ساده هست ! یعنی کارش اینه یه سری آیتم رو به صورت اسکرولی و زیر هم نمایش بده .

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

بالاتر گفتم توی sliverList این ایتم های داخل لیست با استفاده از یه نماینده به نمایش در میان !

حالا این نماینده ها انواع مختلف داره که بهتون میگم!

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

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

اینم نمونه کدش :

CustomScrollView(
  slivers: [
    // First sliver inside CustomScrollView - SliverAppBar
    SliverAppBar( ... ),
    
    // Second sliver - SliverList
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          final boxColor = Colors.orange[(index + 1) * 100];
          return Container(
            height: 60,
            width: double.infinity,
            color: boxColor,
            alignment: Alignment.center,
            child: Text('This is element no. ${index + 1}'),
          );
        },
        childCount: 9,
      ),
    ),
  ],
);

ویجت SliverGrid

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

توی gridDelegate ازتون میخواد که تعداد آیتم داخل هر ستون ، و نسبت نمایش یا سایز هر آیتم رو مشخص کنید . به صورت پیش فرض نسبت نمایش ویجت ها در sliverGrid یک به یک یا مربعی هست.

CustomScrollView(
  slivers: [
    // First sliver inside CustomScrollView - SliverAppBar
    SliverAppBar( ... ),
    
    // Second sliver - SliverList
    SliverList( ... ),
    
    // Third sliver - SliverGrid
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 2.6,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          final boxColor = index < 7
              ? Colors.cyan[(index + 1) * 100]
              : Colors.teal[(index - 6) * 100];
          return Container(
            color: boxColor,
            alignment: Alignment.center,
            child: Text('This is element no. ${index + 1}'),
          );
        },
        childCount: 14,
      ),
    ),
  ],
)

اسلیور ویجت های خیلی خفن و مفید دیگه ای هم داره که توی قسمت دوم مقاله تقدیمتون میکنم

ممنون میشم اگر براتون مفید بود حمایت کنید