جستجو برای:
سبد خرید 0
  • خانه
  • دوره های آموزشی
    • دوره های حضوری و آنلاین
      • دوره جامع برنامه نویسی اندروید
      • دوره جامع برنامه نویسی فلاتر
      • دوره برنامه نویسی React Native
      • دوره آموزشی برنامه نویسی iOS
    • دوره های متخصص و حرفه ای
      • دوره متخصص اندروید (پروژه محور)
      • دوره متخصص فلاتر (پروژه محور)
      • دوره آموزش امنیت در اندروید
      • دوره درآمدزایی دلاری از گوگل پلی در ایران
  • آموزش رایگان
    • دوره رایگان اندروید
    • دوره رایگان فلاتر
  • مشاورهجدید
  • دوره VIP
  • وبلاگ
ورود
گذرواژه خود را فراموش کرده اید؟
عضویت

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

ارسال مجدد کد یکبار مصرف (00:60)
  • 02188945907
  • info@amooznegar.com
  • لیست علاقه مندی ها
آکادمی آموزنگار
  • خانه
  • دوره های آموزشی
    • دوره های حضوری و آنلاین
      • دوره جامع برنامه نویسی اندروید
      • دوره جامع برنامه نویسی فلاتر
      • دوره برنامه نویسی React Native
      • دوره آموزشی برنامه نویسی iOS
    • دوره های متخصص و حرفه ای
      • دوره متخصص اندروید (پروژه محور)
      • دوره متخصص فلاتر (پروژه محور)
      • دوره آموزش امنیت در اندروید
      • دوره درآمدزایی دلاری از گوگل پلی در ایران
  • آموزش رایگان
    • دوره رایگان اندروید
    • دوره رایگان فلاتر
  • مشاورهجدید
  • دوره VIP
  • وبلاگ
شروع کنید
آخرین اطلاعیه ها
لطفا برای نمایش اطلاعیه ها وارد شوید
0

وبلاگ

آکادمی آموزنگار > اخبار > برنامه نویسی > فلاتر > آشنایی با قابلیت Sliver در برنامه نویسی فلاتر

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

1404-01-19
ارسال شده توسط آموزنگار
فلاتر
Sliver در برنامه نویسی فلاتر

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

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

کلمه‌ی Sliver در لغت به معنای “تکه‌ای نازک” است و در فلاتر به عناصری از UI اشاره دارد که درون یک فضای اسکرول‌شونده (مانند CustomScrollView) قرار می‌گیرند. این قابلیت به توسعه‌دهندگان اجازه می‌دهد تا کنترل دقیق‌تری بر روی نحوه نمایش و تغییر اندازه ویجت‌ها در حین اسکرول کردن داشته باشند. برخلاف ویجت‌های سنتی که درون ListView یا Column قرار می‌گیرند، Sliverها بهینه‌تر و انعطاف‌پذیرتر هستند.

slider در فلاتر

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

در رابط کاربری استاندارد فلاتر، از ویجت‌هایی مانند ListView، GridView یا AppBar برای نمایش داده‌ها و بخش‌های مختلف استفاده می‌شود. این ساختار ساده و قابل درک است، اما محدودیت‌هایی دارد، به‌ویژه زمانی که بخواهیم یک اپلیکیشن پیچیده و با رابط کاربری پویا بسازیم.

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

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

SliverList فلاتر

یکی از پرکاربردترین Sliverها، ویجت SliverList است که لیستی از ویجت‌ها را درون یک CustomScrollView نمایش می‌دهد. در ادامه مثالی از پیاده‌سازی آن آورده‌ایم:

1
2
3
4
5
6
7
8
9
10
11
12
CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(
          title: Text('آیتم شماره $index'),
        ),
        childCount: 20,
      ),
    ),
  ],
)

در این مثال، لیستی از 20 آیتم تولید شده که به شکل اسکرول‌شونده در صفحه نمایش داده می‌شود. استفاده از SliverList برای ساخت لیست‌هایی با عملکرد بالا و انیمیشن‌های پیشرفته توصیه می‌شود.

CustomScrollView فلاتر

کاربرد SliverGrid

برای نمایش آیتم‌ها به صورت شبکه‌ای (grid)، از SliverGrid استفاده می‌کنیم. این ویجت مشابه GridView است ولی انعطاف‌پذیری بیشتری ارائه می‌دهد. مثال زیر یک SliverGrid ساده را نشان می‌دهد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(
      color: Colors.teal,
      child: Center(child: Text('Grid $index')),
    ),
    childCount: 8,
  ),
)

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

دریافت اطلاعات باتری تلفن همراه در فلاتر
خواندن این مقاله
قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

پیاده‌سازی SliverAppBar

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

1
2
3
4
5
6
7
8
9
10
11
12
SliverAppBar(
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('SliverAppBar'),
    background: Image.network(
      'https://picsum.photos/400/200',
      fit: BoxFit.cover,
    ),
  ),
)

