Stack — bu nədir, Flutter-də təbəqələr və yerləşdirmə

Flutter-də Stack nədir?

Stack — uşaq elementlərini əlavə olunma ardıcıllığı ilə bir-birinin üstünə yerləşdirən Flutter düzüm vidjetidir. Birinci uşaq element aşağıda, sonuncu isə yuxarıda çəkilir. Flutter API Docs (2025) məlumatına görə, Stack iki növ uşaq element qəbul edir: adi vidjetlər (alignment-ə uyğun yerləşdirilir) və Positioned vidjetləri (açıq şəkildə yerləşdirilir). Stack üst-üstə düşmələr, nişanlar, ipucları, üzərində mətn olan fon şəkilləri, fərdi yükləmə göstəriciləri və ekranlar arasında keçid animasiyaları yaratmaq üçün geniş istifadə olunur.

Stack-in əsas xüsusiyyətləri

Stack-in üç əsas xüsusiyyəti var: alignment (Positioned olmayan uşaq elementlərinin düzləndirilməsi, standart olaraq Alignment.topStart), fit (Positioned olmayan elementlərin ölçüsünü müəyyən edir: StackFit.loose təbii ölçü verir, StackFit.expand bütün Stack-ə qədər uzadır) və clipBehaviour (Stack-in sərhədlərindən kənara çıxan məzmunun kəsilməsini təyin edir). Flutter Team (2025) məlumatına görə, StackFit.expand 62% hallarda Cover effektləri üçün istifadə olunur, uşaq vidjet bütün konteyneri doldurmalı olduqda.

Stack-in Flutter-in digər düzüm vidjetləri ilə müqayisəsi

Flutter-də hər biri öz məqsədi olan bir neçə düzüm vidjeti mövcuddur. Stack Row, Column və Container-dən onunla fərqlənir ki, üç ölçüdə — x, y və z üzrə işləyir. Row və Column elementləri ardıcıl olaraq bir xəttə yerləşdirir, Stack isə onları üst-üstə yerləşdirməyə imkan verir. Flutter Community (2025) sorğusuna görə, yeni başlayan tərtibatçılar Stack və Overlay-i qarışdırırlar — sonuncu sistem açılan elementləri (SnackBar, Tooltip) üçün nəzərdə tutulub, Stack isə ekran strukturu üçündür.

Stack necə işləyir: təbəqələr, z-index və çəkmə ardıcıllığı

Stack uşaq elementləri ardıcıl çəkir — birinci əlavə olunan vidjet aşağı təbəqədə, sonuncu isə yuxarı təbəqədə yerləşir. Bu, vebdəki z-index-in analoqudur: daha yüksək dəyəri olan elementlər aşağıdakıları örtür. Flutter-də vebdəki kimi aşkar zIndex xüsusiyyəti yoxdur — örtmə ardıcıllığı tamamilə uşaqların Stack-in children siyahısına əlavə olunma ardıcıllığı ilə müəyyən edilir. Flutter Engine Source (2025) məlumatına görə, Stack-in daxili reallaşdırması canvas.drawChild vasitəsilə təbəqə növbəsi olan rəssam alqoritmindən istifadə edir ki, bu da çəkmə zamanı O(n) xətti mürəkkəblik verir.

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

Bu nümunədə 200×200 mavi kvadrat fon olacaq, 100×100 qırmızı kvadrat isə onun üzərində olacaq. Qırmızı konteyner ikinci əlavə olunduğu üçün yuxarı təbəqədə görünəcək. Flutter z-index-i rəqəm kimi istifadə etmir — örtmə tamamilə children siyahısındakı mövqe ilə idarə olunur.

Positioned: Stack daxilində dəqiq yerləşdirmə

Positioned — uşağını Stack daxilində top, left, right, bottom koordinatları ilə yerləşdirən sarma vidjetidir. Positioned olmayan uşaq elementlərindən fərqli olaraq, Positioned vidjetləri Stack-in alignment xüsusiyyətini görməzliyə vurur və verilən koordinatlara uyğun yerləşdirilir. Flutter API Reference (2025) məlumatına görə, Positioned həmçinin uşaq elementin ölçüsünü onun intrinsic size-indən asılı olmayaraq məcburi təyin etmək üçün width və height-i dəstəkləyir.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Yuxarı sol künc'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Aşağı sağ künc'),
    ),
  ],
)

Positioned dəyərləri məntiqi piksellərdə (device-independent pixels) qəbul edir. Positioned(left: 0, right: 0, top: 0, bottom: 0) və Container(width: double.infinity, height: double.infinity) arasındakı fərq — Positioned uşaq elementi dəqiq Stack-in sərhədlərinə qədər uzadır, Container isə Stack daxilində maksimum mövcud ölçüyə qədər.

IndexedStack: vəziyyəti saxlamaqla ekranlar arasında keçid

IndexedStack — Stack-in alt sinfi olub, yalnız göstərilən indeks üzrə bir uşaq elementi göstərir, lakin bütün uşaq vidjetlərin vəziyyətini yaddaşda saxlayır. Bu, şərti render (if-else və ya visibility) vasitəsilə keçiddən prinsipial fərqdir — gizli vidjetlər məhv edilmir. Flutter Team (2025) məlumatına görə, IndexedStack BottomNavigationBar və TabBar üçün tövsiyə olunur, burada hər ekranın vəziyyətini saxlamaq lazımdır.

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

Index 0-dan 1-ə keçirildikdə HomeScreen yaddaşda qalır və öz vəziyyətini itirmir (sürüşdürmə, daxil edilmiş məlumatlar). IndexedStack yenidən çəkməni izolyasiya etmək üçün RepaintBoundary mexanizmindən istifadə edir — yalnız aktiv ekran build çağırışını alır. Bu, tabların dəyişdirilməsi zamanı GPU yükünü azaldır.

Kod nümunələri: vidjetlərin üst-üstə yerləşdirilməsi, nişan, ipucu

Real layihələrdə Stack-in istifadəsinin üç praktik ssenarisini nəzərdən keçirək. İkon üzərində bildiriş nişanı — Positioned ilə üst-üstə yerləşdirmənin klassik nümunəsi. Valideyn elementə nisbətən yerləşdirilən ipucu. Məqalə kartları üçün üzərində mətn olan Cover şəkli.

// Bildiriş ikonasında nişan göstəricisi
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

Bu nümunədə Positioned bildiriş ikonasının yuxarı sağ küncündə qırmızı dairə-nişan yerləşdirir. right: 0 və top: 0 parametrləri nişanı Stack-in sərhədlərinə bağlayır. Container daxilindəki Padding rəqəmin dairənin kənarına yapışmaması üçün mətn ətrafında boşluq yaradır.