استفاده از SliverAppBar در کنار دیگر Sliverها ظاهری حرفه‌ای و چشم‌نواز به اپلیکیشن می‌دهد. این بخش مخصوصاً در آموزش فلاتر برای طراحی UIهای پیشرفته بسیار پرکاربرد است.

روش‌های بهینه برای استفاده از Sliverها

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

  1. استفاده از SliverChildBuilderDelegate برای ساخت ویجت‌ها به صورت Lazy Loading.
  2. ترکیب هوشمندانه Sliverها در CustomScrollView برای طراحی رابط‌های پیچیده.
  3. تست عملکرد در دستگاه‌های مختلف به منظور اطمینان از روان بودن اسکرول و رندر.

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

نتیجه‌گیری

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

قبلی برنامه‌نویسی HarmonyOS (هارمونی او اس)
بعدی Outlook چیست؟ بررسی جامع ویژگی‌ها، کاربردها و آموزش کامل اوت‌ لوک

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • GoLang
  • jetpack compose
  • PHP
  • اپلیکیشن
  • امنیت
  • اندروید
  • اوپن سورس
  • برنامه نویسی
  • برنامه نویسی iOS
  • برنامه نویسی react native
  • پادکست صوتی
  • تکنولوژی
  • جاوا
  • طراح رابط کاربری
  • طراحی رابط کاربری
  • طراحی وب
  • عمومی
  • فریلنسر
  • فلاتر
  • فناوری
  • کاتلین
  • کتاب های آموزشی
  • کسب و کار
  • هوش مصنوعی
  • وردپرس
برچسب‌ها
admob coroutine dagger dagger-hilt jetpack nft rxandroid rxjava spring swift ارز دیجیتال امنیت در اندروید دارت فایربیس فوشیا مصاحبه کاری معماری mvi نقشه راه برنامه نویسی کاتلین گوگل

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

دسترسی سریع
  • درباره ما
  • تماس با ما
  • حریم خصوصی
  • سوالات متداول
نمادها
شبکه های اجتماعی
Facebook Twitter Youtube icon--white Whatsapp

تهران، میدان ولی عصر،خیابان شهیدان سازش،کوچه سوم پلاک 5 طبقه سوم واحد 31

021-88945907

تمامی حقوق برای آکادمی آموزنگار محفوظ می باشد

اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://amooznegar.com/?p=14024
  • Afghanistan (+93)
  • Albania (+355)
  • Algeria (+213)
  • American Samoa (+1)
  • Andorra (+376)
  • Angola (+244)
  • Anguilla (+1)
  • Antigua (+1)
  • Argentina (+54)
  • Armenia (+374)
  • Aruba (+297)
  • Australia (+61)
  • Austria (+43)
  • Azerbaijan (+994)
  • Bahrain (+973)
  • Bangladesh (+880)
  • Barbados (+1)
  • Belarus (+375)
  • Belgium (+32)
  • Belize (+501)
  • Benin (+229)
  • Bermuda (+1)
  • Bhutan (+975)
  • Bolivia (+591)
  • Bonaire, Sint Eustatius and Saba (+599)
  • Bosnia and Herzegovina (+387)
  • Botswana (+267)
  • Brazil (+55)
  • British Indian Ocean Territory (+246)
  • British Virgin Islands (+1)
  • Brunei (+673)
  • Bulgaria (+359)
  • Burkina Faso (+226)
  • Burundi (+257)
  • Cambodia (+855)
  • Cameroon (+237)
  • Canada (+1)
  • Cape Verde (+238)
  • Cayman Islands (+1)
  • Central African Republic (+236)
  • Chad (+235)
  • Chile (+56)
  • China (+86)
  • Colombia (+57)
  • Comoros (+269)
  • Cook Islands (+682)
  • Côte d'Ivoire (+225)
  • Costa Rica (+506)
  • Croatia (+385)
  • Cuba (+53)
  • Curaçao (+599)
  • Cyprus (+357)
  • Czech Republic (+420)
  • Democratic Republic of the Congo (+243)
  • Denmark (+45)
  • Djibouti (+253)
  • Dominica (+1)
  • Dominican Republic (+1)
  • Ecuador (+593)
  • Egypt (+20)
  • El Salvador (+503)
  • Equatorial Guinea (+240)
  • Eritrea (+291)
  • Estonia (+372)
  • Ethiopia (+251)
  • Falkland Islands (+500)
  • Faroe Islands (+298)
  • Federated States of Micronesia (+691)
  • Fiji (+679)
  • Finland (+358)
  • France (+33)
  • French Guiana (+594)
  • French Polynesia (+689)
  • Gabon (+241)
  • Georgia (+995)
  • Germany (+49)
  • Ghana (+233)
  • Gibraltar (+350)
  • Greece (+30)
  • Greenland (+299)
  • Grenada (+1)
  • Guadeloupe (+590)
  • Guam (+1)
  • Guatemala (+502)
  • Guernsey (+44)
  • Guinea (+224)
  • Guinea-Bissau (+245)
  • Guyana (+592)
  • Haiti (+509)
  • Honduras (+504)
  • Hong Kong (+852)
  • Hungary (+36)
  • Iceland (+354)
  • India (+91)
  • Indonesia (+62)
  • Iran (+98)
  • Iraq (+964)
  • Ireland (+353)
  • Isle Of Man (+44)
  • Israel (+972)
  • Italy (+39)
  • Jamaica (+1)
  • Japan (+81)
  • Jersey (+44)
  • Jordan (+962)
  • Kazakhstan (+7)
  • Kenya (+254)
  • Kiribati (+686)
  • Kuwait (+965)
  • Kyrgyzstan (+996)
  • Laos (+856)
  • Latvia (+371)
  • Lebanon (+961)
  • Lesotho (+266)
  • Liberia (+231)
  • Libya (+218)
  • Liechtenstein (+423)
  • Lithuania (+370)
  • Luxembourg (+352)
  • Macau (+853)
  • Macedonia (+389)
  • Madagascar (+261)
  • Malawi (+265)
  • Malaysia (+60)
  • Maldives (+960)
  • Mali (+223)
  • Malta (+356)
  • Marshall Islands (+692)
  • Martinique (+596)
  • Mauritania (+222)
  • Mauritius (+230)
  • Mayotte (+262)
  • Mexico (+52)
  • Moldova (+373)
  • Monaco (+377)
  • Mongolia (+976)
  • Montenegro (+382)
  • Montserrat (+1)
  • Morocco (+212)
  • Mozambique (+258)
  • Myanmar (+95)
  • Namibia (+264)
  • Nauru (+674)
  • Nepal (+977)
  • Netherlands (+31)
  • New Caledonia (+687)
  • New Zealand (+64)
  • Nicaragua (+505)
  • Niger (+227)
  • Nigeria (+234)
  • Niue (+683)
  • Norfolk Island (+672)
  • North Korea (+850)
  • Northern Mariana Islands (+1)
  • Norway (+47)
  • Oman (+968)
  • Pakistan (+92)
  • Palau (+680)
  • Palestine (+970)
  • Panama (+507)
  • Papua New Guinea (+675)
  • Paraguay (+595)
  • Peru (+51)
  • Philippines (+63)
  • Poland (+48)
  • Portugal (+351)
  • Puerto Rico (+1)
  • Qatar (+974)
  • Republic of the Congo (+242)
  • Romania (+40)
  • Reunion (+262)
  • Russia (+7)
  • Rwanda (+250)
  • Saint Helena (+290)
  • Saint Kitts and Nevis (+1)
  • Saint Pierre and Miquelon (+508)
  • Saint Vincent and the Grenadines (+1)
  • Samoa (+685)
  • San Marino (+378)
  • Sao Tome and Principe (+239)
  • Saudi Arabia (+966)
  • Senegal (+221)
  • Serbia (+381)
  • Seychelles (+248)
  • Sierra Leone (+232)
  • Singapore (+65)
  • Sint Maarten (+1)
  • Slovakia (+421)
  • Slovenia (+386)
  • Solomon Islands (+677)
  • Somalia (+252)
  • South Africa (+27)
  • South Korea (+82)
  • South Sudan (+211)
  • Spain (+34)
  • Sri Lanka (+94)
  • St. Lucia (+1)
  • Sudan (+249)
  • Suriname (+597)
  • Swaziland (+268)
  • Sweden (+46)
  • Switzerland (+41)
  • Syria (+963)
  • Taiwan (+886)
  • Tajikistan (+992)
  • Tanzania (+255)
  • Thailand (+66)
  • The Bahamas (+1)
  • The Gambia (+220)
  • Timor-Leste (+670)
  • Togo (+228)
  • Tokelau (+690)
  • Tonga (+676)
  • Trinidad and Tobago (+1)
  • Tunisia (+216)
  • Turkey (+90)
  • Turkmenistan (+993)
  • Turks and Caicos Islands (+1)
  • Tuvalu (+688)
  • U.S. Virgin Islands (+1)
  • Uganda (+256)
  • Ukraine (+380)
  • United Arab Emirates (+971)
  • United Kingdom (+44)
  • United States (+1)
  • Uruguay (+598)
  • Uzbekistan (+998)
  • Vanuatu (+678)
  • Venezuela (+58)
  • Vietnam (+84)
  • Wallis and Futuna (+681)
  • Western Sahara (+212)
  • Yemen (+967)
  • Zambia (+260)
  • Zimbabwe (+263)
مرورگر شما از HTML5 پشتیبانی نمی کند.

سوالی دارید؟ از ما بپرسید، کارشناسان ما در اسرع وقت با شما تماس می گیرند.

آموزنگار

آکادمی آموزنگار

  • 021-88945907
  • شنبه تا چهارشنبه از ساعت 8 تا 17
  • info@amooznegar.com
ورود
استفاده از شماره تلفن
استفاده از آدرس ایمیل
آیا هنوز عضو نشده اید؟ ثبت نام کنید
بازیابی رمز عبور
استفاده از شماره تلفن
استفاده از آدرس ایمیل
ثبت نام
استفاده از شماره تلفن
استفاده از ایمیل
قبلا عضو شده اید؟ ورود به سیستم
محافظت توسط